繼承性和差異化:MOO音樂(lè)的品牌設(shè)計(jì)分享

12 評(píng)論 7963 瀏覽 46 收藏 14 分鐘

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

一周前,為了聽《夢(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ì)不僅要充分考慮視覺表現(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)

可見,“連接、傳遞、突破、創(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)造沉浸式的聽歌體驗(yàn),從而提升產(chǎn)品的同理心。

比如專輯封面的輕擬物化設(shè)計(jì),播放時(shí)音波的特效、背景圖片和短視頻等等。(在這一點(diǎn)上,網(wǎng)易云音樂(lè)的設(shè)計(jì)也值得學(xué)習(xí))

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)?strong>最契合用戶聽歌行為場(chǎng)景的是歌單。

二、差異化

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

1. 品牌理念

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

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

2. 視覺氛圍

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

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

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

3. 交互手法

(1)調(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é)上的處理。

(2)切歌的交互
通常情況下,在音樂(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)不可能一步到位。

大家如果有好的想法和建議可以加入官方QQ群:677473684,相信開發(fā)者在未來(lái)的版本里能夠帶給用戶更好的體驗(yàn)和驚喜。

筆者借此機(jī)會(huì)向開發(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è)置推薦or隨機(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. 開通會(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)交互和視覺的細(xì)節(jié)后,會(huì)發(fā)現(xiàn)鵝長(zhǎng)的設(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ā)。

參考資料

《騰訊的設(shè)計(jì)到底好在哪?高手是從這3個(gè)維度分析的!》(作者:蘇大大大牙)

《騰訊做的這款音樂(lè) App,讓你用與眾不同的方式探索和發(fā)現(xiàn)新音樂(lè)》(作者:Tp)

《騰訊產(chǎn)品法》(作者:李立)

《破繭成蝶2——以產(chǎn)品為中心的設(shè)計(jì)革命》(作者:劉津,孫睿)

感謝你的閱讀,我們下期再見~

 

作者:王晗陵,微信公眾號(hào):設(shè)計(jì)意志(ID:D-Minder)

本文由 @王晗陵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不知道作者發(fā)現(xiàn)沒(méi)有,同一首歌有時(shí)候會(huì)換背景,這個(gè)是不是給用戶帶來(lái)了一些‘驚喜’,視覺上使一首歌曲可能變成了兩種風(fēng)格^ – ^

    回復(fù)
    1. 嗯,是的。不同背景也許會(huì)給音樂(lè)帶來(lái)不同的感覺。

      回復(fù)
  2. 有一款類似的音樂(lè)app:《樂(lè)趣》,不知道誰(shuí)先出的

    回復(fù)
  3. 這個(gè)軟文真的可以 明顯抄襲樂(lè)趣的

    回復(fù)
    1. 只是想分析一下移動(dòng)端新產(chǎn)品的品牌設(shè)計(jì)思路。????

      回復(fù)
  4. 你是沒(méi)用過(guò)樂(lè)趣吧

    回復(fù)
  5. 首先對(duì)于UI和產(chǎn)品細(xì)節(jié)考慮MOO確實(shí)有學(xué)習(xí)的地方,但是另一方面必須說(shuō)鵝腸死性不改,抄襲成習(xí)慣,不提倡該行為。

    來(lái)自廣東 回復(fù)
  6. 我也是前兩天才下載的,用了一下其實(shí)挺好用的,對(duì)于樓上說(shuō)的,我覺得其實(shí)根本不是一個(gè)傳統(tǒng)的音樂(lè)APP,他本身就追求極致的簡(jiǎn)介,純粹的聽歌體驗(yàn),如果太繁復(fù)反而會(huì)適得其反。
    現(xiàn)在我比較喜歡的是標(biāo)簽分類,找歌會(huì)很方便,不過(guò)一些很小的細(xì)節(jié)可能會(huì)不那么完善,譬如歌單同步暫時(shí)還沒(méi)有。畢竟是新APP,看來(lái)還是值得期待的

    來(lái)自四川 回復(fù)
  7. 體驗(yàn)了兩天,無(wú)論是UI設(shè)計(jì)還是交互體驗(yàn)感都處理得蠻好的,推薦歌單的算法有丶東西。 ??

    來(lái)自四川 回復(fù)
  8. 終于看到音樂(lè)APP的另一種玩法和界面渲染力 ?

    來(lái)自浙江 回復(fù)
  9. 簡(jiǎn)單體驗(yàn)了一下,自己的一點(diǎn)感想:1、這本身也是一個(gè)主打音樂(lè)的一個(gè)軟件,那么在首頁(yè) 至少要滿足基本的功能,就像筆者說(shuō)的推薦和自動(dòng),至少有。2、評(píng)論區(qū)的設(shè)計(jì)做的相對(duì)隱蔽,是不是可以外放到首頁(yè)?3、首頁(yè)歌手的熱區(qū)問(wèn)題,誰(shuí)點(diǎn)誰(shuí)知道。4、歌手的簡(jiǎn)介頁(yè)面,怎么說(shuō)呢,交互習(xí)慣有點(diǎn)差別,既然是簡(jiǎn)介頁(yè)面,還是要回歸簡(jiǎn)介頁(yè)面的性質(zhì):?jiǎn)我弧⒗硇?、專業(yè)、現(xiàn)在的頁(yè)面交互雖然靈活,但是采用分屏的設(shè)計(jì)方式不是很合適,點(diǎn)擊頭像出行啊簡(jiǎn)介,上滑出現(xiàn)更多歌曲列表,為何不集合坐在一起,現(xiàn)在的構(gòu)思的原因是什么呢?而且 我本以為點(diǎn)擊頭像是將歌曲列表收起,令我很意外,而且只是一個(gè)歌手的簡(jiǎn)介,就采用了非常阻斷用戶體驗(yàn)的一個(gè)方式,感覺不是很合適。5、一開始為啥我的首頁(yè) 只播放同一個(gè)人的歌曲????????

    來(lái)自江蘇 回復(fù)
    1. 點(diǎn)擊頭像是歌手的簡(jiǎn)介,我猜未來(lái)會(huì)在獨(dú)立歌手或者KOL方面做規(guī)劃吧。

      來(lái)自江蘇 回復(fù)