Skip to content

Latest commit

 

History

History
94 lines (47 loc) · 2.85 KB

18.精读设计完美的日期选择器.md

File metadata and controls

94 lines (47 loc) · 2.85 KB

018.精读《设计完美的日期选择器》.md

设计原则

通用设计

  • 明确需求,实现日期选择,日期区间选择,具体时间选择

  • 选中日期之后是否自动触发下一步, 在特定业务场景下

  • 提供预定义日期选择按钮是否减轻用户操作负担

  • 避免展示不可用日期

  • 根据上下文自动定位

输入框设计

  • 用户是否可以自定义输入日期或者点击程序给出的日期,直接输入效率高于点击选择

  • 自定义输入如何保证日期格式正确性

  • 是否提供预设场景输入,如昨天,三天前,七天前。(分析师会关注数据周期 周、月、年环比)

  • 是否需要默认值,默认值赢设置什么

  • 用户激活输入框是否保留默认值

  • 是否提供重置按钮

  • 是否提供前一项 现在 后一项导航

日期弹出层设计

  • 理想状态下,任何日期选择应该在三步内完成(年/月/日选择)

  • 日期选择弹出层触发方式,是点输入框还是点日期小图标还是按钮

  • 默认情况下展示多少周、月、天

  • 周的定义周一到周日还是周日到周六? (这个是我第一次听说)

  • 提示当前时间

  • 是否需要提供『前一项』『现在』『后一项』导航

  • 用户关心的信息, 背景色、点定制化标记

  • 是否用户点击非弹出层自动关闭弹出层? 关闭按钮提供

  • 是否不和输入框联动

  • 重置选中日期, 重置为无还是重置为当前日期

日期区间设计

  • 全选择六步内完成(区间起始的年/月/日)

  • 选中后是否做背景色提示

  • 用户选择时,区间是否需要随着用户动作改变,hover 时动态改变选中区间

  • 提供快捷键切换 年、月、日选择

  • 是否分成两个区间选择器还是采用区间形式一个单独的区间选择器显示完成

  • 特殊时间点标记预留?

时间选择设计

  • 竖直日期(想到了 dropdown,或使用过的滚动向下移动端设计) 水平时间选择

  • 是先提供日期还是时间选择,时间选择可以作为过滤项,移除不可用日期

  • 提供最长使用的事件片段,提供快捷键选择

设计实现亮点

  • 最小范围内提供用户找出最优选择

  • 全年内粗颗粒度的范围选择,给用户更多提示

  • 按钮代替时间选择器

  • 对话式交互

  • 特殊标识周末, OA 上实践

summary

  • 一个产品设计落地,必须先明确需求和业务场景, 用户目的、用户地域影响 UI 设计,上下文联动,特殊良好提示,然后对于选择器分类,设计组件接口

  • 这种 UI 基础组件在中后台应用尤其明显突出,交互和展示形式,结合场景使用,同时与日期强关联的业务,如机票、日程安排等结合日期选择器中更加直观,提高用户信息检索效率,减少用户操作链路。