資深產(chǎn)品經(jīng)理教你如何畫出專業(yè)的原型圖？（上）

本片文章（原型上篇）重點(diǎn)內(nèi)容：

• 清晰的視覺層次
• 視覺流結(jié)構(gòu)
• 功能預(yù)見性
• 信息的焦點(diǎn)即為視覺的焦點(diǎn)
• 足夠簡單
• 考慮到邊界條件

首先，我們要明確原型圖是畫給誰看的，通常是以下幾類人：開發(fā)、部門領(lǐng)導(dǎo)、UI設(shè)計(jì)師和測試，一個(gè)完善的產(chǎn)品流程離不開著幾個(gè)角色。

開發(fā)通常最關(guān)心的是有多少功能，功能的復(fù)雜度怎么樣，邊界條件是什么，異常情況怎么處理等。設(shè)計(jì)師通常關(guān)心元素之間的關(guān)系，排版和布局。而跟主管匯報(bào)，由于主管的事情是很多的，他們通常最關(guān)心功能整體的流程、原型的易讀性，以及價(jià)值體現(xiàn)。而測試則關(guān)心產(chǎn)品需求用戶（后面會(huì)詳細(xì)介紹），輔助他們寫測試用例，以及是否窮盡考慮到各個(gè)場景。

那么，怎么樣的原型圖才算是專業(yè)的原型圖呢？小編總結(jié)了工作以來畫原型圖的經(jīng)驗(yàn)，總結(jié)出了以下經(jīng)驗(yàn)。

一、清晰的視覺層次

突出重要元素，弱化次要元素

頁面是由元素組成的，這些元素包括線、顏色、按鈕等，要做到層次清晰，就要把重要的元素進(jìn)行強(qiáng)化，次要的元素進(jìn)行弱化，比如可以通過顏色的飽和度來突出重要元素，通過面積突出重要元素等，引導(dǎo)用戶聚集視覺焦點(diǎn)到重要的元素上。如下圖，通過對比顏色和區(qū)域面積的大小，來突出重要元素。

格式塔原理

將相關(guān)的元素組織在一起，讓用戶知道這些元素在任務(wù)、數(shù)據(jù)和工具上是相關(guān)的，通常用位置表示。相關(guān)的元素位置上相近，不相關(guān)元素用空間隔開。如下圖，第一個(gè)圖為反面例子，信息距離上下一致，用戶無法區(qū)分中間的信息是屬于上方還是下方。第二張圖是airbnb的截圖，紅色線框部分明顯與下方隔開一定距離，在視覺上體現(xiàn)為跟上方相關(guān)。

二、視覺流結(jié)構(gòu)

什么是視覺流？

視覺流是指視覺焦點(diǎn)形成的軌跡，由于眼球生理結(jié)構(gòu)限制，人眼在某時(shí)刻只能產(chǎn)生一個(gè)焦點(diǎn)。人的這一視覺特性使得人的視線運(yùn)動(dòng)通常表現(xiàn)為點(diǎn)到點(diǎn)的跳躍式掃描（saccade），而不是平滑移動(dòng)。人在閱讀時(shí)，一行通常包含4～7個(gè)跳動(dòng)――定位（jump-fixation）的動(dòng)作，注視持續(xù)時(shí)間為200～600ms。 因此用戶在對界面持續(xù)關(guān)注后會(huì)留下一系列的視覺焦點(diǎn)，這些視覺焦點(diǎn)的軌跡稱為視覺流（visual line）。

平穩(wěn)的視覺流結(jié)構(gòu)能幫助用戶快速理解邏輯路徑，減少用戶的認(rèn)知成本。平穩(wěn)的視覺流有兩個(gè)原則：

• 一、視覺焦點(diǎn)不宜過多；
• 二、視覺焦點(diǎn)的路徑邏輯盡量簡單。

如下圖，同為軟件教程詳情頁，左側(cè)的視覺焦點(diǎn)過多，視覺流向路徑復(fù)雜，而右側(cè)的視覺流向路徑簡單，容易理解。

三、功能預(yù)見性

看到一個(gè)功能，就知道該功能如何使用，稱為功能預(yù)見性。

