模塊一電商視覺設計認知《電商視覺設計》思維導圖網站商城整體設計1目錄CONTENTS3電商網站的視覺規劃電商視覺營銷的規劃2項目二

電商網站的視覺規劃項目背景

在全渠道數字化運營項目中，電商網站的建立和運營是其中一個重要的環節，為各項運營活動提供平臺和載體。隨著互聯網的快速發展，電商網站也在日新月異中快速發展，同時消費者對電商網站也有了更高的要求，這種要求不僅體現在網站的功能方面，還體現在電商網站的視覺設計方面。

一個網站的視覺規劃有利于網站的運營，一方面消費者能夠清晰地看到電商網站的布局，可以迅速找到自己目標所在的位置，另一方面網站的色彩搭配也能夠吸引到消費者。進行電商網站視覺規劃，需要在有效地產品需求分析基礎上，清楚地了解產品需求，然后根據具體的產品需求進行產品概念設計，再在產品原型制作的指導下科學、有序地展開產品研發工作。研究內容產品需求分析產品概念設計產品原型制作學習目標1.了解產品需求分析的概念、內容；2.熟悉產品概念設計的內容；3.熟悉產品原型制作的理論知識。知識目標1.能夠獨立進行產品需求分析，并撰寫需求報告；2.能夠根據產品需求分析，獨立進行產品概念設計；3.能夠進行簡單的產品原型制作。技能目標1.了解社會主義核心價值觀，誠實守信，遵守職業道德；2.具備積極主動的工作態度、較強的視覺審美與設計能力；3.具備較強的溝通能力和良好的解決問題能力。素養目標任務一產品需求分析預備知識一、認識產品需求分析

產品需求分析是進行產品設計的前提,是開發人員經過深入細致的調研和分析，準確理解用戶和項目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定系統功能的過程。預備知識二、產品分析的內容010203用戶畫像分析競品分析用戶場景分析預備知識二、產品分析的內容1.用戶畫像分析

用戶畫像是指根據用戶的屬性、用戶偏好、生活習慣、用戶行為等信息而抽象出來的標簽化用戶模型，是對現實世界中用戶的建模，在電商領域應用廣泛。預備知識二、產品分析的內容1.用戶畫像分析

用戶畫像分析的中心是繪制用戶畫像，是指在對用戶進行研究的基礎上，將他們區分為不同的類型，找出行為變量，抽象出對應的標簽，綜合各種典型特征形成人物模型類型，對人物模型賦予名字、人口統計學要素、場景等描述，形成了一個人物原型(personas)。預備知識二、產品分析的內容1.用戶畫像分析

通俗地說，繪制用戶畫像就是給用戶打標簽，而標簽是通過對用戶信息分析得來的高度精煉的特征標識。標簽類別標簽內容基礎屬性年齡、性別、身高、地域、星座、教育程度、職業、專業等社會特征婚姻狀況、家庭情況、父母、配偶、社交等消費特征收入狀況、消費水平、信用卡、房貸、購買渠道偏好、頻次等興趣愛好興趣、瀏覽偏好、收藏內容、互動內容、品牌偏好等行為特征團購、加班、遲到、注冊時間、流程、習慣等心理特征敏感、選擇恐懼癥、猶豫、追求高品質等表2-1標簽分類預備知識二、產品分析的內容2.競品分析

競品分析，是對競爭產品、競爭對手的產品進行分析，得出競品、自身產品各自的優勢、劣勢。競品分析客觀分析主觀分析從競爭對手或市場相關產品中，圈定一些需要考察的角度，得出基于事實的情況，如市場布局狀況、產品數量、銷售情況等主觀分析是一種接近于用戶流程模擬的結論，如用戶流程分析、用戶體驗等預備知識二、產品分析的內容2.競品分析產品定位產品設計產品策略分析競品用戶分析功能分析數據分析了解競品功能完全相同的競品核心功能相似的競品功能本質相同的競品選擇合適的競品不同階段目標不同明確目標競品分析的步驟預備知識二、產品分析的內容2.用戶場景分析

