微音樂是新浪微博的基礎(chǔ)功能型產(chǎn)品，為用戶提供基于微博的音樂服務(wù)，基于用戶關(guān)系的音樂互動服務(wù)；為音樂人提供上傳、分享作品的渠道、幫助音樂人推廣自己的作品。

微音樂包括兩部門內(nèi)容：
全球首發(fā)：藝人發(fā)新歌打榜的地方,他們把自己的音樂第一時間在這里發(fā)歌，用戶第一時間在這里聽到新歌 ，同時還能跟藝人進行小互動。
音樂盒： 電臺+音樂盒。可以根據(jù)用戶的喜好推送符合口味的音樂，也可以搜索自己喜歡的歌曲制作自己的專輯。

剛看到首發(fā)音樂UE的時候會發(fā)現(xiàn)與其他音樂網(wǎng)站并無它異。有導(dǎo)航，有播放器，有banner，有好友的feed，還有專輯列表。

先不著急開工，無論是產(chǎn)品交互還是視覺，在設(shè)計網(wǎng)站時都要首先解決掉下面這三個問題：

1.這是一個什么網(wǎng)站？（logo、標(biāo)題、banner的說明）
2.對我有什么用處？（明星的吸引，興趣愛好的驅(qū)動）
3.我該如何使用？（引導(dǎo)流程清晰）

如果網(wǎng)站在首頁解決上面三個問題，在使用上基本是合格了。其實這些問題既是自己動手設(shè)計前的思考，也是幫助產(chǎn)品和交互去梳理。多多溝通，多提問題，會大大減少返工的幾率。在動手設(shè)計之前越多的問題被解決，設(shè)計的效率就會越高。

掃除一系列問題障礙后，就要開始思考視覺的問題來：這個網(wǎng)站應(yīng)該是給用戶什么感覺？基調(diào)是什么？氣氛是什么？

當(dāng)我們做一個全新設(shè)計的時候，視覺模型有時會起到關(guān)鍵的作用。從一個準(zhǔn)確的模型中，我們可以提煉色調(diào)，氣氛，和質(zhì)感。

那音樂網(wǎng)站應(yīng)該是哪樣的呢？

它可以是這樣的：藍天綠草，閉上眼睛，靜靜的聆聽音樂。小清新，應(yīng)該就是這個感覺。

同時，它也可以這樣：紫色，紅色，藍色。多彩絢爛的燈光，演唱會high翻的氣氛，萬人之上享受歡呼的舞臺感覺。

兩種模型，兩種完全不同的氣氛。對應(yīng)出下面兩種風(fēng)格的草稿。

一個是小清新，一個更突出氛圍，配合“全球首發(fā)”的概念，下面的感覺更適合一些。繼續(xù)細化，把banner更加突出，移開比較沖突的播放器，重新梳理布局，終稿基本就是如下這個樣子了。

說完首發(fā)音樂，再說說微音樂下領(lǐng)一個一脈相傳的產(chǎn)品：音樂盒。

對于音樂盒，產(chǎn)品的要求就是：簡潔！突出大封面的優(yōu)勢！

布局上說，微博音樂盒更像是一個介于GUI和webUI的產(chǎn)品。上部分的播放器類似桌面客戶端的播放器，下部分的結(jié)構(gòu)又更像web上的操作布局。

如何把兩部分結(jié)合起來，如何跟當(dāng)前主流的音樂盒做出差異化，是我們微博音樂盒要解決的問題。
先看下周圍的同類產(chǎn)品：

 

總結(jié)下規(guī)律就是：簡單，而且基本都是以淺色白色為主。

或許我們可以嘗試下的黑色風(fēng)格~~

和白色相比，使用黑色有幾個優(yōu)勢：深色可以烘托出播放器的氣氛，質(zhì)感表現(xiàn)上也更加容易。其次對于各式各樣的封面既能突出還可百搭。

現(xiàn)在越來越多的網(wǎng)站和界面都或多或少用一些仿生設(shè)計，音樂盒也嘗試在這方面做了一些嘗試，比如背景的布紋效果處理，簡單的點綴讓整個設(shè)計顯得賞心悅目同時又不失簡單。

還能再多點什么？

其實音樂盒設(shè)計到這里應(yīng)該基本算完成了，但是在設(shè)計完成后總覺得可以再多些有一些錦上添花的驚喜。剛剛說到了仿生設(shè)計，于是又從音樂這兩個字著手，看看有沒有可以提煉的元素。

提到音樂我們可以想到什么？樂器？磁帶？音符？CD？還是。。唱片？

加入唱片的元素是個好主意~ 老唱片的古典和DJ唱片的時尚絕對是一個很好的概念，再加上唱片本身的造型剛好可以和播放器做一個結(jié)合，用唱片轉(zhuǎn)動來表示播放的狀態(tài)。再加上其他的歌單分類搜索等內(nèi)容，大功告成。

好吧，以上就是微音樂的完整設(shè)計過程。多觀察，多思考，是我們每個視覺師必備的能力~也許靈光就在一瞬間出現(xiàn)。：）

最后呢，希望大家多多支持微音樂，地址在此 http://ting.weibo.com

(責(zé)任編輯：PS家園網(wǎng))