開發吐槽原型說明不清晰，領導催促原型要快細節再說，真是夾縫中生存的產品。今天教大家一個方法，既快又全。文末提供模板，可直接用。

步驟一：約定規范

如圖，與開發、UI約定組件規范，并維護在獨立文檔中。

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發看到組件，則使用約定規范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】

那么，規范與模板應該怎么寫？

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

=========強烈建議點個【關注】或【收藏】不迷路=========

本期組件：級聯單選器

組件概述：當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看并選擇。

一、約定規范

本節主要與開發、UI約定默認實現內容，并明確通過哪種形式約束交互；

本節內容可通過一份規范文檔維護。

1.基礎樣式

默認、懸停、完成樣式與常規輸入框一致。

2. 完成樣式

+完成樣式可定義：

• 顯示完整路徑：不同級別選項通過“/”區分
• 顯示最后一級：

產品可控參數

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

3.一鍵清除

+有選項時懸停，右側圖標切換為“清空”狀態，點擊清空選項。其中，點擊清空圖標之外，為選擇器基礎交互

+無選項時懸停，不做調整

產品可控參數

+帶清除：是/否

4. 展開面板

+展開收起：單擊輸入框，展開面板；點擊輸入框之外則收起

1）內容排布：按選項級別從左往右排列

2）子菜單觸發方式：

• 點擊觸發：點擊父級，切換子集內容
• 懸停觸發：鼠標懸停到哪個父級，則切換到哪個子集
• 展開方向：默認向下向右，當選擇器與窗口邊緣距離不夠放下面板時，需往距離夠方向展開

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

+懸停與選中：都有對應交互

產品可控參數

+選項清單：建議通過說明維護選項，可通過序號區隔方式列出選項，如：

1）父級一

• 子集一

2）父級二

• 子集一

+選項排序：默認按清單順序排序

+默認選項：即默認選中哪個選項

+子菜單觸發：點擊/懸停

5.選項顯示

+可自定備選項顯示內容，一般用于顯示子集數量

產品可控參數

+選項顯示：顯示一級子集數量

6.選擇方式?

+默認選最后一級，支持選擇任意層級的選項

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

產品可控參數

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

7.面板滾動

面板滾動：內容過多，則面板需要滾動顯示

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

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

• 已選，默認定位已選項
• 未選，回到第一個

8.異常樣式????

+超出顯示范圍

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

+待選項為空：面板提示“無匹配數據”

+禁用：分為選擇框禁用、選項禁用，都要有對應樣式。一般要什么什么原因導致的禁用

產品可控參數

+禁用：XXX事件會導致選擇器禁用 / 導致某選項禁用

9.其他

+可搜索：支持通過輸入關鍵字，從待選項中搜索結果

+影響事件：獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件

產品可控參數

+可搜索：無需/支持，搜索方式默認為半匹配

+影響事件：選中選項，如果是XXX，則顯示XXX組件

2. 產出模板

組件名稱前加個“規范”，便于團隊識別規范組件

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

+組件名稱：規范-級聯單選器

+提示文案：請選擇

+選項清單：

1）父級一

• 子集一

2）父級二

• 子集一

+選項排序：默認按清單順序排序

+默認選項：無

+子菜單觸發：懸停

+選擇方式：最后一級

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

+帶清除：是

+禁用：無

+可搜索：支持，搜索方式默認為半匹配

+影響事件：選中選項，如果是XXX，則顯示XXX組件

結語

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