用戶場景，即用戶+場景，用戶（who）攜帶相應的屬性，場景則表示在某個時間（when)、某個地點下(where)，因為某個因素（what）的影響，做什么（do)。這些信息實際上描述了產生需求的環境，從這些環境信息可以分析引起需求的條件和需求產生時的環境條件，知道要幫助用戶解決什么痛點問題。表2-2用戶場景用戶小楊，27歲，女，都市白領，喜歡美食，場景在結束了一周上班之后，周五晚上小楊跟幾個同事相約一起去聚餐。這個時候想到MT應用，找一個離公司3km以內的價格實惠并且環境不錯的餐廳。經過App的推薦，選擇了評分和評價都不錯的一家日料餐廳，購買了優惠券進行線下消費。預備知識二、產品分析的內容2.用戶場景分析在用戶場景分析中，場景可以針對多角色、多任務，描述更有針對性的細節，既要從產品經理的角度去思考產品設計和優化，又要從用戶的角度，審視用戶體驗過程。確定了用戶場景之后，可以通過“故事化”+“圖形化”的方式，從用戶角度出發，記錄用戶在使用產品時的一系列行為、情緒、感受等，以幫助團隊更好地審視產品。預備知識三、需求分析報告1.用戶需求報告

用戶需求報告一般是針對某個市場或用戶群來說的，是通過對調研來的用戶需求進行整理，最終形成一個系統完整的文字說明，從內容上來說側重于用戶的需求和期望，是站在用戶的角度說明產品的功能，體現出產品的重點、熱點。預備知識三、需求分析報告1.用戶需求報告一、引言二、項目概述隨著信息化時代的到來，圖書的信息化管理可以極大地解決圖書管在圖書管理方面的一些難點、痛點問題，這款圖書信息化管理系統應運而生。本系統主要分為兩大模塊：圖書館管理員模塊和讀者登錄模塊……三、需求分析1.系統功能結構（1）管理員端（2）學生用戶端2.功能需求描述3.性能需求（1）時間要求（2）適應性……四、運行環境描述1.支持的軟件2.接口…………六、其他需求1.系統處理的準確性與及時性2.系統的開放性和可擴充性…………

通常情況下，需求報告包括了項目概述、需求分析、其他等幾個模塊。項目概述主要描述項目背景、項目總體需求等方面的內容，能夠幫助設計人員更好地理解相關需求。需求分析主要是對提出來的需求進行逐個說明解釋分析，包括每個需求提出來的原因、要達到的目的等。其他則是用戶需求中其他相關的內容，能夠幫助設計人員理解需求。預備知識三、需求分析報告2.軟件需求規格說明書

軟件需求規格說明書，一般是從開發、測試的角度去講產品功能，側重于業務規則方面，偏向于軟件的需求設計到概要設計，包含原型界面、業務接口等。表2-3軟件需求規格說明書概要概要說明文件命名公司名+產品名，產品經理信息修訂控制頁編號、文檔版本、修訂內容、修訂原因、修訂日期、修訂人等信息項目背景說明需求的背景，需求的數據支持等需求來源說明需求提出人或者需求反饋團隊項目指標及收益評估上線后項目的收益項目方案簡要說明該項目涉及的主要模塊時間節點期望上線時間相關頁面截圖產品自身、競品的相關頁面截圖、原型需求詳述針對具體的模塊、頁面，詳細闡述需求與規格運營方案列出后續運營計劃附錄歷次溝通意見匯總表實施準備無論是新產品的上線還是產品迭代都離不開需求分析。需求分析決定著產品的研發和迭代方向，一旦出現偏差就會和用戶的真實需求背道而馳，因此掌握正確的需求分析方法也就特別重要。任務實施與分析

需求分析的工作流程，根據項目的復雜程度有所區別，但是總的來說，分成以下四個環節：獲取需求、分析需求、整合需求、形成報告。獲取需求分析需求整合需求形成報告任務實施與分析

步驟1.1：確定獲取需求的渠道步驟1：獲取需求內部渠道包括產品、領導、同事、自己外部渠道包括行業、用戶、競品、合作伙伴任務實施與分析

步驟1.2：確定獲取需求的方法步驟1：獲取需求產品團隊獲取需求的方法有很多種，在實踐中可根據獲取渠道的不同和對象的不同，選擇合適的方法。常用的獲取需求的方法有：用戶研究、問卷調查、訪談法、實地調研、競品分析和研究資料等。任務實施與分析

步驟1.3：獲取需求并記錄需求步驟1：獲取需求依據獲取需求的渠道與方法獲得需求后，需要對數據進行初步記錄，以便于后面對需求進行分析、管理與實現。通常記錄需求包括以下要素：需求類型、需求來源、需求內容、需求場景。表2-4需求記錄表需求編號

