如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一周前，為了聽(tīng)《夢(mèng)想的聲音》，我在APP Store 下載了QQ音樂(lè)，無(wú)意中發(fā)現(xiàn)「音樂(lè)」類APP里排行第9的 MOO音樂(lè)，它的預(yù)覽圖讓我聯(lián)想到這些關(guān)鍵詞：「小眾、獨(dú)特、歐美、Spotify、Apple Music」。

筆者之所以從品牌設(shè)計(jì)的角度分析這個(gè)鵝廠家族新成員，是因?yàn)橐豢钚庐a(chǎn)品的品牌設(shè)計(jì)在產(chǎn)品從0-1過(guò)程中扮演非常重要的角色，它關(guān)系到用戶對(duì)新產(chǎn)品的認(rèn)知與心智。

體驗(yàn)完 MOO音樂(lè)，我發(fā)現(xiàn)：移動(dòng)產(chǎn)品品牌設(shè)計(jì)不僅要充分考慮視覺(jué)表現(xiàn)層，還要綜合考慮戰(zhàn)略、理念、內(nèi)容、交互等多個(gè)方面。

同時(shí)，品牌設(shè)計(jì)是一種「求同存異」，「同」是保持對(duì)戰(zhàn)略、內(nèi)容、用戶習(xí)慣的繼承性，而「異」是相比競(jìng)品作出的差異化設(shè)計(jì)。本文就從繼承性和差異化，這兩個(gè)維度為你分享 MOO音樂(lè)的品牌設(shè)計(jì)。希望這種分析方法能夠?yàn)槟愕钠放圃O(shè)計(jì)提供幫助。

一、繼承性

1. 對(duì)新形象IP的繼承，培養(yǎng)了用戶心智

從啟動(dòng)圖標(biāo)和界面很容易看出，MOO音樂(lè)的品牌主色是黃色，背景色及輔助色基本是以黑白灰為主。

MOO音樂(lè)之所以采用這種配色方案，不僅是為了突出產(chǎn)品氛圍，讓人眼前一亮，還有可能是對(duì)騰訊新形象IP品牌的一種繼承和延續(xù)。

怪奇鵝IPENGOO，騰訊集團(tuán)新一代形象IP品牌，代表著一種自我突破，不斷創(chuàng)新的精神狀態(tài)。

我們希望能像魔術(shù)師一樣，以經(jīng)典企鵝形象上提煉出的極簡(jiǎn)鵝臉元素，為大家創(chuàng)造出充滿趣味、創(chuàng)新、時(shí)尚和腦洞的產(chǎn)品風(fēng)格和內(nèi)容，能喚醒每個(gè)用戶自動(dòng)發(fā)出好感電波是一件很棒的事情！——怪企鵝IPENGOO官微

每位音樂(lè)家都不是一顆孤獨(dú)的星球，他們保持獨(dú)立又彼此相連，在他們的探索下，音樂(lè)潮流才不斷推陳出新又一脈相承。

保持探索，對(duì)先鋒與經(jīng)典抱以同樣的敬意，所以我們創(chuàng)造了MOO：音樂(lè)即自由

MOO Music，Life is MOOO beautiful。——APP Store MOO音樂(lè)介紹

IPENGOO（怪企鵝）的理念是：

• 優(yōu)質(zhì)內(nèi)容連接符號(hào)
• 傳遞互聯(lián)網(wǎng)精神
• 代表自我突破
• 不斷創(chuàng)新的精神狀態(tài)

可見(jiàn)，「連接、傳遞、突破、創(chuàng)新」這些新形象IP理念在 MOO音樂(lè)的啟動(dòng)圖標(biāo)、品牌理念、交互手法、推薦歌單上都有所體現(xiàn)。

因此，MOO音樂(lè)很可能是騰訊新形象IP品牌影響力里的一種嘗試。

此外，MOO音樂(lè)的品牌色也很有可能是對(duì)騰訊旗下年輕娛樂(lè)產(chǎn)品品牌色的一種繼承。

2. 對(duì)音樂(lè)元素的繼承，提升了產(chǎn)品的同理心

Sympathize（體察和同理心），可以幫助我們?nèi)ダ斫馐挛锉砻姹澈蟮谋举|(zhì)，得到和理解設(shè)計(jì)的微妙細(xì)節(jié)，這些本質(zhì)自然的元素不只是邏輯上的，更是可以被感受的?！顫芍比?

