音樂(lè)體驗(yàn)天花板！14個(gè)網(wǎng)易云音樂(lè)的情感化設(shè)計(jì)細(xì)節(jié)

一款口碑兩極分化的軟件。雖然它不是歌曲最多的聽(tīng)歌軟件， 但絕對(duì)是聽(tīng)歌軟件里情感體驗(yàn)最好的。

網(wǎng)易云小程序設(shè)計(jì)：

事先聲明 /attention。

1. 強(qiáng)烈建議使用電腦查看，用戶體驗(yàn)更佳。
2. Gif 體積較大，請(qǐng)耐心查看。
3. 為了讓設(shè)計(jì)細(xì)節(jié)更容易被看到，用 GIf 來(lái)呈現(xiàn)展示。

前言

碳水 Sir｜5 年村齡｜聽(tīng)過(guò)上萬(wàn)首歌｜發(fā)布過(guò)幾首翻唱歌曲｜黑膠·伍級(jí)｜LV.9，眾多身份都不能表達(dá)我對(duì)網(wǎng)易云的喜歡程度。因?yàn)樗粌H是一款音樂(lè)播放器，更像是一個(gè)有血有肉、有情感的虛擬人一直陪伴在我身邊，治愈著我～ 你很好奇它具有什么力量，能使用戶粘性如此持久，那么我不妨帶大家看看網(wǎng)易云音樂(lè)中情感化驅(qū)動(dòng)的魅力所在。

情感化設(shè)計(jì)：

「送信貓頭鷹」

飛鷹傳信 - 在第 43 秒送你入學(xué)通知書

1. 使用場(chǎng)景

在聽(tīng)歌頁(yè)面，呈現(xiàn)貓頭鷹送信環(huán)節(jié)，帶領(lǐng)粉絲回憶那個(gè)魔法學(xué)院，重溫經(jīng)典音樂(lè)。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：通過(guò)增加彩蛋，紀(jì)念《哈利波特 40 周歲暨電影重映》，提升歌曲二次曝光度。

設(shè)計(jì)方案：首頁(yè)搜索哈利波特 第二首 「海德薇變奏曲」，當(dāng)音樂(lè)播放到 第 43s 時(shí)，黑膠唱片中會(huì)突然飛出一只叼著通知書的貓頭鷹，重現(xiàn)海德薇送入學(xué)通知書的經(jīng)典橋段。貓頭鷹飛過(guò)，你會(huì)看到評(píng)論區(qū)圖標(biāo)變成了一封信。用極具創(chuàng)意的動(dòng)畫手法，引導(dǎo)用戶進(jìn)入評(píng)論區(qū)進(jìn)行后續(xù)操作。

這也給做產(chǎn)品設(shè)計(jì)的同學(xué)了一些靈感，當(dāng)有合作方時(shí)，嘗試著換種設(shè)計(jì)思路（例如：當(dāng)前影視與音樂(lè)結(jié)合的彩蛋），來(lái)綁定產(chǎn)品與合作方之間的聯(lián)系。形成高級(jí)記憶點(diǎn)，從而達(dá)到用戶主動(dòng)傳播的裂變效應(yīng)。

「穿越 9?站臺(tái)」

雙擊評(píng)論 - 進(jìn)入魔法車站

1. 使用場(chǎng)景

在上一個(gè)場(chǎng)景中，點(diǎn)擊信件進(jìn)入評(píng)論區(qū)，通過(guò)評(píng)論區(qū)用戶引導(dǎo)繼續(xù)彩蛋探險(xiǎn)之旅。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：為了使上個(gè)彩蛋具有連續(xù)性，提升彩蛋引入玩法達(dá)到評(píng)論話題熱度。

設(shè)計(jì)方案：點(diǎn)擊通知書- 在評(píng)論區(qū)找到第 9-10 評(píng)論，在中間空隙位置雙擊兩下，出現(xiàn)一個(gè)縫隙隨后逐漸放大，映入眼簾的是魔法站臺(tái)，隨后飛速而來(lái)一輛通往霍格沃茨的列車，當(dāng)門打開(kāi)時(shí)，又一個(gè)強(qiáng)光出現(xiàn)，隨后穿梭回評(píng)論區(qū)。整體動(dòng)畫一氣呵成，仿佛真的穿梭了一回。