需求類型

需求來源

需求內容

需求場景

記錄時間

記錄人員任務實施與分析

步驟1.3：獲取需求并記錄需求步驟1：獲取需求需求類型按產品屬性劃分可分為idea、新增、優化、Bugfix這四種類型；按產品職能劃分可分為功能類需求、運營類需求、數據類需求、設計類需求；按需求性質劃分可分為：顯性的、隱性的。需求的來源多種多樣，每一個提出需求的主體都有自己特定的立場和觀點，明確提出需求的主體有利于更好地理解需求。需求內容，就是需求是什么。記錄時盡量用“主語+謂語+賓語”語法結構，不要加入主觀修飾語句，避免對后面的需求分析做出干擾。需求場景，是對需求產生整個過程的描述，涵蓋場景和原因，是利用一些敘事的基本元素對需求產生整個過程的描述。任務實施與分析

分析需求是提煉產品目標的階段，將前期得到的紛繁的用戶需求轉化成產品需求，并對其進行梳理、細化成系統的功能，通過抽象角色及角色所需功能，得到系統的模型，明確系統各元素間的聯系等。步驟2：分析需求任務實施與分析

步驟2.1：需求篩選步驟2：分析需求真實性一致性價值型可行性需求篩選考察的維度任務實施與分析

步驟2.2：需求透視步驟2：分析需求

需求按認知層面的劃分，可分為表面需求和本質需求。需求透視這一步驟，目的就在于從獲取的表面需求中提煉出用戶的本質需求，理解用戶的本質需求，則有利于更好地提出產品需求。表面需求產品需求本質需求任務實施與分析

步驟2.3：需求排序步驟2：分析需求

需求排序，簡單來說就是依據需求的重要性給需求排列優先級。需求排序有三個基本考慮因素，分別是戰略定位、產品定位、用戶需求。戰略定位A產品定位B用戶需求CB任務實施與分析

步驟2.3：需求排序步驟2：分析需求

相關性01邏輯性0203價值04強度05廣度06頻率07類型性任務實施與分析

步驟2.3：需求排序步驟2：分析需求

KONO模型是用戶認為產品必須提供功能來充分滿足的需求基本型需求用戶認為產品應該提供更優秀的功能來更好地滿足的需求期望型需求是用戶自己并沒有意識到的隱性需求興奮型需求任務實施與分析

步驟2.3：需求排序步驟2：分析需求

這三類需求的重要性判斷原則是：基本型需求最重要，期望型需求和興奮型需求在不好判斷時通過需求重要性公式確定。期望型需求和興奮型需求的重要性公式是：重要性=功能使用用戶百分比(用戶使用率)×功能使用次數百分比(功能使用率)×類別重要性百分比任務實施與分析

步驟2.3：需求排序步驟3：整合需求

經過需求分析的環節，梳理出一系列有效需求，這時就要對需求進行拆分，將需求拆分成產品的各個功能點，初步設計出產品的整體架構、產品形態、核心流程、功能組合等，同時與領導、關鍵客戶等產品關鍵決策人進行討論匯報，確保產品（方案）宏觀方向的正確性，獲取資源支持。任務實施與分析步驟4：撰寫需求報告/軟件產品規格說明整合需求，將各個需求點與產品設計相對接，設計出初步的產品概貌后，就可以撰寫產品需求報告/軟件產品規格說明書。需求報告/軟件產品規格說明書是為了指導設計、開發人員更好的理解產品，最終開發出能夠解決用戶痛點問題的產品，因此撰寫產品需求報告尤為重要。任務實施與分析步驟4：撰寫需求報告/軟件產品規格說明撰寫需求報告，需求報告包括了項目概述、需求分析、其他等幾個模塊；軟件產品規格說明書包含以下幾個部分：文檔概述、產品結構、產品說明、業務流程、功能細化說明、非功能說明等。拓展知識一、判斷需求優先級的方法-四象限法則重要性是指需求是否符合公司戰略發展，是否是產品線上的戰略項目、是否和公司的收益掛鉤、是否滿足產品的基礎服務等等，總之，在時間上不具有緊迫性，但是會對未來的發展產生重大的影響。緊急性是指需求是否必須立即解決，如不解決會持續影響產品或將要產生不良影響。這類需求不一定很重要，但在時間上有緊迫性。拓展知識一、判斷需求優先級的方法-四象限法則第一象限的需求，必須盡快分配資源，抓緊時間來實現。第二象限的需求，需花時間、精力去精細化處理好。如不及時處理，就堆積到第一象限。第三象限和第四象限相對來說是不重要的事情，但它們也是需求，可以花費一定的時間統一去處理。注意這類需求要和第一、第二象限的需求嚴格區分開來，不能因為邊緣任務影響主線任務進展。思考與總結學員通過以上操作，完成對產品需求分析，請學員在此基礎上，進行思考并回答以下問題：在分析需求時，可通過哪些方法進行需求分析？能力提升李勝在淘寶網開通了一家玩具店，主營少兒玩具，如拼圖、積木、磁力棒、魔幻陀螺、百變校巴、超級飛俠等，品類十分豐富。現為提升店鋪的瀏覽量與客單價，李勝擬從網店視覺設計的角度對店鋪進行優化。請學生搜集資料，結合玩具市場概況，對店鋪的產品進行市場需求分析，撰寫一份需求分析報告。任務訓練掃碼進入課程網站，獲取對應任務單，閱讀任務目標，根據任務步驟，完成拓展任務并提交。模塊一電商視覺設計認知《電商視覺設計》思維導圖網站商城整體設計1目錄CONTENTS3電商網站的視覺規劃電商視覺營銷的規劃2項目二

