原型說明咋寫-時間選擇器

0 評論 3032 瀏覽 16 收藏 11 分鐘

下面這篇文章是筆者整理分享的關于原型說明中時間選擇器的相關內容,對此產品感興趣或者是想要學習的同學可以進來看看哦!相信你會收獲到很多有用的內容知識。

步驟一:約定規范

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

步驟二:使用模板

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

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

本期組件:時間選擇器

組件概述:當用戶需要輸入一個時間,可通過輸入框彈出面板進行選擇一個任意時間或固定時間,本篇會拆分出4個模板,分別為固定時間選擇器、固定范圍時間選擇器、任意時間選擇器、任意時間范圍選擇器。

一、約定基礎規范

本節主要與研發約定默認實現內容,通過規范文檔維護。

1. 基礎樣式

單選-默認、懸停、完成:需有對應樣式

范圍-默認、懸停、完成:左右兩邊皆有輸入值,默認通過“至”區隔

2.展開面板

  • 展開與收起:單擊輸入框,展開面板;點擊輸入框之外則收起
  • 展開方向:默認向下向右,當空間不夠時,需往空間足夠方向展開
  • 路徑記憶:收起面板,記憶上次路徑;重新載入,若無法記憶則回到第一個

3. 固定時間面板說明

默認、懸停、完成:需有對應交互樣式

4. 固定時間范圍面板說明

默認、懸停、完成

  • 需有對應交互樣式

備選項聯動

  • 先選一側時間,另一側備選時間狀態隨之改變,如:選擇開始時間后,另一側小于等于開始時間的備選項置灰

5. 任意時間面板說明

默認、完成

  • 分別是時分秒排列,默認24小時制
  • 通過“上下拖動參數/滾動條”、“滾動鼠標滾輪”方式可滾動參數,滾動方式為循環滾動
  • 中間為“已選區”,參數滾動至“已選區”表示被選

懸停

  • 懸停在哪列,鼠標滾輪可滾動哪列,同時輸入框選中對應列數據
  • 點擊“非已選區”選項,直接將選項滾動至“已選區”
  • 支持鍵盤方向鍵調整參數及所選列

可輸入

  • 通過點選輸入框的時間粒度,進行對應時間輸入
  • 輸入時,同時展開面板,點選哪列則選中哪列數據
  • 支持鍵盤方向鍵調整參數及所選列

6. 任意范圍時間面板說明

操作

  • 在任意面板基礎上,鍵盤方向鍵可順勢從開始時間切換到結束時間

備選項聯動

  • 先選一側時間,則另一側的備選時間狀態隨之改變,區分可選/禁用樣式

二、約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明。

1. 通用

狀態:可用/只讀/禁用

  • 可用:即可修改可輸入
  • 只讀:框內一般有內容,但不能更改、輸入,只能復制
  • 禁用:無法與用戶交互,如無法復制或者輸入

提示文案:選擇時間

  • 未選擇時,輸入框內顯示的內容,樣式需與輸入文字有區別

影響事件:暫無

  • 獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件

一鍵清除:有/無

  • 無選項時懸停,不做改變
  • 有選項時懸停,右側圖標切換為“清空”狀態,點擊清空選項。(注:點擊清空圖標之外,為選擇器基礎交互)

2. 固定時間

默認時間:離當前最近時間

  • 默認為離當前時間最近的值

可選范圍:10:00~14:00

  • 通過范圍時間,結合步長值列出選項清單

可提供固定值

  • 也可添加說明可選范圍受哪些事件影響

步長:15分

  • 控制相鄰選項的時間間隔

3. 固定時間范圍

在“固定時間”基礎上,有以下不同

可選范圍:開始范圍&結束范圍

  • 僅顯示此范圍內時間,按步長值從開始時間列出選項清單
  • 可提供固定值,也可以說明會受哪些事件影響。

4. 任意時間

時制:24小時制/12小時制

  • 24小時制:常規顯示方式
  • 12小時制:增加控制上午、下午

默認時間:離當前最近時間

  • 默認為離當前時間最近的值

可選范圍:上午10:00~下午6:00

  • 此范圍內時間可選,非范圍內時間不顯示
  • 可提供固定值,也可以說明會受哪些事件影響。

步長:10分

  • 不僅控制相鄰選項時間間隔,同時影響可選時間粒度

“此刻”按鈕:有/無

  • 面板底部增加“此刻”按鈕,點擊定位到離當前時間最近選項

5. 任意時間范圍

在“任意時間”基礎上,有以下不同

可選范圍:開始范圍&結束范圍

  • 僅顯示此范圍內時間,按步長值從開始時間列出選項清單
  • 可提供固定值,也可以說明會受哪些事件影響。

三、產出說明模板

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

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

1. 固定時間

  • 組件名稱:規范-固定時間
  • 狀態:可用
  • 提示文案:請選擇時間
  • 一鍵清除:有
  • 預選時間:離當前最近時間
  • 可選范圍:10:00~18:00
  • 步長:15分
  • 影響事件:暫無

2.固定時間范圍

  • 組件名稱:規范-固定時間范圍
  • 狀態:可用
  • 提示文案:開始時間、結束時間
  • 一鍵清除:有
  • 預選時間:離當前最近時間
  • 可選范圍
  • -開始范圍:
  • -結束范圍:
  • 步長:15分
  • 影響事件:暫無

3. 任意時間

  • 組件名稱:規范-任意時間
  • 狀態:可用
  • 提示文案:請選擇時間
  • 一鍵清除:有
  • 時制:24小時制
  • 預選時間:離當前最近時間
  • 可選范圍:10:00~18:00
  • 步長:10分
  • 快捷選項:此刻
  • 影響事件:暫無

4.任意時間范圍

  • 組件名稱:規范-任意時間范圍
  • 狀態:可用
  • 提示文案:開始時間、結束時間
  • 一鍵清除:有
  • 時制:24小時制
  • 預選時間:離當前最近時間
  • 可選范圍
  • -開始范圍:
  • -結束范圍:
  • 步長:10分
  • 快捷選項:未來一小時
  • 影響事件:暫無

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

題圖來自Unsplash,基于 CC0 協議

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

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