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

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

相关推荐

  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05
  • 译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • APP界面设计规范编写指南

    在创作阶段设计页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致出现控件不一致,增加返工率,这时候我们需要界面制定设计规范。

    2017-05-05
  • H5三个设计方向的自我定位

    如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

    2017-05-27
  • [学生看过来]国外的大学交互设计学科的专业与相关分析!

    标签:交互设计专业 交互设计5个重要组成部分 Five Dimensions of Interaction Design。 交互设计Interaction Design 缩写为:IxD,也可以理解成Human-Computer Interaction 人与机器互动设计,旨在通过设计让电子…

    交互设计 2015-01-26
  • 动效在UI设计中的三个关键用途

    动效的强大之处在于,它将设计以更为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。

    2017-05-07
  • 7个维度,让你在网页设计中讲好故事

    网站能承载多种多样的内容,但无论是哪种内容,通常都会遵循一定的信息架构。在这其中,故事是很特别的一种类型。讲故事,往往能以更叙事、更情感化的方式,将内容传递给用户。一个好的故事,往往始于笔端,但是最终呈现,还是要依靠精巧的设计。那么设计是如何讲好故事的呢?今天的文章,为你分享一下创造故事的7个维度。

    2017-05-05
  • 把握交互的第四维 — 时机关系

    日常的交互设计工作中,设计师在明确了需求目标、用户场景,搭建了信息结构之后,下一步便是构思如何让这些信息与用户之间产生有效的互动,而这就需要设计师将思路放在时间的维度上一步步的推进,这中间,便会产生许多关于“时机”问题的讨论。

    2014-12-28
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03