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

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

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

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫(kù)，出原型時(shí)使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理。

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

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

本期組件：開關(guān)????

組件概述：滑動(dòng)開關(guān)用于在兩個(gè)互斥對(duì)象進(jìn)行選擇，表示兩種相互對(duì)立的狀態(tài)間的切換，多用于觸發(fā)“開/關(guān)”。

一、約定規(guī)范

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

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

1. 樣式規(guī)范

• 不同項(xiàng)目中，可自定義打開、關(guān)閉的顏色
• 默認(rèn)開啟狀態(tài)為主題色，關(guān)閉狀態(tài)置灰
• 禁用狀態(tài)則在原色調(diào)下增加50%透明度后顏色

2. 交互規(guī)范

• 熱區(qū)為整個(gè)按鈕
• 單擊切換開關(guān)狀態(tài)
• 顯示氣泡提示/文字提示，提示內(nèi)容跟隨開關(guān)改變
• 常駐提示一直存在，通過主題色區(qū)分開啟狀態(tài)提示內(nèi)容
• 氣泡提示則鼠標(biāo)懸停時(shí)顯示，且禁用狀態(tài)也需顯示

3. 可控參數(shù)

• 狀態(tài)：說明默認(rèn)為開啟還是關(guān)閉（建議通過樣式區(qū)分），還需說明是可用/禁用
• 帶提示：常駐提示/氣泡提示，并說明開啟的提示文案、關(guān)閉的提示文案
• 前置影響：如什么情況會(huì)導(dǎo)致按鈕切換為開/關(guān)，或禁用
• 后置影響：如打開/關(guān)閉時(shí)，顯示/隱藏輸入框、按鈕等控件，或啟用某一類特定的算法?

二、產(chǎn)出模板

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

組件名稱：規(guī)范-開關(guān)??

• 狀態(tài)：開啟，可用
• 帶提示：氣泡提示，開啟：XX功能可用；關(guān)閉：XX功能不可用
• 前置影響：暫無
• 后置影響：打開/關(guān)閉時(shí)，顯示/隱藏XXX輸入框

結(jié)語

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