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

日期控件,相信行业内所有的同学都不会陌生,尤其是交互的同学,可能会看得更加的仔细,日前,我们所接触到的各类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

相关推荐

  • 交互设计基本功-pc端

    很多小伙伴0基础想转ux,看了很多网上的文章和书,但是依然不知道具体怎样入手。看完这篇文章,你就可以真正的入门了。1、按钮的5种状态1)正常状态:可以点击且没有进行任何动作的状态2)鼠标悬停时状态:鼠标停留…

    2017-08-01
  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 译文|Facebook将推"dislike"按钮

    Facebook users will soon be able to 'dislike' posts and pictures on their feeds. Facebook用户很快就可以“dislike”订阅内容里别人发的帖子和图片了。 The social networking site's founder Mark Zuckerberg r…

    交互设计 2015-09-18
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 计算机交互设计简史,从穿孔纸带到人工智能

    点击上方“想当然”,选择“置顶公众号优质文章,第一时间送达不管是有意识的还是无意识的,谈到交互设计,人人心中都有一个或清晰或模糊的理解。这些形形色色的理解都各有各的道理,但往往又有不尽然的地方。何为交互?交互(inter-action),从字面上理解,就是交流和互动。说得学术一点,就是两个对象之间的一系列响应。举个简单的例子,早上你出门遛狗时,隔壁老王正在跑步,你冲他一笑,说句:“早上好呀。”老王点头、微笑,说“早啊” —— 这就是一个...

    2018-04-07
  • 菲茨定律与未来交互方式

    未来已来,随着科技的不断发展,交互的方式也发生巨大的变化,它正一步步颠覆着我们的生活习惯。

    2017-04-27
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22