當(dāng)用戶不知情下進(jìn)入評(píng)論區(qū)，會(huì)看到其他用戶都在以“彩蛋”為話題，展開(kāi)激烈討論，這時(shí)就激發(fā)出你的評(píng)論欲望，以及彩蛋入口探索，為彩蛋話題持續(xù)供熱發(fā)光。該手法也是利用“圈內(nèi)梗”標(biāo)志事物，再結(jié)合穿梭般的動(dòng)畫體驗(yàn)，給「哈迷圈」用戶體驗(yàn)了一波驚喜感，同時(shí)為后續(xù)「哈利波特魔法覺(jué)醒」游戲做好引流鋪墊。

「旗幟儀式感」

分院帽之歌 - 評(píng)論區(qū)的特殊儀式感彩蛋

1. 使用場(chǎng)景

正式入學(xué)前，怎么能少了入學(xué)典禮這么重要的儀式。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升歌曲傳播性以及記憶度，通過(guò)彩蛋強(qiáng)化音樂(lè)儀式感。

設(shè)計(jì)方案：點(diǎn)擊「分院帽之歌」評(píng)論區(qū) 輸入學(xué)院名稱如格蘭芬多，院旗降落，迎風(fēng)飄揚(yáng)，出現(xiàn)代表學(xué)院的旗幟，分院儀式就完成啦！儀式感是不是瞬間拉滿。

沒(méi)看過(guò)哈利波特的用戶，我這里為大家收集好了四個(gè)學(xué)院名稱，分別是赫奇帕奇、格蘭芬多、斯萊特林、拉文克勞，想體驗(yàn)的用戶快去試試吧～

「丁磊粉絲」

99999 以不變勝萬(wàn)變

1. 使用場(chǎng)景

用戶進(jìn)入 CEO 丁磊的主頁(yè)可以看到 99999 粉絲，在強(qiáng)迫癥驅(qū)使下為丁磊增加粉絲。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：通過(guò) 99999 粉絲，來(lái)“騙取”新粉絲關(guān)注，提升粉絲量。

設(shè)計(jì)方案：可能是程序員們被產(chǎn)品或 CEO 的各種需求堆壓的透不過(guò)氣，想著拿 CEO 來(lái)整活一下，這就有了上面的神奇一幕。進(jìn)入首頁(yè)，搜索「網(wǎng)易 CEO 丁磊」進(jìn)入主頁(yè)，第一次和 CEO 這么近距離接觸，當(dāng)你看到 99999 粉絲時(shí)，心想我原來(lái)就是那幸運(yùn)的第 10 萬(wàn)粉絲，心中很是激動(dòng)，當(dāng)你點(diǎn)擊關(guān)注后，返回首頁(yè)再一次進(jìn)去時(shí)，你會(huì)發(fā)現(xiàn)，粉絲數(shù)從新回到了 99999 粉絲，你以為是有人取消關(guān)注！其實(shí)這是程序員寫的一個(gè)欺騙代碼。利用這種仿制數(shù)字，來(lái)為 CEO 騙粉。這是程序員想到的點(diǎn)還是 CEO 丁磊的陰謀。就不得而知了～

這么細(xì)小的改動(dòng)，確實(shí)讓用戶對(duì)網(wǎng)易云音樂(lè)產(chǎn)生神秘感，或許還有很多彩蛋沒(méi)有發(fā)現(xiàn)，因此更能激發(fā)用戶的探索欲望～感興趣的同學(xué)快去試試吧～

「無(wú)渴不爽」

汽水特效 - 夏天的感覺(jué)就是如此清爽

1. 使用場(chǎng)景