電商網站的視覺規劃項目背景

在全渠道數字化運營項目中，電商網站的建立和運營是其中一個重要的環節，為各項運營活動提供平臺和載體。隨著互聯網的快速發展，電商網站也在日新月異中快速發展，同時消費者對電商網站也有了更高的要求，這種要求不僅體現在網站的功能方面，還體現在電商網站的視覺設計方面。

一個網站的視覺規劃有利于網站的運營，一方面消費者能夠清晰地看到電商網站的布局，可以迅速找到自己目標所在的位置，另一方面網站的色彩搭配也能夠吸引到消費者。進行電商網站視覺規劃，需要在有效地產品需求分析基礎上，清楚地了解產品需求，然后根據具體的產品需求進行產品概念設計，再在產品原型制作的指導下科學、有序地展開產品研發工作。研究內容產品需求分析產品概念設計產品原型制作學習目標1.了解產品需求分析的概念、內容；2.熟悉產品概念設計的內容；3.熟悉產品原型制作的理論知識。知識目標1.能夠獨立進行產品需求分析，并撰寫需求報告；2.能夠根據產品需求分析，獨立進行產品概念設計；3.能夠進行簡單的產品原型制作。技能目標1.了解社會主義核心價值觀，誠實守信，遵守職業道德；2.具備積極主動的工作態度、較強的視覺審美與設計能力；3.具備較強的溝通能力和良好的解決問題能力。素養目標任務二產品概念設計預備知識一、認識產品概念設計

產品概念設計是指由分析用戶需求到生成概念產品的一系列有序的、可組織的、有目標的設計活動，產品概念設計的最終目的是開發新產品，而新產品必須滿足用戶需求，這就要求產品概念設計要以用戶需求為重要設計依據。預備知識二、產品概念設計的內容010203信息架構圖功能流程圖頁面流程圖

預備知識二、產品概念設計的內容1.信息架構圖

信息結構圖是對信息進行梳理，幫助產品團隊梳理信息，理解產品需求，確定基本功能設計和內容，同時也可以梳理頁面邏輯關系和層級跳轉。預備知識二、產品概念設計的內容1.信息架構圖

（1）功能結構的梳理在產品的層次結構（不同的層級模塊）中，首先確定產品目標及產品定位，再確定功能需求和功能模塊，接下來對產品信息結構進行分析，即信息架構，隨后進行界面設計和視覺設計。因此，在確定產品架構圖之前，應先對產品的功能結構進行梳理。預備知識二、產品概念設計的內容1.信息架構圖

（1）功能結構的梳理

功能結構圖是以功能模塊為單位繪制的功能從屬關系圖，功能模塊的顆粒度可大可小，分解的最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務的一組功能集合。預備知識二、產品概念設計的內容1.信息架構圖

（1）功能結構的梳理

在確定功能框架并完善了功能結構之后，需要將核心字段與功能模塊進行映射，即可生成信息架構圖。預備知識二、產品概念設計的內容1.信息架構圖010203進行一級節點的分類逐個細化一級節點中的功能對不同路徑的同一功能或頁面進行標識（2）繪制信息架構圖的步驟

