原型說明咋寫-開關

0 評論 1462 瀏覽 7 收藏 4 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。

那么,規范與模板應該怎么寫?

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

本期組件:開關????

組件概述:滑動開關用于在兩個互斥對象進行選擇,表示兩種相互對立的狀態間的切換,多用于觸發“開/關”。

一、約定規范

本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;

本節內容可通過一份規范文檔維護。

1. 樣式規范

  • 不同項目中,可自定義打開、關閉的顏色
  • 默認開啟狀態為主題色,關閉狀態置灰
  • 禁用狀態則在原色調下增加50%透明度后顏色

2. 交互規范

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

3. 可控參數

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

二、產出模板

組件名稱前加個“規范”,便于團隊識別規范組件。

組件名稱:規范-開關??

  • 狀態:開啟,可用
  • 帶提示:氣泡提示,開啟:XX功能可用;關閉:XX功能不可用
  • 前置影響:暫無
  • 后置影響:打開/關閉時,顯示/隱藏XXX輸入框

結語

本系列持續更新,喜歡的朋友請點個【關注】【收藏】,您的鼓勵是我們持續分享的動力。

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!