這篇文章里，作者針對(duì)日期時(shí)間選擇器這一組件的原型說(shuō)明做了梳理和解讀，一起來(lái)看看吧，或許會(huì)對(duì)困擾于原型設(shè)計(jì)的產(chǎn)品經(jīng)理們有所幫助。

開發(fā)吐槽原型說(shuō)明不清晰，領(lǐng)導(dǎo)催促原型要快細(xì)節(jié)再說(shuō)，真是夾縫中生存的產(chǎn)品。今天教大家一個(gè)方法，既快又全。文末提供模板，可直接用。

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

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

步驟二：使用模板

如圖，Axure可將帶說(shuō)明的通用組件置入元件庫(kù)，出原型時(shí)使用；開發(fā)看到組件，則使用約定規(guī)范；墨刀同理。【PS：想了解word如何使用，請(qǐng)?jiān)u論留言哈】

那么，規(guī)范與模板應(yīng)該怎么寫？

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

本期組件：日期時(shí)間選擇器。

組件概述：在同一個(gè)選擇器通過(guò)點(diǎn)擊輸入框彈出面板選擇日期和時(shí)間，可根據(jù)需求進(jìn)行擴(kuò)展。

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

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

1.通用基礎(chǔ)規(guī)范

參考“日期選擇器”

2. 業(yè)務(wù)面板基礎(chǔ)規(guī)范

1）單選

選項(xiàng)排列：平鋪展示本月所有日期。

選項(xiàng)切換：

• 點(diǎn)擊單箭頭切換月份，步長(zhǎng)1月；點(diǎn)擊月份，面板切換至“月份面板”（具體交互參考“月份選擇器”），選擇月份后回到當(dāng)前面板。
• 點(diǎn)擊雙箭頭切換年度，步長(zhǎng)1年；點(diǎn)擊年度，面板切換至“年度面板”(具體交互參考“年度選擇器”)，選擇年份后，到月份面板選月份。

時(shí)間選擇：形式有多種，如下展示。本文僅描述第一種、第二種（時(shí)間面板交互，參考“時(shí)間選擇器”）。

• 第一種（推薦）：右側(cè)延申平鋪時(shí)間選擇面板。
• 第二種：通過(guò)顯示的時(shí)間作為按鈕，點(diǎn)擊后面板切換至?xí)r間選擇。
• 第三種：通過(guò)時(shí)間輸入框，再?gòu)棾鲆粋€(gè)時(shí)間面板。

默認(rèn)選項(xiàng)：默認(rèn)選中當(dāng)前日期時(shí)間。

完成選擇：通過(guò)“確認(rèn)”按鈕完成。

2）范圍

在“單選”基礎(chǔ)上，有以下不同：

• 面板樣式：左右兩個(gè)面板，右側(cè)值默認(rèn)為左側(cè)的延續(xù)；面板底部增加時(shí)間選擇（考慮面板寬度過(guò)長(zhǎng)，所以時(shí)間面板收起）。
• 面板操作：兩個(gè)面板選項(xiàng)可單獨(dú)切換，但需確保左側(cè)數(shù)據(jù)小于右側(cè)。
• 范圍樣式：需體現(xiàn)開始、結(jié)束、范圍內(nèi)，區(qū)分選中樣式。
• 完成選擇：選擇一個(gè)開始值再選一個(gè)結(jié)束值則完成選擇，收起面板。

支持先選結(jié)束值，再選開始值。

已有范圍后，重新點(diǎn)選，則重選范圍。

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

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

• 日期可控參數(shù)，參考“日期選擇器”
• 時(shí)間可控參數(shù)，參考“時(shí)間選擇器”

三、輸出說(shuō)明模板

組件名稱前加個(gè)“規(guī)范”，便于團(tuán)隊(duì)識(shí)別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫(kù)。

1. 單選

• 組件名稱：日期時(shí)間選擇器。
• 狀態(tài)：可用。
• 提示文案：請(qǐng)選擇。
• 一鍵清除：有。
• 周起始日：周一。
• 預(yù)選值：今日，今時(shí)。
• 時(shí)制：24小時(shí)制。
• 可選日期范圍：不限。
• 可選時(shí)間范圍：10：00~18：00。
• 時(shí)間步長(zhǎng)：10分。
• 快捷選項(xiàng)：無(wú)。
• 影響事件：暫無(wú)。

2. 范圍

組件名稱：日期時(shí)間選擇器。

狀態(tài)：可用。

提示文案：開始日期時(shí)間、結(jié)束日期時(shí)間。

一鍵清除：有。

預(yù)選值：今日到下周，10:30。

周起始日：周一。

可選范圍：

• 開始范圍：不限
• 結(jié)束范圍：不限
• 最大范圍：不限

時(shí)間步長(zhǎng)：10分。

快捷選項(xiàng)：無(wú)。

影響事件：暫無(wú)。