開(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ī)范與模板分享予您。

• 本期組件：級(jí)聯(lián)復(fù)選器
• 組件概述：當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級(jí)結(jié)構(gòu)時(shí)，可通過(guò)級(jí)聯(lián)選擇器逐級(jí)查看并選擇。

一、約定規(guī)范

本節(jié)主要與開(kāi)發(fā)、UI約定默認(rèn)實(shí)現(xiàn)內(nèi)容，并明確通過(guò)哪種形式約束交互；

本節(jié)內(nèi)容可通過(guò)一份規(guī)范文檔維護(hù)。

1. 輸入框規(guī)范

默認(rèn)、懸停、完成：需有對(duì)應(yīng)樣式

1）輸入框完成樣式

平鋪展示：框內(nèi)以標(biāo)簽形式展示選中項(xiàng)，排版為響應(yīng)式布局

• 標(biāo)簽按選擇順序排序
• 標(biāo)簽帶刪除按鈕，點(diǎn)擊直接刪除，下個(gè)標(biāo)簽自動(dòng)補(bǔ)位

合并展示：再起一個(gè)標(biāo)簽，按已選標(biāo)簽之外計(jì)數(shù)，如：已選2個(gè)為+1，已選3個(gè)為+2

2）產(chǎn)品可控參數(shù)

完成樣式：平鋪展示/合并展示

3）標(biāo)簽完成樣式

• 顯示完整路徑：不同級(jí)別選項(xiàng)通過(guò)“/”區(qū)分
• 顯示最后一級(jí)：即只顯示最后一級(jí)

4）產(chǎn)品可控參數(shù)

標(biāo)簽樣式：顯示完整路徑/ 顯示最后一級(jí)

5）一鍵清除

• 無(wú)選項(xiàng)時(shí)懸停，不做改變
• 有選項(xiàng)時(shí)懸停，右側(cè)圖標(biāo)切換為“清空”狀態(tài)，點(diǎn)擊清空選項(xiàng)。（注：點(diǎn)擊清空?qǐng)D標(biāo)之外，為選擇器基礎(chǔ)交互）

6）產(chǎn)品可控參數(shù)

帶清除：是/否

2. 展開(kāi)面板

• 展開(kāi)收起：?jiǎn)螕糨斎肟?，展開(kāi)面板；點(diǎn)擊輸入框之外則收起。
• 展開(kāi)方向：默認(rèn)向下向右，當(dāng)空間不夠時(shí)，需往空間足夠方向展開(kāi)。
• 路徑記憶：收起面板，記憶上次路徑；重新載入頁(yè)面，則回到第一。

3. 面板說(shuō)明

1）默認(rèn)、懸停、選中

①需有對(duì)應(yīng)樣式

②選項(xiàng)按級(jí)別從左往右排列，一般到第三層級(jí)

③子菜單觸發(fā)

• 點(diǎn)擊觸發(fā)：點(diǎn)擊父級(jí)內(nèi)容區(qū)域，切換子集內(nèi)容
• 懸停觸發(fā)：鼠標(biāo)懸停哪個(gè)父級(jí)，則切換哪個(gè)子集

④選中交互說(shuō)明

• 點(diǎn)擊可切換選中
• 選中子集，父級(jí)路徑選項(xiàng)有對(duì)應(yīng)樣式
• 選中父級(jí)，則全選子集

產(chǎn)品可控參數(shù)

• 選項(xiàng)清單：建議通過(guò)說(shuō)明維護(hù)選項(xiàng)，可通過(guò)序號(hào)區(qū)隔方式列出選項(xiàng)
• 選項(xiàng)排序：默認(rèn)按清單順序排序
• 默認(rèn)選項(xiàng)：即默認(rèn)選中哪個(gè)選項(xiàng)
• 子菜單觸發(fā)：點(diǎn)擊/懸停

2）選項(xiàng)說(shuō)明

可自定備選項(xiàng)顯示內(nèi)容，一般用于顯示子集數(shù)量

產(chǎn)品可控參數(shù)

選項(xiàng)顯示：顯示一級(jí)子集數(shù)量

3）選擇方式

通過(guò)點(diǎn)擊多選框完成選擇，方式區(qū)分如下：

• 選最后一級(jí)：可勾選任意級(jí)別選項(xiàng)，但勾選父節(jié)點(diǎn)真正選中的是末子節(jié)點(diǎn)
• 選任意一級(jí)：可勾選任意級(jí)別選項(xiàng)，而不關(guān)聯(lián)子節(jié)點(diǎn)

產(chǎn)品可控參數(shù)

選擇方式：最后一級(jí)/任意層級(jí)

4）面板滾動(dòng)

選項(xiàng)超過(guò)5個(gè)，則滾動(dòng)顯示（注：首個(gè)超出選項(xiàng)顯示一半，以引導(dǎo)用戶可滾動(dòng)）。

4.異常樣式

①超出顯示范圍

• 選項(xiàng)個(gè)數(shù)超出：超出一行，則輸入框向下響應(yīng)式拓展
• 已選項(xiàng)超長(zhǎng)：超出部分省略
• 選項(xiàng)長(zhǎng)度超長(zhǎng)：拓展面板寬度，但不超出窗口邊界

②待選項(xiàng)為空

• 整體無(wú)數(shù)據(jù)：面板提示“無(wú)匹配數(shù)據(jù)”
• 個(gè)別選項(xiàng)無(wú)數(shù)據(jù)：此選項(xiàng)不顯示“向右箭頭”

③禁用

分為選擇框禁用、選項(xiàng)禁用，需有對(duì)應(yīng)樣式。一般要說(shuō)明什么原因?qū)е碌慕?/p>

④產(chǎn)品可控參數(shù)

禁用：XXX事件會(huì)導(dǎo)致選擇器禁用/導(dǎo)致某選項(xiàng)禁用

5.其他

• 可搜索：支持通過(guò)輸入關(guān)鍵字，從待選項(xiàng)中搜索結(jié)果
• 影響事件：獲取焦點(diǎn)、失去焦點(diǎn)、選中選項(xiàng)都可以產(chǎn)生影響其他組件的事件

產(chǎn)品可控參數(shù)

• 可搜索：無(wú)需/支持，搜索方式默認(rèn)為半匹配
• 影響事件：選中選項(xiàng)，如果是XXX，則顯示XXX組件

二、產(chǎn)出模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件

模板可直接寫(xiě)入注釋，并存為Axure/墨刀元件庫(kù)

• 組件名稱：規(guī)范-級(jí)聯(lián)復(fù)選器
• 選項(xiàng)清單：
• 選項(xiàng)排序：默認(rèn)按清單順序排序
• 默認(rèn)選項(xiàng)：
• 子菜單觸發(fā)：懸停
• 標(biāo)簽樣式：顯示完整路徑/
• 完成樣式：平鋪展示
• 帶清除：是
• 選項(xiàng)顯示：無(wú)需
• 選擇方式：選最后一級(jí)
• 禁用：無(wú)
• 可搜索：支持，搜索方式默認(rèn)為半匹配
• 影響事件：選中選項(xiàng)，如果是XXX，則顯示XXX組件