如，lofter底部導(dǎo)航欄在改版前，只用圖標(biāo)表現(xiàn)功能，沒法清晰知道每個(gè)圖標(biāo)的含義。改版后，用“圖標(biāo)+文字”，直接解釋每個(gè)圖標(biāo)的含義，減少認(rèn)知負(fù)荷。

如下圖，為途虎養(yǎng)車某個(gè)門店的評價(jià)截圖，該門店提供三個(gè)服務(wù)，分別是輪胎、保養(yǎng)、美容和安裝，紅色方框內(nèi)為各個(gè)服務(wù)的得分。當(dāng)?shù)谝淮芜M(jìn)入這個(gè)頁面，默認(rèn)“輪胎”評價(jià)高亮紅色，其他為灰色，潛意識(shí)里不知道點(diǎn)擊是可以切換查看對應(yīng)評論列表的，即切換查看功能感太弱。

四、視覺的焦點(diǎn)為信息的焦點(diǎn)

每個(gè)頁面都有一個(gè)核心功能，這個(gè)核心功能不應(yīng)該被其他功能所覆蓋，特別是當(dāng)功能越來越多、越來越復(fù)雜時(shí)。那我們怎么判斷頁面上哪個(gè)功能是信息的焦點(diǎn)呢？如果針對競品調(diào)研，頁面上顏色飽和度最高，或者功能占據(jù)區(qū)域最大的即為頁面的核心功能，即信息焦點(diǎn)。當(dāng)設(shè)計(jì)自家產(chǎn)品功能，要從主流用戶的主流場景，或者功能的商業(yè)價(jià)值、使用頻率等維度進(jìn)行分析，一個(gè)頁面的信息焦點(diǎn)不宜過多，過多會(huì)影響視覺流的穩(wěn)定。

如下圖，圖1為《風(fēng)起長林》中的劇集截圖，圖2為點(diǎn)擊后的效果，圖3刻意把進(jìn)度條拖動(dòng)方塊變小。我們先來分析進(jìn)度條的使用場景：查看進(jìn)度、快進(jìn)、拖動(dòng)進(jìn)度條，當(dāng)把進(jìn)度條變小，如圖3，進(jìn)度條不再成為信息的焦點(diǎn)，視覺效果被弱化，用戶在查看進(jìn)度、快進(jìn)時(shí)要自己看才能看到當(dāng)前進(jìn)度，拖動(dòng)滑塊時(shí)要小心翼翼才能點(diǎn)中。

再看一個(gè)生活中真實(shí)的例子，有一天點(diǎn)了外賣，配送員說已送達(dá)，于是去公司的前臺(tái)找（前臺(tái)有很多外賣），找了三遍沒有找到，第四遍終于在僅剩2份沒有人拿的外賣中找到了。

如下圖，我們先來做個(gè)場景分析，去找外賣，一般人大多數(shù)情況時(shí)尋找自己的名字/電話，可是這份外賣單子把騎手的姓名和電話號(hào)碼打印得很大，客戶（我）的名字沒有打印，只留了一個(gè)小小的號(hào)碼，造成了很難找到，然而我又不會(huì)刻意去記住騎手名稱和電話。

五、把簡單留給用戶

復(fù)雜度守恒定律（Law of conservation of complexity）由Larry Tesler 于1984年提出，也稱泰斯勒定律（Tesler’s Law）。根據(jù)復(fù)雜度守恒定律，每個(gè)應(yīng)用程序都具有其內(nèi)在的、無法簡化的復(fù)雜度。

無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié)，這一固有的復(fù)雜度都無法依照我們的意愿去除，只能設(shè)法調(diào)整、平衡。在交互設(shè)計(jì)中，體現(xiàn)為把復(fù)雜留給系統(tǒng)，盡量把簡單的界面呈現(xiàn)給用戶。

如，我們在百度上搜索圖片，輸入關(guān)鍵詞-點(diǎn)擊搜索-出現(xiàn)圖片，整個(gè)過程是一個(gè)非常簡單的過程，即白盒部分是非常簡單的。黑盒部分，在用戶輸入關(guān)鍵詞后，系統(tǒng)進(jìn)行需求識(shí)別，識(shí)別出來大量圖片，然后將些圖片繼續(xù)排序，檢索出用戶最可能希望看到的圖片，然后才會(huì)顯示出來，用戶看到的結(jié)果系統(tǒng)往往需要進(jìn)行大量的計(jì)算。

