起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端產品設計工作流四步法
編輯導語：產品經理的日常工作之一是產品設計，在做原型設計中，你是否會遇到一些困難，難以繼續進行下去？這時候，我們可以按照工作流的四步法走，防止在工作中遺漏一些細節。
產品經理的日常工作之一是產品設計，在做原型設計工作中，你是否曾經遇到過下面這些問題：
- 考慮不周全，經常漏場景漏頁面；
- 缺乏設計思路，不知道要怎么畫；或者知道怎么畫，卻不清楚為什么要這么畫；
- 好不容易原型demo做好了，給客戶演示時，客戶卻說不是他們想要的……
出現上面這些問題，除原型工具掌握不熟練外，還有一個更重要的原因，就是沒有形成自己的原型設計基本流程，缺乏思考框架，跟著感覺畫原型。
今天我用一個案例模擬如何從一個需求轉化成可實施的產品原型設的。
項目背景：
因為疫情形勢加劇，某鎮級領導接到上級指示，要求全鎮做核酸檢測，鎮級領導的需求比較明確，一是通過登記、報道掃碼，讓居民補充信息，方便統計做核酸人數；
二是想要通過想通過全員核酸檢測，摸查全鎮人員底數，補充各個鎮街的人員基礎信息臺賬。
一、分析業務—業務流程圖
這一階段是根據調研的結果和資料，開始做初步業務分析，梳理出它的業務流程，這是對業務事件和不同角色間，通過信息流動和交互方式的一種表達，對應的交付物就是業務流程圖。
1. 我們要做的是什么？
一個核酸檢測登記報道管理的系統，包括移動端和管理端，移動端方便用戶登記，管理端方便數據管理和統計。
2. 有哪些角色參與？
所有居民和村民；各個村居的工作人員；鎮級領導。
3. 業務的交互節點是什么？
登記的信息和報道的信息如何進入人員信息庫。
4. 涉及到的業務流程是什么？
信息登記流程、核酸報道流程。
簡略的業務流程圖示例
5. 用戶使用場景有哪些？
（1）信息登記流程的使用場景
各個村居工作人員將信息登記碼下發到各個社區的社區交流群，告知大家在去現場做核酸之前先登記信息再去現場檢測，目的是能幫助居民現場快速通過。
（2）核酸報道流程的使用場景
在核酸檢測現場，各個社區分管自己社區的居民，將檢測報道碼放在現場，讓居民掃碼獲取結果頁，以此為憑證，排隊做檢測。
（3）業務數據后臺的使用場景
領導可以在后臺方便統計各個村居登記和報道的人數，包括是臺賬已有數據，還是補錄信息。通過報道的人數可統計到各個村居做核酸的人數等。
二、轉化功能—樹狀思維導圖
根據上一步的業務分析，我們需要定義MVP（最小可行性產品）所需的需求清單和功能清單，并排列好優先級。
這時候根據實際情況可加入競品分析和用戶調研的工作，總之圍繞“解決用戶什么問題”來設計功能結構，我們輸出的交付物就是樹狀結構的思維導圖。
但是信息架構和功能結構有所區別，信息架構幫助我們全局了解產品的信息脈絡；功能結構能清晰地告訴我們產品有哪些具體的功能和子功能。
簡略的功能結構圖示例
簡略的信息架構圖示例
比如移動端掃碼登記中，我們描述頁面信息結構、信息字段屬于信息架構圖，比如登錄頁的「手機號」、「驗證碼」屬于信息架構里面的；描述具體功能屬于功能結構，比如登錄頁面的手機號驗證登錄功能。
三、邏輯閉環—頁面流程圖
通過業務流程和功能結構，就可以進一步明確頁面流程了，面流程圖是業務流程圖和原型圖的中間階段，它能夠做到的是幫助我們梳理有多少頁面，頁面之間的關聯是什么，能夠有效減少邏輯漏洞和頁面遺漏，這個階段的交付物就是頁面流程圖了。
頁面流程圖包含什么？
- 四方形：業務流程中四方形部分，異常一流程為tip或者彈框。
- 流向：主干流向和輔助流程。
- 重點元素：每個流程中，重點要體現和表達的內容是什么？
簡略的頁面流程圖
以項目為例，比如用戶信息掃碼登記，第一個頁面是用戶手機號驗證登錄；第二個頁面是用戶信息獲取頁面。
這里會有3個分支頁面，數據庫有用戶信息，直接獲取確認登記的頁面。
數據庫數據有誤，重新登記的頁面；若數據庫無用戶信息，補錄登記的頁面。
登記確認需要有一個結果頁，這就是掃碼登記頁面的頁面流程圖的思考路徑。
四、功能交互—產品原型圖
這一步就是使用工具畫原型，做交互原型設計了。很多公司功能設計和交互設計都是產品經理一人完成的，大的公司可能有專門的交互設計團隊。
關于如何去做產品原型圖，我分為四個關鍵步驟：
（1）選擇合適的組件庫
這些根據我們要做的產品類型去選擇對應的組件，比如我做的是小程序端的，直接應用小程序組件框架，這樣只需要設計核心內容元素就可以了。
（2）根據頁面流程圖，搭建每個頁面的元素
以項目為例，比如上面提到的用戶信息掃碼登記，第一個頁面的關鍵元素：手機號、驗證碼、獲取驗證碼、確認登錄這些關鍵元素，組合在一起就搭建成了第一個核心頁面。
（3）結合頁面之間的關系，建立跳轉鏈接
這塊是將我們靜態的原型通過鏈接，可以將其轉化成動態交互的demo。
（4）標注說明，補充需求細節
標注注意不同角色關注的內容不一樣，開發關注“邊界條件”、“頁面跳轉”；設計最關心的有頁面數量和功能是否遺漏。
簡略的原型線框圖
一個好的標注有以下幾個條件：
- 標注點的含義，發生的事件；
- 用梳理所有對象和邏輯關系、狀態；
- 模塊化區分和標記。
每個功能可以做成一個用例，通過用例名、用例編號、角色、簡要說明、主流事件、異常和分支事件流、前置條件、后置條件將齊規則細化。
1. B端產品設計的要點
（1）清晰
界面主次分明，對于核心用戶，很容易判斷自己在當前頁面能干什么，核心信息清晰一道，語句簡介無歧義，不會讓用戶感到迷茫和不知所措。
（2）高效
比如，依靠內容或設定的業務邏輯自動進行關聯的操作，比如我們數據能夠識別和新用戶行為，并在他們操作時給予對應的推薦；盡量減少跳頁操作，對于80%的操作或者需要的信息，需要3次點擊以內就能夠到達。
（3）一致性
1）業務邏輯的一致性：不同模塊或頁面的同類功能，你是否有同樣的操作？同樣的定義是否使用了同樣的標題或者文案。
2）結構層框架層的一致性：即各級導航菜單的結構、頁面的框架和布局等。比如操作區域是位于頁面右側還是下方；新增是跳轉還是彈出框等。
3）表現層的一致性，即核心控件、元素、交互動作是否一致：包括視覺和交互樣式。如常用的空間按鈕圖標彈框、點擊效果、滑動效果等。
4.美觀。
美觀是提升體驗、激發愉悅感的重要手段。美觀是仁者見仁，智者見智的，很難達到一個統一的標準，但是也存在一些較寬泛的準則：頁面信息的易讀性；色彩的統一性與協調性；布局的協調性，主次分明等。
五、寫在最后
產品設計是產品經理的工作重點，既要考驗調研能力、需求識別能力、需求分析轉化的能力，也要考驗產品場景化思維和邏輯閉環能力，還要考慮界面設計和交互能力，還有的會涉及到數據埋點、數據監測策略等。
表面看只是輸出一個原型而已，實際上原型只是最終的一個呈現，過程中經過產品經理大量的思考和分析。
以上是一個工作流的簡單示例，希望能對你有所啟發～
作者：美玉姐姐，一枚成長中的B端產品經理。公眾號：Beryl的產品世界
本文由 @美玉姐姐? 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
業務的交互節點是指什么？可以解答下么？謝謝
案例場景基本都是C端的，和B端還是有很大差別。B端會注重后臺系統的分析和搭建。
您好美玉姐姐，業務的交互節點，指的是什么呀？能不能詳細說說
看過非常有收獲，功能原型設計思路很清晰。
需求分析就應該是這樣的，這也是我一直都想要追尋的
我們都是一有新需求，直接畫原型的??
直接畫原型，很容易漏掉一些異常分支和功能點，返工成本比較高，可以嘗試按照四個步驟來做～
謝謝大佬！
不用謝，一起加油！
漲知識了，謝謝??
不用謝，一起加油！