工作3年，嘗試了各種原型圖排版，致力于幫助設計師和程序員更好的理解需求。總結了從14年到現在自己嘗試過的幾種原型圖樣式，每一種都有其優劣勢。歡迎大家一起來探討如何更好的呈現原型圖（歡迎拍磚??）。接下來，按時間順序，給大家一一詳細介紹。
PS：本文僅是講述原型圖排版，至于一些交互細節會另寫文章記錄哦，歡迎關注～
各類原型圖介紹
第一種：動態跳轉型
通過事件（如點擊、滑動等）實現各個元素和頁面之間來回跳轉。所有交互說明都寫在了界面元素的注釋說明中（藍色icon），如想查看說明，需點擊后才能看到。這類跳轉型原型，需配套的需求文檔來描述各個元素的狀態、前置條件、操作說明等。
這種原型圖，想必很多剛剛入門的產品經理/交互設計師都嘗試過。當然我也不例外，剛開始工作時，覺得用axure實現各種動效是件很好玩很酷的事情，同時也認為這種動態跳轉可以幫助開發人員更好的理解頁面關系。
但是卻忽略了很重要的一點，開發不知道我們產品之前的思考邏輯，所以拿到原型時，根本不知道界面上哪些信息是可點擊的，也不知道點擊后會發生什么進入哪個界面。
優勢
擁有交互動效，可完整體驗到頁面之間的跳轉流程。
劣勢
這類原型，劣勢超多。
1、瀏覽原型的人需要逐一點擊，才知道這個頁面有哪些功能，這樣很可能導致功能的遺漏。（當年也確實出現過這個問題，雖然有配套的需求文檔，但是大家都懂的，需求文檔可能只有產品人員自己看。這樣一來，無形之中增加了溝通成本）；
2、做原型時，各種動效比較浪費時間。需要各種事件、動態面板配合來實現，一定程度上降低了工作效率。
因為這類原型圖的用戶體驗實在是不好，便決定把所有頁面平鋪展示，把交互說明環繞周圍，如下…
第二種：信息平鋪環繞型（五彩版）
首先，感謝開發哥哥們當年的不殺之恩。
現在回過頭看之前的原型圖，簡直不忍直視。這樣花里胡哨的原型圖，雖然很詳細的寫了各種說明，但是給誰看，估計都沒有耐心看完吧。
所有的交互說明信息都環繞在線框圖周圍，并使用了各種圖標顏色。不同圖標及顏色代表不同含義，如圖中粉色箭頭代表有點擊事件，綠色箭頭代表說明文字，點擊事件均采用橙色文字。
優勢
1、交互說明平鋪展示，有效避免了功能遺漏；
2、各類信息使用不同顏色區分，清晰直觀的區分不同類信息。
劣勢
1、交互說明使用顏色過多，一眼看過去，給人感覺很雜亂；
2、線框圖中使用顏色過多，分不清界面信息優先級。
這類原型圖，解決了第一種遺漏功能的問題，也得到了開發人員的一致好評，說這種原型圖清晰直觀的把所有功能點都描述的很清晰。就這樣持續迭代了好幾個版本。后來。有一次在一個功能復雜的界面周圍寫了密密麻麻的注釋（如上圖），在實際開發過程中，就發現很多開發來問的問題，明明在原型圖上都有寫。可是他們為什么忽略了這些需求呢？我就跑去和他們溝通，得到的反饋是：哦，沒看到，沒注意這塊內容。記得那時候還是挺氣憤的，自己辛辛苦苦寫的需求，開發根本不認真看。后來換位思考想了想，這些枯燥的文檔，再加上五顏六色的文字，給誰誰都不愿意看吧。
為了解決交互說明雜亂無章的問題，決定嘗試把所有說明統一放到線框圖下方，逐一元素說明，如下…
第三種：信息平鋪上下型
把所有交互說明寫在線框圖下方，線框圖上連接關聯界面。
優勢
界面看起來清爽了很多，所有交互說明集中，有效避免了功能遺漏和界面雜亂的問題；
劣勢
不直觀。界面元素和交互說明分離，影響查找效率。
出了一個版本這樣的原型圖，就立馬收到開發哥哥們的反饋，說這樣的交互說明太不直觀了，每次都要看一眼圖，然后再去下面找到對應的說明，很麻煩，而且還容易出現對應錯的情況。就這樣，放棄了這種類型的原型圖。
那么有沒有一種既清晰直觀又可以有助于開發閱讀查找的原型圖呢？
于是，綜合了之前各類原型的優勢，得出如下版本…
第四種：信息平鋪環繞型（邊框版）
為所有界面加上了手機外邊框；線框圖顏色盡量使用深淺不同的灰色；交互說明顏色少一些，使用灰色深淺及文字大小區分優先級；使用統一的標注icon；制定了交互標注說明。
各類交互說明規范
優勢
1、整體感覺干凈清爽，各類信息錯落有致；
2、為所有界面加上了手機外邊框后，有效避免了線框圖與交互說明混淆不清。且可清晰的看出在手機上展示效果，標記第一屏信息；
3、交互說明統一規范，避免了交互說明的喧賓奪主；
4、線框圖顏色盡量少，使用不同程度的灰色來呈現，信息優先級突出；
5、使用交互說明序號。使用序號標識出當前頁面有哪些注意點，有效避免遺漏。
劣勢
有時會出現線框圖和交互說明對應不上的情況，開發找不到交互說明上寫的【xxx】按鈕到底是哪個icon，點擊【xx】熱區，這個熱區的范圍包括哪些。
整體來講，這種類型的原型圖，已經得到開發人員的認可，也是個人認為比較優的方案。正因為原型圖也算是自己的產品，所以也需要不斷的打磨，于是最近又對其進行了優化，如下…
第五種：信息平鋪環繞型（各個元素逐一標識）
在界面上，使用箭頭逐一標識每個元素或每個模塊的交互說明。交互說明中各類信息分類顯示。
優勢
1、快速定位某個元素的交互說明；
2、為交互說明分類（如信息項、操作、狀態、排序等），有效防止遺漏需求，也有助于開發查看需求。
劣勢
如界面上需要標注的信息很多，可能會造成頁面看起來有些混亂。
總結
每一種原型圖樣式都有其優劣勢，在實際工作中，最重要的不是如何呈現你的原型圖，而是要和設計師以及開發達成共識，怎樣的原型更有助于他們理解需求。對于剛入職場的新人小白，提醒大家切記不要過度沉迷于頁面動效，而忘記原型圖的本質目的（清晰明了的說明界面功能邏輯）。
如上，述說了一下我自己的原型圖演變史。原型圖是我們工作中輸出的重要文檔之一，所以更需要我們不斷的去打磨它，在提高自己工作效率的同時更好的幫助開發人員理解需求。
??感謝耐心閱讀～
