編輯導(dǎo)語：產(chǎn)品經(jīng)理的日常工作之一是產(chǎn)品設(shè)計(jì)，在做原型設(shè)計(jì)中，你是否會遇到一些困難，難以繼續(xù)進(jìn)行下去？這時候，我們可以按照工作流的四步法走，防止在工作中遺漏一些細(xì)節(jié)。

產(chǎn)品經(jīng)理的日常工作之一是產(chǎn)品設(shè)計(jì)，在做原型設(shè)計(jì)工作中，你是否曾經(jīng)遇到過下面這些問題：

• 考慮不周全，經(jīng)常漏場景漏頁面；
• 缺乏設(shè)計(jì)思路，不知道要怎么畫；或者知道怎么畫，卻不清楚為什么要這么畫；
• 好不容易原型demo做好了，給客戶演示時，客戶卻說不是他們想要的……

出現(xiàn)上面這些問題，除原型工具掌握不熟練外，還有一個更重要的原因，就是沒有形成自己的原型設(shè)計(jì)基本流程，缺乏思考框架，跟著感覺畫原型。

今天我用一個案例模擬如何從一個需求轉(zhuǎn)化成可實(shí)施的產(chǎn)品原型設(shè)的。

項(xiàng)目背景：

因?yàn)橐咔樾蝿菁觿?，某?zhèn)級領(lǐng)導(dǎo)接到上級指示，要求全鎮(zhèn)做核酸檢測，鎮(zhèn)級領(lǐng)導(dǎo)的需求比較明確，一是通過登記、報道掃碼，讓居民補(bǔ)充信息，方便統(tǒng)計(jì)做核酸人數(shù)；

二是想要通過想通過全員核酸檢測，摸查全鎮(zhèn)人員底數(shù)，補(bǔ)充各個鎮(zhèn)街的人員基礎(chǔ)信息臺賬。

一、分析業(yè)務(wù)—業(yè)務(wù)流程圖

這一階段是根據(jù)調(diào)研的結(jié)果和資料，開始做初步業(yè)務(wù)分析，梳理出它的業(yè)務(wù)流程，這是對業(yè)務(wù)事件和不同角色間，通過信息流動和交互方式的一種表達(dá)，對應(yīng)的交付物就是業(yè)務(wù)流程圖。

1. 我們要做的是什么？

一個核酸檢測登記報道管理的系統(tǒng)，包括移動端和管理端，移動端方便用戶登記，管理端方便數(shù)據(jù)管理和統(tǒng)計(jì)。

2. 有哪些角色參與？

所有居民和村民；各個村居的工作人員；鎮(zhèn)級領(lǐng)導(dǎo)。

3. 業(yè)務(wù)的交互節(jié)點(diǎn)是什么？

登記的信息和報道的信息如何進(jìn)入人員信息庫。

4. 涉及到的業(yè)務(wù)流程是什么？

信息登記流程、核酸報道流程。

簡略的業(yè)務(wù)流程圖示例

5. 用戶使用場景有哪些？

（1）信息登記流程的使用場景

各個村居工作人員將信息登記碼下發(fā)到各個社區(qū)的社區(qū)交流群，告知大家在去現(xiàn)場做核酸之前先登記信息再去現(xiàn)場檢測，目的是能幫助居民現(xiàn)場快速通過。

（2）核酸報道流程的使用場景

在核酸檢測現(xiàn)場，各個社區(qū)分管自己社區(qū)的居民，將檢測報道碼放在現(xiàn)場，讓居民掃碼獲取結(jié)果頁，以此為憑證，排隊(duì)做檢測。

（3）業(yè)務(wù)數(shù)據(jù)后臺的使用場景

領(lǐng)導(dǎo)可以在后臺方便統(tǒng)計(jì)各個村居登記和報道的人數(shù)，包括是臺賬已有數(shù)據(jù)，還是補(bǔ)錄信息。通過報道的人數(shù)可統(tǒng)計(jì)到各個村居做核酸的人數(shù)等。

