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

對原型規(guī)范&說明模板不明白朋友，可查看：如何解決原型說明寫不全？

本期組件：角標(biāo)

組件概述：頁出現(xiàn)在按鈕、頭像右上角的數(shù)字或狀態(tài)標(biāo)記，引導(dǎo)用戶及時(shí)處理未讀信息

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

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

1、顯示位置：在按鈕、標(biāo)簽頁、卡片等的右上方。

2、不同樣式：樣式不同所表達(dá)意思不同，含數(shù)字/內(nèi)容的角標(biāo)圓圈寬度，需跟隨內(nèi)容寬度自適應(yīng)。

• 數(shù)字角標(biāo)：有新內(nèi)容，需用戶及時(shí)處理
• 小紅點(diǎn)：有新內(nèi)容，但重要度不及“數(shù)據(jù)角標(biāo)”
• 內(nèi)容角標(biāo)：增加內(nèi)容標(biāo)注，以突出不同點(diǎn)

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

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

1、出現(xiàn)邏輯：有未點(diǎn)擊內(nèi)容則出現(xiàn)

2、消失邏輯：所有內(nèi)容已點(diǎn)擊則消失

3、計(jì)數(shù)規(guī)則（僅數(shù)字角標(biāo)）：通過點(diǎn)擊內(nèi)容數(shù)量增減

4、最大值（僅數(shù)字角標(biāo)）：可角標(biāo)顯示的最大值，超過顯示‘{max}+’，如：

• 設(shè)置最大99，超出則顯示99+，
• 設(shè)置最大10，超出則顯示10+。

5、顯示內(nèi)容（僅內(nèi)容角標(biāo)）：默認(rèn)如原型所示，有時(shí)會隨數(shù)據(jù)狀態(tài)改變內(nèi)容，則需要說明

三、輸出說明模板

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

本次說明模板包含數(shù)字角標(biāo)、小紅點(diǎn)、內(nèi)容角標(biāo)，可根據(jù)實(shí)際場景使用，相關(guān)說明模板如下

1. 數(shù)字角標(biāo)

組件名稱：規(guī)范-數(shù)字角標(biāo)???

出現(xiàn)邏輯：有未點(diǎn)擊內(nèi)容則出現(xiàn)

消失邏輯：所有內(nèi)容已點(diǎn)擊則消失

計(jì)數(shù)規(guī)則：通過點(diǎn)擊內(nèi)容數(shù)量增減

最大值：99

2. 小紅點(diǎn)?

組件名稱：規(guī)范-小紅點(diǎn)?

出現(xiàn)邏輯：有未點(diǎn)擊內(nèi)容則出現(xiàn)

消失邏輯：所有內(nèi)容已點(diǎn)擊則消失

3. 內(nèi)容角標(biāo)

組件名稱：規(guī)范-內(nèi)容角標(biāo)?????????

出現(xiàn)邏輯：有未點(diǎn)擊內(nèi)容則出現(xiàn)

消失邏輯：所有內(nèi)容已點(diǎn)擊則消失

顯示內(nèi)容：如原型所示

結(jié)語

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