原型說明咋寫-開關

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

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

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

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

步驟二:使用模板

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

那么,規(guī)范與模板應該怎么寫?

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

本期組件:開關????

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

一、約定規(guī)范

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

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

1. 樣式規(guī)范

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

2. 交互規(guī)范

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

3. 可控參數(shù)

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

二、產(chǎn)出模板

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

組件名稱:規(guī)范-開關??

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

結語

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

本文由 @產(chǎn)品工具庫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載

題圖來自Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

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