三种形式,浅析手持端日期控件

日期控件,相信行业内所有的同学都不会陌生,尤其是交互的同学,可能会看得更加的仔细,日前,我们所接触到的各类app很多都有日期或时间的选择,而这些同功能的控件都以各式各样的姿态及交互呈现在我们的面前,出于自己的好奇,对这些不同行业、不同使用场景下的同一功能做了一个收集及总结的分析。


日期控件,相信行业内所有的同学都不会陌生,尤其是交互的同学,可能会看得更加的仔细,日前,我们所接触到的各类app很多都有日期或时间的选择,而这些同功能的控件都以各式各样的姿态及交互呈现在我们的面前,出于自己的好奇,对这些不同行业、不同使用场景下的同一功能做了一个收集及总结的分析。

三种形式,浅析手持端日期控件

下面我就带领大家来看看,当前应用的比较热门的几种日期控件的形式、使用场景及优缺点。第一次发表干货,如遇到分析有误,可以留言指正。

底部弹出式

底部弹出选择日期是ios系统自发布以来就附带的系统控件,苹果经过了几个版本的迭代,一直沿用的就是这种底部弹出日期的交互,ios7.0以前,那时候苹果还是走的拟物风格,到ios7.0以后推出了扁平风格,一直沿用至今,现当下的应用中,这种形式已被广泛应用,且已深深影响了客户的使用习惯,如下图展示:

三种形式,浅析手持端日期控件

ios7.0以前

三种形式,浅析手持端日期控件

ios7.0以后

交互形式

点击“选择日期”按钮,当前界面便会有一个透明遮罩层,日期控件会从页面的底部,由上往上弹出,可单独对年、月、日进行选择,被选中的日期,会在控件中间显示,以不同的颜色、字号等区别显示,点击“确定”按钮即可结束操作。

优缺点及使用场景

底部弹出的遮罩层给了用户很好的沉浸式体验感,避免其它信息的干扰,使用户能专心的对日期进行选择,减少误差,同时透过遮罩层,又能看到自己下一步会有什么操作等着自己,让用户用自己的行为有一个预知,且加载速度比较快,但是相对而言,日期的呈现并不直观,滚动的次数也会比较多,对日期选择的时间会显得稍长。它适用于选填内容较多、信息量较大的页面,或需要呈现全部日期的需求,能够很好的缓解页面层的压力。

三种形式,浅析手持端日期控件

下拉弹框式

下拉弹框这种交互形式最初始于pc端,属于pc端的成熟交互形式,尤其在后台系统内使用的特别频繁,它的好处在于方便同类型功能间的切换或筛选,后来被设计师们搬到了手持端,通过使用场景结合不同设备进行了一定的改良。

三种形式,浅析手持端日期控件

截图来源:(左)支付宝;(右)聚美天下

交互形式

点击“选择日期”按钮,同底部弹出一样,当前界面会有一个透明遮罩层,日期控件会直接显示在按钮的下方,点击其中的日期,下拉框会自动收起,操作完成。

优缺点及使用场景

下拉框主要应用在“同级别时间段”的维度场景上,比如说以年、月、季度为单位的显示形式,是某一个时间段内的信息筛选/切换,对数量有一定的要求,越少,用户切换的效率越高,下拉的长度不可过长,否则容易信息干扰且影响视觉美观,它的优点是同级别切换效率高,点击的步骤少,方便用户频繁操作,缺点是显示的条目数量有限;

选项卡式

选项卡相信交互的同学都有留意到,类似于二级导航,像现在很多的应用都采取过这种方式,但选项卡式的日期可能大家没有特别留意到,展现的形式是类似的,但应用的场景比较特殊。

三种形式,浅析手持端日期控件

截图来源:(左)小美到家  ;(右)美容工具

交互形式

点击“选择日期”选项,会直接跳转至新的页面(具体的交互方式视应用的平台而定),顶部会有一个日期的横向切换,内容部分则显示具体的时间点,选择完毕,点击确定,操作完成,回到原来的页面;

优缺点及使用场景

与其说是一个日期控件形式,不如说是一个时间选择器,它所使用的特定场景对年月日时分都有一个十分精确的选择,会精确到某一个时间点上甚至分,是用户对时间点最精确的体现形式,目前应用的最多的就是时间的预约功能,选项卡是对日期的一个管控,可以自由频繁的切换日期,并对其时间点对操作,它的优点是能完全展现出每一个时间点,而且直观、操作效率高,缺点是占的空间位置相对较大,需跳转页面或对交互进行特殊处理方能达到目的,且日期天数需要根据业务需求做一个数量的控制,否则会造成一个日期横向滑动过长、滑动次数较多的一个操作。

小结

以上是对三种日期选择器的一个分析与总结,每个日期控件都有它适合或特定的使用的场景、且满足的业务目标也都不一样,我们需要根据它们的特性去做区别对待,在选择使用哪种控件前,需要去深度分晰它最终的用户体验目标和想要满足的业务目标,不盲目套用和照搬竞品或同类产品,以求交互到达最佳的体验。

 

本文由 @虞小姐 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24238/

(0)
CatherineCatherine
上一篇 2017-05-08 00:24
下一篇 2017-05-08 02:15

相关推荐

  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • AXURE免费元件库分享-web

    分享个WEB端axure元件库下面是元件库地址:https://pan.baidu.com/s/1pLXHuf5

    2018-03-05
  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 交互案例分享-Spring音乐播放器

    在设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。 最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏…

    2014-09-16
  • 专业的交互输出文档应该怎么写?

    交互输出文档里面最重要的是做设计时的多方面思考。

    2017-05-03
  • 设计师的像素眼是怎样炼成的?

    传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,想要练就一双迷人的像素眼,除了常年累月的经验之外,还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合,按图索骥,用心观察,你也可以修炼成功!

    2017-06-02
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 职业病又犯了,我从交互设计角度分析了《得到》App…

    我是《逻辑思维》的 期期都听 忠实听众,也许有很多人对老罗不置可否,但我自己是非常喜欢的,可能也是由于我知识结构和老罗相差太远,但我一点也不觉得丢脸,谁叫他比我 老 大呢。以前我们都知道,喜马拉雅是逻辑…

    2017-08-04
  • 在设计登录注册之前,注意这10个要点能迅速提高用户体验

    有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

    2017-05-26
  • 扇贝单词App软件的交互思路,神还原!

    本篇勾文思路,重点是明白设计软件为了什么?而不要盲目设计,时刻记住目标。

    2017-05-13