提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
一、滚筒式(即Date Pickers)
A date picker is an efficient interface for selecting a specific date, time, or both. It also provides an interface for displaying a countdown timer.
即用以选择确切的时间、日期或者两者,它同时可以是展示计时器的界面。
iOS12.1.4 系统日历添加新的日程
支付宝10.1.68 账单选择时间
使用场景:
添加日程、设定闹钟、填写生日等。它适用于选填内容较多、信息量较大的页面,或需要呈现全部日期的需求,能够很好的缓解页面层的压力。
优缺点:
优点:
界面干净清晰易懂,交互形式及其简单,操作手感极佳(每一次滚动iPhone都会以滚动处为中心微微的震动),而且滚动速度基于滑动速度,故选择较远的日期也不会花费很多时间。
缺点:
默认为今天,如果没发现滚动速度基于滑动速度,填写生日这类较远的日期体验并不好(尤其是对年纪大的)
二、表框式(Table)
智行火车票8.0.12 买飞机票
猫眼电影8.7.2 购买电影票
使用场景:
与其说是一个日期控件形式,不如说是一个时间选择器,它所使用的特定场景对年月日时分都有一个十分精确的选择,会精确到某一个时间点上甚至分。常用于购买飞机票、火车票、电影票等
优缺点:
优点:
苹果在date picker的规范下补充说到:
Use a table instead of a picker for large value lists. Long lists can be tedious to navigate in a picker. A table has adjustable height and can include an index, making scrolling much faster.
table类的时间控件页面范围更大且包含索引,可以承载的数据更多一些,选择速度更快。(直观、操作效率高)
缺点:
优点中的包含索引即侧面反映出了缺点,占的空间位置相对较大,有时需跳转页面。
同时从猫眼电影选择日期的横向滑动可以看出日期天数需要根据业务需求做一个数量的控制,否则会造成一个日期横向滑动过长、滑动次数较多的一个操作。
三、弹框式(Popovers)
早期支付宝按月查看账单
使用场景:
面板特性决定使用场景,主要应用在“同级别时间段”的维度场景上,比如说以年、月、季度为单位的显示形式,是某一个时间段内的信息筛选/切换。
对数量有一定的要求,越少,用户切换的效率越高,下拉的长度不可过长,否则容易信息干扰且影响视觉美观
优缺点:
优点:
同级别切换效率高,点击的步骤少,方便用户频繁操作
缺点:
可展示的列表数量较少
总结
不同的日期控件都有其特定的适用范围和需满足的业务目标,在选择使用什么工具之前先想清楚要达成什么目的,满足用户需求,最大化逼近限制条件,达到清晰、易用的水准。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册