下面這篇是筆者整理的關(guān)于原型說(shuō)明中日期選擇器的文章，將通過(guò)“通用、輸入、輸出、反饋”四類約43個(gè)常用組件及3篇頁(yè)面（表單頁(yè)、列表頁(yè)、詳情頁(yè)）寫法分享出來(lái)，對(duì)此感興趣的同學(xué)可以進(jìn)來(lái)了解了解哦！

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

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

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

步驟二：使用模板

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

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

本期組件：日期選擇器

組件概述：以「日」為基本單位，基礎(chǔ)的日期選擇控件；可單選、多選、范圍日期。

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

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

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

1）輸入框樣式-單選&多選

1. 默認(rèn)、懸停、完成需有對(duì)應(yīng)樣式。
2. 選擇內(nèi)容超出輸入框，則超出部分“…”代替。

2）輸入框樣式-范圍

左右兩邊皆有輸入值，默認(rèn)通過(guò)“至”區(qū)隔：

3）展開(kāi)操作

• 展開(kāi)收起：?jiǎn)螕糨斎肟?，展開(kāi)面板；點(diǎn)擊其他區(qū)域收起。
• 展開(kāi)方向：默認(rèn)向下向右，當(dāng)空間不夠時(shí)，需往空間足夠方向展開(kāi)。
• 路徑記憶：收起面板，記憶本次路徑；重新載入，若無(wú)法記憶則回到默認(rèn)。

4）面板基礎(chǔ)說(shuō)明

• 面板說(shuō)明：面板內(nèi)部一般分為面板操作區(qū)、選項(xiàng)區(qū)、快捷按鈕區(qū)。
• 選項(xiàng)說(shuō)明：選項(xiàng)區(qū)的選項(xiàng)需包含樣式可選、懸停、今日日期、選中、不可用（禁用）、范圍覆蓋。
• 面板操作區(qū)、快捷按鈕區(qū)的按鈕參考“按鈕說(shuō)明”。
• 面板內(nèi)容及其他交互，見(jiàn)“業(yè)務(wù)面板說(shuō)明”。

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)擊年度，面板切換至“年度面板”(具體交互參考“年度選擇器”)，選擇年份后，到月份面板選月份。

③默認(rèn)選項(xiàng)：默認(rèn)選中當(dāng)前月份。

④完成選擇：

• 單選：?jiǎn)螕暨x項(xiàng)則完成選擇，收起面板。
• 多選：完成選擇后，通過(guò)“確認(rèn)”按鈕完成。

2）范圍

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

①面板樣式：左右兩個(gè)面板，右側(cè)值默認(rèn)為左側(cè)的延續(xù)。

②面板操作：兩個(gè)面板選項(xiàng)可單獨(dú)切換，但需確保左側(cè)數(shù)據(jù)小于右側(cè)。

③范圍樣式：需體現(xiàn)開(kāi)始、結(jié)束、范圍內(nèi)，區(qū)分選中樣式。

④完成選擇：選擇一個(gè)開(kāi)始值再選一個(gè)結(jié)束值則完成選擇，收起面板。

• 支持先選結(jié)束值，再選開(kāi)始值。
• 已有范圍后，重新點(diǎn)選，則重選范圍。

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

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

1. 通用可控參數(shù)

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

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

②提示文案：選擇時(shí)間

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

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

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

④一鍵清除：有/無(wú)

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

2. 業(yè)務(wù)面板可控參數(shù)

1）單選&多選

①默認(rèn)值：今日

默認(rèn)為當(dāng)前最近的值，請(qǐng)結(jié)合業(yè)務(wù)情況定義。

②可選范圍：不限

不限，一般為前后兩千年。結(jié)合業(yè)務(wù)情況定義。

③可選數(shù)量：?jiǎn)芜x/N個(gè)

• 單選：點(diǎn)擊待選項(xiàng)切換選中，點(diǎn)擊已選項(xiàng)無(wú)交互。
• N個(gè)：為多選，單擊待選項(xiàng)增加選中，單擊已選項(xiàng)切換選中，達(dá)到最大選中數(shù)，需toast提示。

④周起始日：可選周一~周日。

即面板中排第一位的日期，一般為周一/周日。

⑤快捷選項(xiàng)：今日：即當(dāng)天。

面板側(cè)邊增加快捷選項(xiàng)，點(diǎn)擊后，選項(xiàng)自動(dòng)完成。需有快捷選項(xiàng)名稱及規(guī)則說(shuō)明。

2）范圍

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

①可選范圍：開(kāi)始范圍&結(jié)束范圍

僅顯示此范圍值，請(qǐng)結(jié)合業(yè)務(wù)情況定義。

②最大范圍：不限

即開(kāi)始到結(jié)束可選的最大范圍。

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

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

1. 單選&多選

• 組件名稱：日期選擇器
• 狀態(tài)：可用
• 提示文案：請(qǐng)選擇
• 一鍵清除：有
• 預(yù)選值：今日
• 周起始日：周一
• 可選范圍：不限
• 可選數(shù)量：?jiǎn)芜x
• 影響事件：暫無(wú)

2. 范圍

• 組件名稱：日期范圍選擇器
• 狀態(tài)：可用
• 提示文案：開(kāi)始月份、結(jié)束月份
• 一鍵清除：有
• 預(yù)選值：今日到下周
• 周起始日：周一

可選范圍：

• 開(kāi)始范圍：不限
• 結(jié)束范圍：不限
• 最大范圍：不限
• 快捷選項(xiàng)：無(wú)
• 影響事件：暫無(wú)