交互案例分享-Spring音乐播放器


设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。

最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏好歌手来给你推荐歌曲,同时还集成了运动数据的监控功能,很强大吧?但在开始播放音乐前需要先进行 6 个步骤,好像有点夸张,但是体验下来觉得步骤并不算多,反而会让我感受到 App 的清晰和细节,我们来看看这个的交互吧。

在 Spring 播放音乐之前有设置音乐的流程,共有 6 步:

1. 进入设定
2. 设定运动类型
3. 设定运动场地
4. 选择想要的节奏
5. 选择歌手/风格
6. 正式播放

1. 开始设定

打开 App 后看到的界面,很干净,中间的最大的黄色按钮是点击后就可以进入设定,左上角点击可以打开抽屉。

交互案例分享-Spring音乐播放器0

2. 设定运动类型

选择你等会进行的运动,每个运动都有 icon+文字来告诉你,左右划动切换运动类型。

0 (1)

3. 设定运动场地

在室内骑车还是在室外骑车?这个会影响到运动检测的数据,同时也会给予一些安全小贴士。

0 (2)

4. 选择想要的节奏

进入这一步后和之前2步差不多,整个界面仍然保持着一致的风格,在这里自己想要的节奏,同样是左右滑动切换

0 (3)

5. 选择歌手/风格

从前一步进入到这个页面后,会看到界面变成了 iOS 标准的风格布局。也是为了更好的显示这一步要进行的歌手偏好设定,选择你喜欢的歌手,往右拖动是「Play A Lot」,往左是「Don’t Play」,中间是「Play A Little」,操作和理解都非常符合用户的心智模型。

0 (4)

6. 正式播放

最终就进入了最后的播放界面,界面除了音乐播放之外,还有运动数据的检测,有运动时间,公里数,卡路里,地图位置信息等,非常全。运动结束就点击暂停结束。

0 (5)

如果觉得界面中的太小,点击小地图后,地图会投射在「暂停」和「下一首」的下面,很巧妙。

0 (6)
至此,整个播放设置的交互就完成了。

来简单总结一下:

1. 虽然 Spring 的音乐播放流程中有 6 个设定步骤,但「短任务」+「为移动优化的交互」的设计让原本复杂的操作变成了「刚刚好」的感觉,也成为了 App 的特色。

2. 「短任务」在减少用户焦虑同时也帮助快速理解操作,提高效率,每次完成都有 Done 的感觉。

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

(0)
iouedioued
上一篇 2014-09-14
下一篇 2014-09-17

相关推荐

  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 【UX设计】如何成为一名更加贴心的用户体验设计师?

    我曾见过一个简单却贴心的设计,是个仅170 像素的笑脸。那是非常疲惫的一天,下班后我想要清理一下Email 收件箱,放松一下心情。以前我都是用苹果自带的邮件应用,但这次我打开刚下载的Gmail 应用,筛选了收件箱里…

    交互设计 2015-09-13
  • UED设计年会系列活动在江苏省宿迁市成功举办!

    欢迎点击上方蓝字免费订阅!阅读本文前,请您先点击本文标题下面的蓝色字体“快宿迁”再点击“关注”,并点击“置顶公众号”,这样您就可以每天继续免费收到文章了。每天都有分享。完全是免费订阅,请放心关注!2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、“衲田杯”可持续设计国际竞赛颁奖盛典暨第...

    2018-02-03
  • 目标导向设计法02:如何确定设计目标?

    上一篇文章《目标导向设计法01:如何才能让交互方案更靠谱?》说的是设计的本质是解决问题,所以做交互设计要有设计目标;而设计目标包含产品目标和用户目标。这篇文章来说说如何确定设计目标。用户场景:在某时间(when),某某地点(where),周围出现了某些事物时(with what),特定类型的用户(who)萌发了某种欲望(desire),会想到通过某种手段(method)来满足欲望。某理财应用要做一个续约的功能,主要针对购买的理财产品将要到期的用户,提醒他们可以续约。提供的续约信息包括用作续约的本金,续约方式(本息续约),预期增加收益,续约期限,续约后的到期日,续约说明。续约操作后需要审核,审核一般需要1~2小时,通过后会有短信通知。由于续约能够给公司带来不少收益,因此希望用户在操作上比较流畅,保证不会因为操作而流失用户。“心理模型指相互关联的言语或表象的命题集合,是人们作出推论和预测的深层知识基础。”

    2017-05-07
  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • 交互设计师的60日计划之第八天

    今天仍然在处理上周五的需求。参与讨论的人越多,战线就拖得越长。不过讨论虽然效率低,却能出现各种各样的想法和方案,不靠谱的,靠谱的。 2015/08/04 与老大谈话所得题目起的有点大,不过这是今天老大和我讲的主…

    交互专题 2015-08-20
  • [交互留学]英国HCI方向交互设计院校推荐

    之前很多设计相关专业的小伙伴问马克君,是否能够申请HCI方向的交互设计专业,马克君给出的答案是肯定可以,但是你在准备时需要比申请IxD方向的交互要更偏重提升自己的计算机方向的能力。对于HCI和IxD两个交互方向…

    2017-08-02
  • Axure官方教程中文版第1课:开始-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/1_1280x720.MP4 新建文件 1、创建一个蓝色按钮 2、添加一个链接 3、发布我们的云托管服务,AXURE份额 4、在本地生成HTML文件

    2014-12-29
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31
  • IxD交互设计工作中的关注重点

    一、IxD交互设计工作中的关注重点 1. 情景(Context) 皮特•杨•斯塔皮尔斯(Pieter Jan Stappers)认为情景指人与产品交互的环境。情景具体包括的内容取决于设计要解决的问题、设计目标和设计产出。 为什么要研究情…

    交互设计 2015-06-13