網(wǎng)易云音樂(lè)與雪碧達(dá)成的深度合作，要通過(guò)（音樂(lè)+設(shè)計(jì)）手段探索跨界營(yíng)銷方式。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：傳播品牌主張， 通過(guò)彩蛋提升品牌新主張“透心涼、渴釋放”。

設(shè)計(jì)方案：在播放「無(wú)渴不爽」時(shí)，在特定位置會(huì)激活雪碧動(dòng)效，你能看到右上方一個(gè)雪碧瓶開(kāi)啟，并傾倒而出，上深到一半高度清爽檸檬炸開(kāi)效果，不仔細(xì)看還以為換手機(jī)進(jìn)水了。

通過(guò)對(duì)設(shè)計(jì)的高度還原，模擬真實(shí)世界汽水反饋，例如二氧化碳?xì)怏w等極具細(xì)節(jié)的動(dòng)畫效果，以及開(kāi)瓶時(shí)“呲”的音效聲讓用戶更好投身于音樂(lè)背后的情境中，以及緊扣歌名「無(wú)渴不爽」的“透心涼、渴釋放”理念。用“音樂(lè)彩蛋”來(lái)賦予用戶“視覺(jué)+聽(tīng)覺(jué)+味覺(jué)”三覺(jué)的沉浸式體驗(yàn)，讓品牌主張成為用戶切身感受。

這種營(yíng)銷方式，作為用戶的我都很難拒絕，心里暗暗道：“這樣的營(yíng)銷手段，多給我來(lái)一些，真的不錯(cuò)，喜歡～”。換做是你，也同樣喜歡，對(duì)嘛～

「城南花已開(kāi)」

紀(jì)念云村人 - 滿屏花瓣飄落

1. 使用場(chǎng)景

17 年的一個(gè)遙遠(yuǎn)的往事，網(wǎng)易云團(tuán)隊(duì)為了紀(jì)念「音樂(lè)人-三畝地」給「城南花已開(kāi)」ID 用戶專門寫的音樂(lè)。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：緬懷用音樂(lè)紀(jì)念的骨癌「南城花開(kāi)時(shí)」用戶，放大產(chǎn)品人情世故的高度，從而提升品牌對(duì)于用戶的重視程度。

設(shè)計(jì)方案：在每年 3-4 月時(shí)，收聽(tīng)「南城花開(kāi)時(shí)」這首歌，在播放頁(yè)就能看到滿屏花瓣飄落，點(diǎn)擊最亮的一瓣，會(huì)看到花海中有一個(gè)少年。對(duì)于老用戶來(lái)說(shuō)無(wú)疑勾起了往日回憶，通過(guò)彩蛋動(dòng)畫來(lái)強(qiáng)化音樂(lè)緬懷的力量。同時(shí)吸引圍觀用戶的好奇，引導(dǎo)查看評(píng)論區(qū)，翻找彩蛋根源，進(jìn)而提升評(píng)論區(qū)活躍度以及產(chǎn)品情感關(guān)聯(lián)。

畢竟產(chǎn)品本身是冰冷的，用產(chǎn)品本身的功能來(lái)安撫用戶以達(dá)到共鳴效果那就太棒了。這也正是網(wǎng)易云音樂(lè)依靠評(píng)論區(qū)獲得業(yè)界影響力的重要體現(xiàn)。即使版權(quán)少的可憐但依然穩(wěn)居前 3 寶座的原因之一。

「Light The Light」

燈光彩蛋 - 完美結(jié)合硬件生態(tài)

1. 使用場(chǎng)景

面對(duì)疫情，網(wǎng)易推出「光援行動(dòng)」通過(guò)「Light The Light」歌曲「LTL」功能，給用戶傳遞音樂(lè)的治愈力量。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：結(jié)合硬件生態(tài)，提高閃光燈與音樂(lè)的多重組合玩法，用音樂(lè)與光傳遞希望給到用戶。

