面试苹果被拒绝后,我重新设计了Apple Music,收获5K赞! - 优设网 - UISDC

面试苹果被拒绝后,我重新设计了Apple Music,收获5K赞!

2017/06/14 12327评论区

译者小船:今年早些时候,我向Apple Music(一生的机会)申请平面设计实习,但是被客气的拒绝了,他们表示尽管非常喜欢我的这个项目,但是希望看到更多的练习和成长。

首先,我是非常受挫的——Northwestern University 没有提供任何基本的平面设计课程,所以如果要成长都必须靠自学…

…但是当我意识到后,我开始了对Apple Music长达三个月的研究。

对我来说,这是一个让我可以深入了解UX研究和设计的好机会,可以花费更多时间学习Sketch和Principle的借口,可以跟周围的人解释为什么我在绘制粗略的线框图…

你可以在下面的案例中找到一些为Apple Music存在的问题提供的解决方案,以及未来发展的想法。我的设计过程是基于本质上的用户研究,Apple官方设计原则,和自己的设计直觉。

介绍

作为一个拥有音乐作品和表演背景的设计师,我总是热衷于把音乐和技术结合起来。通过设计,我希望有一天能够使音乐的体验更容易更令人愉悦。

然而,苹果音乐总是让我失望,它正在经历青春期,即意味着稳步成熟但与完全成熟相比,如Spotify,仍未有足够吸引力。

为了更好的了解Apple Music,我放下对它之前的印象并开始重新认识。

Apple Music 给人第一印象是混乱的界面和不成熟的视觉效果。

△ 音乐库

在iOS 10,Apple公司以简约为原则发布了版本的更新。

虽然这个新的界面有很清晰的导航,可我依旧觉得这里的空间很拥挤。界面让人感觉凌乱,甚至会产生幽闭恐惧症,尽管也是使用的简洁的色彩和大气的排版,但与Apple的优雅相差甚远。

我的重设计分为三个步骤,分别包括:

  • 核心体验
  • 品牌识别
  • 视觉界面

1. 核心体验:发现音乐

首先我发现使用者一般符合下面的范围:

△ 标记下自己的位置,我在中间的区域

左边为收集者:

  • 随着时间收集了大量的音乐
  • 更有选择性的听音乐

普通听众:

  • 依赖播放列表/推荐内容
  • 可能已经在使用Spotify

打开Apple Music 你可能会在说明中找到:

如果听到你喜欢的音乐,把它加入你的音乐库

将播放列表当作发现音乐的工具来处理是Apple Music像iTunes一样过时的原因之一。但是,播放列表目前实施的方式令人感到僵硬。我发现用户对添加整个播放列表到音乐库的体验很不好,尤其是播放列表在不断更新的情况下。

如果想扩大普通听众的人群,就必须在现有的用户基础上实现扩张。这就意味着需要在「艺人」和「专辑」这两个地方代替播放列表创建发现音乐。

私人定制

我在基于了解用户前提下,发现即使用户进入音乐库也不愿意通过播放列表添加新音乐。个人认为,一个好的体验是用户能够通过视频或案例可以得到更多的信息,方便他们选择是否加入音乐库或每周的播放列表。

进入私人定制,在用户面前呈现出一系列艺术家的头像和其对应的歌曲。用户可以提前听到15秒的歌曲,并且可以通过向上滑动拒绝听歌或向下滑动添加到个人的音乐库。

我选择用手势交互,方便用户在不看屏幕的情况下也能做选择。一旦用户结束了操作,他们选择的内容会被新建一个音乐列表,方便他们听音乐。

这种做法的背后动力来源于下面的采访:

“苹果低估了游戏化的力量”

— 我在洛杉矶采访的一位交互设计师同时是苹果音乐的使用者

我已经明白了,通过游戏化的体验,用户能够很快的与发现音乐建立联系。另外,私人定制可以为苹果音乐提供关于听众喜好的信息,使APP和它的用户一起成长和发展。

2. 品牌识别

我在Sony Music实习期间,我了解到,品牌视觉在流媒体服务中必须是可识别的。Spotify这点做的非常好,他们的播放列表专辑使用半色调封面就很有识别性。

