在產(chǎn)品的設(shè)計階段，我們需要做的是哪些工作？不是常規(guī)的需求分析、產(chǎn)品設(shè)計，本文作者給到了另一種答案：業(yè)務(wù)數(shù)據(jù)建模、界面流轉(zhuǎn)圖和界面設(shè)計等。

產(chǎn)品方案設(shè)計，我一般會分成2大步，第一步是產(chǎn)品整體方案設(shè)計（可見文章-如何開展產(chǎn)品整體方案設(shè)計？），第二步是產(chǎn)品詳細(xì)設(shè)計，本問針對產(chǎn)品詳細(xì)設(shè)計和大家一起探討。

將抽象的用戶需求轉(zhuǎn)化為具象化的產(chǎn)品需求階段開始了。對業(yè)務(wù)整體方向、產(chǎn)品框架等均定位清楚后，就要開始詳細(xì)的產(chǎn)品設(shè)計了，開始前也不用著急馬上投入到原型設(shè)計中，我一般習(xí)慣從業(yè)務(wù)數(shù)據(jù)框架開始，再細(xì)化一次業(yè)務(wù)流程和關(guān)鍵角色，最后再進(jìn)行頁面流轉(zhuǎn)圖與原型圖的設(shè)計。

一、業(yè)務(wù)數(shù)據(jù)建模

我一般先確認(rèn)業(yè)務(wù)中的關(guān)鍵內(nèi)容（可從業(yè)務(wù)組織架構(gòu)層級出發(fā)）、每個內(nèi)容的關(guān)鍵屬性、再梳理內(nèi)容之間的關(guān)聯(lián)關(guān)系，這個思路下來基本可以梳理的大差不大，呈現(xiàn)形式可以用ER圖。

案例：小紅集團(tuán)需要一款輔助工程施工進(jìn)度管理的軟件

現(xiàn)主要業(yè)務(wù)情況如下：

• 工程進(jìn)度管理方法一般是項目通過周會向分公司定期匯報工程情況、分公司通過月會向集團(tuán)定期匯報工程情況（如進(jìn)度、風(fēng)險等），匯報后對相應(yīng)問題下發(fā)整改措施等；
• 工程進(jìn)展在項目部辦公室或公司管理人員辦公室內(nèi)，通過打印施工圖紙上墻、手工勾選的方式進(jìn)行查看與管理；
• 每個項目的工程計劃為獨立文件存儲，訪問者可隨意變更，經(jīng)常出現(xiàn)因修改異常影響了項目進(jìn)度的情況，又很難追溯到責(zé)任人。

進(jìn)而梳理該企業(yè)的主要業(yè)務(wù)架構(gòu)與系統(tǒng)賬號的關(guān)系如下：

圖1-客戶進(jìn)度業(yè)務(wù)組織機(jī)構(gòu)樹

圖中存在三種對象：

1. 組織機(jī)構(gòu)對象：用來描述客戶的行政管理層級結(jié)構(gòu)，自己公司總部位于最上層的根節(jié)點上；
2. 計劃對象：是管理的目標(biāo)，掛在某個組織機(jī)構(gòu)下；
3. 賬號對象：代表系統(tǒng)的用戶，賬號掛在組織機(jī)構(gòu)下，在本公司總部下的賬號，是工程進(jìn)度業(yè)務(wù)后臺的管理賬號，可以管理整棵組織機(jī)構(gòu)樹中的所有數(shù)據(jù)。

每個組織機(jī)構(gòu)對象都有一個“上級機(jī)構(gòu)”，每個賬號或計劃都只能隸屬于一個項目或機(jī)構(gòu)，每個計劃中都有幾百甚至上千個任務(wù)，將這幾種對象通過ER圖來呈現(xiàn)如下：

圖2-客戶模型ER圖

ER圖中可以清晰的看出各對象之間的數(shù)據(jù)關(guān)系，在接下來的詳細(xì)需求設(shè)計或研發(fā)同學(xué)進(jìn)行數(shù)據(jù)庫設(shè)計時，均提供了清晰的關(guān)系說明。

