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

步驟一：約定規范

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

步驟二：使用模板

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

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

本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法，將規范與模板分享予您。強烈建議點個【關注】或【收藏】不迷路。

=========當前第9篇，剩37篇=========

本期組件：單選器????

組件概述：????當選項過多時，彈出一個下拉菜單給用戶選擇。若可選項少于 5 項，建議將選項平鋪，使用單選框。

一、約定規范

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

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

1. 未展開

+熱區為整個組件

+默認狀態：框內可顯示提示文字，文字顏色較淡

+懸停狀態：有對應反饋，告知用戶可操作

+完成狀態：框內顯示選中選項，文字顏色較深

-所選內容超出輸入框顯示范圍，則截斷（注：不影響箭頭）

+禁用狀態：整個組件呈灰態，鼠標懸停無交互，且鼠標呈“禁用”態

產品可控參數

+組件狀態：可用/禁用，一般不會莫名禁用，可說明受哪些事件影響導致禁用

+提示文案：未選時，輸入框內提示內容

2. 展開

+展開收起：獲取輸入框焦點，展開面板；失去焦點則收起；待選面板寬度默認與輸入框一致

-展開方向：默認向下，當選擇器與窗口邊緣距離不夠放下面板時，需往距離夠的方向展開

+選擇狀態：懸停于選項時，對應選項背景置灰

+選中狀態：選中選項后，選項呈主題色并填入輸入框，同時收起下拉框；重復點擊已選項，不取消選中

+有禁用選項：對應選項置灰，鼠標懸停于選項呈“禁用”態

+待選項超長：延展待選面板寬度

+待選項為空：下拉框有對應提示內容

產品可控參數

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

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

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

+禁用選項：一般不會莫名禁用，可說明受哪些事件影響導致選項被禁用

3. 滾動面板

+無特殊要求，默認最多顯示7個選項，超出滾動顯示

-注意：第8選項需顯示一半，以提示用戶可向下滾動

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

-已選，默認定位已選項

-未選，回到第一個

4. 分組選項

+分組名的顏色比選項淡，字號更小

+分組名僅做區分，不可被選擇，選擇后，僅填入選項名

產品可控參數

+選項清單：組名稱一（選項一，選項二，選項三），組名稱二（選項一，選項二）

5. 選項說明

+選項說明靠右顯示，顏色比選項淡

+說明可以是既定文案，也可以是傳過來的值

+選中選項，只填入選項名

產品可控參數

+選項清單：項一|說明一，選項二|說明二

6. 一鍵清除

+有選項時懸停，右側圖標切換為“清空”狀態，點擊清空選項。

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

產品可控參數

+帶清除：是/否

7. 可搜索、創建選項和其他

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

+可以創建并選中選項中不存在的條目

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

產品可控參數

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

+可創建選項：無需/支持

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

二、產出模板

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

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

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

+組件狀態：可用

+提示文案：請點擊選項選項

+選項清單：

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

+默認選項：無需

+禁用選項：無需

+帶清除：無需

+可搜索：無需

+可創建選項：無需

+影響事件：暫無

結語

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