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

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

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

步驟二：使用模板

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

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

以下，enjoy~

當前為本系列第7篇，剩39篇。

復選框，適用于多個勾選框綁定到同一個數(shù)組的情景，通過是否勾選來表示這一組選項中選中的項。單獨使用可以表示兩種狀態(tài)之間的切換。若選擇項超過5項，建議使用下拉選擇器。

1. 約定規(guī)范

本節(jié)為開發(fā)與設(shè)計師默認要實現(xiàn)的內(nèi)容；以及產(chǎn)品會通過哪種形式約束哪些參數(shù)，通過一份規(guī)范文檔維護。

1.1樣式規(guī)范

+多選框默認方形，選中時填充方形/打勾，并呈現(xiàn)主題色

+可根據(jù)頁面要求，定義選項間距參數(shù)等，未定義則使用默認值

+可定義樣式：“帶框樣式”、“組合按鈕樣式”，樣式需覆蓋基礎(chǔ)狀態(tài)，未定義則使用默認樣式

1.2. 交互規(guī)范

基礎(chǔ)狀態(tài)及操作

+鼠標移入選項，對應選項呈懸停樣式（熱區(qū)為圖標與文字區(qū)域）

+禁用狀態(tài)下，無懸停效果，也無法選中；

+單擊選項，切換為選中狀態(tài)

-再次單擊，取消選中

-單擊其他選項，增加選中，不取消原有選項

-當選擇數(shù)量達到最大可選時，單擊未選中項，toast提示：已達最大可選數(shù)；

“全選”操作

+“全選”按鈕默認排第一位，選中則全選所有選項，取消選中則全不選

+選中所有選項后，“全選”自動選中

+僅選中其中一個選項，或未選滿，不自動選中“全選”

排版說明

+選項之間會隨著選項文字數(shù)調(diào)整間距，使選項間距始終一致。

+在有限橫向范圍內(nèi)，一行放不下所有選項，則換行顯示。（注：非文字換行）

1.3.可控參數(shù)

+狀態(tài)：可用/禁用

+選項：將選項寫在說明中，不建議在通過原型維護，因為要照顧排版，較浪費時間

+默認值：默認選項

+帶全選：帶/不帶，帶全選則占用第一個選項為“全選”按鈕

+選擇數(shù)量限制：0～N，即可選范圍大于等于0個，小于等于N個，“全選”項不計數(shù)

+操作后置結(jié)果：選擇后，將影響關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)及剩余可勾選的選項數(shù)量

2. 產(chǎn)出模板

組件名稱前加個“規(guī)范”，便于通過此標識讓團隊知道此組件已編制規(guī)范。

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

+狀態(tài)：可用

+可選項：選項1、選項2、選項3

+默認值：選項1

+帶全選：不帶

+選擇數(shù)量限制：0～N

+操作后置結(jié)果：暫無

結(jié)語

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