開(kāi)發(fā)吐槽原型說(shuō)明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說(shuō)，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。文末提供模板，可直接用

步驟一：約定規(guī)范

如圖，與開(kāi)發(fā)、UI約定組件規(guī)范，并維護(hù)在獨(dú)立文檔中

步驟二：使用模板

如圖，Axure可將帶說(shuō)明的通用組件置入元件庫(kù)，出原型時(shí)使用；開(kāi)發(fā)看到組件，則使用約定規(guī)范；墨刀同理?！綪S：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

那么，規(guī)范與模板應(yīng)該怎么寫(xiě)？

本系列將通過(guò)“通用、輸入、輸出、反饋”四類約43個(gè)常用組件及3篇頁(yè)面（表單頁(yè)、列表頁(yè)、詳情頁(yè)）寫(xiě)法，將規(guī)范與模板分享予您

=========強(qiáng)烈建議點(diǎn)個(gè)【關(guān)注】或【收藏】不迷路=========

本期組件：氣泡提示

組件概述：通過(guò)低打擾方式，快速顯示簡(jiǎn)短無(wú)格式要求內(nèi)容

一、 約定基礎(chǔ)規(guī)范

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過(guò)規(guī)范文檔維護(hù)。

1.交互及樣式??????

1）交互

鼠標(biāo)懸停在熱區(qū)則彈出氣泡提示，鼠標(biāo)離開(kāi)則收起。

• 熱區(qū)：可不加標(biāo)識(shí)，對(duì)應(yīng)按鈕、文字即為觸發(fā)熱區(qū)，也可通過(guò)增加“info標(biāo)識(shí)”為作為觸發(fā)熱區(qū)

2）樣式

• UI需界定氣泡縮放極限值（即最短、最長(zhǎng)樣式）
• 氣泡大小跟隨內(nèi)容長(zhǎng)短縮放，達(dá)到長(zhǎng)度極值則換行，換行自動(dòng)調(diào)整氣泡高度尺寸

2. 位置與層級(jí)????????

1）位置

會(huì)在頁(yè)面任何需要的地方出現(xiàn)，組件需做避開(kāi)窗口邊緣處理，如：

• 熱區(qū)在頂部，則氣泡出現(xiàn)在下方
• 熱區(qū)在右側(cè)，氣泡部分內(nèi)容超出屏幕，則左側(cè)顯示

2）層級(jí)

需明確該組件所在的頁(yè)面層級(jí)，以防出現(xiàn)彈窗將全局提示遮蓋情況

二、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過(guò)規(guī)范文檔維護(hù)。文中會(huì)提供示例參數(shù)，及參數(shù)填寫(xiě)說(shuō)明。

1）觸發(fā)：默認(rèn)為鼠標(biāo)懸停出現(xiàn)（可無(wú)需描述）；也可通過(guò)描述“單擊”、“懸停等待0.5秒”等方式控制出現(xiàn)方式

2）內(nèi)容：描述實(shí)際顯示內(nèi)容，如有動(dòng)態(tài)數(shù)據(jù)，則通過(guò)大括號(hào){}表示，并另起一行說(shuō)明數(shù)據(jù)來(lái)源，如需顯示{創(chuàng)建時(shí)間}

{創(chuàng)建時(shí)間}：此條記錄的創(chuàng)建時(shí)間

三、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫(xiě)入注釋，并存為Axure/墨刀元件庫(kù)。

1. 說(shuō)明中直接描述???

一般不會(huì)單獨(dú)出現(xiàn)，而是嵌套在其他組件的原型說(shuō)明中，單獨(dú)起一行“交互類”說(shuō)明

2. 通過(guò)表格維護(hù)

如果頁(yè)面內(nèi)容較多，涉及業(yè)務(wù)復(fù)雜，需要較多提示，建議單獨(dú)通過(guò)表格維護(hù)，便于開(kāi)發(fā)查漏及修改

結(jié)語(yǔ)

本系列持續(xù)更新，喜歡的朋友請(qǐng)點(diǎn)個(gè)【關(guān)注】或【收藏】，您的鼓勵(lì)是我們持續(xù)分享的動(dòng)力。