工作3年，嘗試了各種原型圖排版，致力于幫助設(shè)計(jì)師和程序員更好的理解需求。總結(jié)了從14年到現(xiàn)在自己嘗試過(guò)的幾種原型圖樣式，每一種都有其優(yōu)劣勢(shì)。歡迎大家一起來(lái)探討如何更好的呈現(xiàn)原型圖（歡迎拍磚?）。接下來(lái)，按時(shí)間順序，給大家一一詳細(xì)介紹。

PS：本文僅是講述原型圖排版，至于一些交互細(xì)節(jié)會(huì)另寫(xiě)文章記錄哦，歡迎關(guān)注～

各類原型圖介紹

第一種：動(dòng)態(tài)跳轉(zhuǎn)型

通過(guò)事件（如點(diǎn)擊、滑動(dòng)等）實(shí)現(xiàn)各個(gè)元素和頁(yè)面之間來(lái)回跳轉(zhuǎn)。所有交互說(shuō)明都寫(xiě)在了界面元素的注釋說(shuō)明中（藍(lán)色icon），如想查看說(shuō)明，需點(diǎn)擊后才能看到。這類跳轉(zhuǎn)型原型，需配套的需求文檔來(lái)描述各個(gè)元素的狀態(tài)、前置條件、操作說(shuō)明等。

這種原型圖，想必很多剛剛?cè)腴T(mén)的產(chǎn)品經(jīng)理/交互設(shè)計(jì)師都嘗試過(guò)。當(dāng)然我也不例外，剛開(kāi)始工作時(shí)，覺(jué)得用axure實(shí)現(xiàn)各種動(dòng)效是件很好玩很酷的事情，同時(shí)也認(rèn)為這種動(dòng)態(tài)跳轉(zhuǎn)可以幫助開(kāi)發(fā)人員更好的理解頁(yè)面關(guān)系。

但是卻忽略了很重要的一點(diǎn)，開(kāi)發(fā)不知道我們產(chǎn)品之前的思考邏輯，所以拿到原型時(shí)，根本不知道界面上哪些信息是可點(diǎn)擊的，也不知道點(diǎn)擊后會(huì)發(fā)生什么進(jìn)入哪個(gè)界面。

優(yōu)勢(shì)

擁有交互動(dòng)效，可完整體驗(yàn)到頁(yè)面之間的跳轉(zhuǎn)流程。

劣勢(shì)

這類原型，劣勢(shì)超多。

1. 瀏覽原型的人需要逐一點(diǎn)擊，才知道這個(gè)頁(yè)面有哪些功能，這樣很可能導(dǎo)致功能的遺漏。（當(dāng)年也確實(shí)出現(xiàn)過(guò)這個(gè)問(wèn)題，雖然有配套的需求文檔，但是大家都懂的，需求文檔可能只有產(chǎn)品人員自己看。這樣一來(lái)，無(wú)形之中增加了溝通成本）；
2. 做原型時(shí)，各種動(dòng)效比較浪費(fèi)時(shí)間。需要各種事件、動(dòng)態(tài)面板配合來(lái)實(shí)現(xiàn)，一定程度上降低了工作效率。

因?yàn)檫@類原型圖的用戶體驗(yàn)實(shí)在是不好，便決定把所有頁(yè)面平鋪展示，把交互說(shuō)明環(huán)繞周圍，如下…

第二種：信息平鋪環(huán)繞型（五彩版）

首先，感謝開(kāi)發(fā)哥哥們當(dāng)年的不殺之恩。

現(xiàn)在回過(guò)頭看之前的原型圖，簡(jiǎn)直不忍直視。這樣花里胡哨的原型圖，雖然很詳細(xì)的寫(xiě)了各種說(shuō)明，但是給誰(shuí)看，估計(jì)都沒(méi)有耐心看完吧。

所有的交互說(shuō)明信息都環(huán)繞在線框圖周圍，并使用了各種圖標(biāo)顏色。不同圖標(biāo)及顏色代表不同含義，如圖中粉色箭頭代表有點(diǎn)擊事件，綠色箭頭代表說(shuō)明文字，點(diǎn)擊事件均采用橙色文字。

優(yōu)勢(shì)

1. 交互說(shuō)明平鋪展示，有效避免了功能遺漏；
2. 各類信息使用不同顏色區(qū)分，清晰直觀的區(qū)分不同類信息。

劣勢(shì)

1. 交互說(shuō)明使用顏色過(guò)多，一眼看過(guò)去，給人感覺(jué)很雜亂；
2. 線框圖中使用顏色過(guò)多，分不清界面信息優(yōu)先級(jí)。

這類原型圖，解決了第一種遺漏功能的問(wèn)題，也得到了開(kāi)發(fā)人員的一致好評(píng)，說(shuō)這種原型圖清晰直觀的把所有功能點(diǎn)都描述的很清晰。就這樣持續(xù)迭代了好幾個(gè)版本。后來(lái)。有一次在一個(gè)功能復(fù)雜的界面周圍寫(xiě)了密密麻麻的注釋（如上圖），在實(shí)際開(kāi)發(fā)過(guò)程中，就發(fā)現(xiàn)很多開(kāi)發(fā)來(lái)問(wèn)的問(wèn)題，明明在原型圖上都有寫(xiě)?？墒撬麄?yōu)槭裁春雎粤诉@些需求呢？我就跑去和他們溝通，得到的反饋是：哦，沒(méi)看到，沒(méi)注意這塊內(nèi)容。記得那時(shí)候還是挺氣憤的，自己辛辛苦苦寫(xiě)的需求，開(kāi)發(fā)根本不認(rèn)真看。后來(lái)?yè)Q位思考想了想，這些枯燥的文檔，再加上五顏六色的文字，給誰(shuí)誰(shuí)都不愿意看吧。