說(shuō)到音樂(lè)本質(zhì)、自然的元素（不是曲風(fēng)），我們會(huì)聯(lián)想到黑膠、唱片、專輯、音波、調(diào)音臺(tái)、樂(lè)器、Live、樂(lè)譜、Launchpad等。這些音樂(lè)元素能拉近 APP 與用戶之間的距離，營(yíng)造沉浸式的聽(tīng)歌體驗(yàn)，從而提升產(chǎn)品的同理心。

比如專輯封面的輕擬物化設(shè)計(jì)，播放時(shí)音波的、背景圖片和短視頻等等。

3. 對(duì)用戶行為的繼承，降低了學(xué)習(xí)成本

當(dāng)我們?cè)跒橐豢钚庐a(chǎn)品設(shè)計(jì)交互時(shí)，需要充分考慮目標(biāo)、場(chǎng)景、用戶這些基本因素。我們通常會(huì)考慮并兼顧多數(shù)目標(biāo)用戶的使用行為和習(xí)慣，為新產(chǎn)品設(shè)計(jì)交互方式。

所以當(dāng)用戶看到熟悉的元素時(shí)，會(huì)很自然地知道如何去使用，降低了新產(chǎn)品的學(xué)習(xí)成本，這就是我們所熟悉的「Don’t make me think」。

MOO音樂(lè)的首頁(yè)P(yáng)LAY頁(yè)，采用的是音樂(lè)+短視頻（有時(shí)候是圖片）的方式，當(dāng)很多用戶看到這種熟悉的界面形式時(shí)，已經(jīng)本能的去上下翻頁(yè)、單擊播放/暫停，左右滑動(dòng)調(diào)整進(jìn)度更是再熟悉不過(guò)。

另外，MOO音樂(lè)的歌單在產(chǎn)品初期功能里占據(jù)了很大篇幅，因?yàn)樽钇鹾嫌脩袈?tīng)歌行為場(chǎng)景的是歌單。

二、差異化

說(shuō)完 MOO音樂(lè)在品牌設(shè)計(jì)方面保持的繼承性，下面來(lái)說(shuō)說(shuō)它不同于競(jìng)品的差異化設(shè)計(jì)，主要表現(xiàn)在品牌理念、視覺(jué)氛圍、交互手法。

1. 品牌理念

從 APP 的這4張歡迎頁(yè)就可以看出 MOO音樂(lè)的品牌理念和調(diào)性了：經(jīng)典、創(chuàng)新、前衛(wèi)、獨(dú)立。

從目前的版本來(lái)看，MOO音樂(lè)還是一款滿足小眾口味、專注聽(tīng)歌的音樂(lè)APP，但 APP 通過(guò)4張有代表性的歡迎頁(yè)，將 APP的「小眾」設(shè)計(jì)得「出眾」，很好地表達(dá)了產(chǎn)品的品牌理念。

2. 視覺(jué)氛圍

說(shuō)到產(chǎn)品品牌的差異化，不得不說(shuō)視覺(jué)層面的設(shè)計(jì)，畢竟視覺(jué)表現(xiàn)層是用戶體驗(yàn)5要素里最具體的。

MOO音樂(lè)提供兩套視覺(jué)風(fēng)格，默認(rèn)是品牌黃色+BLACK，另一套則是品牌黃色+WHITE，筆者覺(jué)得默認(rèn)的 BLACK 更有特色和沉浸感。

字體風(fēng)格方面，標(biāo)題類文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大寫的非襯線英文字體，歐美范十足。

3. 交互手法

調(diào)整進(jìn)度的交互

主流音樂(lè)APP，是通過(guò)一個(gè)進(jìn)度條和一個(gè)圓點(diǎn)來(lái)調(diào)整播放進(jìn)度，而 MOO音樂(lè)將播放頁(yè)面下方聲波區(qū)域作為調(diào)整進(jìn)度的熱區(qū)，通過(guò)明暗的對(duì)比來(lái)表現(xiàn)播放進(jìn)度。

雖然這種交互方式在騰訊自家短視頻微視APP 中也存在，但 MOO音樂(lè)還是作了細(xì)節(jié)上的處理。

切歌的交互

通常情況下，在音樂(lè)APP 播放頁(yè)面的其他頁(yè)面，都有一個(gè)控件讓你隨時(shí)可以切歌，甚至是收藏，查看播放列表。

