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

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

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

步驟二：使用模板

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

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

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

=========強烈建議點個【關(guān)注】或【收藏】不迷路=========

本期組件：年度選擇器?

組件概述：用于選擇年度或年度范圍

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

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

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

輸入框樣式-單選&多選

各狀態(tài)需有對應(yīng)樣式

輸入框樣式-范圍

左右兩邊皆有輸入值，默認通過“至”區(qū)隔

展開操作

• 展開收起：單擊輸入框，展開面板；點擊其他區(qū)域收起
• 展開方向：默認向下向右，當(dāng)空間不夠時，需往空間足夠方向展開
• 路徑記憶：收起面板，記憶本次路徑；重新載入，若無法記憶則回到默認

面板基礎(chǔ)說明

• 面板內(nèi)部一般分為：面板操作區(qū)、選項區(qū)、快捷按鈕區(qū)
• 交互樣式說明
  • 選項區(qū)的選項：需包含可用、懸停、完成、禁用、范圍
  • 面板操作區(qū)、快捷按鈕區(qū)的按鈕參考“按鈕說明”
• 面板內(nèi)容及其他交互，見“業(yè)務(wù)面板說明”

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

單選&多選

• 選項排列：按0-9平鋪展示10年
• 選項切換：可切換可選年度，10年為一個單位
• 完成選擇：選中選項則完成選擇，收起面板?

范圍

• 面板樣式：左右兩個面板，右側(cè)值為左側(cè)的延續(xù)；切換一側(cè)年度范圍，不影響另一側(cè)
• 范圍樣式：需體現(xiàn)開始、結(jié)束、范圍內(nèi)，區(qū)分選中樣式
• 范圍操作：選擇一個開始值再選一個結(jié)束值則完成選擇，收起面板
  • 支持先選結(jié)束值，再選開始值
  • 已有范圍后，重新點選，則重選范圍

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

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

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

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

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

提示文案：選擇時間

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

影響事件：暫無

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

一鍵清除：有/無

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

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

單選&多選

默認值：今年

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

可選范圍：不限

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

可選數(shù)量：單選/N個

• 單選：點擊待選項切換選中，點擊已選項無交互
• N個：為多選，單擊待選項增加選中，單擊已選項切換選中，達到最大選中數(shù)，需toast提示

快捷選項：今年：當(dāng)前年份

• 面板側(cè)邊增加快捷選項，點擊后，選項自動完成。需有快捷選項名稱及規(guī)則說明?

范圍

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

可選范圍：2022~2035

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

最大范圍：不限

• 即開始到結(jié)束可選的最大范圍

三、輸出說明模板

組件名稱前加個“規(guī)范”，便于團隊識別規(guī)范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫。

1.年度選擇器?

• 組件名稱：年度選擇器?
• 狀態(tài)：可用
• 提示文案：請選擇年度
• 一鍵清除：有
• 預(yù)選值：今年
• 可選范圍：不限
• 可選數(shù)量：單選
• 影響事件：暫無

2.年度范圍選擇器

• 組件名稱：年度范圍選擇器
• 狀態(tài)：可用
• 提示文案：開始年度、結(jié)束年度
• 一鍵清除：有
• 預(yù)選值：今年
• 可選范圍：
  • 開始范圍：不限
  • 結(jié)束范圍：不限
• 最大范圍：不限
• 快捷選項：無
• 影響事件：暫無

結(jié)語

本系列持續(xù)更新，喜歡的朋友請點個【關(guān)注】或【收藏】，您的鼓勵是我們持續(xù)分享的動力。