本篇（原型篇-下）主要內(nèi)容：

• 原型圖標(biāo)注，畫(huà)開(kāi)發(fā)看得懂的圖

• 同一個(gè)頁(yè)面展示所有的交互狀態(tài)

• 頁(yè)面跳轉(zhuǎn)關(guān)系圖（不要做孤立的設(shè)計(jì)）

• 流程圖，梳理業(yè)務(wù)邏輯

一、原型圖標(biāo)注，畫(huà)開(kāi)發(fā)看得懂的圖

首先明確原型圖標(biāo)注是給誰(shuí)看的，誰(shuí)最關(guān)心原型標(biāo)準(zhǔn)呢？一般而言，開(kāi)發(fā)和設(shè)計(jì)最關(guān)心原型圖標(biāo)注，開(kāi)發(fā)最關(guān)心的是邊界條件、頁(yè)面跳轉(zhuǎn)關(guān)系，而設(shè)計(jì)最關(guān)心有頁(yè)面和功能遺漏，如反饋狀態(tài)和空頁(yè)面。畫(huà)出功能的所有交互狀態(tài)，清晰地顯性化表示交互狀態(tài)是作為交互或產(chǎn)品的基本功。一個(gè)好的標(biāo)注滿足以下幾個(gè)條件：

• 標(biāo)注點(diǎn)的含義，發(fā)生的事件

• 用梳理所有對(duì)象和邏輯關(guān)系、狀態(tài)

• 模塊化區(qū)分和標(biāo)記

定義好每個(gè)標(biāo)注點(diǎn)的含義和事件

在做交互稿標(biāo)記之前，定義規(guī)范好每個(gè)標(biāo)記的含義，形成統(tǒng)一的規(guī)范，使得團(tuán)隊(duì)成員易于理解。如，我比較喜歡用水滴表示標(biāo)注的功能，用圓圈+箭頭的形式來(lái)標(biāo)識(shí)頁(yè)面跳轉(zhuǎn)關(guān)系。

用腦圖梳理所有對(duì)象和邏輯關(guān)系、狀態(tài)

下面的原型圖標(biāo)注以在餓了么商家詳情頁(yè)結(jié)算訂單為例，先用思維腦圖梳理功能狀態(tài)，這樣能避免遺漏一些邊界條件。

模塊化區(qū)分和標(biāo)記

梳理好狀態(tài)后再在原型圖上寫(xiě)產(chǎn)品用例，每個(gè)功能做成一個(gè)模塊，有利于往后的維護(hù)和迭代，例如下面是餓了么的訂單結(jié)算功能

二、同一個(gè)頁(yè)面展示所有的交互狀態(tài)

很多的開(kāi)發(fā)和設(shè)計(jì)，很多耐心看原型圖上的各種標(biāo)注，特別是時(shí)間一長(zhǎng)，標(biāo)注就非常多。如果是做版本的迭代，一要做好標(biāo)注的版本區(qū)分，讓他們第一眼能看到當(dāng)前版本要做的事情。如果是特別是復(fù)雜的功能，盡量在一個(gè)頁(yè)面上顯示出所有的交互狀態(tài)，避免在看原型圖時(shí)遺漏。有時(shí)候測(cè)試驗(yàn)收階段的很多坑，各種狀態(tài)一樓，其實(shí)是由于前期沒(méi)有做好標(biāo)注引起的。

下面以微信消息列表頁(yè)為例（梳理思路用腦圖是一個(gè)好習(xí)慣），先用腦圖畫(huà)出所有的狀態(tài)，補(bǔ)齊所有交互狀態(tài)，后面再畫(huà)的時(shí)候效率會(huì)高很多。

如下圖，為微信消息列表頁(yè)所有交互狀態(tài)的列表呈現(xiàn)：

三、頁(yè)面跳轉(zhuǎn)圖（不要做孤立的設(shè)計(jì)）

頁(yè)面跳轉(zhuǎn)圖，從用戶的視角，系統(tǒng)化看流程的合理性。頁(yè)面流程圖有助于梳理頁(yè)面之間的關(guān)系。交互設(shè)計(jì)師或產(chǎn)品經(jīng)理在工作中，很容易把一個(gè)功能做成“孤島型功能”，即這個(gè)功能跟其他功能建立聯(lián)系，跟其他功能是孤立的關(guān)系。

如在“美啊教育”中要增加一個(gè)評(píng)論功能，那么評(píng)論機(jī)制應(yīng)該怎么與現(xiàn)有系統(tǒng)對(duì)象建立聯(lián)系？在分析這個(gè)問(wèn)題之前先看看評(píng)論和教程的關(guān)系，如下圖：

教程中可以看到相關(guān)評(píng)論，評(píng)論系統(tǒng)與教程之間已建立聯(lián)系，但只是單線的關(guān)系。

我們?cè)倏纯疵腊∵@個(gè)產(chǎn)品中，還有什么對(duì)象是可以跟評(píng)論建立聯(lián)系的？假如，為了刺激用戶去評(píng)論，我們可以用積分獎(jiǎng)勵(lì)的方式，當(dāng)用戶評(píng)論教程后，可以獲取一定的積分，即教程-積分通過(guò)評(píng)論建立了聯(lián)系，跟現(xiàn)有的積分兌換優(yōu)惠券、商品也是有聯(lián)系的，仍是于是建立了用戶-教程，教程-積分，用戶-積分的關(guān)系，整個(gè)積分體系不再是孤立的功能。

用戶-教程

• 用戶去評(píng)論教程

