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

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

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

步驟二：使用模板

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

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

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

=========當(dāng)前第9篇，剩37篇=========

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

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

一、約定規(guī)范

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

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

1. 未展開

+熱區(qū)為整個組件

+默認(rèn)狀態(tài)：框內(nèi)可顯示提示文字，文字顏色較淡

+懸停狀態(tài)：有對應(yīng)反饋，告知用戶可操作

+完成狀態(tài)：框內(nèi)顯示選中選項，文字顏色較深

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

+禁用狀態(tài)：整個組件呈灰態(tài)，鼠標(biāo)懸停無交互，且鼠標(biāo)呈“禁用”態(tài)

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

+組件狀態(tài)：可用/禁用，一般不會莫名禁用，可說明受哪些事件影響導(dǎo)致禁用

+提示文案：未選時，輸入框內(nèi)提示內(nèi)容

2. 展開

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

-展開方向：默認(rèn)向下，當(dāng)選擇器與窗口邊緣距離不夠放下面板時，需往距離夠的方向展開

+選擇狀態(tài)：懸停于選項時，對應(yīng)選項背景置灰

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

+有禁用選項：對應(yīng)選項置灰，鼠標(biāo)懸停于選項呈“禁用”態(tài)

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

+待選項為空：下拉框有對應(yīng)提示內(nèi)容

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

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

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

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

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

3. 滾動面板

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

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

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

-已選，默認(rèn)定位已選項

-未選，回到第一個

4. 分組選項

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

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

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

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

5. 選項說明

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

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

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

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

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

6. 一鍵清除

+有選項時懸停，右側(cè)圖標(biāo)切換為“清空”狀態(tài)，點擊清空選項。

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

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

+帶清除：是/否

7. 可搜索、創(chuàng)建選項和其他

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

+可以創(chuàng)建并選中選項中不存在的條目

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

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

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

+可創(chuàng)建選項：無需/支持

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

二、產(chǎn)出模板

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

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

+組件名稱：規(guī)范-單選器???????

+組件狀態(tài)：可用

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

+選項清單：

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

+默認(rèn)選項：無需

+禁用選項：無需

+帶清除：無需

+可搜索：無需

+可創(chuàng)建選項：無需

+影響事件：暫無

結(jié)語

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