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