相比之下,Apple Music 的视觉品牌现在是这样的:

有很多不同的特征:3D效果,和黑白的照片。

另外,有关拼贴主题的封面并没有真正给用户传达关于播放列表想表达的任何内容。

主要的问题似乎是苹果音乐把所有的东西都贴出来当作封面,而不是真正设计一种统一的视觉语言,使苹果音乐的封面在海量的专辑封面中脱颖而出。

我的解决方案遵循下面的原则:

专辑作品应该被视为UI的一部分,而不是独立的可视化组件

歌手展示

这个启发来自于苹果音乐的欢迎页,我选择在圆形图案中展示歌手的头像。圆形的灵感来自于iPod的轮播图 — 苹果音乐的标志性部分。“头像在圆形内”的特征在iOS其他的也有使用,尤其是通讯录。

另外,我选择将歌手展示和UI视觉更好的协调在一起。最后,我将颜色限制在蓝色,紫色,红色这三个色系中,来呈现苹果音乐的图标。

△ 歌手展示

重构播放列表

对于播放列表,我的想法是和歌手展示保持一致,通过使用颜色展示播放列表的氛围。列表的背景则选择将该头像高斯模糊后作为背景(灵感来自iOS的背景模糊)。对于部分封面,我会稍微添加些渐变的红色(苹果音乐的品牌色)来增加维度感。

△ 重新设计的播放列表

主要的播放列表

最后,我更新了主要的几个播放列表的视觉,使用的排版依旧和前面歌手展示保持一致。

△ 主要的播放列表

3. 视觉界面

总体的改善

苹果音乐当前的页面最大的问题是令人感到没有激情,缺乏愉悦感。为了解决这个问题,我以细微的调整页面宽度的方式优化了整个页面,如下图所示:

我不认为对“音乐库”的改变是必要的。所以对留白处和字体做了调整。取消了“我的下载音乐”,因为我觉得app可以根据当前的网络状态自动判断用户可访问的音乐。

下图是为了增加互动添加了下拉交互动效(适用在不同的tab下)。

为你推荐

“为你推荐”是Apple Music的核心。Apple Music可以通过用户根据喜好建立的播放列表和封面更深入地了解用户。

我收集了关于“为你推荐”的反馈意见,因此对于重设计,我的主旨是减少用户投放内容的同时增加其余内容的曝光度,就像Facebook和Instagram的“热门文章”。

“为你推荐”中开始的内容展示“私人定制”,代替了“我最喜欢的”和“我新添加的音乐”。“最近播放”不做改动,因为对用户来说它是很有用的。

向下滚动,会发现我根据位置,时间和最近的社交媒体活动对“周播放列表”进行了调整。

就像在Facebook上搜索café 搜立即展示结果一样,Apple Music 根据用户的播放列表选择更新Mood,这不是很好吗?

我们在社交媒体上分享我们的生活,同时也可以从中得到一些反馈,你觉得如何?

下图是每日推荐,根据用户的喜好推荐给他们相应的视频。比如,我非常喜欢凯蒂·佩里,如果她的音乐发布,那就可以重点展示凯蒂的视频。

向后滑动,你就会发现“艺术家聚集地”。我将新的品牌视觉效果与其他界面协调一致。

最后,如果用户没有在“为你推荐”中找到感兴趣的内容,为了方便他们能够快速访问更多的音乐,可以让他们预览“最受喜爱”或“最多播放”的音乐。

Connect功能发生了什么改变?

这是好问题。事实上,我并没能从我的研究中看到任何数据来证明现在App中Connect Feed功能的存在是正确的。用户们有更多的兴趣通过音乐与朋友和家人建立联系,而不通过Twitter与艺人建立联系。

我认为Apple公司应该注重整合现有的社交媒体与Apple Music的结合,而不是试图向已经有很多选择的用户再推一个社交媒体应用。

浏览

我收到关于当前“浏览”最多的反馈是它令人感到太乏味。也有些用户对“为你推荐”和“浏览”之间的区别感到困惑。

