如何做一份無(wú)懈??可擊的份無(wú)產(chǎn)品設計（從需求到產(chǎn)品）
本篇文章會(huì )給大家介紹完(′▽?zhuān)?整的產(chǎn)品設計過(guò)程，重點(diǎn)闡述產(chǎn)品設計思路及期間會(huì )用到的產(chǎn)品從(cong)需產(chǎn)品方法論，并結合例子讓(′_｀)大家深刻地理(li)解邏輯(′_｀)嚴密的設計產(chǎn)品設計。
導語(yǔ)：很多同學(xué)看過(guò)(′?_?`)很??多文章讀過(guò)很多書(shū)，(╯°□°）╯︵ ┻━┻份無(wú)知道很多產(chǎn)品設計的產(chǎn)品??從需產(chǎn)品知識，但一到自己上手設計產(chǎn)品(?????)，設計??總是份無(wú)思緒萬(wàn)千，卻不知道從何下手。產(chǎn)品從需產(chǎn)品有一種知道很多道理，設計卻依然過(guò)不好這一生的份無(wú)趕腳。這是產(chǎn)品從需產(chǎn)品因為知識還沒(méi)串聯(lián)成(cheng)體系，OK，設計閑言少敘，份無(wú)現在就把產(chǎn)品設計體系告訴大家。產(chǎn)品從需產(chǎn)品
目錄：
一、設計綜述二、結構設計三、界面草圖四、讓界??面草圖進(jìn)化為頁(yè)面原型五、再加點(diǎn)調料六、總結一、綜述
開(kāi)篇前先給大家介紹下《用(yong)戶(hù)體驗要素》中的5層模型：戰略層、范圍層、結構層、框架層、表現層。
這是綱領(lǐng)性的模型，是產(chǎn)品0-1設計的5個(gè)階段。
戰略層：產(chǎn)品目標及其目標(biao)用戶(hù)（做什么、為誰(shuí)而做？）范ヽ(′▽?zhuān)?/圍??層：功能及其內(nei)容需求( ?ω?)整合（需要做哪些？）結構層：交互設計及其信息架構(╯°□°）╯（怎樣做？）框架層：界面設計、導航設計和信息設計（怎樣做？）表現層：視覺(jué)設計（要做成什么樣子？）戰略層和范ヽ(′ー｀)ノ圍層涉及產(chǎn)品目標、目標用戶(hù)及產(chǎn)品定位，這些公??司一般都已經(jīng)定義好了。當我們接到任務(wù)的時(shí)候，往往??就直接到達結構層和框架層的設計(ji)了。所以本篇文章實(shí)際上是在結構層和框(′▽?zhuān)?架層上展開(kāi)闡述如何進(jìn)行產(chǎn)品設計。
結構層和框架層特別像建房子，結構層是設計房屋的立體結構，框架層是設計每一層怎么布局。
OK，接下來(lái)先整體介紹下產(chǎn)品設計的過(guò)程，讓大家在宏觀(guān)上有個(gè)把握。
如下是產(chǎn)品設計過(guò)程，本篇文章也是按照這個(gè)思路進(jìn)行闡述：
將需求歸納整理成用戶(hù)任務(wù)；多個(gè)用戶(hù)任務(wù)交織成信息架構；將信息架構具象化為頁(yè)面流程圖，并通過(guò)界面草圖的形式表達出來(lái)；接著(zhù)根據設計原理，讓界面草圖進(jìn)化為頁(yè)面原型；最后加點(diǎn)調料，(′▽?zhuān)?)通過(guò)情感化設計和游戲化設計，賦予產(chǎn)品魔力。無(wú)論是全新的產(chǎn)品設計還是一個(gè)小功能點(diǎn)的設計，都需要經(jīng)歷上面的5個(gè)步驟。不同的是，小功能點(diǎn)可能沒(méi)??信息架構這一環(huán)。
如下是設計流程示意圖：
產(chǎn)品設計過(guò)程
二、結構設計
先別急，沒(méi)經(jīng)過(guò)系統分析過(guò)的設計方案，很容易(???)因為某些┐(′?｀)┌因素沒(méi)考慮周全，而漏洞百出，最后到了需求評審階段還是要被打回來(lái)。
我們需要將需求歸納整理為用戶(hù)任務(wù)，多條用戶(hù)任務(wù)交織為信息架構，最后通過(guò)頁(yè)面原型表達出來(lái)。
其中核心關(guān)鍵點(diǎn)是怎么設計用戶(hù)任務(wù)(′?｀*)。
比如：你現在??是知乎產(chǎn)品經(jīng)理，需求是怎么提升報名知乎live的用戶(hù)數。你??( ?ω?)會(huì )怎么做？建議先思考一下，再繼續往下看。
首先，需求是提升報名知乎live的用戶(hù)數。那么用戶(hù)任???務(wù)就是報名參加知乎live。
接下來(lái)就是將用戶(hù)任務(wù)(′ω｀)進(jìn)行(xing)拆解，拆解為N個(gè)步驟，然后提升每個(gè)步驟的轉化率，從而提??升報名用戶(hù)數。怎么拆解用戶(hù)任務(wù)呢？
其實(shí)就是根據用戶(hù)決策路徑進(jìn)行拆解。決策路徑有好幾條，所以，一( ???)個(gè)用戶(hù)任務(wù)，可以拆解為多條分(fen)支。
這里選取一條可能最多數用戶(hù)的決策路徑作為舉例：看到知乎live->了解了知乎li??ve->產(chǎn)生興趣->報名
產(chǎn)品設計的依據就是這條決策路徑，知道了這條決策路徑，我??們就可以在每個(gè)步ヽ(′ー｀)ノ驟上面做文章：
大體功能結構出來(lái)了，但太干了對不對？有沒(méi)有辦法提高live的置信度，并降低用戶(hù)心理門(mén)檻，讓產(chǎn)品更性感一點(diǎn)呢？
這里值得一提的是，在“看到”這個(gè)環(huán)節，知??乎還采用了一種很輕??巧的方式。知乎上線(xiàn)了一個(gè)live主講者可以給他人免費贈票的功能。當對方報名參加后，live活動(dòng)信息就會(huì )出現( ?° ?? ?°)在其feed流里。
這樣不僅可以讓更多人看到，也可以借助主講者??的力量來(lái)推動(dòng)live的熱度，也有利于提升大咖的活躍度。讓更多??大咖能參加到知乎live的分享中來(lái)，產(chǎn)生更多優(yōu)質(zhì)內容。
上面用知乎live的例子做了(╯‵□′)╯簡(jiǎn)要介紹。
下面以點(diǎn)外賣(mài)為例，詳細介紹產(chǎn)品設計流程。同樣重點(diǎn)在闡述思路，設計千萬(wàn)條，思路第一條。
1. 理清用戶(hù)決策路徑
點(diǎn)外賣(mài)的主流決策路徑大致(╯°□°)╯是這(zhe)樣：挑選商家->(???);瀏覽并挑選商品->下單->填寫(xiě)收貨地址->查看??訂單詳情->結算->等待發(fā)貨。
這里插播介紹下“用戶(hù)決策路徑”我們知道，設計產(chǎn)品前需要知道目標用戶(hù)是哪些，并給這群用戶(hù)做畫(huà)像，研究他們的心智模型。心智模型研究的是“用戶(hù)如何通過(guò)過(guò)往的知識沉淀來(lái)理解新事物的”。那么決策路徑就是其心智模型的外化表現。
那很明顯，不同的目標用戶(hù)群體，其心智模型是不一樣的，比如老人和年輕人，對新事物的理解肯定就存在很大的差異。心智模型不一樣，決策路徑就不ヽ(′ー｀)ノ一樣。所┐(′д｀)┌以，針對不同的目標用戶(hù)群體，即使是同一個(gè)需求，做出來(lái)??的產(chǎn)品設計(ji)方案也是不一樣的。當我們提供的操作步驟跟用戶(hù)的決策路徑相符時(shí)，就會(huì )比較符合用戶(hù)(°o°)預期，學(xué)習成本大大降低。
2. 分解用戶(hù)任務(wù)
理清用戶(hù)的決策路徑后，我們可以繼續將大任務(wù)分解為眾多子任務(wù)。
點(diǎn)外賣(mài)任務(wù)分解
可以??看出，每一項子任務(wù)，實(shí)際上就是一個(gè)功能塊了。接下來(lái)組織合并??相關(guān)任務(wù)，得到頁(yè)面流程圖，為設計界面草圖(???)做準備。
設計的最終目的是把功能點(diǎn)以可視化的界面展示在用戶(hù)面前，點(diǎn)外賣(mài)這個(gè)任務(wù)，經(jīng)過(guò)簡(jiǎn)單的劃分，就已經(jīng)分解出了26項功能點(diǎn)。如果將這些功能點(diǎn)直接展示在用戶(hù)面前，無(wú)疑難以操作且難以(yi)理??解。所(suo)以需要組織合并相關(guān)任務(wù)(wu)，經(jīng)過(guò)整理后的信息更易于用戶(hù)理解。
我們可以將操作連續、操作相似、信息相近的任務(wù)，歸類(lèi)到同一模塊，幾個(gè)模塊再歸類(lèi)到一個(gè)頁(yè)面。
組織合并相關(guān)任務(wù)
我們可以將這個(gè)信息結構圖，再具象化為頁(yè)面流程(cheng)圖：
頁(yè)面流程圖
4. 排列子任務(wù)優(yōu)先級
我們可以根據需求的廣度、頻率和強度這三個(gè)維(°ロ°) !度來(lái)決定任務(wù)的優(yōu)先級，即根據使用人數、使用頻率、需求是否強(qiang)烈（重要??性）三個(gè)維度來(lái)共同判斷優(yōu)先級。
子任務(wù)優(yōu)先級
用不同底色做了區分，分別對應5個(gè)頁(yè)面。
通過(guò)綜合評分可以很直觀(guān)的看出同個(gè)頁(yè)面中不同子任務(wù)的主次之分。
具體頁(yè)面設計的時(shí)候，可以把主要???任務(wù)放到頁(yè)面的重點(diǎn)區域、也可以在視覺(jué)上做突出、也可以加大展示面積等等，(′?｀)次要任務(wù)可以弱化為一個(gè)功能按鈕或者弱化視覺(jué)表現等等。通過(guò)靈活的交互方式，ヽ(′ー｀)ノ讓重點(diǎn)任務(wù)??重點(diǎn)突出，方便用戶(hù)決策。
三、界面草圖
界面草圖跟結構設計是緊密聯(lián)系在一起的，前文得出了頁(yè)面流程圖(tu)和(he)任務(wù)優(yōu)先級，現在就可以針對每個(gè)ヽ(′▽?zhuān)?ノ頁(yè)面進(jìn)行設計。
現在原型設計軟件總算可以派上用場(chǎng)了吧？
還沒(méi)呢，別著(zhù)急。
因為在界面設計的過(guò)程中，考慮的點(diǎn)會(huì )越來(lái)越多，自己的思路也會(huì )不停的調整，有時(shí)(shi)候還會(huì )不斷的迸發(fā)(′?｀)出(chu)靈感和創(chuàng )意。用草圖的形式，可以極大的提高效率。
設計??草圖的時(shí)候，依舊需要經(jīng)歷幾個(gè)階段。思路依舊是先大局再??細節。先確定頁(yè)面結??構、導航、功能塊擺放位置、次序，再具體去探尋每個(gè)功能塊的展示內容、展示結構等等。
每一千個(gè)產(chǎn)品經(jīng)理，就有一千種界面設計。這就看個(gè)人自己平時(shí)的積累、思考和領(lǐng)悟了。當然，第一版的產(chǎn)品設計都是不完美的，這就需要不斷的進(jìn)行用戶(hù)研究、數據驅動(dòng)的方式去迭代優(yōu)化它。我將來(lái)還會(huì )專(zhuān)門(mén)寫(xiě)一篇ヽ(′ー｀)ノ文章去介紹如果通過(guò)數據驅動(dòng)、增長(cháng)黑客的方式去優(yōu)化產(chǎn)品功能?？梢韵汝P(guān)注我(′；ω；`)的專(zhuān)欄哈。
下面是??我隨便手繪了一張草圖，大概表達一下這個(gè)意思就ヽ(′?｀)ノ行哈哈哈，大家別介意。
界面草圖
四、讓界面草圖進(jìn)化為頁(yè)面原型
現在終于可以讓界面草圖搬上原型設計軟件了。
進(jìn)化為頁(yè)面原型的過(guò)程中，并不是簡(jiǎn)單的搬運，而往往會(huì )有思想上的再一次升華。因為之前沒(méi)考慮到的事情，現在會(huì )被考慮到了。比如ヽ(′?｀)ノ：文案顯示的字符數，顯示兩行還是一行，顯示多少個(gè)字后就要用省略號表示，還是需要提供一個(gè)“展開(kāi)”按鈕。
圖標顯示4個(gè)還是5個(gè)，顯示5個(gè)有點(diǎn)小，小屏幕上不友好，是否要做分辨率的判斷。
具??體交互細節上是否還有簡(jiǎn)化的空間，交互細節上就需要具體問(wèn)題具體分析了。
五、再加點(diǎn)調料
我們可以通過(guò)情感化設計和??游戲化設計讓產(chǎn)品更有魔力，從而贏(yíng)得用戶(hù)的芳心。
情感化設計和游戲化設計包含大量的設計(ji)技巧，也是個(gè)大篇幅，所以我就將其放在下一篇文章來(lái)專(zhuān)門(mén)講述了。
六、總結
邏輯嚴密的產(chǎn)品設計有點(diǎn)像推理過(guò)程，層層遞進(jìn)。
總的來(lái)說(shuō)，無(wú)論是全新產(chǎn)品的設計還是功能點(diǎn)的設計，都必須先把握大局，再逐漸深化細節。
總的設計步驟如下：
理清用戶(hù)決策路徑分解用戶(hù)任務(wù)組織合并相關(guān)任務(wù)排列子??任務(wù)優(yōu)先級設計(′?｀)界面草圖讓界面草圖進(jìn)化為頁(yè)面原型再加點(diǎn)調料這，就是產(chǎn)品設ヽ(′ー｀)ノ計的秘密。
（作者：網(wǎng)站優(yōu)化）