喵音乐 - 当音乐遇见 Material Design

 

总览

目标

Material Design 是 Google 的设计系统,简洁且优雅。而在国内由于种种原因,很少有产品会使用这个设计语言。Material Design 对设计师和程序员很友好,官方给出了大量的组件。对初学代码和设计的人来说,音乐产品是个很好的初始练手项目。喵音乐是为了将 Material Design 和音乐结合起来,看两者能碰撞出怎样的火花。

 

成果

Material Design 是 Android 端的设计语言,所以喵音乐只针对 Android 进行了设计。由于涉及到音乐的版权问题,喵音乐不支持在线音乐,仅支持本地音乐的播放。同时,希望每个人每天能抽出时间远离网络,静静欣赏音乐的魅力。

 

负责内容
  • UI 设计
  • 交互设计

 

 

什么是喵音乐?

喵音乐,概括来说是一款面向Android用户端的本地音乐播放软件

纯粹听音乐

从「本地播放器」这一属性就可以看出,喵音乐把目标聚焦在核心的音乐播放上,舍弃了很多跟音乐播放无关的内容,在此基础上保留一些个性化的内容供用户定制。

 

Material Design设计语言

之所以面向Android端,一方面是因为Material Design确实是一套很棒的设计语言,简洁优雅,然而由于种种原因在国内的实际项目中使用很少,于是想在个人项目中进行尝试;另一方面,我只有Android端的手机,互联网上提供了大量Android的学习资料,可以使我拓展自己的领域,给了我从设计到开发的可能性,并且可以实机测试。

 

生活的朋友

无论你在上班通勤的路上,忙碌的工作空闲之余,还是休息日惬意的下午,喵音乐都会像一直惹人爱的小猫咪一样,给你的生活带去纯粹的音乐,带去一点乐趣。

 

 

我的角色

由于是个人项目,从喵音乐的想法诞生,到交互设计,到UI设计,再到最后的代码,都是我自己负责的。所以,在这个项目中担任的角色还是很多的。

其中最重要的角色还是UI设计师,代码部分做了一部分尝试,因此最后喵音乐并没有实际上架到APP市场。不过,相信会等到喵音乐上线的那一天。

 

 

思考产品

个性化

喵音乐作为音乐APP的本质很明确,即一个音乐播放器。不过,正如每个人的风格和喜好都是不太一样的,从每个人的手机壁纸上就能看出来每个人的特点。很多APP都提供很多种皮肤和主题供用户选择,就是为了满足用户的个性化的审美需求。

喵音乐作为一款本地播放器,有着简洁轻量的追求,所以本身无法提供多种样式的背景供用户选择,但不提供不代表实现不了。依然可以给用户提供相应的入口,让用户自己进行定制,让用户可以有更多的掌控。

 

记录历史

产品不仅仅是冰冷机器上的软件,越来越多的公司和团队想把自己的产品打造成“有温度”的产品,于是出现了很多类似于人性化设计等名词。喵音乐的初衷是带给人们有乐趣的音乐体验,想跟用户做朋友,因此想记录用户在使用喵音乐过程中的点点滴滴。

所以,受到网易云音乐的音乐统计的启发,觉得这个点能很好的记录用户在不同的时期内喜好音乐的不同,也属于用户个性化的一部分,带给用户一种在陪伴的感觉。

 

用户的呼声

同时,调研了网易云音乐用户群呼声最高的几个声音,其中有一条是希望有音乐裁剪的功能,遇到好听的歌却没有办法作为自己的铃声是一件很残念的事情。喵音乐作为本地的音乐播放器,列表中的音乐均为下载完毕的歌曲,有必要加入这个小功能。

所以喵音乐这款产品的两个重点就确定了下来:音乐播放和个性化。之后的设计都是围绕着这两点来进行的。

 

 

面临的挑战

在实际设计的过程中,我遇到了一些起步阶段没有预想到的一些挑战。

 

1、背景皮肤与可读性的平衡

体验过很多APP之后,在更换皮肤的这块,有两种普遍的做法。

 

切换主题颜色

APP中内置了很多默认的主体颜色,比如:知乎蓝、少女粉、基佬紫等等,用户可以根据自己的喜好切换成自己比较中意的颜色。唯一要注意的就是浅色和深色颜色下的文字和图标颜色,比如本身的颜色是蓝色,字体为白色,切换到白色颜色主题时,代码中应当注意切换文字颜色为黑色,以保证可读性。

 

更换主题背景和图标

除了切换主体颜色之外,有的APP还为用户准备了一系列的主题和图标,供用户选择。

比较有代表性的就是QQ音乐和网易云音乐。

由于喵音乐想追求尽可能简洁高效的界面,所以主题图标这样的附加设计没有必要。要考虑的方向是类似网易云音乐这种更换APP背景的类型。

这样又有一个问题出现了,由于用户所使用背景图片的颜色多种多样,尤其在图片有大量浅色调的情况下,会对文字的识别性造成很大的影响。网易云采用了高斯模糊和遮罩的方式解决这样的问题,不过还是会使得整个页面显得很乱。

喵音乐想寻找一种既能更换背景图片又不影响文字识别性的方法,于是就有了现在的界面。将图片单独放在顶部,作为Tab的一部分,这样就不涉及到文字阅读性的问题了。

 

2、界面可实现性

由于一开始的目的是为了能够把喵音乐写出来,所以在有限的代码水平的条件下,没有单独开发的能力,只能去寻找已有的开源库和控件库。