繪制信息架構圖可以采用自上而下或自下而上的體系。以自上而下為例，信息架構的步驟為：預備知識二、產品概念設計的內容1.信息架構圖

（2）繪制信息架構圖的步驟

在信息架構圖的展開中，節點的寬度和深度都不宜過多。一級節點增加則寬度增加，信息的整體性不明確界面結構不清晰，深度增加則容易造成功能隱蔽用戶體驗不佳。因此，尋找一個平衡，設計“窄而淺”的信息樹，是信息架構設計的基本原則之一。預備知識二、產品概念設計的內容1.信息架構圖（3）信息架構圖的繪制工具

信息架構圖的繪制工具有很多，如思維導圖工具、圖形繪制工具、原型設計工具等，常見的繪制軟件工具有XMind、Viso、Axure等。預備知識二、產品概念設計的內容2.功能流程圖

功能流程圖是描述業務邏輯的圖表，用來確定產品功能的設計邏輯。以業務流程圖為主線，去細化每個環節的功能邏輯以及不同模塊之間的數據流向。預備知識二、產品概念設計的內容2.功能流程圖天貓退貨業務流程預備知識二、產品概念設計的內容2.功能流程圖手機驗證注冊賬號功能流程預備知識二、產品概念設計的內容2.功能流程圖

繪制功能流程圖的工具有很多，常見的有微軟的Visio、ProcessOn、drawio、GitMind、AxureRP等。ProcessOn、drawio、GitMind，通過網絡即可訪問，無需安裝本地管理文件。除此之外，還有本地版工具如Edraw、迅捷畫圖等。預備知識二、產品概念設計的內容2.功能流程圖

在功能流程圖的繪制中，元件具有嚴格的規范性，如下圖表示了繪制功能流程中常見的元件及含義和用法。預備知識二、產品概念設計的內容3.頁面流程圖

頁面流程圖是描述網站頁面跳轉關系和頁面后續操作的流程圖，需要在業務流程圖之后在原型設計之前進行制作。預備知識二、產品概念設計的內容3.頁面流程圖（1）頁面流程圖的內容頁面名稱ACB核心元素連接線頁面流程圖的內容預備知識二、產品概念設計的內容3.頁面流程圖（2）繪制頁面的流程04優化調整03補充交互細節說明02明確頁面中的核心元素和邏輯關系01明確業務流程預備知識二、產品概念設計的內容3.頁面流程圖（3）注意事項在繪制頁面流程圖時，需要注意以下幾點：直接進行頁面功能流程圖的設計，不需要寫每個功能的作用。不要忽略異常流程的處理，關于異常流程的處理邏輯，在模型中一般表現為彈層或者提示。加強產品的全局意識，做好引導下游頁面的觸發點設計。任務實施與分析

在產品概念設計的過程中，需要圍繞需求進行，從得到的需求出發，根據現有的互聯網設計技術進行產品概念設計。三、設計規范切合實際有中心

設計流程圖中的基本要求實施準備在產品概念的設計過程中，需要注意產品功能的概念化、設計概念的可視化和概念設計的商品化。設計一個電商網站，需要能夠體現出網站的功能化，不僅是一個產品展示的畫面，還是一個可進行網站瀏覽的動態畫面，可供消費者進行商品的瀏覽和深入了解。任務實施與分析

通常情況下，產品概念設計的流程分為了以下四個步驟：1.研讀需求報告，梳理產品框架；2.設計信息架構圖；3.設計功能流程圖；4.設計頁面流程圖。梳理產品框架A設計信息架構圖B設計功能流程圖C設計頁面流程圖D任務實施與分析步驟1：研讀需求報告，梳理產品框架在經過需求分析后形成了需求分析報告，初步設計出了產品的大概框架、基本功能、業務流程，這時還需要團隊成員一起開會討論研究產品需求，細化產品框架、業務流程細節、功能實現方式等。任務實施與分析步驟2：設計信息架構圖明確了產品的具體需求后，需要繪制信息架構圖直觀地描述產品的信息骨架。如設計一個電商網站，它的結構包括哪幾個模塊，每個模塊具體包括哪些元素，要初步確定出網站信息的構成。任務實施與分析步驟3：設計功能流程圖信息架構圖給出了產品的整體概貌，具體的功能是如何實現的，這就需要將拆解出的一個個功能通過流程圖繪制出來，讓開發人員能夠清楚明了地理解具體功能的實現路徑。任務實施與分析步驟3：設計功能流程圖某電商網站后臺訂單管理流程圖任務實施與分析步驟4：設計頁面流程圖

