編輯導(dǎo)語(yǔ)：產(chǎn)品詳細(xì)設(shè)計(jì)，是對(duì)產(chǎn)品的具象化呈現(xiàn)，是向研發(fā)團(tuán)隊(duì)展示產(chǎn)品的實(shí)現(xiàn)邏輯、業(yè)務(wù)規(guī)則等內(nèi)容。本文作者從建立業(yè)務(wù)模型、確認(rèn)系統(tǒng)底層結(jié)構(gòu)、系統(tǒng)操作流程三個(gè)步驟，拆解了“詳細(xì)設(shè)計(jì)”，希望看后對(duì)你的B端產(chǎn)品設(shè)計(jì)會(huì)有所幫助。

在整體解決方案中完成了產(chǎn)品定位和規(guī)劃等工作（整體方案詳見上一篇），也明確了產(chǎn)品在不同階段分別要實(shí)現(xiàn)的功能模塊，接下來的產(chǎn)品詳細(xì)設(shè)計(jì)由此展開。

什么是產(chǎn)品詳細(xì)設(shè)計(jì)？是對(duì)產(chǎn)品的具象化呈現(xiàn)，是向研發(fā)團(tuán)隊(duì)展示產(chǎn)品的實(shí)現(xiàn)邏輯、業(yè)務(wù)規(guī)則等內(nèi)容。在呈現(xiàn)內(nèi)容上需要保持簡(jiǎn)潔明了，將復(fù)雜的邏輯通俗且直觀的表達(dá)出來，讓其他成員更容易理解。

在實(shí)際操作中，我們可以通過3個(gè)步驟依次分解：

1. 通過“建立業(yè)務(wù)模型”確認(rèn)系統(tǒng)底層結(jié)構(gòu)；
2. 通過“系統(tǒng)操作流程”描述用戶執(zhí)行任務(wù)的路徑；
3. 通過“繪制產(chǎn)品原型”呈現(xiàn)產(chǎn)品的界面、交互、規(guī)則。

接下來開始我的表演。

一、建立業(yè)務(wù)模型

建系統(tǒng)猶如建房子，先確定房子的框架，然后打地基、搭鋼架、添磚加瓦。

在整體方案中確定了系統(tǒng)框架，詳細(xì)設(shè)計(jì)將從打地基開始，而不是一上來就添磚加瓦。建立業(yè)務(wù)模型就是系統(tǒng)的“打地基”，直接影響系統(tǒng)底層結(jié)構(gòu)。后續(xù)的詳細(xì)設(shè)計(jì)是在業(yè)務(wù)模型下進(jìn)行拓展，如果業(yè)務(wù)模型設(shè)計(jì)偏差，系統(tǒng)從開始也就歪了。

注意：一旦底層的業(yè)務(wù)模型涉及大范圍調(diào)整，則后續(xù)設(shè)計(jì)和開發(fā)都將受到嚴(yán)重影響。業(yè)務(wù)模型的建立也是對(duì)底層數(shù)據(jù)歸類的過程，可以從3個(gè)步驟來實(shí)現(xiàn)，并通過ER圖或其他方式進(jìn)行展示。

1. 要素抽離：根據(jù)之前梳理的業(yè)務(wù)流程進(jìn)行再次抽象，提取流程中出現(xiàn)的關(guān)鍵業(yè)務(wù)要素；
2. 2找準(zhǔn)關(guān)系：羅列關(guān)鍵業(yè)務(wù)要素，結(jié)合業(yè)務(wù)邏輯找到關(guān)鍵要素之間的關(guān)聯(lián)關(guān)系；
3. 設(shè)計(jì)模型：考慮業(yè)務(wù)訴求、資源限制、系統(tǒng)拓展性等情況，設(shè)計(jì)出對(duì)應(yīng)模型。同時(shí)配備對(duì)應(yīng)文字解讀，避免看圖出現(xiàn)遺漏信息。

舉例：Z公司TMS項(xiàng)目中，通過訪談方式對(duì)業(yè)務(wù)流程進(jìn)行了全面梳理。部分業(yè)務(wù)流程為：計(jì)劃員創(chuàng)建運(yùn)單任務(wù)（訂單），調(diào)度員根據(jù)訂單的運(yùn)輸量、物料等要素對(duì)運(yùn)單進(jìn)行拆分或合并，再根據(jù)承運(yùn)資源池中不同車輛任務(wù)分配情況指派給對(duì)應(yīng)司機(jī)生成車次。

