起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識用設計講好故事 – JOOX 2020聽歌年榜總結
編輯導語：JOOX是騰訊面向東南亞市場戰略性的音樂App，作為一個國家化品牌，它面臨著一些困難，但同時它通過創意的方式將自己的產品價值觀傳遞給用戶。我們在設計產品中，做好一個設計項目，就好比講一個故事，但這只是一種表達策略，最終是讓用戶理解我們所要表達的產品內容。
JOOX是騰訊面向東南亞市場戰略性的音樂 App，2014 年上線，用戶群體主要集中在中國香港、印度尼西亞、馬來西亞、緬甸、泰國、南非等市場。
2020 年，一場突如其來的新型冠狀病毒席卷全球，對全球的政治經濟產生了巨大的影響。這一年，對于我們每個人，都是不平凡的一年。被迫減少出門活動與聚會的頻率，只能宅家的這段灰暗時光，JOOX 為用戶帶去了很多溫暖、快樂和感動。
一、挑戰
作為一個國際化產品，JOOX 覆蓋了六個國家和地區，它們的經濟、政治、語言、宗教、文化，不盡相同，面臨著比較大的挑戰。所以最好的策略是在復雜的場景中去提煉共性，并通過創意的方式，轉化成簡單易懂的語言，然后把產品價值觀傳遞給用戶。
二、設計流程
我們把整個流程分為三個階段：
三、前期探索
1. 主題定位
△前期方案探索過程
首先要明確自身的產品定位，我們是誰？我們服務對象是誰？我們提供什么樣的服務。作為一個泛娛樂平臺，我們的使命是致力于用創新的方式給用戶帶去快樂。從產品角色來講，JOOX 就好像一個朋友一樣，陪在用戶身邊。
考慮到我們產品在疫情期間的特殊作用，我們希望把 JOOX 塑造成一個陪伴者的角色，用一些輕松、有趣的方式，拉起用戶的回憶，再次建立產品與用戶的關系。
明確主題：JOOX be with you，在后續的設計執行時，始終圍繞著當前的主題展開。
2. 風格調性
基于 JOOX be with you 的定位，圍繞“陪伴”來發散思考，整個的風格調性，應該是溫暖、平和、友好、有趣的，通過這些定義的詞，指導最終方案落地。
3. 設計目標
設計目標最終都要落腳到商業，我們希望能夠通過對需求的挖掘，找到與用戶共鳴的觸點，達到以下目標：
- 提升活躍，通過一年的音樂回顧，增加老用戶的啟動率，加強二次分享曝光傳播；
- 品牌宣傳，作為年末的重要運營活動，是一個很好的宣傳的契機，向用戶傳遞我們的企業價值觀和產品理念，拉近與用戶距離；
- 驅動增長，這種大型活動，同時也是做增長設計非常好的機會，建立用戶體驗地圖，做好每個環節的分析，并予之相應的解決辦法，提升核心數據指標。
四、創意執行
1. 情緒板
通過前面整理的關鍵詞，尋找搭建視覺語言的風格參考。在疫情最嚴重的時候，所有人都閉門不出，即使疫情有所改善，在很長一段時間大家選擇呆在家里，為了盡可能的還原場景，我們有針對性地去尋找相契合的情緒板。
為了更好烘托出氛圍，我們特地選擇了當下非常流行的3D風格視覺，通過構造一個相對真實的空間，增強用戶代入感。
2. 故事安排
做好一個設計項目，也是在講一個故事。故事主線要清晰，故事的情節發展、人物設置都要以主線為基礎，這樣理解起來就更容易：
由于疫情的影響（時間），我們的用戶（人物），只能呆在家里（地點），百無聊賴之際（起因），掏出了手機并打開了 JOOX 聽音樂、看直播（結果），然后很愉快地度過了一天（結果）。根據我們的故事去構思設計，通過故事去表達用戶與 JOOX 的關系。
故事主線清晰后，在關鍵節點去調動用戶的情緒也很重要。
△ 著名的“峰終定律”
如果在一段體驗的高峰和結尾是愉悅的，那么整個環節體驗的感受就是愉悅的。所以在故事開端一定要用一些特殊手法去吸引用戶的注意力，不管是交互方式，還是創新的效果玩法，讓用戶先留下來，再通過故事線索讓用戶一步一步往下走，最后完成整個體驗流程。
3. 方案草圖
畫草圖是一個非?？焖衮炞C ideas 的方法，在前期創意階段配合內容的展示上，作出一個基本的判斷，特別是對于多語言適配的時候，如果我們在前期能把這些問題考慮進去，那在后面改稿的時候，將會更加游刃有余。
對于總結類的 H5 項目，內容的展示與數據的呈現，永遠都是排在第一位。我們所有的設計方法與策略都是圍繞內容展示來打造，為了更好地突出我們的數據內容，在一開始去構思整個故事時，就需要進行草圖模擬，為內容留下足夠的空間。
△ 方案草圖模擬
4. 場景搭建
在故事安排的時候，通過場景化來構建用戶在家里聽音樂的真實狀態。擬人化手法，我們用品牌 IP 形象 JOJO 來代表產品，像一個朋友一樣陪伴著用戶，通過與用戶的互動，達到一起玩的氛圍。
△ 品牌IP形象JOJO與用戶互動的主場景
在確定主場景之后，根據我們之前畫的草圖，做一個對“故事”的還原，同時為了突出品牌的特征與屬性，在場景中加入 JOOX 獨有的音樂元素，增加品牌認知。
場景構建的同時，也需要對最終動畫效果有一個簡單的思考，不能等到所有頁面設計都確定之后再來思考怎么做動畫，更早的納入計劃，才能在自我博弈中不斷地反思，不斷地完善思路，最終達到一個理想的效果。
5. 色彩
適合的配色能夠直觀地傳達主題風格，為了營造溫馨的家庭氛圍，采用了暖色的背景作為我們的主色基調，用我們的品牌綠進行點綴和對比，強調品牌性格，突出關鍵信息展示。再輔之以小面積黃色對比，來對整個畫面的調合，以此來達到主體突出、性格鮮明、調性明確。
6. 字體
產品覆蓋了六個國家與地區，使用多種語言，可能在某一個國家就需要適配三種主流語言，多言語也是過程當中一個非常大的挑戰。
如何克服在多語言場景中去做設計？
- 提前了解內容，并找到相應的團隊提前獲取翻譯素材，再結合場景進行編排；
- 多語言的適配不太適合復雜的場景設計，所以“簡單”是我們的基本準則；
- 變量文本是多語言展示的定時炸彈，在排版上要多預留空間。所以多言語的適配做得好與差，將直接決定“木桶效應”的短板在哪里。
每種字體的排列規則略有差異，例如下圖，相同的文案，不同字符的長度以及不同的行高，如果遇到變量的文本，情況就會愈加復雜。
7. 頁面設計
根據項目前期，情緒版、故事安排、色彩、字體等分析，最終呈現我們靜態效果。整個設計簡約為主，整體的氛圍以平和、溫暖為主。內容優先，在保證內容展示的情況下，去傳遞設計理念。
△ 在這里每個頁面都有品牌IP形像JOJO，它是我們的品牌線索
8. 交互/動畫
JOOX是一個比較年輕化的產品，除了我們在場景構建、故事編排等方面需要多花精力之外，有趣的動畫效果必不可少，可以串聯起我們的每個小場景，使整個故事脈絡一氣呵成。
我們的品牌 IP 形象 JOJO，在每個頁面都做了關聯，用它支撐起主線線索，起到承上啟下的作用，能更好地吸引用戶，引導他們閱讀下去。
整個動畫采用一鏡到底的方式，JOJO 隨著頁面的滑動，而跳動到下一頁相應的位置，它的優點是用戶可以沉浸式體驗，順著線索往下走，減少中間環節的流失率。
△ 品牌IP形像JOJO的運動軌跡
在動畫制作的過程中，節奏也很重要，節奏的變化將會直接帶動用戶情緒的變化。根據主題需要運用節奏，輔助提升整個視覺觀感品質，這樣的動畫才是有意義的。
△ 動畫速率的變化曲線
在保留了主頁的基礎上，取消了“下一步”的按鈕，loading加載完之后，先進入P0主頁停留一定的時間，再自動跳轉到P1數據頁，從后期的數據反饋來看，在這一步的數據，提升非常大。
9. 音樂
音樂無國界，不同調性的音樂就像不同調性的香水給人不同的感受，進而影響用戶的情緒。一首契合主題的背景音樂不僅能錦上添花，更是構建情感連接的核心。
我們把音樂的節奏和情緒表達為三類，節奏：快→中→慢；情緒：歡樂→明快→平緩。
這樣更加直觀，且進一步把范圍縮小，通過排列組合很快能找到目標音樂。由于疫情的原因，整體的氛圍還是以平和的、溫暖的為主。所以我們最終敲定的方案是“慢→平緩”。
△ 音樂節奏和情緒之間的對應關系
10. 物料輸出
相關物料，閃屏、引流 banner，以及分享到 ins、facebook 等渠道的模板。
五、總結
1. 數據回收
吸取了過往的經驗，在一些數據流失比較大的環節，設計上做了優化調整，最終的數據表現還是比較的不錯，一些核心指標有非常顯著的提升。
作為一個國際化產品，推動設計落地時，所面對的困難與挑戰要比單一市場要大很多，但解決問題的方法是相通的，不要畏懼，從最基礎的底層問題去著手分析。
不同地區的用戶使用習慣有所差異，我們目標是尋找共性，用大家都能看得懂、聽懂的方式，刺激用戶來達到共鳴，比如：背景音樂就是一個很好的情感連接器。
做好一個設計項目，就好比講一個故事，但這只是一種表達策略，目的是讓我們用戶能夠更好的理解我們傳遞的內容。所以我們在講故事的時候不能本末倒置，至少對于這種盤點類的H5，一定是內容優先。
作者：Alic，來自騰訊 IXD 設計團隊
推薦關注公眾號 “騰訊設計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設計方法論
本文由 @騰訊設計 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
