交互设计四策略在音乐播放条上的运用

追求简单易用是人类的本性,《简约至上》中提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约的终极策略。对于功能性单一的产品做到简洁化比较容易,但对于功能性较强的产品如要做到简洁就是一个复杂的课题。


追求简单易用是人类的本性,《简约至上》中提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约的终极策略。对于功能性单一的产品做到简洁化比较容易,但对于功能性较强的产品如要做到简洁就是一个复杂的课题。

交互设计四策略在音乐播放条上的运用

简约不是一件简单的事儿。真正的简约是在保证和突出特征和个性情况下的简约。是建立在一定情境下,对相应对象而言的简约。不同角色的用户对产品的需求不同,相同角色的用户在不同时期的需求也不同。但总体而言,他们想要的是“不要让我想、不要让我烦、不要让我等”的产品。

来说说此次内容的主体:音乐播放条。这里所指代的是在音乐APP上播放音乐时底部出现的矩形操作入口,用来“吊起”当前正在播放的音乐,从而实现听音乐的同时不影响浏览其他页面,又可以随时对音乐进行控制。

交互设计四策略在音乐播放条上的运用

通常他们具备这样的特性:

  1. 全局性:贯通整个APP几乎所有的页面中,无论你处在哪个层级,都可以随时进行歌曲操作。
  2. 固定性:位置固定、样式固定,不会受到页面内容的影响而改变。

交互设计四策略在音乐播放条上的运用

形式上他们都是一个位于页面底部的长条矩形;内容上可以分为信息展示、功能操作两个部分。

我选择了5个常用的音乐APP,将他们包含的信息整理如下

交互设计四策略在音乐播放条上的运用

图表:播放条信息整理

整理后发现,平时习以为常使用的小模块中间竟然包含了这么多内容。所以说简洁的产品不是本身有多简单,而是要把设计做的简单,让用户觉得简单。

播放条虽是音乐APP千万功能中不起眼的标配模块,但依然承载着产品的特性与战略;因为少有迭代的机会,设计过程才更需谨慎。接下来就让我们一起看看小小的播放条又是如何贯彻设计四策略的。

删除:Apple music

“去掉所有不必要的按钮,直到减到不能够再减为止”。

交互设计四策略在音乐播放条上的运用

当页面/模块面积有限,却有大量候选功能时,我们要考虑的不是如何绞尽脑汁把它们硬塞进去,而是想想:这些功能真的有必要吗?用户最期待的是那些功能?如果砍掉这个功能会影响产品使用吗?

Apple music的主导航是位于底部的菜单栏,选择播放条的形式就意味着页面下方会被两条矩形所占据,小屏幕时更是将用来显示信息的区域挤压到可怜。尽可能压缩播放条的面积更像是一个不得已之举。

删除法的关键在于要删什么,这就牵涉到如何确定核心功能。可以看到Apple music没有展示任何图片相关的信息,只保留了针对当前媒体的基本功能操作,其他统统被舍弃。

组织:You Tube music

“按照有意义的标准将功能进行整合划分”

交互设计四策略在音乐播放条上的运用

YT Music采用音/视频切换的播放模式,将图像信息与播放条完美的组织在了一起,播放条更像是一个缩略版的播放界面。与其他家的放置封面图片相比,算的上眼前一亮的突破。

在对播放条画面的截取上YT Music也做了细心的处理。通常构图时人的视觉重心会在画纸物理中心偏上的地方,因为这样更符合人在观察事物时视觉中心的平衡点。从拍摄画面来说,这个区域也最有可能出现头部、脸部或重点要素。YT Music选择中间偏上的区域用来显示在播放条上,能最大程度的展示关键信息。

格式塔原则中指出:当构图中各个视觉单元具有共同的特征时,它们就显示出一种视觉归类的趋向,这种视觉简化法也称为相似归类。在界面设计时此原则依然受用,将存在共同特性的功能、信息组合在一起,选择合适的方法将它们打包,从而实现简化使用操作的效果。

隐藏:QQ音乐

