音乐你的生活—Android QQMusic 设计实录

标签: 视觉设计 | 发表时间:2010-11-26 11:09 | 作者:CDCer Foxiang
出处:http://cdc.tencent.com

在android平台上开发音乐播放器是一个全新的挑战。这次通过android QQ music项目实战,总结出一些方法和经验,希望能够对移动平台的设计尤其是多媒体这块提供一些有价值的参考和帮助。

一、引入产品定义描述(Application  Definition  Statement

相信大多数设计师都有过这样的经历:在产品设计过程中,设计师和产品经理不断pk,各抒己见,甚至闹得脸红耳赤、拍桌翻脸,最后项目总结时又因达不到“理想目标“双方深深自责,纷纷表示”缺少交流“。彼此不断pk,交流绝对足够,只是我们缺少有效沟通的工具。如果能在早期建立共识,口水仗爆发的频率就会越少,真正花在产品上的时间也就越多。这一次,我们决定更早地切入,在最开始的产品规划层面,引入“产品定义描述”(关于ap-plication definition statement,请参考《iPhone Human Interface Guidelines》)。

注意: ADS的定义也是一个迭代的过程,外部环境的变化、后续过程产生的问题,都可能对原ADS产生影响,需要重新评估、修正,甚至否定再来,但无论如何,必须确保整个团队对ADS有一个共同的认识。

二、细分场景,从场景推导需求,从需求推导设计

从源头的战略层面上建立了统一的认知,我们接下来开展的工作就有根据了。既然核心是解决“移动场景听歌“的问题,我们必须首先弄清楚什么是”移动场景“?移动环境和PC环境差异甚大,碎片时间的使用更为突出。用户一天是怎么活动的呢?每次拿起手机听音乐都是什么时间?上班的公车上、走路、晚上睡觉前?在这些点上用户都会做些什么?简单的脑暴可以罗列各个可能的使用场景,但还比较粗糙。场景的构想需要建立在高度的认知上,这时候用研的切入显得相当关键,用户特征、喜好、使用习惯…对用户越了解,场景就越能贴近真实、越能发现更多的细节。这些都为后续的设计决策提供了有力的依据。

客观构建的场景有很多有意思的发现,比如用户在播放本地歌曲时,挑选第一首歌往往比较犹豫,但对后续播放的歌曲却不太在意。从场景仔细分析和推敲,很容易就可以明确产品的需求,对应上述的发现,推导如下需求:为用户提供“马上听歌”按钮引导用户直接听歌。需求的推导因为有用研的切入,避免了太多的个人情感因素。

三、敏捷原型设计,适应与借鉴并行

用研的输出以及前面的ADS定义为功能筛选和设计取舍提供了强有力的决策依据。在需求框架大致决定的时候,我们接下来就进行方案设计了。正所谓“一图胜千言”,原型有时候会比面面俱到的文档更直观。不同的阶段,我们会进行不同精度的原型设计:

在原型迭代的过程中,需要注意android平台的UI尴尬。与其他平台(iPhone、symbian、windows mobile)不同,an-droid更加开放,不同的厂商不同的ROM版本界面规范并不统一。如果简单地将其他平台的设计规范移植过来,产品体验可能会和整个系统“格格不入”。借鉴了android平台的一些优秀app(比如twitter和new york times)的设计策略,我们决定“适应与借鉴并行“:在大的基础体验上,保证与系统体验一致,尊重平台使用习惯;在细节体验上,尽量克服系统的操作困难,保证局部体验的流畅。

四、视觉方案

在整个设计过程中,我们尝试了多套风格方案,比如“梦幻光影”、“清爽夏日”、“木质桌面”“蓝色海洋”等等, 由于beta1开发时间有限,最后选择了偏深绿色主色调的“梦幻光影”作为默认皮肤,这里奉上其他未曾谋面的方案,供参考。

4.1 主要界面模块划分

视觉方案的第一步是对界面各模块和控件进行作出符合审美原理和需要的的合理划分和尺寸设定,这里重点会落在正在播放界面和歌曲列表界面两块,虽然两个界面功能和承载的信息都不相同,但是在造作上两个界面跳转和切换是紧密关联的,在各模块划分和空间比例上两个需要统筹安排,一方面考虑上下同样尺寸的“标题行”和底部“控制行 / tab行”一方面要考虑歌曲列表界面的列表选择合适的行高和行数。在保证每一行歌曲信息能够有足够的空间显示的同时,还得保证一屏里面的歌曲行数是整数行。

从上图区域划分和比例可以看出,播放器界面,封面/歌手图片的中心点在整个界面的高度是296,相对于整个界面的高480,这一比例基本是处在0.618:1的黄金分隔点上。

4.2 正在播放界面

用户使用音乐播放器,最大的关注点一般会落在正在播放/播放器界面上,这块在视觉上是整个产品的核心区域,在很大程度上代表了整款软件的品质、品位和风格信息表达。而专辑封面/歌手头像又是正在播放界面的视觉中心,因此这块在设计上花了比较重的笔墨,用细腻的光照效果与晶莹剔透的质感精心营造了一种符合我们QQ音乐在手机移动操作平台上的气质的效果。

4.3 系统菜单icon

菜单选项icon是另外一个视觉信息传达比较重要的地方,对整体风格的形成起着重要作用,这里做了两种效果的尝试,一种A方案:是空心边框形式,看起来弹出菜单很轻盈,一屏6个选项带文字不会觉得拥挤,缺点是单个图标的轮廓有的地方不连贯,有可能会造成辨识度降低。另外最后选用的方案B是实心剪影的形式,这种表现方式整个icon看起来很整体,比较饱满,识别度较高,不过如果一屏图标过多的话可能会稍有拥挤的感觉,但如果以缩小的方式处理,对于手指触摸操作来说是不合理的,这里icon作了圆角处理和镂空实心均衡化处理,能在视觉感受上弱化一下可能会产生的拥挤感。

4.4 出现“水波纹”的问题

色彩显示效果上Android系统的手机由于硬件和技术上的限制和问题,会在某些情况下产生令人抓狂的水波纹问题,在尝试的过程中大致总结了容易造成水波纹的渐变使用,如上图左边两个图块:如果使用规则的径向渐变,程序贴图后极容易出现水波纹,另一种情况是如右边的两图块:渐变色差值过小,就是说渐变特别的细腻不显著的话也很容易在切图程序贴图后出现明显的水波纹。所以后面在配色和设计过程中可以据此避免尽量这样的情况出现。

4.5 最终选用方案:

五、后记

这是我们第一次在android平台上的尝试,为了解决以前传统设计流程带来的问题,我们在项目开始之初就引入了 ADS,在移动场景分析中又得到了用研同学的大力支持,从抽象到具体,从概念到实现,一步一步的开展变得有依有据,对产品,对设计,都是获益良多。

本项目涉及到两地三方的合作,沟通成本比较大,严重感谢团队的每一位成员,感谢大家全心全意的付出。

临尾还是希望来句厚颜无耻的大声吆喝:也许,它不是最华丽的播放器,但一定最懂你:在路上,在等候的车站,在前往神秘的美好旅途中…QQ音乐,音乐你的移动生活。

相关 [音乐 生活 android] 推荐:

音乐你的生活—Android QQMusic 设计实录

- 大栋 - 所有文章 - UCD大社区
在android平台上开发音乐播放器是一个全新的挑战. 这次通过android QQ music项目实战,总结出一些方法和经验,希望能够对移动平台的设计尤其是多媒体这块提供一些有价值的参考和帮助. 一、引入产品定义描述(Application  Definition  Statement). 相信大多数设计师都有过这样的经历:在产品设计过程中,设计师和产品经理不断pk,各抒己见,甚至闹得脸红耳赤、拍桌翻脸,最后项目总结时又因达不到“理想目标“双方深深自责,纷纷表示”缺少交流“.

MIUI 音乐播放器[Android] | 小众软件 > Android

- zhipeng - 小众软件 - Appinn
如果你用 Android ,你应该听过 MIUI ,最近小米手机发布的消息更是异常火爆. 这里给大家推荐一下 MIUI 的本地音乐播放器 – MIUI Music Player. MIUI Music Player 黑色调、简约风格,歌词与封面下载等功能一应俱全,标配均衡器,是一款值得体验的音乐播发器.

Android 4.0推迟发布 新截图+Google音乐曝光

- 屁清新健脑 - cnBeta.COM
首先是三星放出Nexus Prime手机的预告视频,然后该手机的详细配置曝光,有消息显示该手机将会在本月11日发布,同时Android 4.0问世,不过最新的消息称这一计划有变. 首先是Nexus Prime搭载的Android 4.0有更多截图曝光,新版界面我们之前曾经做过介绍,现在再针对每一张截图进行一次介绍.

Android Service的使用方法 音乐播放器实例

- - ITeye博客
Service翻译成中文是服务,熟悉Windows 系统的同学一定知道很熟悉了. Android里的Service跟Windows里的Service功能差不多,就是一个不可见的进程在后台执行,避免被用户误关闭. 因为Android在某些情况下会自动关闭非前台显示的Activity,所以如果要让一个功能在后台一直执行,不被Android系统关闭,比如说闹钟、后台播放音乐,就必须使用Service.

豆瓣FM(离线播放):旅途听音乐必备的Android软件

- Carl.King - 够趣堂
如今手机在线听音乐已经不稀奇,相关软件层出不穷,不过谁又能不Care流量计费. 之前手机装载了豆瓣FM软件,每次都会找着WIFI才会听歌曲,很是纠结. 不过最近豆瓣FM(Android)推出了红心兆赫,通过该频道可以收听收藏的红心歌曲,在同步完成后,离线也能收听了. 这个是多么令人兴奋的消息,旅途中不必再纠结流量问题,直接打开豆瓣FM红心兆赫离线收听自己喜欢的歌曲,还不赶快更新的豆瓣FM到最新的版本.

蓝魔音乐汇 W13 及 W16 将直接搭载 Android 4.0.3 出货

- - Engadget 中国版
谷歌在本月 20 号发布的 Android 4.0 ( Ice Cream Sandwich)的最新升级固件 4.0.3,平板产商就赶紧跟上了. 蓝魔发布会 刚刚透露的 W13 及 W16 将直接搭载 Android 4.0.3 出货. 冰激凌三明治这个最新的固件在图形、数据库、拼写检查和蓝牙等方面都作出了改进,包括新的相机性能,以及最新出现的一些文字教学,方便不熟悉的用户快速玩转 Android.

【外刊IT评论网】Rap说唱音乐《努力编码—Java生活》MV

- chao - 外刊IT评论网
Sun公司为了给2011年JavaONE大会造势,制作了一首Rap说唱风格的歌曲《Java Life》,也叫做《Code Hard!》,这首歌的mv里描述的是一群跟我们一样的程序员在公司的小隔断间里辛苦编程的故事,挺热闹的,不妨一看. 下面的视频是本站提供的加上了中文字幕的这首歌. 本文来自外刊IT评论网(www.aqee.net),原始地址:Rap说唱音乐《努力编码—Java生活》MV.

Xyologic:2011年11月Google Music下载量居各大Android手机音乐服务之首

- - 中文互联网数据研究资讯中心
根据Xyologic2011年12月的数据整理发现,2011年11月美国Android手机用户下载Google Music达到154万次,同期Amazon MP3和Pandora下载次数分别为145万次和130万次. Google:Android 2.3在所有Android系统设备中所占份额为55%.

Android机器人公仔再次现身美剧《生活大爆炸》

- 1212e - cnBeta.COM
感谢当乐网Android游戏门户的投递. 我们喜爱的小机器人之前已经在热门美剧《生活大爆炸》中露过一小脸了,但当我们看到他在Sheldon的办公桌摆Pose的绝妙镜头时,我们不能让他就这样默默的被忽视. 最近Android设备和它的吉祥物小机器人频频现身于各类电视剧集和电影中,这也表明Android操作系统获得了更多的认可的青睐.