編輯導(dǎo)語(yǔ)：JOOX是騰訊面向東南亞市場(chǎng)戰(zhàn)略性的音樂App，作為一個(gè)國(guó)家化品牌，它面臨著一些困難，但同時(shí)它通過創(chuàng)意的方式將自己的產(chǎn)品價(jià)值觀傳遞給用戶。我們?cè)谠O(shè)計(jì)產(chǎn)品中，做好一個(gè)設(shè)計(jì)項(xiàng)目，就好比講一個(gè)故事，但這只是一種表達(dá)策略，最終是讓用戶理解我們所要表達(dá)的產(chǎn)品內(nèi)容。

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

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

一、挑戰(zhàn)

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

二、設(shè)計(jì)流程

我們把整個(gè)流程分為三個(gè)階段：

三、前期探索

1. 主題定位

△前期方案探索過程

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

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

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

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

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

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

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

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

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

1. 情緒板

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

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

2. 故事安排

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

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

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

△ 著名的“峰終定律”

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

3. 方案草圖

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

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

△ 方案草圖模擬

4. 場(chǎng)景搭建

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

△ 品牌IP形象JOJO與用戶互動(dòng)的主場(chǎng)景

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

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

5. 色彩

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

6. 字體

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

如何克服在多語(yǔ)言場(chǎng)景中去做設(shè)計(jì)？

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

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

7. 頁(yè)面設(shè)計(jì)

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

△ 在這里每個(gè)頁(yè)面都有品牌IP形像JOJO，它是我們的品牌線索

8. 交互/動(dòng)畫

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

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

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

△ 品牌IP形像JOJO的運(yùn)動(dòng)軌跡

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

△ 動(dòng)畫速率的變化曲線

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

9. 音樂

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

我們把音樂的節(jié)奏和情緒表達(dá)為三類，節(jié)奏：快→中→慢；情緒：歡樂→明快→平緩。

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

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

10. 物料輸出

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

五、總結(jié)

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

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

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

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

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

作者：Alic，來自騰訊 IXD 設(shè)計(jì)團(tuán)隊(duì)

推薦關(guān)注公眾號(hào) “騰訊設(shè)計(jì)”（ 微信ID：TencentDesign ），第一時(shí)間獲取騰訊官方的設(shè)計(jì)方法論

本文由 @騰訊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議