為了解決交互說(shuō)明雜亂無(wú)章的問(wèn)題，決定嘗試把所有說(shuō)明統(tǒng)一放到線框圖下方，逐一元素說(shuō)明，如下…

第三種：信息平鋪上下型

把所有交互說(shuō)明寫(xiě)在線框圖下方，線框圖上連接關(guān)聯(lián)界面。

優(yōu)勢(shì)

界面看起來(lái)清爽了很多，所有交互說(shuō)明集中，有效避免了功能遺漏和界面雜亂的問(wèn)題；

劣勢(shì)

不直觀。界面元素和交互說(shuō)明分離，影響查找效率。

出了一個(gè)版本這樣的原型圖，就立馬收到開(kāi)發(fā)哥哥們的反饋，說(shuō)這樣的交互說(shuō)明太不直觀了，每次都要看一眼圖，然后再去下面找到對(duì)應(yīng)的說(shuō)明，很麻煩，而且還容易出現(xiàn)對(duì)應(yīng)錯(cuò)的情況。就這樣，放棄了這種類型的原型圖。

那么有沒(méi)有一種既清晰直觀又可以有助于開(kāi)發(fā)閱讀查找的原型圖呢？

于是，綜合了之前各類原型的優(yōu)勢(shì)，得出如下版本…

第四種：信息平鋪環(huán)繞型（邊框版）

為所有界面加上了手機(jī)外邊框；線框圖顏色盡量使用深淺不同的灰色；交互說(shuō)明顏色少一些，使用灰色深淺及文字大小區(qū)分優(yōu)先級(jí)；使用統(tǒng)一的標(biāo)注icon；制定了交互標(biāo)注說(shuō)明。

各類交互說(shuō)明規(guī)范

優(yōu)勢(shì)

1. 整體感覺(jué)干凈清爽，各類信息錯(cuò)落有致；
2. 為所有界面加上了手機(jī)外邊框后，有效避免了線框圖與交互說(shuō)明混淆不清。且可清晰的看出在手機(jī)上展示效果，標(biāo)記第一屏信息；
3. 交互說(shuō)明統(tǒng)一規(guī)范，避免了交互說(shuō)明的喧賓奪主；
4. 線框圖顏色盡量少，使用不同程度的灰色來(lái)呈現(xiàn)，信息優(yōu)先級(jí)突出；
5. 使用交互說(shuō)明序號(hào)。使用序號(hào)標(biāo)識(shí)出當(dāng)前頁(yè)面有哪些注意點(diǎn)，有效避免遺漏。

劣勢(shì)

有時(shí)會(huì)出現(xiàn)線框圖和交互說(shuō)明對(duì)應(yīng)不上的情況，開(kāi)發(fā)找不到交互說(shuō)明上寫(xiě)的【xxx】按鈕到底是哪個(gè)icon，點(diǎn)擊【xx】熱區(qū)，這個(gè)熱區(qū)的范圍包括哪些。

整體來(lái)講，這種類型的原型圖，已經(jīng)得到開(kāi)發(fā)人員的認(rèn)可，也是個(gè)人認(rèn)為比較優(yōu)的方案。正因?yàn)樵蛨D也算是自己的產(chǎn)品，所以也需要不斷的打磨，于是最近又對(duì)其進(jìn)行了優(yōu)化，如下…

第五種：信息平鋪環(huán)繞型（各個(gè)元素逐一標(biāo)識(shí)）

在界面上，使用箭頭逐一標(biāo)識(shí)每個(gè)元素或每個(gè)模塊的交互說(shuō)明。交互說(shuō)明中各類信息分類顯示。

優(yōu)勢(shì)

• 快速定位某個(gè)元素的交互說(shuō)明；
• 為交互說(shuō)明分類（如信息項(xiàng)、操作、狀態(tài)、排序等），有效防止遺漏需求，也有助于開(kāi)發(fā)查看需求。

劣勢(shì)

如界面上需要標(biāo)注的信息很多，可能會(huì)造成頁(yè)面看起來(lái)有些混亂。

總結(jié)

每一種原型圖樣式都有其優(yōu)劣勢(shì)，在實(shí)際工作中，最重要的不是如何呈現(xiàn)你的原型圖，而是要和設(shè)計(jì)師以及開(kāi)發(fā)達(dá)成共識(shí)，怎樣的原型更有助于他們理解需求。對(duì)于剛?cè)肼殘?chǎng)的新人小白，提醒大家切記不要過(guò)度沉迷于頁(yè)面動(dòng)效，而忘記原型圖的本質(zhì)目的（清晰明了的說(shuō)明界面功能邏輯）。

如上，述說(shuō)了一下我自己的原型圖演變史。原型圖是我們工作中輸出的重要文檔之一，所以更需要我們不斷的去打磨它，在提高自己工作效率的同時(shí)更好的幫助開(kāi)發(fā)人員理解需求。

??感謝耐心閱讀～

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

題圖來(lái)自PEXELS，基于CC0協(xié)議