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

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

各類原型圖介紹

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

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

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

但是卻忽略了很重要的一點(diǎn)，開發(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)過這個(gè)問題，雖然有配套的需求文檔，但是大家都懂的，需求文檔可能只有產(chǎn)品人員自己看。這樣一來，無形之中增加了溝通成本）；
2. 做原型時(shí)，各種動(dòng)效比較浪費(fèi)時(shí)間。需要各種事件、動(dòng)態(tài)面板配合來實(shí)現(xiàn)，一定程度上降低了工作效率。

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

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

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

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

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

優(yōu)勢(shì)

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

劣勢(shì)

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

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

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

第三種：信息平鋪上下型

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

優(yōu)勢(shì)

界面看起來清爽了很多，所有交互說明集中，有效避免了功能遺漏和界面雜亂的問題；

劣勢(shì)

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

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

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

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

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

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

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

優(yōu)勢(shì)

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

劣勢(shì)

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

整體來講，這種類型的原型圖，已經(jīng)得到開發(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è)模塊的交互說明。交互說明中各類信息分類顯示。

優(yōu)勢(shì)

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

劣勢(shì)

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

總結(jié)

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

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

??感謝耐心閱讀～

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

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