頁面流程圖是從用戶的角度展示頁面的邏輯，代表用戶所有可能的操作過程，能夠檢驗流程的合理性，快速發現體驗問題。在繪制壓面流程圖的過程中，注意要突出頁面元素與邏輯關系，提升原型設計的效率。任務實施與分析步驟4：設計頁面流程圖（1）在購物車頁面進行“提交訂單”進行結算；（2）輸入優惠碼頁面突出“什么是優惠碼”的輔助內容。輸入優惠碼后點擊“確認訂單”，觸發相關判斷；（3）訂單確認頁面重點突出金額相關信息，操作“去支付”，支付完成后跳轉訂單。以某網站優惠券使用的頁面為例，給產品增加優惠碼功能，即讓運營人員通過向用戶發放優惠碼，用戶在下訂單時使用優惠碼，抵相應折扣（金額）。拓展知識一、產品概念設計的研究發展方向人機協作的概念設計系統研究協作式產品概念設計研究統一產品模型描述方式的研究復雜產品概念設計模型研究思考與總結學員通過以上操作，完成產品概念設計的分析，請學員在此基礎上，進行思考并回答以下問題：在設計產品時，需要考慮哪些方面的內容？能力提升

請學生以華為商城為例，梳理該網站的信息架構圖以及某功能流程圖。任務訓練

掃碼進入課程網站，獲取對應任務單，閱讀任務目標，根據任務步驟，完成拓展任務并提交。模塊一電商視覺設計認知《電商視覺設計》思維導圖網站商城整體設計1目錄CONTENTS3電商網站的視覺規劃電商視覺營銷的規劃2項目二

電商網站的視覺規劃項目背景

在全渠道數字化運營項目中，電商網站的建立和運營是其中一個重要的環節，為各項運營活動提供平臺和載體。隨著互聯網的快速發展，電商網站也在日新月異中快速發展，同時消費者對電商網站也有了更高的要求，這種要求不僅體現在網站的功能方面，還體現在電商網站的視覺設計方面。

一個網站的視覺規劃有利于網站的運營，一方面消費者能夠清晰地看到電商網站的布局，可以迅速找到自己目標所在的位置，另一方面網站的色彩搭配也能夠吸引到消費者。進行電商網站視覺規劃，需要在有效地產品需求分析基礎上，清楚地了解產品需求，然后根據具體的產品需求進行產品概念設計，再在產品原型制作的指導下科學、有序地展開產品研發工作。研究內容產品需求分析產品概念設計產品原型制作學習目標1.了解產品需求分析的概念、內容；2.熟悉產品概念設計的內容；3.熟悉產品原型制作的理論知識。知識目標1.能夠獨立進行產品需求分析，并撰寫需求報告；2.能夠根據產品需求分析，獨立進行產品概念設計；3.能夠進行簡單的產品原型制作。技能目標1.了解社會主義核心價值觀，誠實守信，遵守職業道德；2.具備積極主動的工作態度、較強的視覺審美與設計能力；3.具備較強的溝通能力和良好的解決問題能力。素養目標任務三產品原型制作預備知識一、認識產品原型制作

1.產品原型的定義

產品原型是設計方案的表達，是產品經理、交互設計師的重要產出物之一，可以讓用戶提前體驗產品，供開發團隊之間交流設計構想、展示復雜交互的方式。預備知識一、認識產品原型制作2.產品原型的種類

產品設計原型按照精細程度來分，可分為低保真產品原型和高保真產品原型。低保真產品原型：低保真原型是對產品進行較為簡單的模擬圖，簡單地描述產品的外部特征和基本功能構架，只需要用簡單的設計工具進行制作，用來表示最初的設計概念和思路。高保真產品原型：相較于低保真產品原型圖，高保真產品原型圖的設計要求更高，全面展示產品功能、界面元素、功能流程的一種表現手段。原型圖中無論是功能模塊的大小，還是文案設計甚至所用的圖標、圖例、交互動作都使用真實素材，用戶可直接看到產品的頁面組成。預備知識二、產品原型制作工具AxureRP介紹AxureRP是美國AxsureSoftwareSolution公司旗艦產品，一個專業的快速原型設計工具，支持Windows和MacOS,它能夠讓產品經理等設計人員快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明書。預備知識二、產品原型制作工具AxureRP介紹

