APP日期选择器设计方法汇总(1)

来源:网络   作者:热心网友   发布时间:2017-04-03    浏览次数:881

我们的设计涉及到人们吃、喝、住、行、购、娱、医疗、教育、工作等各个方面,每个需求场景都是由事件触发的,对于事件的设计离不开时间选择。

比如什么时候就餐;什么时候出行;什么时候去看电影;什么时候参加会议;什么时候去就医;什么时候安排下一步计划,等等。


系统自带的可能难以满足设计需要,自定义其交互形式与样式可以实现更多的可能性。


一.选择到天(DAY)


排查设计的时候需要考虑以下几点:

a.标识出当天日期

b.标识出特殊日期

c.禁用不能选择的日期

d.是否有默认选中日期:比如预定车票时,默认选中今天 是否需要提供帮助用户选择的信。

e.明确表达当前已选的日期

f.一个清晰、明确的提交按钮或者点击即选中


1.采用弹出层的形式


这样做的好处是不用跳转新的页面,在当前环境下选择日期(比如说当前环境下有些内容是影响用户做出选择的);同时,可以点击弹层遮罩区域快速退出选择。如果没有特殊需求,仅仅是选择日期这种形式基本上够用了。


fc2b58dd1371a801219c7783900b.jpg


如果需要用户从某个月中选择某天,并且用户是需要参考星期几还是周末时,是需要展示一个月的日期面板的。如下图,“图标+日期”本身也是一个触发弹出层的按钮,用户点击某个日期即为选中,并收起弹出层。


068e58dd1395a801219c7799b530.jpg


2.打开新页面选择日期


打开新页面选择日期,毋庸置疑,新页面可扩展的空间比较大。更适合当前页面是为了表达一个整体独立事件,比如签到,设置行程、预约等,也就是说,除了要选择日期外,用户可能还需要设置事件的其他内容。总的来说时间是规划事情的首要元素,把选择时间放在突出位置更符合用户的心理模型。


b43b58dd13a9a801219c77542ef5.jpg


3.多选


可设置多个日期,每点击一个日期即代表选中,一般适用于不同日期设定的是同一事件(突然想到本人生活中的一个场景,我会为工作日早上的闹钟设置为7:30,7:45,7:59三个档)。需要列出已选择的日期,用户可以选择取消,如下图。


d9b858dd13b7a801219c77b577eb.jpg


二.选择到时、分(TIME)


排查设计的时候需要考虑以下几点:

a.上午与下午的区分:可以通过显示状态做出区分,比如8:30与20:30;或者通过AM与PM进行区分,比如8:30 AM与8:30 PM。

b. 是否有默认选中时刻:比如默认选中当前时刻。

c.明确表达当前已选的时刻

d. 一个清晰、明确的提交按钮或者点击即选中


如下图,对时、分的选择,从左往右,依次点击。好处是选择效率很高,缺点是,一旦某次选择错误,需要用户点击返回。如果选择完成后,才发现错选了,还需要从头点击选择一遍。


a11858dd13c8a801219c77ee782e.jpg


如下图,有明确的提交按钮,用户通过滑屏滚动点选,好处是选择时与分是单独进行的。


b70358dd13d2a801219c7765b33f.jpg


12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5844.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通