MOO音樂(lè)將切歌控件設(shè)計(jì)成了黑膠+滑塊，切歌時(shí)只需向右滑動(dòng)，而且 iOS系統(tǒng)還會(huì)伴隨震動(dòng)反饋。這個(gè)微交互設(shè)計(jì)得蠻有意思，這讓我聯(lián)想到膠卷相機(jī)拍完一張，然后撥動(dòng)卷片扳手的機(jī)械反饋感。

三、幾點(diǎn)建議

目前 MOO音樂(lè)在 APP Strore 里才第2個(gè)版本，細(xì)節(jié)上的體驗(yàn)不可能一步到位。

筆者借此機(jī)會(huì)向開(kāi)發(fā)者提一點(diǎn)個(gè)人的建議，僅供參考。

1. 歌曲播放

希望當(dāng)前播放的歌曲與背景短視頻或圖片有一定的關(guān)系，比如系統(tǒng)可以根據(jù)歌曲的曲風(fēng)、類別等標(biāo)簽，自動(dòng)推薦匹配相關(guān)短視頻和圖片，讓歌曲與背景環(huán)境更協(xié)調(diào)。當(dāng)然，也可以讓用戶自己設(shè)置推薦或隨機(jī)。

在 PLAY頁(yè)面切下一首歌時(shí)，希望顯示歌曲正在加載的狀態(tài)，底部的音波區(qū)域好像可以作一些文章。

2. 視頻評(píng)論

（iOS）歌曲評(píng)論頁(yè)里的評(píng)論輸入框常駐在頁(yè)面底部，但視頻評(píng)論頁(yè)的評(píng)論輸入框沒(méi)有常駐，而且滑到底部時(shí)，不太容易滑到頂部，可能是小BUG。

3. 切歌控件

（Android）輕觸切歌控件里的暫停按鈕后，黑膠旋轉(zhuǎn)的角度被重置了。希望能與 iOS版一樣，暫停后黑膠旋轉(zhuǎn)的角度不被重置。

4. 開(kāi)通會(huì)員

APP 默認(rèn)的會(huì)員價(jià)格是18元/月，若勾選了到期自動(dòng)續(xù)費(fèi)，則價(jià)格是15元/月。

雖然這2個(gè)價(jià)格都不便宜，但相對(duì)來(lái)說(shuō)，自動(dòng)續(xù)費(fèi)的價(jià)格更有吸引力，但這個(gè)相對(duì)有吸引力的價(jià)格卻需要用戶主動(dòng)勾選「自動(dòng)續(xù)費(fèi)」才能看到。筆者建議將這2種價(jià)格都顯示出來(lái)，通過(guò)單選按鈕的形式去交互。這樣，用戶很容易就會(huì)發(fā)現(xiàn)自動(dòng)續(xù)費(fèi)的價(jià)格優(yōu)勢(shì)，畢竟與18元相比，15元就不怎么貴了。

總結(jié)

MOO音樂(lè)于11月初發(fā)布在 APP Store，網(wǎng)絡(luò)上比較多的評(píng)價(jià)是「抄抖音、抄樂(lè)趣、抄Spotify、鵝廠又抄了……」。

但作為設(shè)計(jì)師，筆者希望我們將關(guān)注點(diǎn)放在設(shè)計(jì)層面，去客觀的評(píng)價(jià)一款A(yù)PP，不要因?yàn)閯e人的評(píng)價(jià)而忽略了一些有品質(zhì)的設(shè)計(jì)。

當(dāng)我們仔細(xì)體驗(yàn)交互和視覺(jué)的細(xì)節(jié)后，會(huì)發(fā)現(xiàn)鵝廠的設(shè)計(jì)是有很多地方值得我們學(xué)習(xí)的。

最后，面對(duì)主流音樂(lè)APP、短視頻APP、Spotify、Apple Musici、樂(lè)趣……MOO音樂(lè)既做到了對(duì)騰訊新形象IP、音樂(lè)元素、用戶習(xí)慣的繼承性，又做出了一些不同于競(jìng)品的差異化設(shè)計(jì)。這套「組合拳」已經(jīng)打出了這款音樂(lè)APP 的品牌形象，希望這些內(nèi)容對(duì)你有啟發(fā)。

藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。