2018-11-26 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一周前，為了聽《夢想的聲音》，我在APP Store 下載了QQ音樂，無意中發(fā)現(xiàn)「音樂」類APP里排行第9的 MOO音樂，它的預(yù)覽圖讓我聯(lián)想到這些關(guān)鍵詞：「小眾、獨特、歐美、Spotify、Apple Music」。筆者之所以從品牌設(shè)計的角度分析這個鵝廠家族新成員，是因為一款新產(chǎn)品的品牌設(shè)計在產(chǎn)品從0-1過程中扮演非常重要的角色，它關(guān)系到用戶對新產(chǎn)品的認知與心智。
體驗完 MOO音樂，我發(fā)現(xiàn)：移動產(chǎn)品品牌設(shè)計不僅要充分考慮視覺表現(xiàn)層，還要綜合考慮戰(zhàn)略、理念、內(nèi)容、交互等多個方面。
同時，品牌設(shè)計是一種「求同存異」，「同」是保持對戰(zhàn)略、內(nèi)容、用戶習(xí)慣的繼承性，而「異」是相比競品作出的差異化設(shè)計。本文就從繼承性和差異化，這兩個維度為你分享 MOO音樂的品牌設(shè)計。希望這種分析方法能夠為你的品牌設(shè)計提供幫助。
從啟動圖標和界面很容易看出，MOO音樂的品牌主色是黃色，背景色及輔助色基本是以黑白灰為主。
MOO音樂之所以采用這種配色方案，不僅是為了突出產(chǎn)品氛圍，讓人眼前一亮，還有可能是對騰訊新形象IP品牌的一種繼承和延續(xù)。
IPENGOO（怪企鵝）的理念是：
可見，「連接、傳遞、突破、創(chuàng)新」這些新形象IP理念在 MOO音樂的啟動圖標、品牌理念、交互手法、推薦歌單上都有所體現(xiàn)。
因此，MOO音樂很可能是騰訊新形象IP品牌影響力里的一種嘗試。
此外，MOO音樂的品牌色也很有可能是對騰訊旗下年輕娛樂產(chǎn)品品牌色的一種繼承。
說到音樂本質(zhì)、自然的元素（不是曲風(fēng)），我們會聯(lián)想到黑膠、唱片、專輯、音波、調(diào)音臺、樂器、Live、樂譜、Launchpad等。這些音樂元素能拉近 APP 與用戶之間的距離，營造沉浸式的聽歌體驗，從而提升產(chǎn)品的同理心。
比如專輯封面的輕擬物化設(shè)計，播放時音波的、背景圖片和短視頻等等。
當(dāng)我們在為一款新產(chǎn)品設(shè)計交互時，需要充分考慮目標、場景、用戶這些基本因素。我們通常會考慮并兼顧多數(shù)目標用戶的使用行為和習(xí)慣，為新產(chǎn)品設(shè)計交互方式。
所以當(dāng)用戶看到熟悉的元素時，會很自然地知道如何去使用，降低了新產(chǎn)品的學(xué)習(xí)成本，這就是我們所熟悉的「Don’t make me think」。
MOO音樂的首頁PLAY頁，采用的是音樂+短視頻（有時候是圖片）的方式，當(dāng)很多用戶看到這種熟悉的界面形式時，已經(jīng)本能的去上下翻頁、單擊播放/暫停，左右滑動調(diào)整進度更是再熟悉不過。
另外，MOO音樂的歌單在產(chǎn)品初期功能里占據(jù)了很大篇幅，因為最契合用戶聽歌行為場景的是歌單。
說完 MOO音樂在品牌設(shè)計方面保持的繼承性，下面來說說它不同于競品的差異化設(shè)計，主要表現(xiàn)在品牌理念、視覺氛圍、交互手法。
從 APP 的這4張歡迎頁就可以看出 MOO音樂的品牌理念和調(diào)性了：經(jīng)典、創(chuàng)新、前衛(wèi)、獨立。
從目前的版本來看，MOO音樂還是一款滿足小眾口味、專注聽歌的音樂APP，但 APP 通過4張有代表性的歡迎頁，將 APP的「小眾」設(shè)計得「出眾」，很好地表達了產(chǎn)品的品牌理念。
說到產(chǎn)品品牌的差異化，不得不說視覺層面的設(shè)計，畢竟視覺表現(xiàn)層是用戶體驗5要素里最具體的。
MOO音樂提供兩套視覺風(fēng)格，默認是品牌黃色+BLACK，另一套則是品牌黃色+WHITE，筆者覺得默認的 BLACK 更有特色和沉浸感。
字體風(fēng)格方面，標題類文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大寫的非襯線英文字體，歐美范十足。
調(diào)整進度的交互
主流音樂APP，是通過一個進度條和一個圓點來調(diào)整播放進度，而 MOO音樂將播放頁面下方聲波區(qū)域作為調(diào)整進度的熱區(qū)，通過明暗的對比來表現(xiàn)播放進度。
雖然這種交互方式在騰訊自家短視頻微視APP 中也存在，但 MOO音樂還是作了細節(jié)上的處理。
切歌的交互
通常情況下，在音樂APP 播放頁面的其他頁面，都有一個控件讓你隨時可以切歌，甚至是收藏，查看播放列表。
MOO音樂將切歌控件設(shè)計成了黑膠+滑塊，切歌時只需向右滑動，而且 iOS系統(tǒng)還會伴隨震動反饋。這個微交互設(shè)計得蠻有意思，這讓我聯(lián)想到膠卷相機拍完一張，然后撥動卷片扳手的機械反饋感。
目前 MOO音樂在 APP Strore 里才第2個版本，細節(jié)上的體驗不可能一步到位。
筆者借此機會向開發(fā)者提一點個人的建議，僅供參考。
希望當(dāng)前播放的歌曲與背景短視頻或圖片有一定的關(guān)系，比如系統(tǒng)可以根據(jù)歌曲的曲風(fēng)、類別等標簽，自動推薦匹配相關(guān)短視頻和圖片，讓歌曲與背景環(huán)境更協(xié)調(diào)。當(dāng)然，也可以讓用戶自己設(shè)置推薦或隨機。
在 PLAY頁面切下一首歌時，希望顯示歌曲正在加載的狀態(tài)，底部的音波區(qū)域好像可以作一些文章。
（iOS）歌曲評論頁里的評論輸入框常駐在頁面底部，但視頻評論頁的評論輸入框沒有常駐，而且滑到底部時，不太容易滑到頂部，可能是小BUG。
（Android）輕觸切歌控件里的暫停按鈕后，黑膠旋轉(zhuǎn)的角度被重置了。希望能與 iOS版一樣，暫停后黑膠旋轉(zhuǎn)的角度不被重置。
APP 默認的會員價格是18元/月，若勾選了到期自動續(xù)費，則價格是15元/月。
雖然這2個價格都不便宜，但相對來說，自動續(xù)費的價格更有吸引力，但這個相對有吸引力的價格卻需要用戶主動勾選「自動續(xù)費」才能看到。筆者建議將這2種價格都顯示出來，通過單選按鈕的形式去交互。這樣，用戶很容易就會發(fā)現(xiàn)自動續(xù)費的價格優(yōu)勢，畢竟與18元相比，15元就不怎么貴了。
MOO音樂于11月初發(fā)布在 APP Store，網(wǎng)絡(luò)上比較多的評價是「抄抖音、抄樂趣、抄Spotify、鵝廠又抄了……」。
但作為設(shè)計師，筆者希望我們將關(guān)注點放在設(shè)計層面，去客觀的評價一款A(yù)PP，不要因為別人的評價而忽略了一些有品質(zhì)的設(shè)計。
當(dāng)我們仔細體驗交互和視覺的細節(jié)后，會發(fā)現(xiàn)鵝廠的設(shè)計是有很多地方值得我們學(xué)習(xí)的。
最后，面對主流音樂APP、短視頻APP、Spotify、Apple Musici、樂趣……MOO音樂既做到了對騰訊新形象IP、音樂元素、用戶習(xí)慣的繼承性，又做出了一些不同于競品的差異化設(shè)計。這套「組合拳」已經(jīng)打出了這款音樂APP 的品牌形象，希望這些內(nèi)容對你有啟發(fā)。
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://tweetduck.com