用設(shè)計講好故事！騰訊 JOOX 2020聽歌年榜設(shè)計總結(jié)

JOOX 是騰訊面向東南亞市場戰(zhàn)略性的音樂 App，2014 年上線，用戶群體主要集中在中國香港、印度尼西亞、馬來西亞、緬甸、泰國、南非等市場。

2020 年，一場突如其來的新型冠狀病毒席卷全球，對全球的政治經(jīng)濟(jì)產(chǎn)生了巨大的影響。這一年，對于我們每個人，都是不平凡的一年。被迫減少出門活動與聚會的頻率，只能宅家的這段灰暗時光，JOOX 為用戶帶去了很多溫暖、快樂和感動。

挑戰(zhàn)

作為一個國際化產(chǎn)品，JOOX 覆蓋了六個國家和地區(qū)，它們的經(jīng)濟(jì)、政治、語言、宗教、文化，不盡相同，面臨著比較大的挑戰(zhàn)。所以最好的策略是在復(fù)雜的場景中去提煉共性，并通過創(chuàng)意的方式，轉(zhuǎn)化成簡單易懂的語言，然后把產(chǎn)品價值觀傳遞給用戶。

想了解不同國家的文化差異可以看這2篇：

設(shè)計流程

我們把整個流程分為三個階段：

前期探索

1. 主題定位

前期方案探索過程

首先要明確自身的產(chǎn)品定位，我們是誰？我們服務(wù)對象是誰？我們提供什么樣的服務(wù)。作為一個泛娛樂平臺，我們的使命是致力于用創(chuàng)新的方式給用戶帶去快樂。從產(chǎn)品角色來講，JOOX 就好像一個朋友一樣，陪在用戶身邊。

考慮到我們產(chǎn)品在疫情期間的特殊作用，我們希望把 JOOX 塑造成一個陪伴者的角色，用一些輕松、有趣的方式，拉起用戶的回憶，再次建立產(chǎn)品與用戶的關(guān)系。

明確主題：JOOX be with you，在后續(xù)的設(shè)計執(zhí)行時，始終圍繞著當(dāng)前的主題展開。

2. 風(fēng)格調(diào)性

基于 JOOX be with you 的定位，圍繞“陪伴”來發(fā)散思考，整個的風(fēng)格調(diào)性，應(yīng)該是溫暖、平和、友好、有趣的，通過這些定義的詞，指導(dǎo)最終方案落地。

3. 設(shè)計目標(biāo)

設(shè)計目標(biāo)最終都要落腳到商業(yè)，我們希望能夠通過對需求的挖掘，找到與用戶共鳴的觸點，達(dá)到以下目標(biāo)：

• 提升活躍，通過一年的音樂回顧，增加老用戶的啟動率，加強(qiáng)二次分享曝光傳播；
• 品牌宣傳，作為年末的重要運營活動，是一個很好的宣傳的契機(jī)，向用戶傳遞我們的企業(yè)價值觀和產(chǎn)品理念，拉近與用戶距離；
• 驅(qū)動增長，這種大型活動，同時也是做增長設(shè)計非常好的機(jī)會，建立用戶體驗地圖，做好每個環(huán)節(jié)的分析，并予之相應(yīng)的解決辦法，提升核心數(shù)據(jù)指標(biāo)。

創(chuàng)意執(zhí)行

1. 情緒板

通過前面整理的關(guān)鍵詞，尋找搭建視覺語言的風(fēng)格參考。在疫情最嚴(yán)重的時候，所有人都閉門不出，即使疫情有所改善，在很長一段時間大家選擇呆在家里，為了盡可能的還原場景，我們有針對性地去尋找相契合的情緒板。

為了更好烘托出氛圍，我們特地選擇了當(dāng)下非常流行的3D風(fēng)格視覺，通過構(gòu)造一個相對真實的空間，增強(qiáng)用戶代入感。

2. 故事安排

做好一個設(shè)計項目，也是在講一個故事。故事主線要清晰，故事的情節(jié)發(fā)展、人物設(shè)置都要以主線為基礎(chǔ)，這樣理解起來就更容易：

由于疫情的影響（時間），我們的用戶（人物），只能呆在家里（地點），百無聊賴之際（起因），掏出了手機(jī)并打開了 JOOX 聽音樂、看直播（結(jié)果），然后很愉快地度過了一天（結(jié)果）。根據(jù)我們的故事去構(gòu)思設(shè)計，通過故事去表達(dá)用戶與 JOOX 的關(guān)系。