二、轉(zhuǎn)化功能—樹狀思維導(dǎo)圖

根據(jù)上一步的業(yè)務(wù)分析，我們需要定義MVP（最小可行性產(chǎn)品）所需的需求清單和功能清單，并排列好優(yōu)先級。

這時候根據(jù)實(shí)際情況可加入競品分析和用戶調(diào)研的工作，總之圍繞“解決用戶什么問題”來設(shè)計(jì)功能結(jié)構(gòu)，我們輸出的交付物就是樹狀結(jié)構(gòu)的思維導(dǎo)圖。

但是信息架構(gòu)和功能結(jié)構(gòu)有所區(qū)別，信息架構(gòu)幫助我們?nèi)至私猱a(chǎn)品的信息脈絡(luò)；功能結(jié)構(gòu)能清晰地告訴我們產(chǎn)品有哪些具體的功能和子功能。

簡略的功能結(jié)構(gòu)圖示例

簡略的信息架構(gòu)圖示例

比如移動端掃碼登記中，我們描述頁面信息結(jié)構(gòu)、信息字段屬于信息架構(gòu)圖，比如登錄頁的「手機(jī)號」、「驗(yàn)證碼」屬于信息架構(gòu)里面的；描述具體功能屬于功能結(jié)構(gòu)，比如登錄頁面的手機(jī)號驗(yàn)證登錄功能。

三、邏輯閉環(huán)—頁面流程圖

通過業(yè)務(wù)流程和功能結(jié)構(gòu)，就可以進(jìn)一步明確頁面流程了，面流程圖是業(yè)務(wù)流程圖和原型圖的中間階段，它能夠做到的是幫助我們梳理有多少頁面，頁面之間的關(guān)聯(lián)是什么，能夠有效減少邏輯漏洞和頁面遺漏，這個階段的交付物就是頁面流程圖了。

頁面流程圖包含什么？

• 四方形：業(yè)務(wù)流程中四方形部分，異常一流程為tip或者彈框。
• 流向：主干流向和輔助流程。
• 重點(diǎn)元素：每個流程中，重點(diǎn)要體現(xiàn)和表達(dá)的內(nèi)容是什么？

簡略的頁面流程圖

以項(xiàng)目為例，比如用戶信息掃碼登記，第一個頁面是用戶手機(jī)號驗(yàn)證登錄；第二個頁面是用戶信息獲取頁面。

這里會有3個分支頁面，數(shù)據(jù)庫有用戶信息，直接獲取確認(rèn)登記的頁面。

數(shù)據(jù)庫數(shù)據(jù)有誤，重新登記的頁面；若數(shù)據(jù)庫無用戶信息，補(bǔ)錄登記的頁面。

登記確認(rèn)需要有一個結(jié)果頁，這就是掃碼登記頁面的頁面流程圖的思考路徑。

四、功能交互—產(chǎn)品原型圖

這一步就是使用工具畫原型，做交互原型設(shè)計(jì)了。很多公司功能設(shè)計(jì)和交互設(shè)計(jì)都是產(chǎn)品經(jīng)理一人完成的，大的公司可能有專門的交互設(shè)計(jì)團(tuán)隊(duì)。

關(guān)于如何去做產(chǎn)品原型圖，我分為四個關(guān)鍵步驟：

（1）選擇合適的組件庫

這些根據(jù)我們要做的產(chǎn)品類型去選擇對應(yīng)的組件，比如我做的是小程序端的，直接應(yīng)用小程序組件框架，這樣只需要設(shè)計(jì)核心內(nèi)容元素就可以了。

（2）根據(jù)頁面流程圖，搭建每個頁面的元素

以項(xiàng)目為例，比如上面提到的用戶信息掃碼登記，第一個頁面的關(guān)鍵元素：手機(jī)號、驗(yàn)證碼、獲取驗(yàn)證碼、確認(rèn)登錄這些關(guān)鍵元素，組合在一起就搭建成了第一個核心頁面。

