【交互设计】选择时间设计

作者:Mufly

对于不少手机应用来说,都有一个选择时间的功能,那么从交互体验的角度来看,这个时间选择表格应该如何去设计比较理论呢?

 

时间选择,常见的一般分:

1、具体时间点选择,这种类型侧重于具体的时间点选择,而日期一般限制在今天或明天,比如:线上电影订票,一天内会提供很多不同时间点让用户选择;

2、具体日期选择,这种类型侧重于具体日期的选择,时间点一般会固定一个。比如:线上旅游产品预定,一般每天固定一个时间点发团;

3、两者结合,先选择具体的日期,再选择具体的时间点。

 

这篇文章只探索“侧重具体时间点”的方式,至于“侧重日期选择”的方式,文章最后以一个实例来带过。

 

说到时间选择表格,也许最先联想到的是“日历”

【交互设计】选择时间设计

这种表格方式,确实很直观,也很符合我们的行为习惯,从这种常规的表格方式,我们可以演变出如下形式:

【交互设计】选择时间设计

把当天之内,可以“选择的具体时间点”直观的展示出来,让用户浏览后,直接选择想要的时间点

但是,这种方式从用户的视觉路线来说,并不是最快捷的

【交互设计】选择时间设计
我们进一步改进这个布局,得到

【交互设计】选择时间设计
视觉路线是这样的,更符合时间的叠加,用户可以更直观的滑动选择时间点

【交互设计】选择时间设计

 

这样就完了吗?还没有,上面的例子,我们只是假设每30分钟为一个单位

如果我们每15分钟一个单位呢?时间点变得更多,这种布局就不合适了,我们要如何改进呢?

【交互设计】选择时间设计

改为这种形式吗?点击上下箭头,时间单位递增或递减。

这样的体验上,是相当复杂的,因为时间点变成了每15分钟一个单位,每一小时就会有4个时间点可选

假如初始化时9:00,用户需要选择11:00的时间点,就需要跨过8个选项,对于手机用户来说,这个操作是十分繁杂的

那么怎么去优化呢,可以把时钟跟分钟分开来,变成如下图:

【交互设计】选择时间设计

这样虽然增加了用户的选择次数,但是降低了整体用户选择的成本。

 

到这就结束了吗?

其实,我们可以利用一个小小的交互动作,就可以让前面那个方案操作成本更低

【交互设计】选择时间设计

利用手机触屏的操作特性,结合视觉引导,做成手指滑动选择的“老虎机”;

这样用户通过快速滑动,可以粗略的定位时钟,在通过慢速的滑动,选定分钟的数据。

比如:初始时9:00,我需要选择14:00,那么我快速滑动“老虎机”,看到时钟靠近14点时,我转为慢速滑动,最后定位在14:00

那么这种方式就是最好的方式吗?

其实还不是,因为交互没有最好的方式,只是最合适的方式。比如初次见到这种选择时间点的方式,用户可能不知道可以滑动,这时候就需要适当的新手指导了。

这里更多的是抛砖引玉,交互设计中思考的过程才是核心。

 

  • 最后来研究一个实例——芒果旅游网app(安卓版)

文章前面探索了侧重时间点的方式,这个实例就来探索侧重日期选择的方式,例子来自“芒果旅游网app” - 酒店预订 - 时间选择页面。

【交互设计】选择时间设计

 

第一眼,好像没什么问题,常见的一个界面

仔细思考后,发现这里采用了情感化的设计,在日历中,引入了今天、明天和后天。

再深入思考,不对啊,这里的情感化设计过度了,反而导致不少问题

 

存在问题:

如果用户计划出行日期为26号,现在准备来选日期,眼睛扫了一样,没发现26号。

思路1:发现了24号和28号,通过24号或28号推算,得到了26号的位置。

思路2:记得今天是25号,推算出,26号等于明天,找到明天的位置。

这是用户寻找26号的思路过程,也许脑袋转得快的,能一下子就找到26号的位置。但是这样一个思考流程,还是存在可以优化的地方。

 

优化方案:

去掉明天和后天,保留今天就行了,设计合适就好,不需要过度。

如果用户需要寻找26号,那么一眼就能找到。

如果用户不知道今天几号,只是想明天或后天出行。那么他只需要找到今天的位置,然后就可以推出明天或后天的位置。

 

为什么这里用具体日期比用明天和后天更好呢?

明天和后天,在日历里是以相对位置存在

而具体日期,则是绝对位置存在

对于有长久计划的出行人,一般都是用具体日期来安排

对于短期临时有出行需求的人,也许忘记今天是几号,但是通过今天这个坐标,他们很容易推出明天或后天的位置来。反之通过今天、明天、后天这些词,或者通过前后具体日期来推算出行的具体日期,难度相对比较高。

 

另外,对于图中的节日显示方式,在节日名称的上方,增加具体日期会更好些,方便用户快速寻找某一天的位置。

原:

【交互设计】选择时间设计

优化后:

【交互设计】选择时间设计

 

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

(0)
TinadminTinadmin
上一篇 2015-09-02
下一篇 2015-09-08

相关推荐

  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 优秀的UI/UX设计师需要具备哪些技能?

    互联网时代,企业对设计的要求越来越高,也越来越多样,那么成为一名优秀的设计师应该具备哪些技能呢?

    2017-05-12
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06
  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 用户体验要素,商品介绍,它们两竟发生了这种关系!

    有人去电影院是为了看电影,而有些人……上次我们讲到,网络课程的课程介绍的工作流程问题。广泛来说可以是网购中任何商品或服务的介绍的撰写或制作过程,这个工作流程和用户体验要素十分相似 ▼这一次我们来探讨用户体验要素具体对商品介绍的指导作用,先来看看一下详细的用户体验要素 ▼关于上图的模型,在《用户体验要素》一书中有详细的阐述,这里只讲与本文内容有关的部分。先来看到这个模型的右上方,有功能型和信息型两种分类。基于我当时的工作任务是商品介绍,那...

    2018-03-20
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30
  • 从细节看分析-购物车的跳转设计

      小编推荐:难得在知乎上看到一个特别具体的问题还有不同观点的,本文是一篇关于购物车到底应该是本页弹窗还是页面跳转的讨论,如果你也喜欢从细节入手考虑问题,一定要看呦。 问题: 点击产品详情页面的”添…

    2015-12-23
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24