產(chǎn)品經(jīng)理們標(biāo)注原型的方法都有哪些?

0 評論 989 瀏覽 5 收藏 6 分鐘

現(xiàn)在不少同學(xué)都會(huì)在原型上補(bǔ)充文字標(biāo)注,以更好傳遞設(shè)計(jì)想法。本文分享了四種標(biāo)注方式,看看你們用的是哪一種呢?

為什么需要原型標(biāo)注?

在實(shí)際的原型設(shè)計(jì)過程中,大部分產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師都會(huì)在原型中添加一些文字標(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)注的方法有很多,每個(gè)產(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)注較多時(shí),注意這些連接線不能交叉,否則將影響原型文檔的可讀性。

為了保證標(biāo)注美觀優(yōu)雅,標(biāo)注的文字要做到以下幾點(diǎn):

  • 保持統(tǒng)一的對齊方式,一般為左對齊
  • 文字的字號(hào)小于原型字號(hào),一般為12pt或13pt
  • 文字顏色要與背景形成較大反差, 白色背景可采用紅色標(biāo)注
  • 養(yǎng)成為標(biāo)注添加標(biāo)題的習(xí)慣

Axure原型設(shè)計(jì)案例源文件演示及下載地址:https://lvoedu.axshare.com/

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

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

02 編號(hào)標(biāo)注法

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

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

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

03 說明標(biāo)注法

說明標(biāo)注法就是Axure自帶的說明功能,支持為元件、頁面添加標(biāo)注,可以為每一個(gè)元件、頁面添加多條標(biāo)注。

標(biāo)注的方法很簡單,選中標(biāo)注的元件對象或頁面,在說明面板輸入標(biāo)注的文字內(nèi)容,說明面板提供了簡易的文本編輯器,可以調(diào)整文字的字體、顏色,為文本內(nèi)容添加項(xiàng)目編號(hào)。需要注意的是,頂部工具欄無法設(shè)置這里的文本樣式。

查看原型時(shí),標(biāo)注對象的周圍會(huì)出現(xiàn)一個(gè)帶有編號(hào)的黃色標(biāo)記。標(biāo)注的內(nèi)容默認(rèn)是隱藏的,點(diǎn)擊黃色編號(hào)顯示標(biāo)注內(nèi)容,點(diǎn)擊關(guān)閉按鈕則隱藏標(biāo)注內(nèi)容。

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

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

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

在界面中添加動(dòng)態(tài)面板,設(shè)置動(dòng)態(tài)面板的高度等于窗口的高度,通過頁面載入事件實(shí)現(xiàn),寬度可以根據(jù)實(shí)際情況靈活設(shè)置。

我們可以把這個(gè)動(dòng)態(tài)面板當(dāng)做一個(gè)Word頁面,在這里隨意編輯、排版文字,就好像我們在Word里編寫需求文檔一樣。

優(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ū)留言討論。

本文由 @PM_墨兮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!