這樣的模型保留了一定的可拓展性，比如項目前期時間較緊張時，完整的組織機(jī)構(gòu)樹的開發(fā)復(fù)雜度很高，為了降低開發(fā)成本與滿足一期客戶的上線時間要求，與客戶溝通后可暫不支持復(fù)雜的行政層級管理，只需要為客戶實現(xiàn)若干個賬號可管理多份計劃即可，根據(jù)以上情況，簡化組織樹如下：

圖3-簡化版組織機(jī)構(gòu)樹

基于簡化版的組織樹層級，每個客戶需要有一個管理員賬號，可以創(chuàng)建子賬號和計劃，子賬號可以設(shè)置為生產(chǎn)部人員，能夠?qū)﹃P(guān)聯(lián)的計劃進(jìn)行工作處理等。

簡化后的ER圖如下：

圖4-簡化版客戶模型ER圖

該模式與上方圖2模型相比，只是在賬號與計劃兩個對象之間建立了關(guān)聯(lián)關(guān)系，這樣處理保持了模型的可擴(kuò)展性，將來需要實現(xiàn)全面的組織機(jī)構(gòu)管理時，將賬號、計劃之間的對應(yīng)關(guān)系打斷，整個數(shù)據(jù)底層基本不需要調(diào)整，在業(yè)務(wù)系統(tǒng)中實現(xiàn)相關(guān)技術(shù)算法和組織機(jī)構(gòu)樹管理維護(hù)功能即可。

注意：在賬號與計劃的關(guān)系中，一般是生產(chǎn)部門的1個人負(fù)責(zé)對應(yīng)的1份計劃，若某個項目在前期準(zhǔn)備時，發(fā)現(xiàn)本次工程很復(fù)雜，也可能需要多個人一同編制工程計劃，所以賬號與計劃的關(guān)系設(shè)計為多對多，這是實際情況中經(jīng)常出現(xiàn)的業(yè)務(wù)場景。我在設(shè)計模型時通常會盡量讓自己多想一步，使產(chǎn)出的模型擴(kuò)展性盡可能強一些，也是降低以后由于業(yè)務(wù)復(fù)雜度的增加需開發(fā)新功能，但系統(tǒng)底層無法支持，只能重構(gòu)的風(fēng)險。

二、流程與角色

流程圖我一般采用自頂向下的思路梳理，先梳理主干流程，再填補關(guān)鍵支線流程，將流程中涉及到的角色，均列舉出來，進(jìn)一步明確系統(tǒng)角色及業(yè)務(wù)崗位之間的安排。整個流程設(shè)計的過程中，我會不斷提醒自己謹(jǐn)慎思考各環(huán)節(jié)的依賴關(guān)系、先后順序，避免邏輯混亂。

根據(jù)以上案例，調(diào)研時與客戶溝通確認(rèn)的主要業(yè)務(wù)流程如下：

圖5-線下進(jìn)度管理主流程圖

根據(jù)流程圖思考系統(tǒng)具體拆分，大致思路與結(jié)果為：本公司管理客戶時，需要客戶管理后臺；客戶管理分公司/項目時，需要運營管理后臺；客戶進(jìn)行工程進(jìn)度管控時，需要進(jìn)度管理前臺。

進(jìn)而梳理出如下不同角色：

1）進(jìn)度管理業(yè)務(wù)在本公司內(nèi)部包含如下角色：

• 本公司-銷售人員：本公司內(nèi)部的銷售人員，負(fù)責(zé)本公司的客戶開發(fā)與合約簽訂（溝通確認(rèn)后仍采用線下作業(yè)方式）；
• 本公司-運營人員：本公司內(nèi)部的運營人員，負(fù)責(zé)具體的客戶創(chuàng)建、維護(hù)等業(yè)務(wù)性工作；

2）進(jìn)度管理業(yè)務(wù)客戶包含如下角色：

