原型說明咋寫-滑動范圍輸入條

0 評論 2163 瀏覽 0 收藏 5 分鐘

開發吐槽原型說明不清晰;領導說出原型要快細節后面再說。真是夾縫求生存的產品,今天教大家一個辦法,既能快、又能全。以下,enjoy~

步驟一:約定規范

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

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理。【PS:想了解word如何使用,請評論留言哈】

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

本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。

本期組件:滑動范圍輸入條。

組件概述:??當用戶需要在數值區間/自定義區間內進行選擇時,建議使用此類組件。

一、 約定默認交互

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

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

1. 交互約定

1)元件狀態

  1. 需具備”啟用、禁用、鼠標懸停與拖動滑塊”狀態,樣式如下圖:
  2. 鼠標懸停與拖動滑塊:懸停時,滑塊放大,并出現氣泡提示,以表示可操作;拖動時,在懸?;A上氣泡數值根據滑塊拖動位置改變。

2)元件操作

1.通過點擊滑軌,快速移動滑塊至點擊區域(點擊位置離哪個滑塊近,就移動哪個滑塊)。

2.左滑塊可滑動到右滑塊右側,變為最大值,右滑塊同理。

3.顯示氣泡提示:可定義默認顯示,即常駐“氣泡提示”。

4.帶輸入框:可定義是否帶輸入框。輸入框默認為“數字輸入框”,輸入框邊界受輸入條影響,改變輸入框數值,同步影響滑塊位置。

2. 設計約定

  1. 根據原型設計確定合理的組件長度、顏色,以及滑塊樣式。
  2. 可根據實際情況決定橫向還是豎向布置,及輸入框布局。

二、約定可控參數

  • +狀態:啟用/禁用
  • +默認值:一般可默認為始發值、終點值或中間值
  • +氣泡提示方式:常駐/懸停顯示
  • +氣泡提示內容:可為整數、小數、百分數,具體由業務需求來確定
  • +需要輸入框:無需/需要
  • +最小值:根據實際業務需求確定
  • +最大值:根據實際業務需求確定
  • +步長:即拖動的最小增/減量
  • +操作后置結果:影響關聯數據表數據

3. 產出說明模板

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

模板可直接寫入注釋,并存入Axure/墨刀的元件庫。

組件名稱:規范-滑動范圍輸入條

  • +狀態:啟用
  • +默認值:XX、XX
  • +氣泡提示方式:懸停顯示
  • +氣泡提示內容:整數
  • +需要輸入框:無需
  • +最小值:XX
  • +最大值:XX
  • +步長:1
  • +操作后置結果:暫無

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

題圖來自Unsplash,基于 CC0 協議

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

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