在梳理過程中找到了諸多要素，部分關(guān)鍵要素為：訂單、運(yùn)單、車次。下圖以簡(jiǎn)化版的業(yè)務(wù)模型為例，看看不同圖形表達(dá)的呈現(xiàn)效果。

圖1

圖2

上圖中，業(yè)務(wù)模型想要表達(dá)以下信息：

1. 1個(gè)訂單可以和1個(gè)或多個(gè)運(yùn)單進(jìn)行關(guān)聯(lián)；
2. 1個(gè)或多個(gè)運(yùn)單可以和1個(gè)車次進(jìn)行關(guān)聯(lián)；
3. 來自不同訂單產(chǎn)生的運(yùn)單可以關(guān)聯(lián)到同1個(gè)車次。

二、系統(tǒng)操作流程

經(jīng)過業(yè)務(wù)模型了解了業(yè)務(wù)關(guān)鍵要素關(guān)系，接下來可以著手系統(tǒng)操作流程設(shè)計(jì)。流程合理、角色任務(wù)清晰是系統(tǒng)設(shè)計(jì)成功的前提。我們應(yīng)遵循從業(yè)務(wù)起點(diǎn)至終點(diǎn)、從主流業(yè)務(wù)到分支業(yè)務(wù)、從正向流程到逆向流程的設(shè)計(jì)思路，同時(shí)考慮各任務(wù)的邏輯先后順序和依賴關(guān)系。

系統(tǒng)操作和業(yè)務(wù)是存在著對(duì)應(yīng)關(guān)系，都是由一個(gè)個(gè)任務(wù)銜接而成，可以從角色和任務(wù)2個(gè)維度來拆解，并通過跨部門流程圖+備注進(jìn)行展示。單個(gè)環(huán)節(jié)可以從以下4點(diǎn)細(xì)化：

1. 參與角色：對(duì)應(yīng)任務(wù)的參與角色，包含了人員或物體（如設(shè)備、單據(jù)等）；
2. 任務(wù)觸發(fā)：滿足什么樣的條件來觸發(fā)對(duì)應(yīng)任務(wù)的執(zhí)行，如預(yù)設(shè)的執(zhí)行時(shí)間、上游的輸出物等；
3. 任務(wù)執(zhí)行：在當(dāng)前任務(wù)中，參與角色需要完成的事項(xiàng)；
4. 結(jié)果輸出：事項(xiàng)完成后產(chǎn)生了什么交付物，并通過什么方式向下游進(jìn)行傳遞。

系統(tǒng)操作流程確定后就可以繪制頁(yè)面流轉(zhuǎn)圖，即用戶完成對(duì)應(yīng)任務(wù)需要訪問的頁(yè)面及頁(yè)面跳轉(zhuǎn)的順序，頁(yè)面流轉(zhuǎn)圖可以更好的幫助團(tuán)隊(duì)成員理解用戶的操作行為路徑。

舉例：Z公司TMS項(xiàng)目中，通過對(duì)業(yè)務(wù)模型的完善，接下來對(duì)訂單、運(yùn)單、車次的簡(jiǎn)化版系統(tǒng)操作進(jìn)行描述。我們通過Visio的多泳道流程圖來呈現(xiàn)，并配上關(guān)鍵節(jié)點(diǎn)的文字描述。

1. 創(chuàng)建訂單

• 角色：計(jì)劃員
• 描述：通過在系統(tǒng)后臺(tái)手動(dòng)創(chuàng)建，或者是通過Excel表單導(dǎo)入，把排產(chǎn)計(jì)劃轉(zhuǎn)變?yōu)橛唵巍?/li>

2. 訂單審核

• 角色：計(jì)劃員
• 描述：訂單創(chuàng)建之后，需要管理員進(jìn)行審核，確認(rèn)訂單內(nèi)容沒有錯(cuò)誤審核通過之后，系統(tǒng)會(huì)自動(dòng)生成運(yùn)單。

3. 運(yùn)單拆分

• 角色：調(diào)度員
• 描述：運(yùn)單生成之后，當(dāng)運(yùn)單的物料過多，一輛車裝不下的時(shí)候，可以進(jìn)行運(yùn)單拆分，將運(yùn)單拆為多單。

4. 運(yùn)單指派

• 角色：調(diào)度員
• 描述：運(yùn)單確認(rèn)無誤后，可以指派對(duì)應(yīng)的車輛和司機(jī)去執(zhí)行這個(gè)運(yùn)單。支持1單1車和多單1車。

5. 調(diào)度審核

• 角色：調(diào)度員
• 描述：審核運(yùn)單指派的車輛和司機(jī)，確認(rèn)調(diào)度無誤后即可執(zhí)行。

