ANDROID QQMUSIC 设计实录.doc

音乐你的生活—Android QQMusic 设计实录 在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音乐在手机移动操作平