原型說明咋寫-開關
開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。
步驟一:約定規范
如圖,與開發、UI約定組件規范,并維護在獨立文檔中。
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。
那么,規范與模板應該怎么寫?
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。強烈建議點個【關注】或【收藏】不迷路。
本期組件:開關????
組件概述:滑動開關用于在兩個互斥對象進行選擇,表示兩種相互對立的狀態間的切換,多用于觸發“開/關”。
一、約定規范
本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;
本節內容可通過一份規范文檔維護。
1. 樣式規范
- 不同項目中,可自定義打開、關閉的顏色
- 默認開啟狀態為主題色,關閉狀態置灰
- 禁用狀態則在原色調下增加50%透明度后顏色
2. 交互規范
- 熱區為整個按鈕
- 單擊切換開關狀態
- 顯示氣泡提示/文字提示,提示內容跟隨開關改變
- 常駐提示一直存在,通過主題色區分開啟狀態提示內容
- 氣泡提示則鼠標懸停時顯示,且禁用狀態也需顯示
3. 可控參數
- 狀態:說明默認為開啟還是關閉(建議通過樣式區分),還需說明是可用/禁用
- 帶提示:常駐提示/氣泡提示,并說明開啟的提示文案、關閉的提示文案
- 前置影響:如什么情況會導致按鈕切換為開/關,或禁用
- 后置影響:如打開/關閉時,顯示/隱藏輸入框、按鈕等控件,或啟用某一類特定的算法?
二、產出模板
組件名稱前加個“規范”,便于團隊識別規范組件。
組件名稱:規范-開關??
- 狀態:開啟,可用
- 帶提示:氣泡提示,開啟:XX功能可用;關閉:XX功能不可用
- 前置影響:暫無
- 后置影響:打開/關閉時,顯示/隱藏XXX輸入框
結語
本系列持續更新,喜歡的朋友請點個【關注】或【收藏】,您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!