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

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

相关推荐

  • 聊聊负反馈在交互设计中的应用

    在日常交互行为中,多多少少存在各种各样的反馈行为(feedback),没有反馈的系统是不存在的。有些反馈是积极的,告诉人们完成了什么,有些则是负面的,对人们可能采取的破坏性交互行为进行预警,告知人们如果这样做会有很严重的后果。反馈是人们确认系统在工作的重要依据,试想你明明提交了数据,界面或者系统却没有任何提示,你肯定会越来越疑惑烦躁,还可能连续提交造成系统崩溃。

    2017-05-29
  • 未来的汽车用户界面将会让人惊叹

    如果有一天让你来设计汽车?未来的汽车会是什么样的呢?

    2017-05-12
  • 直觉设计:如何让网页更直观、易用【UXRen译#162】

    作者:Peep Laja(ConversionXL的创始人,世界上领先的转换优化专家之一) 翻译:方糖小姐,校审:小四   你的网站越容易使用,那么使用的人越来越多。“容易使用”的至关重要的一部分是直觉。那么直觉设计也就意味着当…

    交互专题 2017-08-07
  • 2016必掌握的交互设计趋势

    设计趋势是什么样的,出于各种原因,很多设计趋势在演进中逐渐消失,有的则甚正蜕变成为主流。作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感。通过多位设计师们对2015的总结…

    2016-01-10
  • 饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • 设计不懂开发,严重脱节的设计是怎么影响开发的

    编者按 :Anders Lassen 是 Fuse 的创始人兼首席行政官。Fuse 是一款面向设计师和开发者的本地应用工具套装。 移动应用现在已经变得十分普及,以至于技术圈的大部分人都认为开发应用是一个简单直接的过程。然而,当…

    交互设计 2015-08-04
  • 成也排版败也排版:一个选择的过程

    作为设计师有一个重要的技能:如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
    1.000x 1.618 = 1.618
    1.618x 1.618 = 2.618
    2.618x 1.618 = 4.236
    4.236x 1.618 = 6.854
    6.854x 1.618 = 11.089GoldenRatio (1:1.618)

    11.089x 1.618 = 17.942
    17.942x 1.618 = 29.03
    29.030x 1.618 = 46.971
    46.971x 1.618 = 75.999
    75.999x 1.618 = 122.966MinorSecond 15:16
    MajorSecond 8:9
    MinorThird 5:6
    Major Third 4:5
    …PerfectFourth (3:4)

    9.969x 1.333 = 13.288
    13.288x 1.333 = 17.713
    17.713x 1.333 = 23.612
    23.612x 1.333 = 31.475
    31.475x 1.333 = 41.956
    41.956x 1.333 = 55.927FontSizes
    Header1: 55px
    Header2: 42px
    Header3: 31px
    Header4: 24px
    Header5: 14px
    Body:17px
    Caption:14px

    2017-05-01
  • 鱼和熊掌——关于产品更注重功能还是更关注体验?

    “你从来不会因为产品功能而赢得用户,但他们会因体验慕名而来——关于快速使用最小可行化产品MVP(注:国内通称为‘试错’)快速进入市场指南”——by Lee Dale 基于这样一个背景,你需要重新考虑你的产品设计——摒弃罗列功…

    2015-07-18
  • 一套交互设计工具推荐

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-28
  • 交互设计新人的核心竞争力

    从实习的第一天起,我就数着日子在过,时间走的太快拦也拦不住,要做要学的事情又太多。转眼七月已经过去,总觉得还是有点后知后觉,花了一个月的时间去适应新环境和新工作,慢慢才知道寻求突破点的重要性,所以今…

    2017-08-04