在工作了3年之后，我嘗試了各種原型設(shè)計和布局，并致力于幫助設(shè)計師和程序員更好地理解需求?？偨Y(jié)了我從14年到現(xiàn)在嘗試過的幾種原型模式，每種模式都有其優(yōu)點和缺點。歡迎大家討論如何更好地呈現(xiàn)原型（歡迎磚）。接下來，按時間順序詳細(xì)介紹。

PS：這篇文章只是關(guān)于原型地圖布局。至于一些交互細(xì)節(jié)，你會寫另一篇文章記錄。歡迎關(guān)注?

各種原型介紹

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

通過事件（例如點擊，滑動等）在元素和頁面之間來回跳轉(zhuǎn)。所有交互指令都寫在界面元素的注釋描述中（藍(lán)色圖標(biāo)）。如果要查看說明，則需要單擊以查看說明。這種跳轉(zhuǎn)原型需要匹配的需求文檔來描述每個元素的狀態(tài)，前提條件和操作指令。

這個原型圖，大概是很多剛剛開始嘗試的產(chǎn)品經(jīng)理/交互設(shè)計師。當(dāng)然，我也不例外。當(dāng)我第一次開始工作時，我覺得使用axure來實現(xiàn)各種動態(tài)效果是一件非常酷的事情。我也認(rèn)為這種動態(tài)跳轉(zhuǎn)可以幫助開發(fā)人員更好地理解頁面關(guān)系。

然而，它忽略了重要的一點，即開發(fā)不知道我們的產(chǎn)品之前的思維邏輯，所以當(dāng)我得到原型時，我不知道界面上的哪些信息是可點擊的，我不知道當(dāng)發(fā)生時會發(fā)生什么我點擊了。

優(yōu)點

通過交互式效果，您可以完全體驗頁面之間的跳轉(zhuǎn)過程。

缺點

這種原型有很多缺點。

瀏覽原型的人需要逐個點擊以了解此頁面具有哪些功能，這可能會導(dǎo)致功能缺失。 （這個問題確實發(fā)生在同一年。盡管有匹配的需求文檔，但每個人都知道需求文檔只能由產(chǎn)品人員自己查看。因此，通信成本無形地增加）;

在做原型時，各種效果都是浪費時間。它需要各種活動和動態(tài)小組合作才能達(dá)到一定的工作效率。

因為這些原型的用戶體驗非常糟糕，所以我決定平鋪所有頁面并圍繞交互式描述，如下所示…

第二種類型：信息平鋪環(huán)繞（多色版本）

首先，由于同一年沒有殺死兄弟的發(fā)展。

回顧以前的原型，我不忍心直視。這種花里胡哨的原型，雖然詳細(xì)描述了各種說明，但要向誰看，估計沒有耐心閱讀它。

所有交互指令都圍繞在線框圖并使用各種圖標(biāo)顏色。不同的圖標(biāo)和顏色代表不同的含義。在圖中，粉紅色箭頭表示單擊事件，綠色箭頭表示說明文本，單擊事件使用橙色文本。

優(yōu)點

平鋪顯示的交互式描述，有效避免遺漏特征;

各種類型的信息通過不同的顏色區(qū)分，并且清楚且直觀地區(qū)分不同類型的信息。

缺點

交互式說明使用了太多的顏色，乍一看，它感覺很亂;

在線框中使用太多顏色無法分辨界面信息的優(yōu)先級。

這種原型地圖解決了第一個缺失功能??的問題，并且受到開發(fā)人員的歡迎。很明顯，所有功能點都清晰直觀地描述。這繼續(xù)迭代幾個版本。后來。一旦我在一個復(fù)雜的界面上面寫了一篇密集的評論（上圖），在實際的開發(fā)過程中，我發(fā)現(xiàn)了許多需要開發(fā)的問題，顯然是在原型上編寫的。但他們?yōu)槭裁春鲆曔@些需求呢？我跑去和他們溝通，我收到的反饋是：哦，我沒有看到它，沒有注意這段內(nèi)容。我記得當(dāng)時我還很生氣。我沒有認(rèn)真看待我辛勤工作的需要。后來，我想到了這些無聊的文件，加上豐富多彩的文字，給那些不想看的人。

