原型說明咋寫-日期選擇器

0 評論 2025 瀏覽 7 收藏 10 分鐘

下面這篇是筆者整理的關于原型說明中日期選擇器的文章,將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法分享出來,對此感興趣的同學可以進來了解了解哦!

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】

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

本期組件:日期選擇器

組件概述:以「日」為基本單位,基礎的日期選擇控件;可單選、多選、范圍日期。

一、 約定基礎規范

本節主要與研發約定默認實現內容,通過規范文檔維護

1. 通用基礎規范

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

  1. 默認、懸停、完成需有對應樣式。
  2. 選擇內容超出輸入框,則超出部分“…”代替。

2)輸入框樣式-范圍

左右兩邊皆有輸入值,默認通過“至”區隔:

3)展開操作

  • 展開收起:單擊輸入框,展開面板;點擊其他區域收起。
  • 展開方向:默認向下向右,當空間不夠時,需往空間足夠方向展開。
  • 路徑記憶:收起面板,記憶本次路徑;重新載入,若無法記憶則回到默認。

4)面板基礎說明

  • 面板說明:面板內部一般分為面板操作區、選項區、快捷按鈕區。
  • 選項說明:選項區的選項需包含樣式可選、懸停、今日日期、選中、不可用(禁用)、范圍覆蓋。
  • 面板操作區、快捷按鈕區的按鈕參考“按鈕說明”。
  • 面板內容及其他交互,見“業務面板說明”。

2. 業務面板基礎規范

1)單選&多選

①選項排列:平鋪展示本月所有日期。

②選項切換:

  • 點擊單箭頭切換月份,步長1月;點擊月份,面板切換至“月份面板”(具體交互參考“月份選擇器”),選擇月份后回到當前面板。
  • 點擊雙箭頭切換年度,步長1年;點擊年度,面板切換至“年度面板”(具體交互參考“年度選擇器”),選擇年份后,到月份面板選月份。

③默認選項:默認選中當前月份。

④完成選擇:

  • 單選:單擊選項則完成選擇,收起面板。
  • 多選:完成選擇后,通過“確認”按鈕完成。

2)范圍

在“單選&多選”基礎上,有以下不同:

①面板樣式:左右兩個面板,右側值默認為左側的延續。

②面板操作:兩個面板選項可單獨切換,但需確保左側數據小于右側。

③范圍樣式:需體現開始、結束、范圍內,區分選中樣式。

④完成選擇:選擇一個開始值再選一個結束值則完成選擇,收起面板。

  • 支持先選結束值,再選開始值。
  • 已有范圍后,重新點選,則重選范圍。

二、約定可控參數

本節主要與研發約定原型中可控制的參數,也通過規范文檔維護。文中會提供示例參數,及參數填寫說明

1. 通用可控參數

①狀態:可用/只讀/禁用

  • 可用:即可修改可輸入。
  • 只讀:框內一般有內容,但不能更改、輸入,只能復制。
  • 禁用:無法與用戶交互,如無法復制或者輸入。

②提示文案:選擇時間

未選擇時,輸入框內顯示的內容,樣式需與輸入文字有區別。

③影響事件:暫無

獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件。

④一鍵清除:有/無

  • 無選項時懸停,不做改變
  • 有選項時懸停,右側圖標切換為“清空”狀態,點擊清空選項。(注:點擊清空圖標之外,為選擇器基礎交互)。

2. 業務面板可控參數

1)單選&多選

①默認值:今日

默認為當前最近的值,請結合業務情況定義。

②可選范圍:不限

不限,一般為前后兩千年。結合業務情況定義。

③可選數量:單選/N個

  • 單選:點擊待選項切換選中,點擊已選項無交互。
  • N個:為多選,單擊待選項增加選中,單擊已選項切換選中,達到最大選中數,需toast提示。

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

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

⑤快捷選項:今日:即當天。

面板側邊增加快捷選項,點擊后,選項自動完成。需有快捷選項名稱及規則說明。

2)范圍

在單選基礎上,有以下不同。

①可選范圍:開始范圍&結束范圍

僅顯示此范圍值,請結合業務情況定義。

②最大范圍:不限

即開始到結束可選的最大范圍。

三、輸出說明模板

組件名稱前加個“規范”,便于團隊識別規范組件;模板可直接寫入注釋,并存為Axure/墨刀元件庫

1. 單選&多選

  • 組件名稱:日期選擇器
  • 狀態:可用
  • 提示文案:請選擇
  • 一鍵清除:有
  • 預選值:今日
  • 周起始日:周一
  • 可選范圍:不限
  • 可選數量:單選
  • 影響事件:暫無

2. 范圍

  • 組件名稱:日期范圍選擇器
  • 狀態:可用
  • 提示文案:開始月份、結束月份
  • 一鍵清除:有
  • 預選值:今日到下周
  • 周起始日:周一

可選范圍:

  • 開始范圍:不限
  • 結束范圍:不限
  • 最大范圍:不限
  • 快捷選項:無
  • 影響事件:暫無

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!