設(shè)計(jì)方案：網(wǎng)易團(tuán)隊(duì)通過(guò)歌曲《Light The Light》歌詞”每個(gè)人都是一處微光，每當(dāng)我們閃爍一次燈光，也許某處黑暗就會(huì)被我們照亮”中獲得靈感，配合歌曲中的鼓點(diǎn)來(lái)不斷閃爍節(jié)奏光，營(yíng)造氛圍感的同時(shí)，傳遞出即使是一顆小小的微光，凝聚起來(lái)依然可以照亮一片天地。

同時(shí)表示面對(duì)防疫，人民團(tuán)結(jié)一致，互相幫助的社會(huì)凝聚力。宣揚(yáng)音樂(lè)的力量以及對(duì)未來(lái)美好生活的祝福。

「抱抱安慰」

評(píng)論區(qū) - 兩指捏合 送給陌生人一個(gè)抱抱

1. 使用場(chǎng)景

為響應(yīng) “云村評(píng)論治愈計(jì)劃”，設(shè)計(jì)“抱抱彩蛋”，傳遞溫暖的社區(qū)氛圍。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：通過(guò)彩蛋玩法，提升社區(qū)情感鼓勵(lì)，凈化社區(qū)良好氛圍。

設(shè)計(jì)方案：再任意歌曲評(píng)論區(qū)，對(duì)著評(píng)論雙指向中間捏和的方式，去“抱”一個(gè)用戶的評(píng)論給予情感撫慰。視覺(jué)方面呈現(xiàn)兩個(gè)可愛(ài)的白、紅小人相互擁抱安撫的畫面，評(píng)論者的頭像也會(huì)出現(xiàn)“收到抱抱”的提示，以達(dá)到與陌生人之間互相鼓勵(lì)溫暖的目的。

這種方式挺暖的，通過(guò)音樂(lè)平臺(tái)送出抱抱以及接受抱抱的形式，更加體現(xiàn)出音樂(lè)無(wú)邊界的魅力所在。

「銀河赴約」

孔明燈 - 考生與家長(zhǎng)的祝福

1. 使用場(chǎng)景

每年高考時(shí)，「銀河赴約」都會(huì)收到來(lái)自音樂(lè)人以及網(wǎng)易的各種祝福，祝旗開(kāi)得勝。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：在高考前夕，通過(guò)孔明燈來(lái)收集用戶的祝福語(yǔ)錄提高評(píng)論話題統(tǒng)一性。，為用戶提供高考話題入口。

設(shè)計(jì)方案：在 2020 年疫情期間的高考階段，網(wǎng)易云音樂(lè)制作了助力高考自制「銀河赴約」曲目，用戶在聽(tīng)歌時(shí)，能看到評(píng)論區(qū)占位符變成了孔明燈。要知道，孔明燈是中國(guó)特有的手工藝術(shù)，又叫天燈，俗稱許愿燈、祈天燈。它的作用是祈福，許愿，保佑。用這種視覺(jué)效果，引導(dǎo)暗示用戶評(píng)論區(qū)特殊的意義，真誠(chéng)的祝福，高考加油！帶話題輸入祝福，還能獲得“網(wǎng)易云音樂(lè)高考助力 buff”。形式拉滿，意義非凡有沒(méi)有～

「搜索‘自殺’」

云村治愈所 - 生活有你才更美好

1. 使用場(chǎng)景

音樂(lè)是人心靈深處的對(duì)白，很多抑郁的用戶都有溝通障礙不想與人交流，唯有音樂(lè)可以獨(dú)自傾聽(tīng)。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決抑郁用戶危險(xiǎn)的心理活動(dòng)，通過(guò)治愈所提高用戶對(duì)生活的美好追求。

設(shè)計(jì)方案：在首頁(yè)搜索“自殺”等敏感詞匯，會(huì)立即跳出云村治愈所頁(yè)面，標(biāo)題寫著“生活沒(méi)有那么奇妙，但有你才會(huì)變得更好”。讓抑郁用戶感受到自我的重要性。

（2.1）開(kāi)頭用生活中的美好事物來(lái)告訴用戶真實(shí)世界值得回味。

（2.2）精選了四類治愈歌單來(lái)溫暖用戶的心情。