為了解決交互描述的混亂問題，我決定嘗試將所有指令逐個放在線框下，如下所示：…

第三種類型：信息上下平鋪

寫下在線框圖下方的所有交互指令，并連接線框上的相關(guān)接口。

優(yōu)點

界面看起來很清爽，所有的交互都集中在一起，有效地避免了缺少功能和界面的問題;

缺點

不直觀。界面元素和交互的分離會影響搜索的效率。

在這個版本的原型之后，我立即收到了我的開發(fā)兄弟的反饋，說這種互動太直觀了。我每次都要查看圖片，然后再去下面找相應(yīng)的說明，這很麻煩。它也容易出現(xiàn)相應(yīng)的錯誤。通過這種方式，這種類型的原型圖被放棄了。

那么，是否有一個既清晰又直觀的原型，可以幫助開發(fā)閱讀和閱讀？

因此，結(jié)合以前原型的優(yōu)點，以下版本…

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

移動電話的外框添加到所有接口;使用不同的灰色陰影，線框的顏色盡可能小;交互描述的顏色較少，灰度和文本大小用于優(yōu)先排序;使用統(tǒng)一注釋圖標(biāo);

各種類型的交互規(guī)范

優(yōu)點

整體感覺干凈清新，各種信息都不完整;

在將移動電話的外邊框添加到所有接口之后，它有效地避免了線框和交互式描述之間的混淆。并且可以清楚地看到手機上顯示的效果，標(biāo)記第一個屏幕信息;

交互解釋統(tǒng)一規(guī)范，避免交互的互動;

線框顏色盡可能小，使用不同級別的灰色顯示，信息優(yōu)先級突出;

使用交互式說明編號。使用序列號識別當(dāng)前頁面上的關(guān)注點，以有效避免遺漏。

缺點

有時會出現(xiàn)線框和交互式指令不兼容的情況。開發(fā)中找不到在交互式描述上寫入的[xxx]按鈕的圖標(biāo)。單擊[xx]熱區(qū)，其中包括熱區(qū)的范圍。

總的來說，這種類型的原型已被開發(fā)人員認(rèn)可，并被個人認(rèn)為是優(yōu)越的。因為原型圖也是它自己的產(chǎn)品，所以它需要不斷拋光，所以它最近已經(jīng)過優(yōu)化，如下所示…

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

在界面上，使用箭頭標(biāo)識每個模塊的每個元素或交互描述。各種類型的信息顯示在交互式描述中。

優(yōu)點

快速定位元素的交互式描述;

描述交互的分類（如信息項，操作，狀態(tài)，排序等），有效防止缺失需求，并有助于制定查看要求。

缺點

如果界面上有大量信息需要標(biāo)記，可能會導(dǎo)致頁面看起來有點混亂。

總結(jié)

每種原型都有其優(yōu)點和缺點。在實踐中，最重要的不是如何展示您的原型，而是與設(shè)計師和開發(fā)人員達(dá)成共識，以及什么樣的原型將幫助他們了解需求。對于工作場所的新人，提醒每個人都要記住不要過度沉迷于頁面動態(tài)，忘記原型的基本目的（清晰明了的界面邏輯）。

如上所述，我談到了我自己的原型圖的演變。原型圖是我們工作中輸出的重要文檔之一，因此我們需要不斷完善它，提高工作效率，更好地幫助開發(fā)人員了解需求。

謝謝你的耐心等待

« 15種常見的消費者心理和對應(yīng)的營銷戰(zhàn)略 | 微軟收購了TikTok，沃爾瑪為什么在抓？ »