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

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

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

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理。【PS：想了解word如何使用，請?jiān)u論留言哈】

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

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

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

本期組件：級聯(lián)單選器

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

一、約定規(guī)范

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

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

1.基礎(chǔ)樣式

默認(rèn)、懸停、完成樣式與常規(guī)輸入框一致。

2. 完成樣式

+完成樣式可定義：

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

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

+完成樣式：顯示完整路徑/ 顯示最后一級

3.一鍵清除

+有選項(xiàng)時懸停，右側(cè)圖標(biāo)切換為“清空”狀態(tài)，點(diǎn)擊清空選項(xiàng)。其中，點(diǎn)擊清空圖標(biāo)之外，為選擇器基礎(chǔ)交互

+無選項(xiàng)時懸停，不做調(diào)整

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

+帶清除：是/否

4. 展開面板

+展開收起：單擊輸入框，展開面板；點(diǎn)擊輸入框之外則收起

1）內(nèi)容排布：按選項(xiàng)級別從左往右排列

2）子菜單觸發(fā)方式：

• 點(diǎn)擊觸發(fā)：點(diǎn)擊父級，切換子集內(nèi)容
• 懸停觸發(fā)：鼠標(biāo)懸停到哪個父級，則切換到哪個子集
• 展開方向：默認(rèn)向下向右，當(dāng)選擇器與窗口邊緣距離不夠放下面板時，需往距離夠方向展開

3）路徑記憶：收起面板，記憶上次路徑

+懸停與選中：都有對應(yīng)交互

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

+選項(xiàng)清單：建議通過說明維護(hù)選項(xiàng)，可通過序號區(qū)隔方式列出選項(xiàng)，如：

1）父級一

• 子集一

2）父級二

• 子集一

+選項(xiàng)排序：默認(rèn)按清單順序排序

+默認(rèn)選項(xiàng)：即默認(rèn)選中哪個選項(xiàng)

+子菜單觸發(fā)：點(diǎn)擊/懸停

5.選項(xiàng)顯示

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

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

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

6.選擇方式?

+默認(rèn)選最后一級，支持選擇任意層級的選項(xiàng)

選任意級別交互：面板交互與普通選擇框一致；選項(xiàng)樣式切換為“單選框”，并繼承其交互?

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

+選擇方式：最后一級/任意層級

7.面板滾動

面板滾動：內(nèi)容過多，則面板需要滾動顯示

1）無特殊要求，默認(rèn)最多顯示5個選項(xiàng)，超出滾動顯示（注意：第6選項(xiàng)需顯示一半，以提示用戶可向下滾動）

2）展開時，保留上次停留位置；無法保留（如頁面重新載入）則：

• 已選，默認(rèn)定位已選項(xiàng)
• 未選，回到第一個

8.異常樣式????

+超出顯示范圍

• 已選項(xiàng)超長：超出部分省略
• 選項(xiàng)長度超長：拓展面板寬度，但不超出窗口邊界

+待選項(xiàng)為空：面板提示“無匹配數(shù)據(jù)”

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

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

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

9.其他

+可搜索：支持通過輸入關(guān)鍵字，從待選項(xiàng)中搜索結(jié)果

+影響事件：獲取焦點(diǎn)、失去焦點(diǎn)、選中選項(xiàng)都可以產(chǎn)生影響其他組件的事件

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

+可搜索：無需/支持，搜索方式默認(rèn)為半匹配

+影響事件：選中選項(xiàng)，如果是XXX，則顯示XXX組件

2. 產(chǎn)出模板

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

模板可直接寫入注釋，并存為Axure/墨刀元件庫

+組件名稱：規(guī)范-級聯(lián)單選器

+提示文案：請選擇

+選項(xiàng)清單：

1）父級一

• 子集一

2）父級二

• 子集一

+選項(xiàng)排序：默認(rèn)按清單順序排序

+默認(rèn)選項(xiàng)：無

+子菜單觸發(fā)：懸停

+選擇方式：最后一級

+完成樣式：顯示完整路徑

+帶清除：是

+禁用：無

+可搜索：支持，搜索方式默認(rèn)為半匹配

+影響事件：選中選項(xiàng)，如果是XXX，則顯示XXX組件

結(jié)語

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