為什么需要原型標(biāo)注似舵？

在實(shí)際的原型設(shè)計(jì)過程中，大部分產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師都會在原型中添加一些文字標(biāo)注葱峡，文字標(biāo)注配合原型界面可以更完善更準(zhǔn)確地傳達(dá)設(shè)計(jì)想法砚哗。筆者調(diào)查了多位資深產(chǎn)品經(jīng)理，分析了大家在原型中添加標(biāo)注無外乎以下幾種情況：

1. 描述數(shù)據(jù)狀態(tài)

2. 描述業(yè)務(wù)邏輯規(guī)則

3. 說明頁面異常情況

4. 交互制作成本高或無法實(shí)現(xiàn)砰奕，采用文字標(biāo)注

5. 整理彈框的提示文案

原型標(biāo)注的方法有很多蛛芥，每個產(chǎn)品經(jīng)理、交互設(shè)計(jì)師都有自己的原型標(biāo)注習(xí)慣军援、標(biāo)注方法仅淑。雖然標(biāo)注的方法有很多，但找到適合自己團(tuán)隊(duì)的標(biāo)注方法才是最重要的胸哥。原型標(biāo)注的目的就是為了向團(tuán)隊(duì)成員說明我們的設(shè)計(jì)想法與設(shè)計(jì)意圖,作為原型界面的補(bǔ)充說明涯竟。縱觀大部分原型的標(biāo)注主要是以下四種：

01 箭頭標(biāo)注法

箭頭標(biāo)注法就是通過帶有箭頭的直線連接標(biāo)注對象及標(biāo)注文字空厌。一般情況下標(biāo)注的文字放置在原型左右兩側(cè)庐船，當(dāng)標(biāo)注較多時，注意這些連接線不能交叉嘲更，否則將影響原型文檔的可讀性筐钟。為了保證標(biāo)注美觀優(yōu)雅，標(biāo)注的文字要做到以下幾點(diǎn)：

• 保持統(tǒng)一的對齊方式赋朦，一般為左對齊

• 文字的字號小于原型字號篓冲，一般為12pt或13pt

• 文字顏色要與背景形成較大反差李破， 白色背景可采用紅色標(biāo)注

• 養(yǎng)成為標(biāo)注添加標(biāo)題的習(xí)慣

箭頭標(biāo)注.png

優(yōu)點(diǎn)：可讀性高，查看方便

缺點(diǎn)：線條繁雜纹因，界面與標(biāo)注之間的界限不清晰

02 編號標(biāo)注法

與箭頭標(biāo)注法類似喷屋，在界面左右兩側(cè)添加標(biāo)注文字琳拨。與箭頭標(biāo)注法不同的是這種標(biāo)注方法沒有直連連接瞭恰，而是利用Axure自帶的圓形標(biāo)記或水滴標(biāo)記給標(biāo)注對象和標(biāo)注文字進(jìn)行編號，需要注意的是標(biāo)注對象和標(biāo)注文字的編號要保持一致狱庇，否則將影響文檔的易讀性與理解成本惊畏。

編號標(biāo)注.png

優(yōu)點(diǎn)：界面與標(biāo)注界限分明，界面清晰明了

缺點(diǎn)：標(biāo)注文字與標(biāo)注對象的關(guān)聯(lián)性較弱

03 說明標(biāo)注法

說明標(biāo)注法就是Axure自帶的說明功能密任，支持為元件颜启、頁面添加標(biāo)注，可以為每一個元件浪讳、頁面添加多條標(biāo)注缰盏。標(biāo)注的方法很簡單，選中標(biāo)注的元件對象或頁面淹遵，在說明面板輸入標(biāo)注的文字內(nèi)容口猜，說明面板提供了簡易的文本編輯器透揣，可以調(diào)整文字的字體济炎、顏色，為文本內(nèi)容添加項(xiàng)目編號辐真。需要注意的是须尚，頂部工具欄無法設(shè)置這里的文本樣式。查看原型時侍咱，標(biāo)注對象的周圍會出現(xiàn)一個帶有編號的黃色標(biāo)記耐床。標(biāo)注的內(nèi)容默認(rèn)是隱藏的，點(diǎn)擊黃色編號顯示標(biāo)注內(nèi)容楔脯，點(diǎn)擊關(guān)閉按鈕則隱藏標(biāo)注內(nèi)容咙咽。

說明標(biāo)注.png

優(yōu)點(diǎn)：可靈活控制標(biāo)注內(nèi)容的顯示與隱藏

缺點(diǎn)：不夠直觀，用戶需要點(diǎn)擊才可以查看

04 動態(tài)面板標(biāo)注法

在界面中添加動態(tài)面板淤年，設(shè)置動態(tài)面板的高度等于窗口的高度钧敞，通過頁面載入事件實(shí)現(xiàn)，寬度可以根據(jù)實(shí)際情況靈活設(shè)置麸粮。我們可以把這個動態(tài)面板當(dāng)做一個Word頁面溉苛，在這里隨意編輯、排版文字弄诲，就好像我們在Word里編寫需求文檔一樣愚战。

動態(tài)面板標(biāo)注.png

優(yōu)點(diǎn)：堪比Word的編輯效果娇唯，閱讀體驗(yàn)較好

缺點(diǎn)：標(biāo)注對象與標(biāo)注文字關(guān)聯(lián)性差，理解成本高

小結(jié)

上面介紹了幾種原型標(biāo)注的方法以及優(yōu)缺點(diǎn)分析寂玲，在實(shí)際工作中使用哪種方法要依據(jù)具體情況而定塔插。找到適合自己團(tuán)隊(duì)的標(biāo)注方法才是最重要的，尤其要考慮到開發(fā)拓哟、測試同學(xué)的閱讀習(xí)慣及理解成本想许。不知道各位產(chǎn)品經(jīng)理、交互設(shè)計(jì)師們都使用了哪些標(biāo)注方法断序？又或者開發(fā)流纹、測試的同學(xué)都喜歡哪種標(biāo)注方法，歡迎大家在評論區(qū)留言討論违诗。

喜歡Axure原型設(shè)計(jì)的朋友歡迎關(guān)注本賬號【Axure原型設(shè)計(jì)】漱凝，關(guān)注并私信“Axure”可獲取以下福利：
1）Axure RP9安裝包、漢化包
2）Axure RP9激活碼
3）PC及移動端交互組件庫