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

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

相关推荐

  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 为什么产品与交互你都要懂?

    今天老大给交互设计师和部分视觉设计师上了一堂产品经理的培训课,从实际的项目需求出发,十分受益匪浅,确实有些事情值得去考虑。 老大先抛出了一个问题(据说的某厂的一道面试题):一辆卡车载着货物过桥洞,货物…

    2016-02-29
  • 【干货分享】从交互角度聊聊四类弹框的设计准则

    本来传统意义上的弹框一般有三种: 系统自动弹出的提醒 帮助用户快速的做出选择 对用户的操作给予反馈 但是现在还多了一种,而且很多产品都在用这种弹框方式,因为它很赚钱 — 广告。所以广告类的弹框已经被我列入弹…

    2016-08-11
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 产品经理的UX——移动端的输入操作设计

    UX是User experience的缩写,指用户体验,UX设计指以用户体验为中心的设计。UX Planet (uxplanet.org)上面讨论很多关于移动设计里做好UX的技巧,很多观点都非常具有指导意义。

    2017-05-19
  • Magic Sketch——寓教于乐的哄娃神器

    棒妈说这是一款哄娃神器。坐飞机火车时,需要娃瞬间安静时,这款神器简直好用到飙泪。这是一款玩具,也是一款画画工具。寓教于乐,大概说的就是这款过年可以代替压岁钱的神器。(请于微店购买)面对市场上琳琅满目的玩具很多宝妈宝爸表示挑花了眼、剁断了手还是没有买到让宝宝满意的到底应该选择什么玩具,才符合宝宝的成长需求?小汽车呀,变形金刚、芭比娃娃,还是...现在还在买这些玩具?你OUT了!孩子开心固然重要,但也别错过宝宝早期智力开发的黄金阶段!寓教于...

    2018-04-12
  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 【竞赛结果】2017 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 交互设计 | 一部自嗨的头号玩家为什么吸引你?

    Create Your Difference. by CYD头号玩家头号玩家到底什么吸引你?情怀吸引了你?动漫迷的高达情怀电影迷的金刚情怀恐怖情怀或者跳舞机情怀?或许美国大片吸引了你?▲有坏美女▼坏boss▲坏人老出BUG▼好人老有神助▲英雄要崇拜▼大部队会赶来不管什么吸引了你把你所有的感触和情绪放大一万倍的东西是艺术和科技当然,我相信你们都知道不就是VR和AR吗整个电影都建立在VR和AR的基础上没有这牛逼地眼镜,这个故事还没开始就可以...

    2018-05-05
  • 交互设计入门–了解交互设计

    之前写过类似的文章,想写的东西太多,结果什么都没讲明白。所以重新写一套入门的教程,分「了解交互设计」、「交互设计的职能范围」、「交互设计的常用方法」……几个章节把我对这门行业的理解和经验做个分享。

    2017-08-04