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

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

本期組件：角標

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

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

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

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

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

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

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

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

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

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

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

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

• 設置最大99，超出則顯示99+，
• 設置最大10，超出則顯示10+。

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

三、輸出說明模板

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

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

1. 數(shù)字角標

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

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

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

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

最大值：99

2. 小紅點?

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

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

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

3. 內(nèi)容角標

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

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

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

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

結語

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