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

作者: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

相关推荐

  • 从这几个案例入手,学会设计APP注册流程

    从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。

    2017-05-25
  • 从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
  • 【译文】作为新手,我该如何学习Web设计

    我现在对于网页开发一无所知,我应该学习什么能让我可以在六个月之内开发任何网站?无论是看书或者开展项目都可以。 简单引导: 学习基础知识.  看一本书,而不是文章 设计一些东西.  从一款很酷的设计工具开始,比…

    2016-08-04
  • 这是三种有趣的网页设计趋势,却被低估了

    今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

    2017-05-06
  • 如何以正确的姿势完成虚拟世界的互动?

    如果你还是个VR交互的小白;如果你已经意识到三维世界交互的不同,却还没有突破的方法;这篇文章,值得收藏、细读

    2017-05-15
  • 实例分享:交互设计如何赋予产品安全感

    作者:高广淦全文共 4235 字,阅读需要 8 分钟—— BEGIN ——做互联网金融交互设计的这两年,也算是用过上百款竞品了。尤其是一开始做设计的时候,满世界的下载注册体验竞品,以至于我这两年的投资收益还是很可观的,…

    2017-08-04
  • 用户体验太差:银行要想超越支付宝、微信,请先把App做好!

    如今的支付市场可以说就是支付宝和微信支付的,他们占据了大部分的市场份额,即便是近年来各大银行也推出了APP服务来满足用户的移动上网需求,以通过此来获得用户的支持,可是大多数的银行App做的并不好,不仅使用难度高,人机交互做的也很差,完全不符合用户的操作习惯,体验度也不好,那么,为何银行如此有钱却做不好App呢?沐阳圈、子macd857近期的操作:3月19日分享的浙江东日四个交易日涨幅46%,3月21日分享的西仪股份三个交易日涨幅33%,...

    2018-04-01
  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 交互设计岗位面试攻略

    面试交互设计岗位的同学应该准备以下几点: 1技能交互理论,熟记于心,信手拈来做为交互设计专业的学生,如果连一些普通的理论认识都不了解的话,是会很吃亏的。你所做的设计很容易遭到别人的质疑。这里推荐同学们…

    交互设计 2015-12-03
  • 《用户体验要素》的笔记 (2) 第三章 战略层

    1. 战略层主要解决两个问题:1)我们想通过这个产品得到什么?即产品目标是什么?2)用户想通过这个产品得到什么?即用户需求是什么?此处的关键词是【明确】。当我们能越清楚的表达我们想要什么,以及确切的知道其他人想要从我们这里得到什么时,我们就能越精确的满足双方的需求。注:而最终导致产品失败的原因也经常出现在这个环节,很多产品口号喊的很响亮,但就是不愿意进一步去描述,并不是说产品经理一定要上层决策好目标和需求的每一个字,然后就不容易出错,没...

    微信热点 2018-04-08