原型說明咋寫-氣泡提示
開發(fā)吐槽原型說明不清晰,領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說,真是夾縫中生存的產(chǎn)品。今天教大家一個方法,既快又全。文末提供模板,可直接用
步驟一:約定規(guī)范
如圖,與開發(fā)、UI約定組件規(guī)范,并維護(hù)在獨(dú)立文檔中
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發(fā)看到組件,則使用約定規(guī)范;墨刀同理?!綪S:想了解word如何使用,請?jiān)u論留言哈】
那么,規(guī)范與模板應(yīng)該怎么寫?
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規(guī)范與模板分享予您
=========強(qiáng)烈建議點(diǎn)個【關(guān)注】或【收藏】不迷路=========
本期組件:氣泡提示
組件概述:通過低打擾方式,快速顯示簡短無格式要求內(nèi)容
一、 約定基礎(chǔ)規(guī)范
本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容,通過規(guī)范文檔維護(hù)。
1.交互及樣式??????
1)交互
鼠標(biāo)懸停在熱區(qū)則彈出氣泡提示,鼠標(biāo)離開則收起。
- 熱區(qū):可不加標(biāo)識,對應(yīng)按鈕、文字即為觸發(fā)熱區(qū),也可通過增加“info標(biāo)識”為作為觸發(fā)熱區(qū)
2)樣式
- UI需界定氣泡縮放極限值(即最短、最長樣式)
- 氣泡大小跟隨內(nèi)容長短縮放,達(dá)到長度極值則換行,換行自動調(diào)整氣泡高度尺寸
2. 位置與層級????????
1)位置
會在頁面任何需要的地方出現(xiàn),組件需做避開窗口邊緣處理,如:
- 熱區(qū)在頂部,則氣泡出現(xiàn)在下方
- 熱區(qū)在右側(cè),氣泡部分內(nèi)容超出屏幕,則左側(cè)顯示
2)層級
需明確該組件所在的頁面層級,以防出現(xiàn)彈窗將全局提示遮蓋情況
二、約定可控參數(shù)
本節(jié)主要與研發(fā)約定原型中可控制的參數(shù),也通過規(guī)范文檔維護(hù)。文中會提供示例參數(shù),及參數(shù)填寫說明。
1)觸發(fā):默認(rèn)為鼠標(biāo)懸停出現(xiàn)(可無需描述);也可通過描述“單擊”、“懸停等待0.5秒”等方式控制出現(xiàn)方式
2)內(nèi)容:描述實(shí)際顯示內(nèi)容,如有動態(tài)數(shù)據(jù),則通過大括號{}表示,并另起一行說明數(shù)據(jù)來源,如需顯示{創(chuàng)建時間}
{創(chuàng)建時間}:此條記錄的創(chuàng)建時間
三、輸出說明模板
組件名稱前加個“規(guī)范”,便于團(tuán)隊(duì)識別規(guī)范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫。
1. 說明中直接描述???
一般不會單獨(dú)出現(xiàn),而是嵌套在其他組件的原型說明中,單獨(dú)起一行“交互類”說明
2. 通過表格維護(hù)
如果頁面內(nèi)容較多,涉及業(yè)務(wù)復(fù)雜,需要較多提示,建議單獨(dú)通過表格維護(hù),便于開發(fā)查漏及修改
結(jié)語
本系列持續(xù)更新,喜歡的朋友請點(diǎn)個【關(guān)注】或【收藏】,您的鼓勵是我們持續(xù)分享的動力。
本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
留言
感謝