下面這篇文章是筆者整理分享的關(guān)于原型說明中時間選擇器的相關(guān)內(nèi)容，對此產(chǎn)品感興趣或者是想要學(xué)習(xí)的同學(xué)可以進(jìn)來看看哦！相信你會收獲到很多有用的內(nèi)容知識。

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

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

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理?！綪S：想了解word如何使用，請?jiān)u論留言哈】

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

本期組件：時間選擇器

組件概述：當(dāng)用戶需要輸入一個時間，可通過輸入框彈出面板進(jìn)行選擇一個任意時間或固定時間，本篇會拆分出4個模板，分別為固定時間選擇器、固定范圍時間選擇器、任意時間選擇器、任意時間范圍選擇器。

一、約定基礎(chǔ)規(guī)范

本節(jié)主要與研發(fā)約定默認(rèn)實(shí)現(xiàn)內(nèi)容，通過規(guī)范文檔維護(hù)。

1. 基礎(chǔ)樣式

單選-默認(rèn)、懸停、完成：需有對應(yīng)樣式

范圍-默認(rèn)、懸停、完成：左右兩邊皆有輸入值，默認(rèn)通過“至”區(qū)隔

2.展開面板

• 展開與收起：單擊輸入框，展開面板；點(diǎn)擊輸入框之外則收起
• 展開方向：默認(rèn)向下向右，當(dāng)空間不夠時，需往空間足夠方向展開
• 路徑記憶：收起面板，記憶上次路徑；重新載入，若無法記憶則回到第一個

3. 固定時間面板說明

默認(rèn)、懸停、完成：需有對應(yīng)交互樣式

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

默認(rèn)、懸停、完成

• 需有對應(yīng)交互樣式

備選項(xiàng)聯(lián)動

• 先選一側(cè)時間，另一側(cè)備選時間狀態(tài)隨之改變，如：選擇開始時間后，另一側(cè)小于等于開始時間的備選項(xiàng)置灰

5. 任意時間面板說明

默認(rèn)、完成

• 分別是時分秒排列，默認(rèn)24小時制
• 通過“上下拖動參數(shù)/滾動條”、“滾動鼠標(biāo)滾輪”方式可滾動參數(shù)，滾動方式為循環(huán)滾動
• 中間為“已選區(qū)”，參數(shù)滾動至“已選區(qū)”表示被選

懸停

• 懸停在哪列，鼠標(biāo)滾輪可滾動哪列，同時輸入框選中對應(yīng)列數(shù)據(jù)
• 點(diǎn)擊“非已選區(qū)”選項(xiàng)，直接將選項(xiàng)滾動至“已選區(qū)”
• 支持鍵盤方向鍵調(diào)整參數(shù)及所選列

可輸入

• 通過點(diǎn)選輸入框的時間粒度，進(jìn)行對應(yīng)時間輸入
• 輸入時，同時展開面板，點(diǎn)選哪列則選中哪列數(shù)據(jù)
• 支持鍵盤方向鍵調(diào)整參數(shù)及所選列

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

操作

• 在任意面板基礎(chǔ)上，鍵盤方向鍵可順勢從開始時間切換到結(jié)束時間

備選項(xiàng)聯(lián)動

• 先選一側(cè)時間，則另一側(cè)的備選時間狀態(tài)隨之改變，區(qū)分可選/禁用樣式

二、約定可控參數(shù)

本節(jié)主要與研發(fā)約定原型中可控制的參數(shù)，也通過規(guī)范文檔維護(hù)。文中會提供示例參數(shù)，及參數(shù)填寫說明。

1. 通用

狀態(tài)：可用/只讀/禁用

• 可用：即可修改可輸入
• 只讀：框內(nèi)一般有內(nèi)容，但不能更改、輸入，只能復(fù)制
• 禁用：無法與用戶交互，如無法復(fù)制或者輸入

提示文案：選擇時間

• 未選擇時，輸入框內(nèi)顯示的內(nèi)容，樣式需與輸入文字有區(qū)別

影響事件：暫無

• 獲取焦點(diǎn)、失去焦點(diǎn)、選中選項(xiàng)都可以產(chǎn)生影響其他組件的事件

一鍵清除：有/無

• 無選項(xiàng)時懸停，不做改變
• 有選項(xiàng)時懸停，右側(cè)圖標(biāo)切換為“清空”狀態(tài)，點(diǎn)擊清空選項(xiàng)。（注：點(diǎn)擊清空圖標(biāo)之外，為選擇器基礎(chǔ)交互）

2. 固定時間

默認(rèn)時間：離當(dāng)前最近時間

• 默認(rèn)為離當(dāng)前時間最近的值

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

• 通過范圍時間，結(jié)合步長值列出選項(xiàng)清單

可提供固定值

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

步長：15分

• 控制相鄰選項(xiàng)的時間間隔

3. 固定時間范圍

在“固定時間”基礎(chǔ)上，有以下不同

可選范圍：開始范圍&結(jié)束范圍

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

4. 任意時間

時制：24小時制/12小時制

• 24小時制：常規(guī)顯示方式
• 12小時制：增加控制上午、下午

默認(rèn)時間：離當(dāng)前最近時間

• 默認(rèn)為離當(dāng)前時間最近的值

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

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

步長：10分

• 不僅控制相鄰選項(xiàng)時間間隔，同時影響可選時間粒度

“此刻”按鈕：有/無

• 面板底部增加“此刻”按鈕，點(diǎn)擊定位到離當(dāng)前時間最近選項(xiàng)

5. 任意時間范圍

在“任意時間”基礎(chǔ)上，有以下不同

可選范圍：開始范圍&結(jié)束范圍

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

三、產(chǎn)出說明模板

組件名稱前加個“規(guī)范”，便于團(tuán)隊(duì)識別規(guī)范組件

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

1. 固定時間

• 組件名稱：規(guī)范-固定時間
• 狀態(tài)：可用
• 提示文案：請選擇時間
• 一鍵清除：有
• 預(yù)選時間：離當(dāng)前最近時間
• 可選范圍：10：00~18：00
• 步長：15分
• 影響事件：暫無

2.固定時間范圍

• 組件名稱：規(guī)范-固定時間范圍
• 狀態(tài)：可用
• 提示文案：開始時間、結(jié)束時間
• 一鍵清除：有
• 預(yù)選時間：離當(dāng)前最近時間
• 可選范圍
• -開始范圍：
• -結(jié)束范圍：
• 步長：15分
• 影響事件：暫無

3. 任意時間

• 組件名稱：規(guī)范-任意時間
• 狀態(tài)：可用
• 提示文案：請選擇時間
• 一鍵清除：有
• 時制：24小時制
• 預(yù)選時間：離當(dāng)前最近時間
• 可選范圍：10：00~18：00
• 步長：10分
• 快捷選項(xiàng)：此刻
• 影響事件：暫無

4.任意時間范圍

• 組件名稱：規(guī)范-任意時間范圍
• 狀態(tài)：可用
• 提示文案：開始時間、結(jié)束時間
• 一鍵清除：有
• 時制：24小時制
• 預(yù)選時間：離當(dāng)前最近時間
• 可選范圍
• -開始范圍：
• -結(jié)束范圍：
• 步長：10分
• 快捷選項(xiàng)：未來一小時
• 影響事件：暫無