起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識原型說明咋寫-年度選擇器
開發吐槽原型說明不清晰，領導催促原型要快細節再說，真是夾縫中生存的產品。今天教大家一個方法，既快又全。文末提供模板，可直接用。
步驟一：約定規范
如圖，與開發、UI約定組件規范，并維護在獨立文檔中。
步驟二：使用模板
如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發看到組件，則使用約定規范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】
那么，規范與模板應該怎么寫？
本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法，將規范與模板分享予您?。
=========強烈建議點個【關注】或【收藏】不迷路=========
本期組件：年度選擇器?
組件概述：用于選擇年度或年度范圍
一、 約定基礎規范
本節主要與研發約定默認實現內容，通過規范文檔維護。
1.通用基礎規范????
輸入框樣式-單選&多選
各狀態需有對應樣式
輸入框樣式-范圍
左右兩邊皆有輸入值，默認通過“至”區隔
展開操作
- 展開收起：單擊輸入框，展開面板；點擊其他區域收起
- 展開方向：默認向下向右，當空間不夠時，需往空間足夠方向展開
- 路徑記憶：收起面板，記憶本次路徑；重新載入，若無法記憶則回到默認
面板基礎說明
- 面板內部一般分為：面板操作區、選項區、快捷按鈕區
- 交互樣式說明
- 選項區的選項：需包含可用、懸停、完成、禁用、范圍
- 面板操作區、快捷按鈕區的按鈕參考“按鈕說明”
- 面板內容及其他交互，見“業務面板說明”
2. 業務面板基礎規范???
單選&多選
- 選項排列：按0-9平鋪展示10年
- 選項切換：可切換可選年度，10年為一個單位
- 完成選擇：選中選項則完成選擇，收起面板?
范圍
- 面板樣式：左右兩個面板，右側值為左側的延續；切換一側年度范圍，不影響另一側
- 范圍樣式：需體現開始、結束、范圍內，區分選中樣式
- 范圍操作：選擇一個開始值再選一個結束值則完成選擇，收起面板
- 支持先選結束值，再選開始值
- 已有范圍后，重新點選，則重選范圍
二、約定可控參數
本節主要與研發約定原型中可控制的參數，也通過規范文檔維護。文中會提供示例參數，及參數填寫說明。
1.通用可控參數????
狀態：可用/只讀/禁用
- 可用：即可修改可輸入
- 只讀：框內一般有內容，但不能更改、輸入，只能復制
- 禁用：無法與用戶交互，如無法復制或者輸入
提示文案：選擇時間
- 未選擇時，輸入框內顯示的內容，樣式需與輸入文字有區別
影響事件：暫無
- 獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件
一鍵清除：有/無
- 無選項時懸停，不做改變
- 有選項時懸停，右側圖標切換為“清空”狀態，點擊清空選項。（注：點擊清空圖標之外，為選擇器基礎交互）
2.業務面板可控參數???
單選&多選
默認值：今年
- 默認為當前最近的值，請結合業務情況定義
可選范圍：不限
- 不限，一般為前后共兩千年，請結合業務情況定義
可選數量：單選/N個
- 單選：點擊待選項切換選中，點擊已選項無交互
- N個：為多選，單擊待選項增加選中，單擊已選項切換選中，達到最大選中數，需toast提示
快捷選項：今年：當前年份
- 面板側邊增加快捷選項，點擊后，選項自動完成。需有快捷選項名稱及規則說明?
范圍
在“單選&多選”基礎上，有以下不同：
可選范圍：2022~2035
- 僅顯示此范圍值，請結合業務情況定義
最大范圍：不限
- 即開始到結束可選的最大范圍
三、輸出說明模板
組件名稱前加個“規范”，便于團隊識別規范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫。
1.年度選擇器?
- 組件名稱：年度選擇器?
- 狀態：可用
- 提示文案：請選擇年度
- 一鍵清除：有
- 預選值：今年
- 可選范圍：不限
- 可選數量：單選
- 影響事件：暫無
2.年度范圍選擇器
- 組件名稱：年度范圍選擇器
- 狀態：可用
- 提示文案：開始年度、結束年度
- 一鍵清除：有
- 預選值：今年
- 可選范圍：
- 開始范圍：不限
- 結束范圍：不限
- 最大范圍：不限
- 快捷選項：無
- 影響事件：暫無
結語
本系列持續更新，喜歡的朋友請點個【關注】或【收藏】，您的鼓勵是我們持續分享的動力。
本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
