在android平臺上開發(fā)音樂播放器是一個全新的挑戰(zhàn)。這次通過android QQ music項目實戰(zhàn)，總結(jié)出一些方法和經(jīng)驗，希望能夠?qū)σ苿悠脚_的設計尤其是多媒體這塊提供一些有價值的參考和幫助。

一、引入產(chǎn)品定義描述（Application? Definition? Statement）

相信大多數(shù)設計師都有過這樣的經(jīng)歷：在產(chǎn)品設計過程中，設計師和產(chǎn)品經(jīng)理不斷pk，各抒己見，甚至鬧得臉紅耳赤、拍桌翻臉，最后項目總結(jié)時又因達不到“理想目標“雙方深深自責，紛紛表示”缺少交流“。彼此不斷pk，交流絕對足夠，只是我們?nèi)鄙儆行贤ǖ墓ぞ?。如果能在早期建立共識，口水仗爆發(fā)的頻率就會越少，真正花在產(chǎn)品上的時間也就越多。這一次，我們決定更早地切入，在最開始的產(chǎn)品規(guī)劃層面，引入“產(chǎn)品定義描述”（關(guān)于ap-plication definition statement，請參考《iPhone Human Interface Guidelines》）。

注意： ADS的定義也是一個迭代的過程，外部環(huán)境的變化、后續(xù)過程產(chǎn)生的問題，都可能對原ADS產(chǎn)生影響，需要重新評估、修正，甚至否定再來，但無論如何，必須確保整個團隊對ADS有一個共同的認識。

二、細分場景，從場景推導需求，從需求推導設計

從源頭的戰(zhàn)略層面上建立了統(tǒng)一的認知，我們接下來開展的工作就有根據(jù)了。既然核心是解決“移動場景聽歌“的問題，我們必須首先弄清楚什么是”移動場景“？移動環(huán)境和PC環(huán)境差異甚大，碎片時間的使用更為突出。用戶一天是怎么活動的呢？每次拿起手機聽音樂都是什么時間？上班的公車上、走路、晚上睡覺前？在這些點上用戶都會做些什么？簡單的腦暴可以羅列各個可能的使用場景，但還比較粗糙。場景的構(gòu)想需要建立在高度的認知上，這時候用研的切入顯得相當關(guān)鍵，用戶特征、喜好、使用習慣…對用戶越了解，場景就越能貼近真實、越能發(fā)現(xiàn)更多的細節(jié)。這些都為后續(xù)的設計決策提供了有力的依據(jù)。

客觀構(gòu)建的場景有很多有意思的發(fā)現(xiàn),比如用戶在播放本地歌曲時，挑選第一首歌往往比較猶豫，但對后續(xù)播放的歌曲卻不太在意。從場景仔細分析和推敲，很容易就可以明確產(chǎn)品的需求，對應上述的發(fā)現(xiàn)，推導如下需求：為用戶提供“馬上聽歌”按鈕引導用戶直接聽歌。需求的推導因為有用研的切入，避免了太多的個人情感因素。

三、敏捷原型設計，適應與借鑒并行

用研的輸出以及前面的ADS定義為功能篩選和設計取舍提供了強有力的決策依據(jù)。在需求框架大致決定的時候，我們接下來就進行方案設計了。正所謂“一圖勝千言”，原型有時候會比面面俱到的文檔更直觀。不同的階段，我們會進行不同精度的原型設計：

在原型迭代的過程中，需要注意android平臺的UI尷尬。與其他平臺（iPhone、symbian、windows mobile）不同，an-droid更加開放，不同的廠商不同的ROM版本界面規(guī)范并不統(tǒng)一。如果簡單地將其他平臺的設計規(guī)范移植過來，產(chǎn)品體驗可能會和整個系統(tǒng)“格格不入”。借鑒了android平臺的一些優(yōu)秀app（比如twitter和new york times）的設計策略，我們決定“適應與借鑒并行“：在大的基礎體驗上，保證與系統(tǒng)體驗一致，尊重平臺使用習慣；在細節(jié)體驗上，盡量克服系統(tǒng)的操作困難，保證局部體驗的流暢。

四、視覺方案