这个相当于实际项目中的技术限制,如何在有限的技术水平下实现设计想法。因此,在实际设计的过程中,不能仅仅当成飞机稿来做,要兼顾实现的可能性。

对于这样的限制,实现想法的途径有两种,一方面去分析参考大量的竞品,了解技术的边界在哪里;另一方面去Github上搜索相关的资源,运用到自己的设计中。这个对自己来说是一个不小的挑战。

所以,在喵音乐中的种种操作和功能,其实现都是有迹可循的。

 

3、Material Design规范

Material Design 是 Google 出品的一个很棒的规范,兼顾了设计与开发这两个角色的需求。第一次使用这样的规范设计产品,对自己来说是一个学习的机会,也是一个挑战。

规范是死的,产品是活的。Material Design 规范有他的优点,但也有局限性,其中的条条框框不可能涉及到实际产品中的每一个细节。因此,在大部分遵守规范的情况下, 一些规范不适用的场合,也要大胆对规范进行舍弃。在实际项目中,对待设计规范的态度也应该是这样。

 

4、icon的不同状态

APP中,有的图标需要有普通状态和点击状态的区别,比如播放按钮、下一曲等等,用户点击之后需要给用户反馈。

在设计这些按钮图标和相关页面的时候,我在想一个问题,这些图标本身很小,如何才能让用户更容易点击到,尤其是对于室外使用的用户来说。我尝试过把图标整体放大的方法,但是,这样会使图标显得巨大,从而影响页面的美观程度。打开 Android 的「布局边界」后,我发现很多APP的点击区域都比图标本身大很多,就像下面的这个样子。

接下来我在网上搜索 Android 中如何扩大图标点击区域的方法,发现是可以通过设置 imageview 的宽和高,然后使用 src 而不是 background 引用图片资源的方法做到。

不过,有一个很实际的问题是,我们大部分给出的图标都是24dp左右的,而且,在开发过程中基本上都是使用的 wrap_content 的方法设置 view 的大小。对于设计师来说,要给出切图本身的大小,还要给出点击区域的大小,这样沟通的成本实在有些高。

不如直接把图标切成点击区域的大小,无论开发是使用 src 还是 background 引用图片资源,只要使用 wrap_content ,点击区域都在我们的控制范围之内,即避免了因为图标太小不易点击,又减少了沟通以及后期修改的成本。

 

 

产品主要功能

1、音乐播放

简洁易懂的音乐播放界面。

 

2、歌曲裁剪

遇到喜欢的歌曲,裁剪后做作为自己的铃声。

 

3、歌单

建立不同的歌单,满足不同情境下的需求。

 

4、个性化主题

自定义你喜欢的颜色和主题。

 

5、音乐统计

统计听过的歌和时长,像朋友一样陪伴你。

 

设计语言

关键词

在设计APP的整体风格之前,我思考了很多关键词,并建立了相应的风格板指导设计。

 

logo设计

猫是一种很多人都喜欢的、也确实很萌的存在,喵音乐意在将猫和音乐结合起来。

 

图标设计

以上面的风格板和logo作为基础,设计了一套与猫相结合的图标。图标的区域大小为24*24dp,实际图标的大小根据图标的做了相应的调整,使他们在视觉上看起来是平衡的。

 

页面展示

 

设计系统

在设计喵音乐的过程中,为了使得设计文件更规范,图层和symbol采用了很规范的命名方式,这样可以大大提高设计的效率和传递性。

 

设计总结

 

1、兴趣和职业

喵音乐是个人项目,将自己的兴趣和职业结合起来,在做事的时候虽然也会很苦逼,但快乐会更多一点。如果把实际的工作也当成兴趣的一部分,我想会在工作的过程中体验到不一样的感觉吧。

在调研和设计的过程中,把玩了很多独立开发者开发的APP,深深感觉到,能把自己的想法真实实现出来,确实是一件很有趣的事情。

 

2、命名规范

有很多公司和人在网上分享了一些设计规范和设计模板,比如Google、Apple、invision等等,研究这些文件会发现,无论是图层命名还是symbol命名都很规范。这样做的好处是,让人易于理解,对于一些复用性很高的控件,替换内容也会变得相当容易。

因此,自己对这些命名进行了对比,总结了一套适合自己的命名规范,并在喵音乐中进行了实践,对于以后的设计有很大的帮助。

 

3、做设计与写代码

实际开始学代码之后,更加明白了有时候设计上的小改动,会给开发带来很大的工作量,也更加理解了设计实现的边界在哪里。

不过边做设计边学代码,很容易陷入误区,我只会设计我能实现出来的东西。设计的时候会过多的考虑到实现的可能性,然而实现的可能性受到自身代码水平的制约。解决这样的问题,要注意在做设计的时候和写代码的时候,用到不同的思维。

设计的时候,考虑边界是可以的,但不应该太过头,过头就会进入「恐慌区」,也就是所谓的「宇宙飞船稿」;写代码的时候,也要突破自己现有的水平,用于尝试寻求解决方案。

 

4、任重而道远

喵音乐还有很多不足,很多功能只有一个雏形,体验上远远达不到易用的标准,开发进度也因为工作和自身水平的原因,仍处在起步的的阶段。

总的来说,任重而道远。不过,相信在未来的某一天,喵音乐真的会诞生,即使是以一种很笨拙的姿态。

 

 


如有兴趣,欢迎扫码加微信或下载「简历」