故事主線清晰后，在關(guān)鍵節(jié)點去調(diào)動用戶的情緒也很重要。

著名的“峰終定律”

如果在一段體驗的高峰和結(jié)尾是愉悅的，那么整個環(huán)節(jié)體驗的感受就是愉悅的。所以在故事開端一定要用一些特殊手法去吸引用戶的注意力，不管是交互方式，還是創(chuàng)新的效果玩法，讓用戶先留下來，再通過故事線索讓用戶一步一步往下走，最后完成整個體驗流程。

關(guān)于峰終定律的詳細(xì)解釋：

3. 方案草圖

畫草圖是一個非常快速驗證 ideas 的方法，在前期創(chuàng)意階段配合內(nèi)容的展示上，作出一個基本的判斷，特別是對于多語言適配的時候，如果我們在前期能把這些問題考慮進(jìn)去，那在后面改稿的時候，將會更加游刃有余。

對于總結(jié)類的 H5 項目，內(nèi)容的展示與數(shù)據(jù)的呈現(xiàn)，永遠(yuǎn)都是排在第一位。我們所有的設(shè)計方法與策略都是圍繞內(nèi)容展示來打造，為了更好地突出我們的數(shù)據(jù)內(nèi)容，在一開始去構(gòu)思整個故事時，就需要進(jìn)行草圖模擬，為內(nèi)容留下足夠的空間。

方案草圖模擬

4. 場景搭建

在故事安排的時候，通過場景化來構(gòu)建用戶在家里聽音樂的真實狀態(tài)。擬人化手法，我們用品牌 IP 形象 JOJO 來代表產(chǎn)品，像一個朋友一樣陪伴著用戶，通過與用戶的互動，達(dá)到一起玩的氛圍。

品牌IP形象JOJO與用戶互動的主場景

在確定主場景之后，根據(jù)我們之前畫的草圖，做一個對“故事”的還原，同時為了突出品牌的特征與屬性，在場景中加入 JOOX 獨有的音樂元素，增加品牌認(rèn)知。

場景構(gòu)建的同時，也需要對最終動畫效果有一個簡單的思考，不能等到所有頁面設(shè)計都確定之后再來思考怎么做動畫，更早的納入計劃，才能在自我博弈中不斷地反思，不斷地完善思路，最終達(dá)到一個理想的效果。

5. 色彩

適合的配色能夠直觀地傳達(dá)主題風(fēng)格，為了營造溫馨的家庭氛圍，采用了暖色的背景作為我們的主色基調(diào)，用我們的品牌綠進(jìn)行點綴和對比，強(qiáng)調(diào)品牌性格，突出關(guān)鍵信息展示。再輔之以小面積黃色對比，來對整個畫面的調(diào)合，以此來達(dá)到主體突出、性格鮮明、調(diào)性明確。

6. 字體

產(chǎn)品覆蓋了六個國家與地區(qū)，使用多種語言，可能在某一個國家就需要適配三種主流語言，多言語也是過程當(dāng)中一個非常大的挑戰(zhàn)。

如何克服在多語言場景中去做設(shè)計？

• 提前了解內(nèi)容，并找到相應(yīng)的團(tuán)隊提前獲取翻譯素材，再結(jié)合場景進(jìn)行編排；
• 多語言的適配不太適合復(fù)雜的場景設(shè)計，所以“簡單”是我們的基本準(zhǔn)則；
• 變量文本是多語言展示的定時炸彈，在排版上要多預(yù)留空間。所以多言語的適配做得好與差，將直接決定“木桶效應(yīng)”的短板在哪里。

每種字體的排列規(guī)則略有差異，例如下圖，相同的文案，不同字符的長度以及不同的行高，如果遇到變量的文本，情況就會愈加復(fù)雜。

7. 頁面設(shè)計

根據(jù)項目前期，情緒版、故事安排、色彩、字體等分析，最終呈現(xiàn)我們靜態(tài)效果。整個設(shè)計簡約為主，整體的氛圍以平和、溫暖為主。內(nèi)容優(yōu)先，在保證內(nèi)容展示的情況下，去傳遞設(shè)計理念。

