Material Design 设计语言(九)日期选择器

日期选择器(Pickers)


日期选择器允许用户选择日期或日期范围。

             

原则



1、关联


日期选择器可以显示过去、现在或将来的日期 – 与任务相关。


2、明确


清楚地指出重要日期,例如当前和选定日期。



3、直观


为确保选择一天或时间是直观的,请使用常见的选择器模式,例如日历。


类型


1、日历日期选择器

       

 

日历选择器可用于选择近期或过去的日期,此时以日历的格式按月查看日期非常有用。它们以对话框的形式显示。

 

比如:

  • 预订餐厅

  • 安排会议

它们不适合选择久远的过去或未来很久的的日期,例如输入出生日期或到期日期。(在这些情况下,改用输入选择器 或文本字段。)

       

 

日历选择器可以选择单个日期和年份。
左右滑动可查看月份,点按年份附近的向下箭头,可垂直滚动选择年份。

               

2、日期范围选择器

       
 

日期范围选择器允许选择一系列日期。它会覆盖整个屏幕。

 

比如:

  • 预订航班

  • 预订酒店

              
 

点按日历上的开始日期和结束日期即可选择日期范围。上下垂直滚动则可查看月份。



3、日期输入选择器


日期输入选择器允许使用键盘上的数字手动输入日期。用户可以在对话框中输入日期或日期范围。

              

可以通过编辑图标从日历日期选择器访问手动输入的日期选择器。如下:

       

       

– 推 荐 阅 读 


iOS平台设计规范-精简总结篇

Material Design 设计语言-概述

产品设计之用户体验地图

UIKit,让团队协作事半功倍


本文来自:宛苏    作者:宛苏

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码