工具欄區域：是頁面編輯的一些快捷鍵操作區域，主要有字體、字號、顏色、邊框樣式、尺寸、位置等常規設置，保存、打開、剪切、撤銷、粘貼、重做以及Axure本身自帶的一些工具，如選擇、連接、鋼筆、格式刷等。預備知識二、產品原型制作工具AxureRP介紹

頁面導航區域：展示了一個項目中所有的頁面，原型中所有的頁面都會按照層級結構顯示在這里，支持創建文件夾，可以將頁面分類管理：可以添加同級頁面、添加子頁面、修改頁面級別、修改頁面順序，也可對頁面進行重新命名操作、刪除操作等。注意頁面列表面板中的頁面名稱就是原型發布后生成的HTML文件名稱，如需將這些HTML文件部署到自己的服務器或其他云平臺上，最好采用英文命名方式，若是本地瀏覽可使用中文名稱。預備知識二、產品原型制作工具AxureRP介紹

部件區域：也叫組件庫或元件庫，所有軟件自帶的元件以及手動導入的元件都在這里，這些元件是設計一個產品原型的“基礎”。Axure默認提供三種不同類型的元件庫：1.Default元件庫，包含基本元件、表單元件、菜單、表格以及標記元件；2.Flow元件庫，包含各種流程圖元件，通過繪制流程圖可以梳理復雜的業務流程；3.Icons元件庫，包含各種常用圖標，但只是為了方便原型制作，真實產品中一般不直接使用，需根據產品整體風格重新設計。這些元件操作起來很簡單，把元件拖入設計區域即可使用，雙擊設計區域中的元件可修改其文本內容。預備知識二、產品原型制作工具AxureRP介紹

母版區域：當原型中有些元素需要重復使用時，可把重復元件制作成母版，方便隨時調用。母版面板與頁面導航面板相似，以列表的形式展現，支持創建文件夾以便分類管理。通常用于頁面頭部、菜單欄等的制作。預備知識二、產品原型制作工具AxureRP介紹

頁面編輯區域：繪制產品原型的區域，用于排布元件位置、設置元件樣式等。設置區域中有橫向標尺、縱向標尺，最大支持20000像素×20000像素的原型，可以加入網格和參考線，進行輔助設計。注意設計區域中的原型樣式和發布后的原型樣式可能并不完全相同。預備知識二、產品原型制作工具AxureRP介紹

屬性以及交互設置區域：在這里可以設置選中元件的樣式，添加該元件相關的注釋以及設置該元件的一些交互事件，例入鼠標點擊時的事件等。實施準備掌握AxureRP操作理論知識，有助于學生順暢地繪制產品原型圖。產品原型圖能夠清楚地展示產品的基本框架、運作機制，直觀地了解產品界面的樣式、按鈕的功能效果，理解產品的真實意圖，因此產品原型制作是電商網站開發中至觀重要的一環，可以有效地幫助產品設計、開發人員進行后續的網站視覺規劃。任務實施與分析步驟1：利用前面所學知識，梳理出“生活類電商網站”——未來生活網的基本框架任務實施與分析步驟2：根據信息架構圖發現需要制作6個Web網站頁面，打開AxureRP軟件，在“左側”頁面處進行文件夾的創建，如圖所示。這里需要注意層級、頁面邏輯結構的設置，首先明確網站所包含的模塊。任務實施與分析步驟3：網站首頁制作步驟3.1：設置原型尺寸