（3）結(jié)合頁面之間的關(guān)系，建立跳轉(zhuǎn)鏈接

這塊是將我們靜態(tài)的原型通過鏈接，可以將其轉(zhuǎn)化成動態(tài)交互的demo。

（4）標(biāo)注說明，補(bǔ)充需求細(xì)節(jié)

標(biāo)注注意不同角色關(guān)注的內(nèi)容不一樣，開發(fā)關(guān)注“邊界條件”、“頁面跳轉(zhuǎn)”；設(shè)計(jì)最關(guān)心的有頁面數(shù)量和功能是否遺漏。

簡略的原型線框圖

一個好的標(biāo)注有以下幾個條件：

1. 標(biāo)注點(diǎn)的含義，發(fā)生的事件；
2. 用梳理所有對象和邏輯關(guān)系、狀態(tài)；
3. 模塊化區(qū)分和標(biāo)記。

每個功能可以做成一個用例，通過用例名、用例編號、角色、簡要說明、主流事件、異常和分支事件流、前置條件、后置條件將齊規(guī)則細(xì)化。

1. B端產(chǎn)品設(shè)計(jì)的要點(diǎn)

（1）清晰

界面主次分明，對于核心用戶，很容易判斷自己在當(dāng)前頁面能干什么，核心信息清晰一道，語句簡介無歧義，不會讓用戶感到迷茫和不知所措。

（2）高效

比如，依靠內(nèi)容或設(shè)定的業(yè)務(wù)邏輯自動進(jìn)行關(guān)聯(lián)的操作，比如我們數(shù)據(jù)能夠識別和新用戶行為，并在他們操作時給予對應(yīng)的推薦；盡量減少跳頁操作，對于80%的操作或者需要的信息，需要3次點(diǎn)擊以內(nèi)就能夠到達(dá)。

（3）一致性

1）業(yè)務(wù)邏輯的一致性：不同模塊或頁面的同類功能，你是否有同樣的操作？同樣的定義是否使用了同樣的標(biāo)題或者文案。

2）結(jié)構(gòu)層框架層的一致性：即各級導(dǎo)航菜單的結(jié)構(gòu)、頁面的框架和布局等。比如操作區(qū)域是位于頁面右側(cè)還是下方；新增是跳轉(zhuǎn)還是彈出框等。

3）表現(xiàn)層的一致性，即核心控件、元素、交互動作是否一致：包括視覺和交互樣式。如常用的空間按鈕圖標(biāo)彈框、點(diǎn)擊效果、滑動效果等。

4.美觀。

美觀是提升體驗(yàn)、激發(fā)愉悅感的重要手段。美觀是仁者見仁，智者見智的，很難達(dá)到一個統(tǒng)一的標(biāo)準(zhǔn)，但是也存在一些較寬泛的準(zhǔn)則：頁面信息的易讀性；色彩的統(tǒng)一性與協(xié)調(diào)性；布局的協(xié)調(diào)性，主次分明等。

五、寫在最后

產(chǎn)品設(shè)計(jì)是產(chǎn)品經(jīng)理的工作重點(diǎn)，既要考驗(yàn)調(diào)研能力、需求識別能力、需求分析轉(zhuǎn)化的能力，也要考驗(yàn)產(chǎn)品場景化思維和邏輯閉環(huán)能力，還要考慮界面設(shè)計(jì)和交互能力，還有的會涉及到數(shù)據(jù)埋點(diǎn)、數(shù)據(jù)監(jiān)測策略等。

表面看只是輸出一個原型而已，實(shí)際上原型只是最終的一個呈現(xiàn)，過程中經(jīng)過產(chǎn)品經(jīng)理大量的思考和分析。

以上是一個工作流的簡單示例，希望能對你有所啟發(fā)～

作者：美玉姐姐，一枚成長中的B端產(chǎn)品經(jīng)理。公眾號：Beryl的產(chǎn)品世界

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

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