本篇文章會給大家介紹完整的產(chǎn)品設(shè)計過程，重點闡述產(chǎn)品設(shè)計思路及期間會用到的方法論，并結(jié)合例子讓大家深刻地理解邏輯嚴(yán)密的產(chǎn)品設(shè)計。

導(dǎo)語：很多同學(xué)看過很多文章讀過很多書，知道很多產(chǎn)品設(shè)計的知識，但一到自己上手設(shè)計產(chǎn)品，總是思緒萬千，卻不知道從何下手。有一種知道很多道理，卻依然過不好這一生的趕腳。這是因為知識還沒串聯(lián)成體系，OK，閑言少敘，現(xiàn)在就把產(chǎn)品設(shè)計體系告訴大家。

目錄：

• 一、綜述
• 二、結(jié)構(gòu)設(shè)計
• 三、界面草圖
• 四、讓界面草圖進化為頁面原型
• 五、再加點調(diào)料
• 六、總結(jié)

一、綜述

開篇前先給大家介紹下《用戶體驗要素》中的5層模型：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。

這是綱領(lǐng)性的模型，是產(chǎn)品0-1設(shè)計的5個階段。

1. 戰(zhàn)略層：產(chǎn)品目標(biāo)及其目標(biāo)用戶（做什么、為誰而做？）
2. 范圍層：功能及其內(nèi)容需求整合（需要做哪些？）
3. 結(jié)構(gòu)層：交互設(shè)計及其信息架構(gòu)（怎樣做？）
4. 框架層：界面設(shè)計、導(dǎo)航設(shè)計和信息設(shè)計（怎樣做？）
5. 表現(xiàn)層：視覺設(shè)計（要做成什么樣子？）

戰(zhàn)略層和范圍層涉及產(chǎn)品目標(biāo)、目標(biāo)用戶及產(chǎn)品定位，這些公司一般都已經(jīng)定義好了。當(dāng)我們接到任務(wù)的時候，往往就直接到達結(jié)構(gòu)層和框架層的設(shè)計了。所以本篇文章實際上是在結(jié)構(gòu)層和框架層上展開闡述如何進行產(chǎn)品設(shè)計。

結(jié)構(gòu)層和框架層特別像建房子，結(jié)構(gòu)層是設(shè)計房屋的立體結(jié)構(gòu)，框架層是設(shè)計每一層怎么布局。

OK，接下來先整體介紹下產(chǎn)品設(shè)計的過程，讓大家在宏觀上有個把握。

如下是產(chǎn)品設(shè)計過程，本篇文章也是按照這個思路進行闡述：

1. 將需求歸納整理成用戶任務(wù)；
2. 多個用戶任務(wù)交織成信息架構(gòu)；
3. 將信息架構(gòu)具象化為頁面流程圖，并通過界面草圖的形式表達出來；
4. 接著根據(jù)設(shè)計原理，讓界面草圖進化為頁面原型；
5. 最后加點調(diào)料，通過情感化設(shè)計和游戲化設(shè)計，賦予產(chǎn)品魔力。

無論是全新的產(chǎn)品設(shè)計還是一個小功能點的設(shè)計，都需要經(jīng)歷上面的5個步驟。不同的是，小功能點可能沒信息架構(gòu)這一環(huán)。

如下是設(shè)計流程示意圖：

產(chǎn)品設(shè)計過程

二、結(jié)構(gòu)設(shè)計

很多同學(xué)在經(jīng)過了需求分析和需求評審后，正式接到了需求任務(wù)，猶如接到了圣旨一樣，迅速打開設(shè)計軟件，摩拳擦掌就準(zhǔn)備開干了。

先別急，沒經(jīng)過系統(tǒng)分析過的設(shè)計方案，很容易因為某些因素沒考慮周全，而漏洞百出，最后到了需求評審階段還是要被打回來。

需求到界面設(shè)計還有一扇窗，這扇窗就是用戶任務(wù)/信息架構(gòu)。信息架構(gòu)猶如骨架一般，支撐著整個產(chǎn)品。

我們需要將需求歸納整理為用戶任務(wù)，多條用戶任務(wù)交織為信息架構(gòu)，最后通過頁面原型表達出來。

其中核心關(guān)鍵點是怎么設(shè)計用戶任務(wù)。

比如：你現(xiàn)在是知乎產(chǎn)品經(jīng)理，需求是怎么提升報名知乎live的用戶數(shù)。你會怎么做？建議先思考一下，再繼續(xù)往下看。

首先，需求是提升報名知乎live的用戶數(shù)。那么用戶任務(wù)就是報名參加知乎live。

