中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

步驟二：使用模板

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

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

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

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

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

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

一、約定規(guī)范

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

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

1. 未展開

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

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

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

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

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

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

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

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

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

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

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

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

2. 展開????

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 超出處理方案???

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

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

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

4. 滾動面板

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

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

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

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

-未選，回到第一個

5. 分組選項(xiàng)

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

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

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

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

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

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

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

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

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

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

7. 一鍵清除

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

+無選項(xiàng)時懸停，為

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

+帶清除：是/否

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

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

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

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

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

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

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

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

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

二、產(chǎn)出模板

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

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

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

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

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

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

+選項(xiàng)清單：

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

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

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

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

+帶清除：無需

+可搜索：無需

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

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

+影響事件：暫無

結(jié)語

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