6. 生成車次

• 角色：調(diào)度員
• 描述：運(yùn)單指派審核通過之后，系統(tǒng)自動(dòng)生成車次。同時(shí)支持打印派車單。

7. 運(yùn)輸執(zhí)行

• 角色：司機(jī)
• 描述：司機(jī)接到車次任務(wù)之后進(jìn)入運(yùn)輸執(zhí)行環(huán)節(jié)。包含到達(dá)取貨點(diǎn)、已裝車、到達(dá)送貨點(diǎn)、已簽收等多個(gè)環(huán)節(jié)。

三、繪制產(chǎn)品原型

經(jīng)過了業(yè)務(wù)模型、系統(tǒng)操作流程、頁(yè)面流轉(zhuǎn)圖等相關(guān)內(nèi)容的輸出，已經(jīng)做到了對(duì)產(chǎn)品從全局到細(xì)節(jié)的全面了解，最后輸出PRD交付研發(fā)團(tuán)隊(duì)即可。

產(chǎn)品原型是PRD的重要組成部分之一，原型需要將系統(tǒng)頁(yè)面元素和排版、交互效果、系統(tǒng)規(guī)則等信息通過簡(jiǎn)單明了的方式進(jìn)行展現(xiàn)，幫助團(tuán)隊(duì)成員更好地理解需要實(shí)現(xiàn)的效果。

原型工具有很多，如Axure、墨刀、摹客等。

在繪制原型圖時(shí)將需要的元素和排版表達(dá)到位即可，堪比UI稿的高保真原型是沒有必要的。比如配色可使用黑、白、灰、藍(lán)、紅進(jìn)行表達(dá)，復(fù)雜配色對(duì)研發(fā)和UI團(tuán)隊(duì)來說并不一定友好，同時(shí)也會(huì)消耗自己大量的時(shí)間資源。

B端產(chǎn)品系統(tǒng)主要由4類頁(yè)面組成，通過了解頁(yè)面類型設(shè)計(jì)時(shí)可以結(jié)構(gòu)化的組織信息，便于向用戶提供可預(yù)期的操作，降低使用成本。如下：

• 表單頁(yè)：用戶在系統(tǒng)中進(jìn)行新增、刪除、修改等提交信息動(dòng)作的操作頁(yè)面。如登錄頁(yè)，提交用戶名和密碼；
• 詳情頁(yè)：系統(tǒng)向用戶展示對(duì)應(yīng)詳細(xì)信息的頁(yè)面。如任務(wù)詳情頁(yè)，展示任務(wù)編號(hào)、時(shí)間、狀態(tài)、內(nèi)容等信息；
• 列表頁(yè)：系統(tǒng)向用戶展示對(duì)應(yīng)同類型的數(shù)據(jù)信息。如任務(wù)列表頁(yè)，展示編號(hào)、名稱、狀態(tài)、操作等字段；
• 圖表頁(yè)：系統(tǒng)向用戶展示綜合型頁(yè)面，此類頁(yè)面多有圖形和表單構(gòu)成，常見如數(shù)據(jù)分析頁(yè)面。

舉例：Z公司TMS項(xiàng)目中，以運(yùn)單管理為例展示運(yùn)單列表頁(yè)、運(yùn)單詳情頁(yè)、指派司機(jī)彈窗的原型及對(duì)應(yīng)規(guī)則備注（示例中的原型和規(guī)則備注方式還可以進(jìn)行優(yōu)化）。

圖1：運(yùn)單列表頁(yè)

圖2 ：運(yùn)單詳情頁(yè)

圖3：指派司機(jī)彈窗

交互設(shè)計(jì)關(guān)注點(diǎn)：

• 遵循“尼爾森十大可用性原則”：從多個(gè)方面保障交互的合理性、可用性、友好性，甚至可以在設(shè)計(jì)完成后進(jìn)行復(fù)查；
• 不建議設(shè)計(jì)復(fù)雜交互：B端產(chǎn)品目的在于幫助企業(yè)解決業(yè)務(wù)問題，交互優(yōu)先級(jí)并不高，復(fù)雜交互不利于用戶操作同時(shí)也過多占用研發(fā)資源；
• 采用標(biāo)準(zhǔn)模板和控件：行業(yè)內(nèi)會(huì)很多成熟的商業(yè)軟件，獲得了用戶認(rèn)可，可以借鑒系統(tǒng)布局、交互方式等，幫助提高設(shè)計(jì)效率。

以上。

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

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