• 客戶-管理員：客戶公司的管理員，維護(hù)并管理公司內(nèi)人員賬號、項目等；
• 客戶-生產(chǎn)部人員：客戶公司生產(chǎn)部人員（泛指項目/分公司/公司相關(guān)職位），負(fù)責(zé)工程計劃增刪改、風(fēng)險糾偏、工作匯報等；
• 客戶-生產(chǎn)部負(fù)責(zé)人/總監(jiān)：客戶公司生產(chǎn)部中高層（泛指項目/分公司/公司相關(guān)職位），負(fù)責(zé)工程計劃相關(guān)的審批與監(jiān)管工作；
• 客戶-工程部負(fù)責(zé)人/總監(jiān)：客戶公司生產(chǎn)部中高層（泛指項目/分公司/公司相關(guān)職位），負(fù)責(zé)工程計劃相關(guān)的審批與監(jiān)管工作；

基于上述分析，繪制出更詳細(xì)的業(yè)務(wù)流程圖如下：

圖6-創(chuàng)建維護(hù)客戶到進(jìn)度管理主流程圖

上圖清晰的描述了從客戶開發(fā)到進(jìn)度管控的關(guān)鍵流程節(jié)點，以及不同的角色在不同的系統(tǒng)中各完成了哪些操作，最終完成整個流程。通過跨職能分系統(tǒng)流程圖，可以清晰的看出誰（操作角色）在哪（那個系統(tǒng)/模塊）做什么（完成哪些工作），一般這個流程圖梳理完成后，對整體系統(tǒng)就會有個很清晰的認(rèn)識。

三、頁面流轉(zhuǎn)圖

接下來就是頁面流轉(zhuǎn)圖，一般常用來描述用戶完成某項工作需要訪問的頁面及頁面跳轉(zhuǎn)順序，包括系統(tǒng)中總共需要哪些頁面，哪些頁面可以重復(fù)使用。通常我會選定主要的某單一角色，繪制某個特定場景下的頁面訪問和跳轉(zhuǎn)邏輯，從用戶視角梳理一遍所有相關(guān)頁面，往往在這個過程中會檢查到一些遺漏或有問題的內(nèi)容，可進(jìn)行查缺補漏。

舉例：項目生產(chǎn)部人員，創(chuàng)建并填報計劃的過程中，涉及到哪些頁面？創(chuàng)建計劃后中高層進(jìn)行審批時涉及哪些頁面？

1）項目生產(chǎn)部人員首先需要登錄到系統(tǒng)，進(jìn)入首頁，因為要創(chuàng)建計劃、填報計劃，所以需訪問計劃列表頁，在列表頁中有導(dǎo)入計劃按鍵、填報進(jìn)度按鍵，點擊某一按鍵，分別進(jìn)入導(dǎo)入/編輯計劃頁、進(jìn)度填報頁；

2）計劃創(chuàng)建好后，生產(chǎn)部負(fù)責(zé)人/總監(jiān)登錄到系統(tǒng)，進(jìn)入首頁，因為需要審批生產(chǎn)部人員上傳的計劃，所以需訪問審批列表頁，此時要思考一下，是否需要一個新頁面，能否與計劃列表頁共用一個頁面？因負(fù)責(zé)人審批的可能不止一個項目計劃且更主要關(guān)注審批狀態(tài)，將待審批的計劃進(jìn)行查閱審批，需要一個列表查看全局情況；而計劃列表主要關(guān)注計劃的進(jìn)度、風(fēng)險情況等，且每個項目一份，鋪開展示計劃詳細(xì)內(nèi)容即可，便于管理；所以審批記錄需要單獨新增一個頁面，負(fù)責(zé)人進(jìn)入審批列表頁，點擊“審批”按鍵，進(jìn)入計劃審批頁。

頁面流轉(zhuǎn)圖如下：

圖7-頁面流轉(zhuǎn)圖示例

通過業(yè)務(wù)主流程、頁面流轉(zhuǎn)圖的梳理后，對系統(tǒng)的頁面情況有了一定的評估，需要注意的是，不是所有頁面都會在頁面流轉(zhuǎn)圖中體現(xiàn)，比如我們的財務(wù)部門，他們所需要的一些報表頁、對賬查詢頁等。我經(jīng)常提醒自己，凡事都盡量多維度思考一下，可以幫自己發(fā)現(xiàn)一些未考慮到的問題。

四、界面設(shè)計

