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

步驟一：約定規范

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

步驟二：使用模板

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

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

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

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

一、約定規范

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

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

1. 輸入框規范

默認、懸停、完成：需有對應樣式

1）輸入框完成樣式

平鋪展示：框內以標簽形式展示選中項，排版為響應式布局

• 標簽按選擇順序排序
• 標簽帶刪除按鈕，點擊直接刪除，下個標簽自動補位

合并展示：再起一個標簽，按已選標簽之外計數，如：已選2個為+1，已選3個為+2

2）產品可控參數

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

3）標簽完成樣式

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

4）產品可控參數

標簽樣式：顯示完整路徑/ 顯示最后一級

5）一鍵清除

• 無選項時懸停，不做改變
• 有選項時懸停，右側圖標切換為“清空”狀態，點擊清空選項。（注：點擊清空圖標之外，為選擇器基礎交互）

6）產品可控參數

帶清除：是/否

2. 展開面板

• 展開收起：單擊輸入框，展開面板；點擊輸入框之外則收起。
• 展開方向：默認向下向右，當空間不夠時，需往空間足夠方向展開。
• 路徑記憶：收起面板，記憶上次路徑；重新載入頁面，則回到第一。

3. 面板說明

1）默認、懸停、選中

①需有對應樣式

②選項按級別從左往右排列，一般到第三層級

③子菜單觸發

• 點擊觸發：點擊父級內容區域，切換子集內容
• 懸停觸發：鼠標懸停哪個父級，則切換哪個子集

④選中交互說明

• 點擊可切換選中
• 選中子集，父級路徑選項有對應樣式
• 選中父級，則全選子集

產品可控參數

• 選項清單：建議通過說明維護選項，可通過序號區隔方式列出選項
• 選項排序：默認按清單順序排序
• 默認選項：即默認選中哪個選項
• 子菜單觸發：點擊/懸停

2）選項說明

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

產品可控參數

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

3）選擇方式

通過點擊多選框完成選擇，方式區分如下：

• 選最后一級：可勾選任意級別選項，但勾選父節點真正選中的是末子節點
• 選任意一級：可勾選任意級別選項，而不關聯子節點

產品可控參數

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

4）面板滾動

選項超過5個，則滾動顯示（注：首個超出選項顯示一半，以引導用戶可滾動）。

4.異常樣式

①超出顯示范圍

• 選項個數超出：超出一行，則輸入框向下響應式拓展
• 已選項超長：超出部分省略
• 選項長度超長：拓展面板寬度，但不超出窗口邊界

②待選項為空

• 整體無數據：面板提示“無匹配數據”
• 個別選項無數據：此選項不顯示“向右箭頭”

③禁用

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

④產品可控參數

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

5.其他

• 可搜索：支持通過輸入關鍵字，從待選項中搜索結果
• 影響事件：獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件

產品可控參數

• 可搜索：無需/支持，搜索方式默認為半匹配
• 影響事件：選中選項，如果是XXX，則顯示XXX組件

二、產出模板

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

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

• 組件名稱：規范-級聯復選器
• 選項清單：
• 選項排序：默認按清單順序排序
• 默認選項：
• 子菜單觸發：懸停
• 標簽樣式：顯示完整路徑/
• 完成樣式：平鋪展示
• 帶清除：是
• 選項顯示：無需
• 選擇方式：選最后一級
• 禁用：無
• 可搜索：支持，搜索方式默認為半匹配
• 影響事件：選中選項，如果是XXX，則顯示XXX組件