選擇要設計的頁面，單擊菜單中的“布局”——“柵格和輔助線”——“創建輔助線”，打開“創建輔助線”對話框，設置列數為1，列寬為1000（Web產品一般在PC端使用，通常頁面寬度設置為1000像素左右），間距寬度為0，邊距為0，設置行數為0，行高40，間距寬度為20，邊距為0，勾選“創建為全局輔助線”，所有頁面均被添加了輔助線。任務實施與分析步驟3：網站首頁制作步驟3.2：制作網站名稱在左側的“元件庫”中選擇“一級標題”，拖拽到操作頁面，然后輸入網站名稱“未來生活”，在右側的“一級標題”處進行樣式設置，如字體、顏色、字號，如圖所示。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（1）在左側的“元件庫”中選擇“矩形”，通過拖拉到操作區，進行形狀大小和顏色的調整。大小設置為X軸坐標0，y軸坐標130,寬度1000，高度39，顏色填充為#00CC66。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（2）在左側的“元件庫”中選擇“文本標簽”創建標題，設置標題大小并設置行間距。如設置“所有商品分類”，大小設置為X軸坐標71，y軸坐標130,寬度175，高度39，顏色填充為#009900，字體黑體，顏色#FFFFFF，字號28，對齊方式居中。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（3）設置“首頁”標簽，大小設置為X軸坐標275，y軸坐標130,寬度49，高度39，字體黑體，顏色#FFFFF，字號20，對齊方式居中。同樣方式創建“臺創園”、“消費幫扶”、“韓國館”、“充值”“未來禮品”標簽。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（4）使用基本元件——動態面板，給“所有商品分類”制作子菜單。在左側的“元件庫”中選擇“矩形1”，通過拖拉到操作區，進行形狀大小和顏色的調整，依次制作出“水果”、“安心蔬菜”、“肉禽商品”、“海鮮水產”、“糧油調味”等子菜單，并分別命名tab1、tab2、tab3、tab4、tab5。可以設置無顏色填充#FFFFF，字體黑體，字號18號，居中。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（4）使用基本元件——動態面板，給“所有商品分類”制作子菜單。要使鼠標選中或懸浮“水果”、“安心蔬菜”、“肉禽商品”、“海鮮水產”、“糧油調味”后，標簽顏色變化且同一時刻這五個標簽只能有一個被選中，其操作步驟如下：①設置5個標簽頁選中時的交互樣式：選中tab1、tab2、tab3、tab4、tab5。點擊屬性面板中的“選中”按鈕，打開“交互樣式設置”對話框，選擇字體黑體，字號18，字體顏色#333333，填充顏色為#CCCCCC。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（4）使用基本元件——動態面板，給“所有商品分類”制作子菜單。②用同樣的方法設置5個標簽頁鼠標懸浮時的交互樣式。③選中tab1，勾選屬性面板中的“選中”，設置標簽1默認為選中狀態，如圖所示。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄（4）使用基本元件——動態面板，給“所有商品分類”制作子菜單。④選中tab1、tab2、tab3、tab4、tab5。在屬性面板中設置選項組名稱為tab，即在同一時刻這三個標簽只能有一個被選中，如圖所示。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄要使點擊“水果”、“安心蔬菜”、“肉禽商品”、“海鮮水產”、“糧油調味”后，分別出現對應的子菜單，需要使用左側“元件庫”中的“動態面板”，以制作“水果”的右側子菜單為例，操作如下：①將“動態面板”拖拉到操作區合適位置，填充顏色并命名“水果1”，然后拖曳“三級標題”到動態面板中添加文字，設置字體黑體，字號16號，居中。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄②設置第一個父菜單“水果”，添加事件，當鼠標右擊“水果”時切換到動態面板“水果1”。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄③選擇動態面板“水果1”，添加事件，使其鼠標離開時隱藏起來。任務實施與分析步驟3：網站首頁制作步驟3.3：制作導航欄③選擇動態面板“水果1”，添加事件，使其鼠標離開時隱藏起來。同樣的方法，設置“安心蔬菜”、“肉禽商品”、“海鮮水產”、“糧油調味”的子菜單，使其鼠標單擊時能顯示子菜單，當鼠標移開子菜單時子菜單隱藏。任務實施與分析步驟3：網站首頁制作步驟3.4：制作單張海報圖（1）在左側“元件庫”中選擇“圖片”，拖拉到操作區，雙擊該元件可導入外部圖片，也可在右側的屬性面板中單擊“導入”按鈕，如圖2-28所示。若導入的圖片過大，會詢問是否進行優化，若選擇“是”Axure會適當壓縮圖片，若選擇“否”則以原圖大小導入。任務實施與分析步驟3：網站首頁制作

步驟3.4：制作單張海報圖（2）對導入的圖片進行大小調整。拖曳圖片四周和四角的定位點，可以改變圖片的大小。按住Shift鍵同時拖曳可按原比例縮放，雙擊任何一個定位點可恢復至原來大小。任務實施與分析步驟3：網站首頁制作步驟3.4：制作單張海報圖（3）裁剪圖片。經過等比例縮放后的圖片還有些長，需要進行裁剪，如圖2-35所示。在圖片上單擊右鍵，選擇“裁剪圖片”，拖