電子商務(wù)視覺設(shè)計 課件 2任務(wù)2 產(chǎn)品概念設(shè)計

模塊一電商視覺設(shè)計認知《電商視覺設(shè)計》思維導圖網(wǎng)站商城整體設(shè)計1目錄CONTENTS3電商網(wǎng)站的視覺規(guī)劃電商視覺營銷的規(guī)劃2項目二

電商網(wǎng)站的視覺規(guī)劃項目背景

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

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

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

預備知識二、產(chǎn)品概念設(shè)計的內(nèi)容1.信息架構(gòu)圖

信息結(jié)構(gòu)圖是對信息進行梳理，幫助產(chǎn)品團隊梳理信息，理解產(chǎn)品需求，確定基本功能設(shè)計和內(nèi)容，同時也可以梳理頁面邏輯關(guān)系和層級跳轉(zhuǎn)。預備知識二、產(chǎn)品概念設(shè)計的內(nèi)容1.信息架構(gòu)圖

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

（1）功能結(jié)構(gòu)的梳理

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

（1）功能結(jié)構(gòu)的梳理

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

繪制信息架構(gòu)圖可以采用自上而下或自下而上的體系。以自上而下為例，信息架構(gòu)的步驟為：預備知識二、產(chǎn)品概念設(shè)計的內(nèi)容1.信息架構(gòu)圖

（2）繪制信息架構(gòu)圖的步驟

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

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

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

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

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

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

在產(chǎn)品概念設(shè)計的過程中，需要圍繞需求進行，從得到的需求出發(fā)，根據(jù)現(xiàn)有的互聯(lián)網(wǎng)設(shè)計技術(shù)進行產(chǎn)品概念設(shè)計。三、設(shè)計規(guī)范切合實際有中心

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

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

頁面流程圖是從用戶的角度展示頁面的邏輯，代表用戶所有可能的操作過程，能夠檢驗流程的合理性，快速發(fā)現(xiàn)體驗問題。在繪制壓面流程圖的過程中，注意要突出頁面元素與邏輯關(guān)系，提升原型設(shè)計的效率。任務(wù)實施與分析步驟4：設(shè)計頁面流程圖（1）在購物車頁面進行“提交訂單”進行結(jié)算；（2）輸入優(yōu)惠碼頁面突出“什么是優(yōu)惠碼”的輔助內(nèi)容。輸入優(yōu)惠碼后點擊“確認訂單”，觸發(fā)相關(guān)判斷；（3）訂單確認頁面重點突出金額相關(guān)信息，操作“去支付”，支付完成后跳轉(zhuǎn)訂單。以某網(wǎng)站優(yōu)惠券使用的頁面為例，給產(chǎn)品增加優(yōu)惠碼功能，即讓運營人員通過向用戶發(fā)放優(yōu)惠碼，用戶在下訂單時使用優(yōu)惠碼，抵相應折扣（金額）。拓展知識一、產(chǎn)品概念設(shè)計的研究發(fā)展方向人機協(xié)作的概念設(shè)計系統(tǒng)研究協(xié)作式產(chǎn)品概念設(shè)計研究