接下來就是將用戶任務(wù)進行拆解，拆解為N個步驟，然后提升每個步驟的轉(zhuǎn)化率，從而提升報名用戶數(shù)。怎么拆解用戶任務(wù)呢？

其實就是根據(jù)用戶決策路徑進行拆解。決策路徑有好幾條，所以，一個用戶任務(wù)，可以拆解為多條分支。

這里選取一條可能最多數(shù)用戶的決策路徑作為舉例：看到知乎live->了解了知乎live->產(chǎn)生興趣->報名

產(chǎn)品設(shè)計的依據(jù)就是這條決策路徑，知道了這條決策路徑，我們就可以在每個步驟上面做文章：

大體功能結(jié)構(gòu)出來了，但太干了對不對？有沒有辦法提高live的置信度，并降低用戶心理門檻，讓產(chǎn)品更性感一點呢？

如上圖加黑部分就是可拓展的點。當(dāng)然，方法是非常非常多了，也沒有標(biāo)準(zhǔn)答案。這里重點在講思路，不代表對錯。

這里值得一提的是，在“看到”這個環(huán)節(jié)，知乎還采用了一種很輕巧的方式。知乎上線了一個live主講者可以給他人免費贈票的功能。當(dāng)對方報名參加后，live活動信息就會出現(xiàn)在其feed流里。

這樣不僅可以讓更多人看到，也可以借助主講者的力量來推動live的熱度，也有利于提升大咖的活躍度。讓更多大咖能參加到知乎live的分享中來，產(chǎn)生更多優(yōu)質(zhì)內(nèi)容。

上面用知乎live的例子做了簡要介紹。

下面以點外賣為例，詳細介紹產(chǎn)品設(shè)計流程。同樣重點在闡述思路，設(shè)計千萬條，思路第一條。

1. 理清用戶決策路徑

點外賣的主流決策路徑大致是這樣：挑選商家->瀏覽并挑選商品->下單->填寫收貨地址->查看訂單詳情->結(jié)算->等待發(fā)貨。

這里插播介紹下“用戶決策路徑”我們知道，設(shè)計產(chǎn)品前需要知道目標(biāo)用戶是哪些，并給這群用戶做畫像，研究他們的心智模型。心智模型研究的是“用戶如何通過過往的知識沉淀來理解新事物的”。那么決策路徑就是其心智模型的外化表現(xiàn)。

那很明顯，不同的目標(biāo)用戶群體，其心智模型是不一樣的，比如老人和年輕人，對新事物的理解肯定就存在很大的差異。心智模型不一樣，決策路徑就不一樣。所以，針對不同的目標(biāo)用戶群體，即使是同一個需求，做出來的產(chǎn)品設(shè)計方案也是不一樣的。當(dāng)我們提供的操作步驟跟用戶的決策路徑相符時，就會比較符合用戶預(yù)期，學(xué)習(xí)成本大大降低。

2. 分解用戶任務(wù)

理清用戶的決策路徑后，我們可以繼續(xù)將大任務(wù)分解為眾多子任務(wù)。

點外賣任務(wù)分解

可以看出，每一項子任務(wù)，實際上就是一個功能塊了。接下來組織合并相關(guān)任務(wù)，得到頁面流程圖，為設(shè)計界面草圖做準(zhǔn)備。

3. 組織合并相關(guān)任務(wù)

設(shè)計的最終目的是把功能點以可視化的界面展示在用戶面前，點外賣這個任務(wù)，經(jīng)過簡單的劃分，就已經(jīng)分解出了26項功能點。如果將這些功能點直接展示在用戶面前，無疑難以操作且難以理解。所以需要組織合并相關(guān)任務(wù)，經(jīng)過整理后的信息更易于用戶理解。

我們可以將操作連續(xù)、操作相似、信息相近的任務(wù)，歸類到同一模塊，幾個模塊再歸類到一個頁面。

組織合并相關(guān)任務(wù)

可以看出，26項子任務(wù)被整理到了9個功能模塊（子任務(wù)不同底色代表不同模塊），9個功能模塊又分別被歸類到了5個頁面中來。實際上一張信息結(jié)構(gòu)圖就自然而然的呈現(xiàn)出來了。

我們可以將這個信息結(jié)構(gòu)圖，再具象化為頁面流程圖：

頁面流程圖

4. 排列子任務(wù)優(yōu)先級

排列子任務(wù)優(yōu)先級的目的是分清主要任務(wù)和次要任務(wù)。主要任務(wù)重點突出，次要任務(wù)刪除、組織、隱藏或轉(zhuǎn)移，就可以在界面設(shè)計的時候做到結(jié)構(gòu)嚴(yán)謹(jǐn)、條理清晰。