（2.3）羅列了一線城市心理咨詢熱線，間接體現(xiàn)出在一線城市生活壓力指數(shù)。

（2.4）精彩評(píng)論，云村村民的八方支援，感受到網(wǎng)絡(luò)中溫暖純良一面。以治愈的文字、音樂(lè)推薦、心理咨詢熱線、熱心評(píng)論來(lái)喚醒抑郁用戶，既有文字的力量也有音樂(lè)的力量，多維度努力，一起幫助云村用戶積極生活，健康快樂(lè)。

最后，當(dāng)我看到閱讀總?cè)藬?shù) 863.7 萬(wàn)時(shí)，心情還是無(wú)比復(fù)雜，雖然很多都是聞聲前來(lái)，但大部分還是真實(shí)抑郁用戶搜索而來(lái)，衷心希望音樂(lè)的力量可以幫助他們戰(zhàn)勝困難，也感謝網(wǎng)易云音樂(lè)平臺(tái)用特殊的方式來(lái)治愈用戶。這真是很珍貴的用戶洞察點(diǎn)。

「黑膠故事」

歌單 - 雙指下滑的視覺(jué)享受

1. 使用場(chǎng)景

在聽(tīng)歌時(shí)，播放頁(yè)用視頻展示歌曲背后的故事，聽(tīng)覺(jué)視覺(jué)雙重享受。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：滿足用戶“邊聽(tīng)邊看”需求，通過(guò)視頻拉近用戶與音樂(lè)人的距離。

設(shè)計(jì)方案：在特定曲目中，對(duì)黑膠播放界面雙指下滑，激活“黑膠故事”，黑膠內(nèi)將自動(dòng)播放 30s 的無(wú)聲視頻，再次點(diǎn)擊即可跳轉(zhuǎn)至完整的音樂(lè)視頻播放頁(yè)面。形成快速切換的視音交互鏈路。

這種嘗試，也是進(jìn)一步把音樂(lè)延伸，每首音樂(lè)都有屬于自己的故事，很多都是在聽(tīng)音樂(lè)時(shí)才會(huì)引發(fā)共鳴，再去搜索音樂(lè)背后的故事，鏈路長(zhǎng)、操作不便捷，網(wǎng)易推出的黑膠唱片，音樂(lè)人只需自主上傳，審核通過(guò)后，便可以最低成本，進(jìn)行歌曲宣傳，同時(shí)用戶能極大的節(jié)約時(shí)間，從而更加沉浸在音樂(lè)世界中。

想要體驗(yàn)，直接搜索「黑膠故事」找到歌單就可以啦～

摸魚計(jì)算器

1. 使用場(chǎng)景

計(jì)算上班摸魚聽(tīng)歌的時(shí)間，看看朋友群里誰(shuí)是摸魚之王。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：通過(guò)熱點(diǎn)話題并結(jié)合數(shù)據(jù)分析，來(lái)提高 H5 活動(dòng)玩法，達(dá)到裂變傳播。

設(shè)計(jì)方案：只需要在活動(dòng)頁(yè)中輸入自己的名稱，就能分析出，摸魚總時(shí)長(zhǎng)和具體流量。這個(gè)功能的開(kāi)發(fā)，起因網(wǎng)絡(luò)熱點(diǎn)話題吐槽包含網(wǎng)易云音樂(lè)等產(chǎn)品消耗 10GB 以上流量為基礎(chǔ)，發(fā)掘出可結(jié)合產(chǎn)品自身做的測(cè)試嘗試，「摸魚計(jì)算器」依靠平臺(tái)數(shù)據(jù)流量分析，根據(jù)「上班聽(tīng)歌時(shí)間在工作時(shí)間的占比」估算出全年的「摸魚流量」。來(lái)滿足用戶獵奇心。

雖然此活動(dòng)只是休閑放松的形式，并非真的宣傳摸魚有多好。但為了說(shuō)明一下，還是文字提醒：“摸魚”雖好，可不要貪摸哦，正確聽(tīng)歌有助于提升工作效率！告訴用戶，正確的價(jià)值觀。