在這里每個頁面都有品牌IP形像JOJO，它是我們的品牌線索

8. 交互/動畫

JOOX是一個比較年輕化的產(chǎn)品，除了我們在場景構(gòu)建、故事編排等方面需要多花精力之外，有趣的動畫效果必不可少，可以串聯(lián)起我們的每個小場景，使整個故事脈絡(luò)一氣呵成。

我們的品牌 IP 形象 JOJO，在每個頁面都做了關(guān)聯(lián)，用它支撐起主線線索，起到承上啟下的作用，能更好地吸引用戶，引導(dǎo)他們閱讀下去。

整個動畫采用一鏡到底的方式，JOJO 隨著頁面的滑動，而跳動到下一頁相應(yīng)的位置，它的優(yōu)點是用戶可以沉浸式體驗，順著線索往下走，減少中間環(huán)節(jié)的流失率。

品牌IP形像JOJO的運動軌跡

在動畫制作的過程中，節(jié)奏也很重要，節(jié)奏的變化將會直接帶動用戶情緒的變化。根據(jù)主題需要運用節(jié)奏，輔助提升整個視覺觀感品質(zhì)，這樣的動畫才是有意義的。

動畫速率的變化曲線

在保留了主頁的基礎(chǔ)上，取消了“下一步”的按鈕，loading加載完之后，先進(jìn)入P0主頁停留一定的時間，再自動跳轉(zhuǎn)到P1數(shù)據(jù)頁，從后期的數(shù)據(jù)反饋來看，在這一步的數(shù)據(jù)，提升非常大。

9. 音樂

音樂無國界，不同調(diào)性的音樂就像不同調(diào)性的香水給人不同的感受，進(jìn)而影響用戶的情緒。一首契合主題的背景音樂不僅能錦上添花，更是構(gòu)建情感連接的核心。

我們把音樂的節(jié)奏和情緒表達(dá)為三類，節(jié)奏：快→中→慢；情緒：歡樂→明快→平緩。這樣更加直觀，且進(jìn)一步把范圍縮小，通過排列組合很快能找到目標(biāo)音樂。由于疫情的原因，整體的氛圍還是以平和的、溫暖的為主。所以我們最終敲定的方案是“慢→平緩”。

音樂節(jié)奏和情緒之間的對應(yīng)關(guān)系

10. 最終效果呈現(xiàn)

通過對主題調(diào)性的分析，到每一個小的設(shè)計細(xì)節(jié)的把控，制作出了最終的效果。

11. 物料輸出

相關(guān)物料，閃屏、引流 banner，以及分享到 ins、facebook 等渠道的模板。

總結(jié)

1. 數(shù)據(jù)回收

吸取了過往的經(jīng)驗，在一些數(shù)據(jù)流失比較大的環(huán)節(jié)，設(shè)計上做了優(yōu)化調(diào)整，最終的數(shù)據(jù)表現(xiàn)還是比較的不錯，一些核心指標(biāo)有非常顯著的提升。

作為一個國際化產(chǎn)品，推動設(shè)計落地時，所面對的困難與挑戰(zhàn)要比單一市場要大很多，但解決問題的方法是相通的，不要畏懼，從最基礎(chǔ)的底層問題去著手分析。

不同地區(qū)的用戶使用習(xí)慣有所差異，我們目標(biāo)是尋找共性，用大家都能看得懂、聽懂的方式，刺激用戶來達(dá)到共鳴，比如：背景音樂就是一個很好的情感連接器。

做好一個設(shè)計項目，就好比講一個故事，但這只是一種表達(dá)策略，目的是讓我們用戶能夠更好的理解我們傳遞的內(nèi)容。所以我們在講故事的時候不能本末倒置，至少對于這種盤點類的H5，一定是內(nèi)容優(yōu)先。

撰文：Alic

主創(chuàng)團(tuán)隊：騰訊 IXD

優(yōu)設(shè)網(wǎng)推薦您關(guān)注“ 騰訊設(shè)計” 的官方公眾號，第一時間獲取騰訊的設(shè)計方法論：

（本文僅授權(quán)優(yōu)設(shè)網(wǎng)發(fā)布，轉(zhuǎn)載請訪問“騰訊設(shè)計”公眾號，點擊“聯(lián)系我們”，獲得官方授權(quán)）