我的方案是根据苹果网站的风格重新设计了幻灯片 — 宽度与屏幕宽度一致,底部的横线标记着用户当前所在的幻灯片位置。我相信这样改变会更能突出精选内容。

同时将 “收音机”列表合并到了“浏览”。

观看

今年,苹果公司确认Apple Music公司将要扩展视频流媒体内容,努力的将苹果音乐变为流行文化的核心。我很好奇该要如何播放视频,尤其是在手机App上,所以我创建了独立的标签页专门用来浏览视频内容。

添加独立标签页的另一个好处是,“浏览”可以专门保留音频内容

以后这个标签下将会有丰富的内容,但现在我的设计是基于苹果音乐已经爆料的信息和现有的视觉语言。

搜索

现在苹果音乐搜索功能最主要的问题在于它的已有模式:必须分别在“苹果音乐”和“音乐库”下进行搜索。

使用这个app的两年时间里,我发现自己依旧会在搜索功能下感到失望,尤其是音乐库有不同的方式处理关键字:

这非常令人讨厌,因为输入错误的可能性会很大,尤其是他们在音乐库中查找新发布的歌曲或艺人的时候。

我的解决方案是将两个模块合并在一起统称为“搜索”,搜索结果优先展示用户的音乐库的内容,接着是苹果音乐相关的内容。

可以很明显的看出我是Lady Gaga的粉丝吗?

音乐库的内容也应该支持关键字的模糊搜索。如果将来能够通过关键字实现有关的情绪或活动内容,那一定会很有趣。

播放页面

我喜欢Apple现在的播放页面,也觉得不需要太多的调整。所以决定保持现在的界面视觉效果。但是,我认为在现有的基础上添加一些简单的手势交互会是一个很好的体验方式。

对很多用户来说,包括我自己,对通过“喜欢”和“不喜欢”评价歌曲的意义并不是很理解。并且目前这两个操作是被隐藏起来的,当用户表示“喜欢”一首歌曲的过程需要在手机上打开一个独立的菜单,这个过程很繁琐。

“如果隐藏的这么好是不是意味着这个功能不是特别需要?”

我的解决方案是通过大多数用户已经很熟悉的手势  ——  双击来实现。我注意到,很多用户试图按动专题页面…那为什么不在此基础上给用户一个反馈呢?

另外,用户可以通过横向滑动进行浏览。我相信这会给用户更直观的方式让他们自行控制听觉体验。

接下来?

回顾我初次在头脑风暴期间潦草的笔记,我为自己三个月内能取得的进步感到惊讶。

在这个项目开始之前,我对Principle完全没有接触,不会使用Sketch中混合编辑模式。现在…诚实的说,我仍然认为自己在app原型制作中是新手,但是,我会努力做到最好。

我并不认为Apple Music公司的优秀人士能够从这个案例中用到任何东西,但是如果在AppleMusic工作的人看到这篇文章我会很惊喜,同时也希望这个项目能够带给你一些想法。

通过这个项目,我了解了我戏剧专业背景与UX设计的关系 —— 设计师的经验和戏剧艺术家对人类的同理心的理解是相似的。

不久,我将开始我下一个重大的经历:罗德岛设计学院的BFA平面设计。虽然对要告别这个过程(和西北大学)感到很不舍,但我真诚地希望这仅仅是体验设计生涯的开始……通过同理心改变世界。

欢迎关注译者的微信公众号:

「干货超足的5个改版实战经验总结」

  1. LOGO 改版:《揭秘LOGO设计流程!超详细的腾讯云LOGO 改版记录全过程》
  2. 官网改版:《QQ官网全新蜕变!IM QQ 改版(第一期)设计总结》
  3. Pinterest 改版:《改版实战!聊聊PINTEREST官网再设计过程的经验思考》
  4. QQ 新版表情:《腾讯ISUX丨揭秘QQ 新版表情背后的设计故事》
  5. 提升数据:《腾讯ISUX丨通过优化,我们将QQ会员付费用户数提高了5倍!》

原文地址:medium

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/apple-music-redesign

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 平面设计 设计理论 神器下载 用户体验设计 字体下载 设计趋势 海报设计 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里