在整個設計過程中，我們嘗試了多套風格方案，比如“夢幻光影”、“清爽夏日”、“木質(zhì)桌面”“藍色海洋”等等，?由于beta1開發(fā)時間有限，最后選擇了偏深綠色主色調(diào)的“夢幻光影”作為默認皮膚，這里奉上其他未曾謀面的方案，供參考。

4.1 主要界面模塊劃分

視覺方案的第一步是對界面各模塊和控件進行作出符合審美原理和需要的的合理劃分和尺寸設定，這里重點會落在正在播放界面和歌曲列表界面兩塊，雖然兩個界面功能和承載的信息都不相同，但是在造作上兩個界面跳轉(zhuǎn)和切換是緊密關(guān)聯(lián)的，在各模塊劃分和空間比例上兩個需要統(tǒng)籌安排，一方面考慮上下同樣尺寸的“標題行”和底部“控制行 / tab行”一方面要考慮歌曲列表界面的列表選擇合適的行高和行數(shù)。在保證每一行歌曲信息能夠有足夠的空間顯示的同時，還得保證一屏里面的歌曲行數(shù)是整數(shù)行。

從上圖區(qū)域劃分和比例可以看出，播放器界面，封面/歌手圖片的中心點在整個界面的高度是296，相對于整個界面的高480，這一比例基本是處在0.618：1的黃金分隔點上。

4.2 正在播放界面

用戶使用音樂播放器，最大的關(guān)注點一般會落在正在播放/播放器界面上，這塊在視覺上是整個產(chǎn)品的核心區(qū)域，在很大程度上代表了整款軟件的品質(zhì)、品位和風格信息表達。而專輯封面/歌手頭像又是正在播放界面的視覺中心，因此這塊在設計上花了比較重的筆墨，用細膩的光照效果與晶瑩剔透的質(zhì)感精心營造了一種符合我們QQ音樂在手機移動操作平臺上的氣質(zhì)的效果。

4.3 系統(tǒng)菜單icon

菜單選項icon是另外一個視覺信息傳達比較重要的地方，對整體風格的形成起著重要作用，這里做了兩種效果的嘗試，一種A方案：是空心邊框形式，看起來彈出菜單很輕盈，一屏6個選項帶文字不會覺得擁擠，缺點是單個圖標的輪廓有的地方不連貫，有可能會造成辨識度降低。另外最后選用的方案B是實心剪影的形式，這種表現(xiàn)方式整個icon看起來很整體，比較飽滿，識別度較高，不過如果一屏圖標過多的話可能會稍有擁擠的感覺，但如果以縮小的方式處理，對于手指觸摸操作來說是不合理的，這里icon作了圓角處理和鏤空實心均衡化處理，能在視覺感受上弱化一下可能會產(chǎn)生的擁擠感。

4.4 出現(xiàn)“水波紋”的問題

色彩顯示效果上Android系統(tǒng)的手機由于硬件和技術(shù)上的限制和問題，會在某些情況下產(chǎn)生令人抓狂的水波紋問題，在嘗試的過程中大致總結(jié)了容易造成水波紋的漸變使用，如上圖左邊兩個圖塊：如果使用規(guī)則的徑向漸變，程序貼圖后極容易出現(xiàn)水波紋，另一種情況是如右邊的兩圖塊：漸變色差值過小，就是說漸變特別的細膩不顯著的話也很容易在切圖程序貼圖后出現(xiàn)明顯的水波紋。所以后面在配色和設計過程中可以據(jù)此避免盡量這樣的情況出現(xiàn)。

4.5 最終選用方案:

五、后記

這是我們第一次在android平臺上的嘗試，為了解決以前傳統(tǒng)設計流程帶來的問題，我們在項目開始之初就引入了 ADS，在移動場景分析中又得到了用研同學的大力支持，從抽象到具體，從概念到實現(xiàn)，一步一步的開展變得有依有據(jù)，對產(chǎn)品，對設計，都是獲益良多。

本項目涉及到兩地三方的合作，溝通成本比較大，嚴重感謝團隊的每一位成員，感謝大家全心全意的付出。

臨尾還是希望來句厚顏無恥的大聲吆喝：也許，它不是最華麗的播放器，但一定最懂你:在路上，在等候的車站，在前往神秘的美好旅途中…QQ音樂，音樂你的移動生活。

本文為騰訊CDC原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。