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

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

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

步驟二：使用模板

如圖，Axure可將帶說(shuō)明的通用組件置入元件庫(kù)，出原型時(shí)使用；開(kāi)發(fā)看到組件，則使用約定規(guī)范；墨刀同理?！綪S：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

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

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

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

本期組件：復(fù)選器????

組件概述：適用性較廣的基礎(chǔ)多選，用標(biāo)簽展示已選項(xiàng)。若可選項(xiàng)少于 5 項(xiàng)，建議將選項(xiàng)平鋪，使用多選框。

一、約定規(guī)范

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

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

1. 未展開(kāi)

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

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

+懸停狀態(tài)：有對(duì)應(yīng)反饋，告知用戶可操作（展開(kāi)時(shí)同理）

+完成狀態(tài)-平鋪：框內(nèi)以標(biāo)簽形式展示選中項(xiàng)，排版為響應(yīng)式布局

-標(biāo)簽按選擇順序排序

-標(biāo)簽帶刪除按鈕，點(diǎn)擊直接刪除，下個(gè)標(biāo)簽自動(dòng)補(bǔ)位

+完成狀態(tài)-合并：再起一個(gè)標(biāo)簽，按已選標(biāo)簽之外計(jì)數(shù)，如：選2個(gè)為+1，選3個(gè)為+2

+禁用狀態(tài)：組件呈灰態(tài)，鼠標(biāo)懸停無(wú)交互呈“禁用”態(tài)，已選標(biāo)簽的刪除按鈕隱藏

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

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

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

+完成狀態(tài)：平鋪、合并

2. 展開(kāi)????

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

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

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

B端产品经理的能力模型与学习提升

B端产品经理面临的第一大挑战，是如何正确的分析诊断业务问题。 这也是最难的部分，产品设计知识对这部分工作基本没有帮助，如果想做好业务分析诊断，必须具备扎实 ...

查看详情 >

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

-超出最大可選：再次選擇，則toast提示“已達(dá)最大可選數(shù)”

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

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

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

+選項(xiàng)清單：建議通過(guò)說(shuō)明維護(hù)選項(xiàng)，可通過(guò)逗號(hào)區(qū)隔方式列出選項(xiàng)，如：選項(xiàng)一，選項(xiàng)二

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

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

+最大可選數(shù)：框定最大可選數(shù)量，0則不限制

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

3. 超出處理方案???

+選項(xiàng)個(gè)數(shù)超出：超出一行，則輸入框向下響應(yīng)式拓展

+標(biāo)簽長(zhǎng)度超出：超出一行，超出部分省略

+選項(xiàng)長(zhǎng)度超長(zhǎng)：拓展面板寬度，但不超出窗口邊界

4. 滾動(dòng)面板

+無(wú)特殊要求，默認(rèn)最多顯示7個(gè)選項(xiàng)，超出滾動(dòng)顯示

-注意：第8選項(xiàng)需顯示一半，以提示用戶可向下滾動(dòng)

+展開(kāi)時(shí)，保留上次停留位置；無(wú)法保留（如頁(yè)面重新載入）則：

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

-未選，回到第一個(gè)

5. 分組選項(xiàng)

+分組名的顏色比選項(xiàng)淡，字號(hào)更小

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

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

+選項(xiàng)清單：組名稱一（選項(xiàng)一，選項(xiàng)二，選項(xiàng)三），組名稱二（選項(xiàng)一，選項(xiàng)二）

6. 選項(xiàng)說(shuō)明?????

+選項(xiàng)說(shuō)明靠右顯示，顏色比選項(xiàng)淡

+說(shuō)明可以是既定文案，也可以是傳過(guò)來(lái)的值

+選中選項(xiàng)，只填入選項(xiàng)名

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

+選項(xiàng)清單：項(xiàng)一|說(shuō)明一，選項(xiàng)二|說(shuō)明二

7. 一鍵清除

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

+無(wú)選項(xiàng)時(shí)懸停，為

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

+帶清除：是/否

8. 可搜索、創(chuàng)建選項(xiàng)及其他

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

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

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

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

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

+選中后保留關(guān)鍵詞：即搜索后選中選項(xiàng)是否保留搜索關(guān)鍵詞

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

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

二、產(chǎn)出模板

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

模版可直接寫(xiě)入注釋，并存入Axure/墨刀元件庫(kù)

+組件名稱：規(guī)范-復(fù)選框

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

+提示文案：請(qǐng)點(diǎn)擊選項(xiàng)選項(xiàng)

+完成狀態(tài)：平鋪

+選項(xiàng)清單：

+最大可選數(shù)：不限

+選項(xiàng)排序：按清單順序排序

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

+禁用選項(xiàng)：無(wú)需

+帶清除：無(wú)需

+可搜索：無(wú)需

-選中后保留關(guān)鍵詞：否

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

+影響事件：暫無(wú)

結(jié)語(yǔ)

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