“将那些不是最重要的功能放在舞台之下,避免分散用户注意力 ”

交互设计四策略在音乐播放条上的运用

QQ音乐的播放条看起来很简洁,除了左边的音乐信息外,右侧就放了两个按钮,但他却是五个APP中唯一拥有“上一首”功能的。针对此操作QQ音乐并没有给以实际的按钮,而是将它们隐藏,通过左右滑动实现歌曲前后切换。

隐藏不等于不可见,QQ音乐选择了动效这一常见的方法来引导用户。当音乐播放完毕进入下一首时,播放条上音乐的信息就会向左滑动并由新的音乐所替代。以此来传达播放条在X轴维度上依然存在操作,整个引导过程简单流畅。

隐藏在常用功能之下,利用提示和线索让功能容易被找到。隐藏法保证了产品的简洁,而又不会使功能有所缺失,每个功能都如同被隐藏的宝石,等待你慢慢的发现体会。

转移:酷狗音乐

“保留基本信息,将剩余转移到其他地方”

交互设计四策略在音乐播放条上的运用

将一些不常用或者信息量很大的元素转移到其他地方显示。

酷狗的特点是可以在播放条上调整歌曲进度,如果只是单单在进度条上多了个手柄当然没啥好讲的,模糊调整对歌曲而言并没有太大的意义。酷狗的做法是,拖动手柄过程中会在播放条的上方出现对应的歌词模块。通过将临时信息转移扩展到主体以外的区域,实现了用户精细操作,又保证了播放条的简洁。

 

其实做设计就像是整理房间,闲置多余的扔掉、相同类型的放在一起、不常用的储藏起来、放不下的转移到其他地方……

对于功能性单一的产品做到简洁化比较容易,但对于功能性较强的产品如要做到简洁就是一个复杂的课题。

清晰的设计逻辑是简洁的前提,只有产品的设计简洁、清爽了,用户才会用、爱用。

 

本文由网易云音乐交互设计师 @任轶(微信公众号:臭脸任的慢生活) 原创发布于人人都是产品经理 ,未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-22 22:27
下一篇 2017-05-23 01:04

相关推荐

  • 免费电话你用了吗?

    随着微信电话本1.0.0版本登录苹果和安卓应用商店,这款智能通讯增强软件也引起了一场热议。在这小编也亲自体验一下并与大家分享,欢迎拍砖~ 安装并打开微信电话本,如图: “免费”二字相当醒目,但真的是免费吗?其…

    2014-11-13
  • 用户体验是一种过程,而不是结果

    任何人都抵挡不了时间的力量,你可以斥责它的无情、也可以赞美它的给予,在这个成长的历程中,我们寻找的不是时间给我们带来了什么,而是这个过程中我经历了什么。后者,才是我们需要深思并感恩的。与「用户体验」一样,许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论,普通人可以说这两个字。但作为设计师,必须懂得在体验过程中,知晓哪里好与哪里差,更要知道为什么好为什么差。就好像评书似得,真正读过某本书的人,不会单纯的说:「这...

    2018-05-04
  • 医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 数据交互的常见方式及案例

    交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。

    2017-05-07
  • 未来所有的产品都要围绕人性去思考

    过去的记忆 回顾计算机和互联网的发展,计算机的编程语言从C语言开始,到C++,到最近的go语言,不断地进化,趋势是Code越来越接近人的方面,Code是从计算机端向人端的进化,计算机的编程语言也诠释了科技的发展,以…

    交互设计 2014-12-17
  • 02.案例:用户体验与结婚教练 | 打造产品思维30讲

    02.案例:用户体验与结婚教练来自时间前哨00:0017:10用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    2018-02-14
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 交互设计师的60日计划之第七天

    心情由好转糟,由糟转好的一天。 20150803 每次跟老大过方案都深深的意识到自己的不足上周基本已经敲定的方案等这周老大回来拍板,跟老大一过就是一堆问题。你的交互稿是要怎么看?跳转关系是怎么样的?这个图文混…

    交互专题 2015-08-20
  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17