什麼樣的原型更受開發歡迎 ？

來自專欄摹客產品設計專欄11 人贊了文章

工作3年，嘗試了各種原型圖排版，致力於幫助設計師和程序員更好的理解需求。總結了從14年到現在自己嘗試過的幾種原型圖樣式，每一種都有其優劣勢。歡迎大家一起來探討如何更好的呈現原型圖（歡迎拍磚)

各類原型圖介紹

第一種：動態跳轉型

通過事件（如點擊、滑動等）實現各個元素和頁面之間來回跳轉。所有交互說明都寫在了界面元素的注釋說明中（藍色icon），如想查看說明，需點擊後才能看到。這類跳轉型原型，需配套的需求文檔來描述各個元素的狀態、前置條件、操作說明等。

這種原型圖，想必很多剛剛入門的產品經理/交互設計師都嘗試過。當然我也不例外，剛開始工作時，覺得用axure實現各種動效是件很好玩很酷的事情，同時也認為這種動態跳轉可以幫助開發人員更好的理解頁面關係。

但是卻忽略了很重要的一點，開發不知道我們產品之前的思考邏輯，所以拿到原型時，根本不知道界面上哪些信息是可點擊的，也不知道點擊後會發生什麼進入哪個界面。

優勢

擁有交互動效，可完整體驗到頁面之間的跳轉流程。

劣勢

這類原型，劣勢超多。

1. 瀏覽原型的人需要逐一點擊，才知道這個頁面有哪些功能，這樣很可能導致功能的遺漏。（當年也確實出現過這個問題，雖然有配套的需求文檔，但是大家都懂的，需求文檔可能只有產品人員自己看。這樣一來，無形之中增加了溝通成本）；
2. 做原型時，各種動效比較浪費時間。需要各種事件、動態面板配合來實現，一定程度上降低了工作效率。因為這類原型圖的用戶體驗實在是不好，便決定把所有頁面平鋪展示，把交互說明環繞周圍，如下…

第二種：信息平鋪環繞型（五彩版）

首先，感謝開發哥哥們當年的不殺之恩。

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

所有的交互說明信息都環繞在線框圖周圍，並使用了各種圖標顏色。不同圖標及顏色代表不同含義，如圖中粉色箭頭代表有點擊事件，綠色箭頭代表說明文字，點擊事件均採用橙色文字。

優勢

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

劣勢

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

這類原型圖，解決了第一種遺漏功能的問題，也得到了開發人員的一致好評，說這種原型圖清晰直觀的把所有功能點都描述的很清晰。就這樣持續迭代了好幾個版本。後來。有一次在一個功能複雜的界面周圍寫了密密麻麻的注釋（如上圖），在實際開發過程中，就發現很多開發來問的問題，明明在原型圖上都有寫。可是他們為什麼忽略了這些需求呢？我就跑去和他們溝通，得到的反饋是：哦，沒看到，沒注意這塊內容。記得那時候還是挺氣憤的，自己辛辛苦苦寫的需求，開發根本不認真看。後來換位思考想了想，這些枯燥的文檔，再加上五顏六色的文字，給誰誰都不願意看吧。

第三種：信息平鋪上下型

把所有交互說明寫在線框圖下方，線框圖上連接關聯界面。

優勢

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

劣勢

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

出了一個版本這樣的原型圖，就立馬收到開發哥哥們的反饋，說這樣的交互說明太不直觀了，每次都要看一眼圖，然後再去下面找到對應的說明，很麻煩，而且還容易出現對應錯的情況。就這樣，放棄了這種類型的原型圖。

那麼有沒有一種既清晰直觀又可以有助於開發閱讀查找的原型圖呢？

第四種：信息平鋪環繞型（邊框版）

為所有界面加上了手機外邊框；線框圖顏色盡量使用深淺不同的灰色；交互說明顏色少一些，使用灰色深淺及文字大小區分優先順序；使用統一的標註icon；制定了交互標註說明。

各類交互說明規範

優勢

1. 整體感覺乾淨清爽，各類信息錯落有致；
2. 為所有界面加上了手機外邊框後，有效避免了線框圖與交互說明混淆不清。且可清晰的看出在手機上展示效果，標記第一屏信息；
3. 交互說明統一規範，避免了交互說明的喧賓奪主；
4. 線框圖顏色盡量少，使用不同程度的灰色來呈現，信息優先順序突出；
5. 使用交互說明序號。使用序號標識出當前頁面有哪些注意點，有效避免遺漏。

劣勢

有時會出現線框圖和交互說明對應不上的情況，開發找不到交互說明上寫的【xxx】按鈕到底是哪個icon，點擊【xx】熱區，這個熱區的範圍包括哪些。

整體來講，這種類型的原型圖，已經得到開發人員的認可，也是個人認為比較優的方案。正因為原型圖也算是自己的產品，所以也需要不斷的打磨，於是最近又對其進行了優化，如下…

第五種：信息平鋪環繞型（各個元素逐一標識）

在界面上，使用箭頭逐一標識每個元素或每個模塊的交互說明。交互說明中各類信息分類顯示。

優勢

• 快速定位某個元素的交互說明；
• 為交互說明分類（如信息項、操作、狀態、排序等），有效防止遺漏需求，也有助於開發查看需求。

劣勢

如界面上需要標註的信息很多，可能會造成頁面看起來有些混亂。

總結

每一種原型圖樣式都有其優劣勢，在實際工作中，最重要的不是如何呈現你的原型圖，而是要和設計師以及開發達成共識，怎樣的原型更有助於他們理解需求。對於剛入職場的新人小白，提醒大家切記不要過度沉迷於頁面動效，而忘記原型圖的本質目的（清晰明了的說明界面功能邏輯）。

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

作者：Cynthia 微信公眾號：用戶體驗研究所

原文地址：http://www.woshipm.com/rp/838335.html

本文由原作者授權轉載。