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

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

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

組件概述：通過一個個標(biāo)簽內(nèi)容，形成標(biāo)簽組。可標(biāo)記事物的屬性、維度，便于后期的分類與檢索

一、約定基礎(chǔ)樣式??

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

分為可編輯、不可編輯兩種，對其要求如下：

1.1 樣式???

1、尺寸邊距：一般組件庫會提供大中小尺寸，及文字邊距，UI可依據(jù)此情況設(shè)計UI庫

2、樣式說明：標(biāo)簽尾部有虛線“新增”，則表示此標(biāo)簽組可編輯（增刪改）。對顏色有要求，可單獨說明。

3、排版范圍：通過紅色線框，框定標(biāo)簽組顯示范圍

1.2 異常????

1、空標(biāo)簽：為空情況需約定方案

• 不可編輯：有文案提示
• 可編輯：顯示添加按鈕

2、標(biāo)簽溢出：標(biāo)簽內(nèi)容、數(shù)量超出顯示范圍需約定方案

• 標(biāo)簽內(nèi)容溢出：標(biāo)簽寬度需根據(jù)內(nèi)容長短自適應(yīng)，寬度達(dá)到排版范圍，則超出部分省略。
• 標(biāo)簽溢出：最后一個標(biāo)簽為超出標(biāo)簽數(shù)量，鼠標(biāo)懸停顯示超出標(biāo)簽的內(nèi)容，并通過“、”隔開

二、約定基礎(chǔ)交互

2.1 不可編輯標(biāo)簽

1、鼠標(biāo)懸停：氣泡顯示標(biāo)簽完整內(nèi)容

2.2. 可編輯標(biāo)簽

在“不可編輯標(biāo)簽”基礎(chǔ)上，還有如下：

1、增加：無論是輸入新增還是從備選框新增，都新增在尾部

2、刪除：刪除后，后續(xù)標(biāo)簽回退一格補齊

3、修改：在原標(biāo)簽位置修改，不動到整體排序

鼠標(biāo)懸停：呈“可編輯樣式”

4、拖動：支持按住標(biāo)簽拖動排序

鼠標(biāo)懸停：呈“可拖拽”樣式

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

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

不在原型中編輯標(biāo)簽內(nèi)容，原型僅控制紅框調(diào)整標(biāo)簽組范圍。標(biāo)簽組分為不可編輯及可編輯，分別對應(yīng)不同場景。

3.1 不可編輯標(biāo)簽

1、數(shù)據(jù)來源：說明標(biāo)簽數(shù)據(jù)來源

2、顯示范圍：原型中拖動范圍進(jìn)行設(shè)置

3、點擊事件：即點擊標(biāo)簽觸發(fā)的事件，分單擊、雙擊

3.2 可編輯標(biāo)簽

在“不可編輯標(biāo)簽”基礎(chǔ)上，還有如下：

1、固定標(biāo)簽：即不可移動、編輯、刪除的幾個標(biāo)簽，樣式會有區(qū)別

2、最大數(shù)量：可最多存在幾個標(biāo)簽（含固定標(biāo)簽）

3、新增方式：可選手動編輯新增/從備選框選擇（則不可修改標(biāo)簽內(nèi)容）

• 手動編輯：即使用約定交互的新增邏輯
• 從備選框選擇：需銜接到另一個原型

4、標(biāo)簽內(nèi)容限制：需限制輸入長度、輸入內(nèi)容等，否則易不可控

5、關(guān)閉事件：即移除標(biāo)簽觸發(fā)的事件

四、輸出說明模板

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

4.1 不可編輯標(biāo)簽

組件名稱：規(guī)范-不可編輯標(biāo)簽

數(shù)據(jù)來源：

顯示范圍：原型中拖動范圍設(shè)置

點擊事件：單擊/雙擊

4.2 可編輯標(biāo)簽

組件名稱：規(guī)范-可編輯標(biāo)簽?????????

數(shù)據(jù)來源：

顯示范圍：原型中拖動范圍設(shè)置

固定標(biāo)簽：

最大數(shù)量：10

新增方式：手動編輯

標(biāo)簽內(nèi)容限制：

• 輸入長度：5字符
• 輸入內(nèi)容：中文、數(shù)字、字母

點擊事件：單擊/雙擊

關(guān)閉事件：暫無

結(jié)語

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