比如，你在家里點(diǎn)外賣和在公司點(diǎn)外賣，無需每次都定位和選擇收貨地址，系統(tǒng)會(huì)自動(dòng)檢測你當(dāng)前的地理位置，從而給出合適的收貨地址。但是快遞的收貨就不一樣，有可能在家里下單，收貨地址選為公司，或者在公司下單，收貨地址選為家里，這個(gè)時(shí)候就不能根據(jù)用戶當(dāng)前的地理位置進(jìn)行自動(dòng)選擇出收貨地址。

其他的還體現(xiàn)為默認(rèn)給出分類、選項(xiàng)、填空內(nèi)容等，由輸入變?yōu)檫x擇。顯性顯示用戶最關(guān)心的信息，比如在美團(tuán)上點(diǎn)了外賣，很多人很關(guān)心外賣的送達(dá)時(shí)間，會(huì)好幾次進(jìn)入訂單詳情查看，美團(tuán)干脆直接把送達(dá)情況展示出來，無需進(jìn)入詳情頁查看。

根據(jù)《簡約至上》，可以大大簡化頁面上的功能。

1.刪除

• 關(guān)注核心功能：增加價(jià)值始于改進(jìn)核心體驗(yàn)
• 砍掉殘缺功能：不完美的功能不如不要
• 刪除掉可能對用戶帶來負(fù)擔(dān)的細(xì)節(jié)，如干擾的文字、可有可無的選項(xiàng)
• 排定功能優(yōu)先級(jí)：產(chǎn)品的價(jià)值不是由功能的多寡來決定的，而是看能否滿足用戶的最高優(yōu)先級(jí)目標(biāo)
• 刪除干擾項(xiàng)
• 選擇聰明的默認(rèn)值，減少用戶選擇
• 避免視覺混亂，讓用戶保持專注

2.組織

• 分類
• 利用網(wǎng)格，呈現(xiàn)頁面布局
• 利用大小、位置、分層、色標(biāo)等進(jìn)行實(shí)際組織
• 關(guān)注用戶的期望路徑，而不是邏輯

3.隱藏

• 隱藏不常用但不能少的功能
• 漸進(jìn)展示：展示核心功能，隱藏?cái)U(kuò)展功能
• 階段展示：隨著用戶深入界面而展示相應(yīng)的功能
• 適時(shí)出現(xiàn)，不打擾用戶，隱藏的目的不是為了藏，而是更好的展示
• 讓功能方便找到，不能藏得找不到

4.轉(zhuǎn)移

• 把復(fù)雜性轉(zhuǎn)移給擅長的一方，如用戶、后臺(tái)系統(tǒng)、其他設(shè)備
• 創(chuàng)造開放式體驗(yàn)，降低用戶受到的約束

六、考慮到邊界條件

產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師，在做功能時(shí)，很容易遺漏一些邊界條件，出現(xiàn)遺漏的原因，主要是在設(shè)計(jì)功能時(shí)至考慮到了主流場景，只做了主流場景下我設(shè)計(jì)，異常場景或者邊界條件很難考慮到，這里教大家一個(gè)小技巧，寫產(chǎn)品需求用例。在構(gòu)建產(chǎn)品架構(gòu)雛形時(shí)，用例往往能起到幫助確定功能界限的作用。

用例包括以下內(nèi)容：

• 用例名稱  – 此產(chǎn)品/功能的名稱
• 用例編號(hào) – 此產(chǎn)品用例的編號(hào)
• 角色- 操作/執(zhí)行該功能的角色
• 簡要說明 – 最簡化的內(nèi)容對該需求功能的描述
• 前置條件- 執(zhí)行該功能的前提條件
• 后置條件 – 該功能執(zhí)行完畢后的結(jié)果條件
• 主事件流- 該功能角色所執(zhí)行的主要正常過程
• 異常和分支事件流 – 該功能角色所執(zhí)行的次要異常過程

如在一個(gè)圖片素材下載網(wǎng)站下載圖片的用例：

如果不寫產(chǎn)品用例，很多人可能只考慮進(jìn)入詳情頁-點(diǎn)擊下載按鈕-下載成功這個(gè)流程，很容易遺漏用戶未登錄狀態(tài)下的提示，無權(quán)限下載該圖片的提示，甚至是圖片下架后無法下載圖片的提示。