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

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

各種原型介紹

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

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

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

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

優(yōu)點(diǎn)

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

缺點(diǎn)

這種原型有很多缺點(diǎn)。

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

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

因?yàn)檫@些原型的用戶體驗(yàn)非常糟糕，所以我決定平鋪所有頁面并圍繞交互式描述，如下所示…

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

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

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

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

優(yōu)點(diǎn)

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

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

缺點(diǎn)

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

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

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

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

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

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

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

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

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

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

優(yōu)點(diǎn)

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

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

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

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

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

缺點(diǎn)

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

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

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

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

優(yōu)點(diǎn)

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

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

缺點(diǎn)

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

總結(jié)

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

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

謝謝你的耐心等待

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