原型說明咋寫-滑動范圍輸入條
開發吐槽原型說明不清晰;領導說出原型要快細節后面再說。真是夾縫求生存的產品,今天教大家一個辦法,既能快、又能全。以下,enjoy~
步驟一:約定規范
如圖,與開發、UI約定組件規范,并維護在獨立文檔中。
步驟二:使用模板
如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。【PS:想了解word如何使用,請評論留言哈】
那么,規范與模板應該怎么寫?
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。
本期組件:滑動范圍輸入條。
組件概述:??當用戶需要在數值區間/自定義區間內進行選擇時,建議使用此類組件。
一、 約定默認交互
本節主要與開發、UI約定默認實現內容,并明確通過哪種形式約束交互;
本節內容可通過一份規范文檔維護。
1. 交互約定
1)元件狀態
- 需具備”啟用、禁用、鼠標懸停與拖動滑塊”狀態,樣式如下圖:
- 鼠標懸停與拖動滑塊:懸停時,滑塊放大,并出現氣泡提示,以表示可操作;拖動時,在懸?;A上氣泡數值根據滑塊拖動位置改變。
2)元件操作
1.通過點擊滑軌,快速移動滑塊至點擊區域(點擊位置離哪個滑塊近,就移動哪個滑塊)。
2.左滑塊可滑動到右滑塊右側,變為最大值,右滑塊同理。
3.顯示氣泡提示:可定義默認顯示,即常駐“氣泡提示”。
4.帶輸入框:可定義是否帶輸入框。輸入框默認為“數字輸入框”,輸入框邊界受輸入條影響,改變輸入框數值,同步影響滑塊位置。
2. 設計約定
- 根據原型設計確定合理的組件長度、顏色,以及滑塊樣式。
- 可根據實際情況決定橫向還是豎向布置,及輸入框布局。
二、約定可控參數
- +狀態:啟用/禁用
- +默認值:一般可默認為始發值、終點值或中間值
- +氣泡提示方式:常駐/懸停顯示
- +氣泡提示內容:可為整數、小數、百分數,具體由業務需求來確定
- +需要輸入框:無需/需要
- +最小值:根據實際業務需求確定
- +最大值:根據實際業務需求確定
- +步長:即拖動的最小增/減量
- +操作后置結果:影響關聯數據表數據
3. 產出說明模板
組件名稱前加個“規范”,便于團隊識別規范組件;
模板可直接寫入注釋,并存入Axure/墨刀的元件庫。
組件名稱:規范-滑動范圍輸入條
- +狀態:啟用
- +默認值:XX、XX
- +氣泡提示方式:懸停顯示
- +氣泡提示內容:整數
- +需要輸入框:無需
- +最小值:XX
- +最大值:XX
- +步長:1
- +操作后置結果:暫無
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!