• 教程的得分可以幫助用戶篩選出更優(yōu)質(zhì)的教程

教程-積分

• 通過(guò)評(píng)論教程可以獲得積分

• 積分可以免費(fèi)兌換觀看教程

用戶-積分

• 積分可以刺激用戶去評(píng)論

• 用戶用積分可以獲取商品，如優(yōu)惠券等

于是整個(gè)評(píng)論體系的頁(yè)面關(guān)系圖為（補(bǔ)充了部分可能存在的需求）：

四、流程圖，梳理業(yè)務(wù)邏輯關(guān)系

畫(huà)流程圖示產(chǎn)品經(jīng)理的基本功，產(chǎn)品需求，也是流程上的需求。畫(huà)流程圖的目的有以下幾點(diǎn)：

• 確保產(chǎn)品流程的合理性

• 有效傳達(dá)需求

• 檢驗(yàn)異常分支

在畫(huà)流程圖過(guò)程中，切勿遺漏異常狀態(tài)，產(chǎn)品經(jīng)理一般比較關(guān)心主要流程，可是開(kāi)發(fā)同學(xué)在寫(xiě)代碼時(shí)，要做條件邊界判斷，這個(gè)條件邊界即為異常情況。測(cè)試同學(xué)在寫(xiě)測(cè)試用例時(shí)，要窮盡所有的場(chǎng)景，包括正常場(chǎng)景和異常場(chǎng)景，否則出了問(wèn)題，是要背鍋的...為了避免開(kāi)發(fā)和測(cè)試同學(xué)不斷詢問(wèn)你邊界條件，最好在交付交互稿之前用流程圖梳理出來(lái)。

常用的流程圖分為單向流程圖和泳道圖（涉及到多個(gè)角色），單向流程圖一般描述單一角色完成某個(gè)任務(wù)的整體過(guò)程，如登錄注冊(cè)過(guò)程、支付流程、填寫(xiě)資料等。

流程圖包含以下內(nèi)容：

• 事項(xiàng)：用戶要完成什么任務(wù)

• 角色：分別會(huì)有哪些人會(huì)參與到流程中

• 信息傳遞：信息在整個(gè)過(guò)程中是如何傳遞的

• 異常：有哪些異常情況，如何處理

如快手的登錄注冊(cè)流程，先來(lái)梳理思路：

• 事項(xiàng)：用戶要完成快手的登錄注冊(cè)

• 角色：普通用戶

• 信息傳遞：在觸發(fā)登錄注冊(cè)框時(shí)，獲取用戶的注冊(cè)信息，檢驗(yàn)手機(jī)驗(yàn)證碼，關(guān)聯(lián)通訊錄數(shù)據(jù)，獲得第三方登錄數(shù)據(jù)

• 異常：最近登錄過(guò)該如何處理？手機(jī)號(hào)無(wú)效該如何處理？手機(jī)號(hào)已注冊(cè)該如何處理？

泳道圖

除了要明確事項(xiàng)、角色、信息傳遞、異常等內(nèi)容，在畫(huà)復(fù)雜的泳道圖之前，要明確參與角色，再梳理出不同的角色要完成的任務(wù)，各個(gè)角色之間的交接，整個(gè)流程的階段劃分。

如天貓的退貨流程圖作圖思路：

1.明確角色

參與角色有：買家、系統(tǒng)、賣家、客服

2.各個(gè)角色要完成的任務(wù)

買家：買家收到商品不滿意，可以在天貓上發(fā)起退貨，填寫(xiě)退款申請(qǐng)。如果賣家同意退貨，買家可將商品寄到賣家的收獲地址，寄送方式可選擇自行寄件或者上門(mén)取貨。如果賣家收到貨后，拒絕退款，買家可以申請(qǐng)客服介入。

賣家：處理買家退款申請(qǐng)；如果訂單滿足退貨條件，將退貨地址發(fā)給買家；賣家收到商品；退款給買家。

系統(tǒng)：判斷買家收獲狀態(tài)；檢測(cè)買家的退款申請(qǐng)的原因、金額等，生成退款記錄；判斷是否平臺(tái)先墊付退款；將賣家地址發(fā)給買家；系統(tǒng)將買家上門(mén)服務(wù)申請(qǐng)發(fā)送給合作的物流公司；變更退款狀態(tài)。

客服：客服介入，判斷雙方責(zé)任

3.角色交接

買家將退款申請(qǐng)發(fā)送給系統(tǒng)，系統(tǒng)發(fā)送給賣家，賣家處理退款申請(qǐng)，賣家將退貨地址發(fā)送給買家，買家寄件給賣家，賣家收貨退款。如賣家拒絕退款，買家申請(qǐng)客服介入，客服處理買家或賣家的責(zé)任。

4.階段劃分

為了方便理解整個(gè)流程，小編把流程分為5個(gè)階段：

• 買家發(fā)起退貨申請(qǐng)

• 系統(tǒng)處理買家申請(qǐng)

• 買家寄件給賣家

• 處理退款

整個(gè)泳道圖如下：

第五部分的“功能模塊化，可復(fù)制”已進(jìn)化成“交互設(shè)計(jì)規(guī)范”，過(guò)年后小編獻(xiàn)上~

當(dāng)然不會(huì)忘記大家的福利啦~

回復(fù)關(guān)鍵字“axure教程”，可獲得一份axure視頻教程

回復(fù)關(guān)鍵字“成功創(chuàng)業(yè)”，可獲得一份“7大行業(yè)成功創(chuàng)業(yè)計(jì)劃書(shū)”