我們可以根據(jù)需求的廣度、頻率和強度這三個維度來決定任務(wù)的優(yōu)先級，即根據(jù)使用人數(shù)、使用頻率、需求是否強烈（重要性）三個維度來共同判斷優(yōu)先級。

子任務(wù)優(yōu)先級

用不同底色做了區(qū)分，分別對應(yīng)5個頁面。

通過綜合評分可以很直觀的看出同個頁面中不同子任務(wù)的主次之分。

具體頁面設(shè)計的時候，可以把主要任務(wù)放到頁面的重點區(qū)域、也可以在視覺上做突出、也可以加大展示面積等等，次要任務(wù)可以弱化為一個功能按鈕或者弱化視覺表現(xiàn)等等。通過靈活的交互方式，讓重點任務(wù)重點突出，方便用戶決策。

三、界面草圖

界面草圖跟結(jié)構(gòu)設(shè)計是緊密聯(lián)系在一起的，前文得出了頁面流程圖和任務(wù)優(yōu)先級，現(xiàn)在就可以針對每個頁面進行設(shè)計。

現(xiàn)在原型設(shè)計軟件總算可以派上用場了吧？

還沒呢，別著急。

因為在界面設(shè)計的過程中，考慮的點會越來越多，自己的思路也會不停的調(diào)整，有時候還會不斷的迸發(fā)出靈感和創(chuàng)意。用草圖的形式，可以極大的提高效率。

設(shè)計草圖的時候，依舊需要經(jīng)歷幾個階段。思路依舊是先大局再細節(jié)。先確定頁面結(jié)構(gòu)、導(dǎo)航、功能塊擺放位置、次序，再具體去探尋每個功能塊的展示內(nèi)容、展示結(jié)構(gòu)等等。

每一千個產(chǎn)品經(jīng)理，就有一千種界面設(shè)計。這就看個人自己平時的積累、思考和領(lǐng)悟了。當(dāng)然，第一版的產(chǎn)品設(shè)計都是不完美的，這就需要不斷的進行用戶研究、數(shù)據(jù)驅(qū)動的方式去迭代優(yōu)化它。我將來還會專門寫一篇文章去介紹如果通過數(shù)據(jù)驅(qū)動、增長黑客的方式去優(yōu)化產(chǎn)品功能?？梢韵汝P(guān)注我的專欄哈。

下面是我隨便手繪了一張草圖，大概表達一下這個意思就行哈哈哈，大家別介意。

界面草圖

當(dāng)設(shè)計功能塊的時候，再將子任務(wù)進行分解細化。不停地重復(fù)這個步驟，把細節(jié)補充完整。

四、讓界面草圖進化為頁面原型

現(xiàn)在終于可以讓界面草圖搬上原型設(shè)計軟件了。

進化為頁面原型的過程中，并不是簡單的搬運，而往往會有思想上的再一次升華。因為之前沒考慮到的事情，現(xiàn)在會被考慮到了。比如：文案顯示的字符數(shù)，顯示兩行還是一行，顯示多少個字后就要用省略號表示，還是需要提供一個“展開”按鈕。

圖標(biāo)顯示4個還是5個，顯示5個有點小，小屏幕上不友好，是否要做分辨率的判斷。

具體交互細節(jié)上是否還有簡化的空間，交互細節(jié)上就需要具體問題具體分析了。

五、再加點調(diào)料

前面通過理性的分析得出信息架構(gòu)，進而得到了界面設(shè)計。但畢竟人是有情感的動物，情緒也會極大的左右人的判斷，所以產(chǎn)品設(shè)計不得不考慮情感設(shè)計。

我們可以通過情感化設(shè)計和游戲化設(shè)計讓產(chǎn)品更有魔力，從而贏得用戶的芳心。

情感化設(shè)計和游戲化設(shè)計包含大量的設(shè)計技巧，也是個大篇幅，所以我就將其放在下一篇文章來專門講述了。

六、總結(jié)

邏輯嚴(yán)密的產(chǎn)品設(shè)計有點像推理過程，層層遞進。

總的來說，無論是全新產(chǎn)品的設(shè)計還是功能點的設(shè)計，都必須先把握大局，再逐漸深化細節(jié)。

總的設(shè)計步驟如下：

1. 理清用戶決策路徑
2. 分解用戶任務(wù)
3. 組織合并相關(guān)任務(wù)
4. 排列子任務(wù)優(yōu)先級
5. 設(shè)計界面草圖
6. 讓界面草圖進化為頁面原型
7. 再加點調(diào)料

這，就是產(chǎn)品設(shè)計的秘密。

參考資料：《用戶體驗要素》、《破繭成蝶》、《簡約至上：交互設(shè)計四策略》

本文由 @湯涌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議