8 級(jí)證明書

1. 使用場(chǎng)景

在網(wǎng)易云大約需要聽(tīng)上千首新歌，看很多故事，明白許多道理才是個(gè)好男孩。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：創(chuàng)造「網(wǎng)易云八級(jí)」梗，通過(guò)活動(dòng)提升產(chǎn)品熱度。

設(shè)計(jì)方案：只需要在活動(dòng)中，選擇性別，依靠聽(tīng)歌數(shù)據(jù)分析，總結(jié)網(wǎng)易云等級(jí)段位。當(dāng)時(shí)也有女孩說(shuō)，找男朋友就找網(wǎng)易云八級(jí)，因?yàn)槎煤芏嗪艹练€(wěn)。當(dāng)然女孩子也是同理。

據(jù)了解，這個(gè)活動(dòng)也是因?yàn)橛芯W(wǎng)友曬出等級(jí)截圖，并且上了熱搜，而這一事件瞬間被網(wǎng)易云團(tuán)隊(duì)看到，迅速整活。同時(shí)間上線「8 級(jí)證明書」，8 級(jí)以上的用戶可獲愛(ài)好聽(tīng)歌的“好男孩”“好女孩”認(rèn)證。沒(méi)錯(cuò)，看到配圖的朋友都知道了吧，我是 8 級(jí)哦～

表白翻譯機(jī)

1. 使用場(chǎng)景

七夕節(jié)，表白日，語(yǔ)言組織不行，說(shuō)不了浪漫的情話。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：結(jié)合音樂(lè)，提升表白語(yǔ)言的趣味呈現(xiàn)，為用戶提供浪漫語(yǔ)言幫助。

設(shè)計(jì)方案：在搜索框輸入名字，就會(huì)隨機(jī)推薦表白歌詞，都是心動(dòng)的感覺(jué)，幫助不會(huì)說(shuō)情話的你。當(dāng)然我也可以輸入你的的名字，因?yàn)槟愕拿直旧恚沧阋晕摇Ｓ袥](méi)有被甜到～

除此之外，搜索特定名稱，會(huì)出來(lái)特殊的表白，一語(yǔ)中的。例如搜索蘇炳添，出來(lái)的是“我會(huì)用 9 秒 83 的速度出現(xiàn)在你面前”完全整活了，有木有～不僅如此，頁(yè)面配圖，繪制了大量精美小線稿，在我嘗試了很多名稱后都沒(méi)遇到重復(fù)的圖形，可見(jiàn)這個(gè)小細(xì)節(jié)做了 N 個(gè)圖形出來(lái)，很是用心。是一個(gè)很棒的設(shè)計(jì)細(xì)節(jié)。

個(gè)人感受

早期受到“網(wǎng)抑云”的負(fù)面沖擊，評(píng)論區(qū)中存在太多抑郁情緒發(fā)言，導(dǎo)致很多用戶看到后都同情憐憫隨后一起陷入抑郁。后來(lái)網(wǎng)易云音樂(lè)推出各種「治愈計(jì)劃」包括「云村治愈所」「抱抱功能」「治愈專輯」等等設(shè)計(jì)手段。

最終，越來(lái)越多的用戶用正能量回懟喪文化「網(wǎng)抑云」變成了「網(wǎng)愈云」，把人間美好給到大家。這也是產(chǎn)品從用戶情感訴求出發(fā)，反向驅(qū)動(dòng)設(shè)計(jì)。或許這才是網(wǎng)易云音樂(lè)取勝的重要法寶。

結(jié)語(yǔ)

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺(jué)，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

參考文獻(xiàn)及鏈接：

1. https://www.sohu.com/a/506317507_120099902
2. https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc
3. https://www.zhihu.com/question/404810159/answer/1326228938
4. https://xw.qq.com/cmsid/20210328A0A1JB00

歡迎關(guān)注作者微信公眾號(hào)：草蓉三石