到這步基本已經(jīng)將大框架梳理的差不多了，可以為每個頁面設(shè)計具體的交互功能了，即頁面設(shè)計。原型圖的設(shè)計工具比較多，比如Axure、墨刀、Mockplus等，可根據(jù)個人習(xí)慣靈活選擇。

界面設(shè)計的時候，有一些基礎(chǔ)原則可以了解一下，對產(chǎn)品整體的統(tǒng)一性、可用性、友好性都有一定幫助，我起初剛做產(chǎn)品的時候，聽到比較多的是尼爾森十大可用性原則，主要考慮用戶在這個頁面上會進(jìn)行哪些交互、怎樣設(shè)計能達(dá)到最好的交互效果等。

尼爾森十大可用性原則包括：

• 反饋原則：比如安裝程序時顯示進(jìn)度條，并預(yù)估還需要多久結(jié)束，系統(tǒng)需要告知用戶發(fā)生了什么，預(yù)期是什么；
• 隱喻原則：比如音樂播放器的功能鍵，不加文字說明，也知道每個圖標(biāo)想表達(dá)的含義，符合真實世界認(rèn)知的方式；

• 回退原則：比如編輯類軟件的撤銷功能，例如Word、美圖秀秀等，用戶會不小心操作錯誤，系統(tǒng)需要支持恢復(fù)到錯誤發(fā)生之前的狀態(tài)；
• 一致原則：比如在App底部的導(dǎo)航圖標(biāo)中，“首頁”永遠(yuǎn)排在第一個，個人中心“我的”永遠(yuǎn)排在最后，大家都已經(jīng)習(xí)慣的一些規(guī)范最好遵循慣例，不盲目標(biāo)新立異，保持系統(tǒng)的一致感；
• 防錯原則：比如有時為了防止用戶重復(fù)提交或重復(fù)點擊，第一次點擊按鈕后就將按鈕置灰，直到處理完成才恢復(fù)，盡量避免錯誤發(fā)生，影響客戶接下來的流程使用；
• 記憶原則：比如幾乎所有的App和PC端的搜索引擎都會記錄用戶的搜索歷史并呈現(xiàn)給用戶，減輕用戶的記憶負(fù)擔(dān)；
• 靈活易用原則：比如Word的自定義功能，提供了非常強的配置能力，用戶可以對Word的界面實現(xiàn)顛覆性的重新設(shè)置，當(dāng)然也不是說系統(tǒng)一定要做到這種自定義配置程度，但要支持大部分用戶的需求，讓他們用起來得心應(yīng)手，同時也要提供必要的幫助，協(xié)助剛?cè)腴T的用戶順利上手；
• 簡約設(shè)計原則：比如下圖所示一份停機(jī)通知，左側(cè)只突出了停機(jī)這件事和停機(jī)時間，右側(cè)突出標(biāo)記了更多內(nèi)容，但用戶反而無法一下子抓住真正的重點，重點太多相當(dāng)于沒有重點，要掌握好突出標(biāo)記的“度”；

• 容錯原則：比如訪問網(wǎng)站時，若頁面不存在，服務(wù)器提供的標(biāo)準(zhǔn)錯誤提示是404錯誤，很多用戶并不理解404是什么意思，需將其優(yōu)化為如：抱歉，網(wǎng)站維護(hù)中，請稍后訪問；錯誤信息應(yīng)該用通俗易懂的語言說明，并且在提出錯誤信息時要給出解決建議；
• 幫助原則：比如數(shù)據(jù)服務(wù)（API）管理類的B端產(chǎn)品，存在一定的技術(shù)門檻、有些業(yè)務(wù)流程較復(fù)雜，需要通過幫助文檔查詢明確的使用說明，引導(dǎo)用戶解決問題，幫助信息應(yīng)該易于搜索，不要太復(fù)雜，便于閱讀理解；

大家如果感興趣，可以詳細(xì)查詢下尼爾森十大原則，這里僅做了簡單舉例。

以上就是我在產(chǎn)品詳細(xì)設(shè)計時，常用的思路流程，希望對你有幫助，歡迎大家一起交流學(xué)習(xí)呀~