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

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


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

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

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

来说说此次内容的主体:音乐播放条。这里所指代的是在音乐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

相关推荐

  • 2017赶集招聘节项目总结:建一座招聘之城

    为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。

    2017-04-30
  • 信息架构与导航系统,还傻傻分不清楚吗?

    作者:Jennifer Cardello,翻译:小球娘   几句话概述:信息架构是支撑网站的骨架;导航指的是网站交互界面上,用来让用户到达具体信息内容的元素。 人们有时会把信息架构(IA)和导航系统的概念混淆到一起,这些概…

    交互专题 2017-08-07
  • 网易UEDC的交互设计书单 (上)

    为什么列这个书单?常有读者留言:想要学习(或精进)交互设计,有什么书可以推荐的?其实网上已经有很多交互设计的书单可以参考啊,那么我想读者问这个问题的真正含义应该是:有哪些书是真正值得读的?于是我们让…

    2017-08-04
  • 画交互原型方案前,你应该思考的三个点

    一个优秀的交互设计师,一定要从用户目标出发,了解用户的核心痛点,满足用户的需求,只有这样才能打造一个好的产品。

    2017-04-29
  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06
  • 设计师们,停止不必要的UI动效设计吧!

    这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。我们将在下文中,简单探讨如何改善下面的这个交互。

    2017-05-14
  • 顾振宇:Ubiquitous Fun-交互设计的享乐主义未来——上海交通大学创新设计论坛-体验和交互设计分论坛

    演讲题目 Ubiquitous Fun-交互设计的享乐主义未来 在可预见的未来,随着用户数据的积累和人工智能的发展,产品“可用性”问题会逐渐淡出我们的讨论主题,同时,人们对物质的需求总是非常有限的,因此“实用性”价值空间…

    2017-01-03
  • 互联网理财平台交互设计再设计

    一、项目背景互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。用户在购买理财产品时,只能通过平台的账户余额进行购买。如果账户余…

    2017-08-01
  • 百度地图新版的界面升级传递出了哪些信号?

    春节将至,手机上的应用商店也开启了集中更新的模式。前几天打开百度地图时,“为你而变”的闪屏广告预示了百度地图的更新信息,当时以为只是简单地版本升级,然而昨天更新之后发现,这次升级可不那么简单,百度地图在界面设计上的改变甚是明显。

    2017-05-28
  • 产品需求分析——《破茧成蝶》读书笔记

    这是一本很实在的书,没有很虚的理论,而是结合了国内互联网实际的案例,清晰明了地道出现实情况跟理想状态的不同,并且给出了很好的解决建议。适合刚入行的交互设计师以及产品经理阅读。 进入研究生阶段,大大小小…

    2015-03-05