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

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

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

步驟二：使用模板

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

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

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

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

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

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

一、約定規(guī)范

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

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

1. 樣式規(guī)范

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

2. 交互規(guī)范

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

3. 可控參數(shù)

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

二、產(chǎn)出模板

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

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

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

結(jié)語

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