雪球嘉年華這個(gè)期末大考，XDC 的設(shè)計(jì)師是如何交上這份耳目一新答卷的？

雪球嘉年華是雪球成立十年以來(lái)最核心的品牌資產(chǎn)，是雪球傳遞為用戶(hù)提供在線(xiàn)財(cái)富管理理念、傳播品牌使命愿景的重要平臺(tái)，也是打造雪球社區(qū)生態(tài)、促進(jìn)業(yè)務(wù)發(fā)展的重要推手。當(dāng)然，雪球嘉年華最為核心的價(jià)值就是它架起了一座橋梁，將雪球和用戶(hù)緊緊的連接了起來(lái)。

活動(dòng)概述 / About The Snowball Festival

2020 年一場(chǎng)疫情讓資本市場(chǎng)充滿(mǎn)了變數(shù)，投資者和雪球用戶(hù)們的情緒也時(shí)刻被這些變數(shù)牽動(dòng)，這也更加堅(jiān)定了我們想要舉辦一場(chǎng)，與用戶(hù)一起尋找可確定投資機(jī)遇的雪球嘉年華活動(dòng)。

面對(duì)疫情等不確定因素頻發(fā)的情況，在籌備 2020 年嘉年華活動(dòng)之初，我們也做出了相應(yīng)的策略。確定了以 「用戶(hù)是主角」為嘉年華活動(dòng)的核心，最大化豐富線(xiàn)上活動(dòng)，打造 「我要上嘉年華」、「雪球獎(jiǎng)評(píng)選」、「雪球嘉年華」三個(gè)活動(dòng)階段。

以用戶(hù)為中心，通過(guò)直播 PK 選秀、大 V 熱度評(píng)選、互動(dòng)贏(yíng)取門(mén)票、直播線(xiàn)下活動(dòng)等形式，串聯(lián)起整個(gè)嘉年華線(xiàn)上之旅。尤其是在「雪球嘉年華」第三個(gè)階段，我們推出 「雪球嘉年華長(zhǎng)街 H5」，增加用戶(hù)與大 V 互動(dòng)，讓用戶(hù)全方位體驗(yàn)、深度沉浸在嘉年華的活動(dòng)氛圍里。

嘉年華品牌形象 / About The Brand

1. 新生與回顧

隨著前幾屆雪球嘉年華的成功推廣，「雪球嘉年華」已經(jīng)在用戶(hù)心中奠定了相當(dāng)?shù)闹扰c形象，但品牌是需要不斷成長(zhǎng)的，為了能讓「雪球嘉年華」品牌形象更加深入用戶(hù)心中，在 2019 年雪球嘉年華，我們提煉出了簡(jiǎn)單且容易被記住的符號(hào)——「XQ」，其中「X」代表探索發(fā)現(xiàn)、交集聚合，「Q」代表交流互動(dòng)、社區(qū)生態(tài)，同時(shí)XQ也是雪球的拼音縮寫(xiě)，能讓用戶(hù)更容易去理解這樣的視覺(jué)符號(hào)。

我們創(chuàng)造了專(zhuān)屬于雪球嘉年華的視覺(jué)符號(hào)后，得到了許多用戶(hù)的認(rèn)可，以及對(duì)嘉年華視覺(jué)全新升級(jí)后品牌好感度的提升，這些反饋也給了我們堅(jiān)持以 XQ 為雪球嘉年華視覺(jué)符號(hào)的信心。

2. 新方向、新目標(biāo)

隨著全新的「XQ」品牌形象升級(jí)后，我們發(fā)現(xiàn)主視覺(jué)設(shè)計(jì)完成度上，還有一定的提升空間，XQ 視覺(jué)符號(hào)變化不夠豐富立體，沒(méi)有更多延展的嘗試，這些正是我們想在 2020 雪球嘉年華設(shè)計(jì)上，力求突破創(chuàng)新的關(guān)鍵目標(biāo)——賦予XQ符號(hào)多元變化、更多延展。讓連續(xù)舉辦八年的雪球嘉年華活動(dòng)煥發(fā)活力，給用戶(hù)耳目一新的感受。

設(shè)計(jì)過(guò)程 / Design Process

1. 目標(biāo)難點(diǎn)分析

今年嘉年華項(xiàng)目的設(shè)計(jì)難點(diǎn)在于，三期活動(dòng)對(duì)應(yīng)三套視覺(jué)，既要保證一致性、傳遞系列感，又要根據(jù)活動(dòng)的不同特點(diǎn)來(lái)打造差異化的視覺(jué)。

我們梳理出三個(gè)關(guān)鍵因素：畫(huà)面結(jié)構(gòu)、主題元素、視覺(jué)風(fēng)格，破解難點(diǎn)的思路是通過(guò)控制畫(huà)面結(jié)構(gòu)來(lái)保持統(tǒng)一性，同時(shí)通過(guò)主題元素和視覺(jué)風(fēng)格的的區(qū)分來(lái)實(shí)現(xiàn)差異化，并且準(zhǔn)確傳達(dá)出三個(gè)活動(dòng)階段層層遞進(jìn)的關(guān)系。

2. 畫(huà)面結(jié)構(gòu)鎖定

項(xiàng)目初期，我們認(rèn)為 XQ 符號(hào)包含很多可能性，但時(shí)間不允許設(shè)計(jì)師做過(guò)多嘗試，為了快速縮小設(shè)計(jì)探索的范圍，我們從幾個(gè)角度來(lái)分析了約束條件：氛圍基調(diào)、核心元素、延展方式、使用情景、項(xiàng)目周期。

首先我們通過(guò)與需求方的橫向溝通，明確了元素豐富、畫(huà)面熱鬧的大基調(diào)；隨后設(shè)計(jì)內(nèi)部集中討論，從結(jié)果角度出發(fā)，分析了如上圖所示的約束條件；接著我們參照這些條件，進(jìn)行了集中的腦暴、試錯(cuò)、排除。

經(jīng)過(guò)約束條件的過(guò)濾，我們發(fā)現(xiàn)有效的方案幾乎是唯一的：用橫、豎、45°斜線(xiàn)組成的網(wǎng)格分割形式來(lái)統(tǒng)一所有畫(huà)面。因?yàn)橹挥羞@樣才能同時(shí)滿(mǎn)足系列感、延展性以及快速推進(jìn)的項(xiàng)目要求。

推進(jìn)到這里，我們已經(jīng)基本鎖定了三套視覺(jué)的畫(huà)面邏輯。

大框架有了，但由于活動(dòng)數(shù)量多，每套視覺(jué)該怎么下手還是非常不明確。接下來(lái)需要進(jìn)一步縮小范圍，確定三期活動(dòng)的視覺(jué)元素和風(fēng)格。

3. 元素風(fēng)格梳理

首先，我們根據(jù)三階段活動(dòng)的不同屬性，分別梳理了關(guān)鍵詞。隨后我們從關(guān)鍵詞出發(fā)，對(duì)三期活動(dòng)的差異化元素進(jìn)行了頭腦風(fēng)暴。接著我們根據(jù)三期活動(dòng)氛圍基調(diào)的差異，采集了三類(lèi)不同的風(fēng)格意向。

「我要上嘉年華」是預(yù)熱活動(dòng)，更需要表現(xiàn)出球友踴躍參與的活動(dòng)氛圍，我們由此出發(fā)，選擇了氛圍更為熱鬧的波普風(fēng)格，并最終確定了手持話(huà)筒的元素創(chuàng)意。

「雪球獎(jiǎng) 」更強(qiáng)調(diào)高級(jí)感、儀式感、身份認(rèn)同感，我們由此出發(fā)，選擇了一種精致簡(jiǎn)約的插畫(huà)風(fēng)格，并最終確定了手持獎(jiǎng)杯的小金人作為核心元素。

「雪球嘉年華」是雪球一年一度的投資行業(yè)分享大會(huì)，設(shè)計(jì)上更多的訴求是傳遞雪球的品牌和嘉年華活動(dòng)的品牌。最終我們將核心元素設(shè)定為把雪球捧在手心，一方面力求展現(xiàn)雪球與用戶(hù)的情感紐帶；另一方面希望表現(xiàn)掌控財(cái)富的意向，傳遞雪球未來(lái)要做在線(xiàn)財(cái)富管理平臺(tái)的品牌主張。

通過(guò)密集的頭腦風(fēng)暴，我們快速理清了三套視覺(jué)的畫(huà)面結(jié)構(gòu)、視覺(jué)風(fēng)格、主題元素，這樣就省去了設(shè)計(jì)嘗試探索的步驟，讓我們能夠直接進(jìn)入圖形和配色相關(guān)的設(shè)計(jì)執(zhí)行。

執(zhí)行階段，根據(jù)前期確定的畫(huà)面結(jié)構(gòu)，我們分別進(jìn)行了三種風(fēng)格和元素的填充，來(lái)分別匹配我要上嘉年華的踴躍參與感、雪球獎(jiǎng)的高端儀式感以及雪球嘉年華的品牌認(rèn)同感。

4. 視覺(jué)設(shè)計(jì)過(guò)程

三期活動(dòng)上線(xiàn)時(shí)間非常緊湊，設(shè)計(jì)上的策略是按上線(xiàn)時(shí)間順序，對(duì)三套視覺(jué)逐個(gè)擊破。

????我要上嘉年華

「我要上嘉年華」預(yù)熱階段，通過(guò)對(duì)撞沖突的配色、波普粗描邊的風(fēng)格，強(qiáng)調(diào)了活動(dòng)節(jié)日氣氛、活躍參與的氛圍，同時(shí)對(duì)符號(hào) Q 里手拿話(huà)筒的插畫(huà)元素進(jìn)行了多版嘗試。

?? 雪球獎(jiǎng)

「雪球獎(jiǎng)/雪球之夜」這個(gè)階段分為線(xiàn)上、線(xiàn)下兩個(gè)部分，首先是線(xiàn)上「雪球獎(jiǎng)」評(píng)選活動(dòng)，通過(guò)符號(hào) Q 里手持獎(jiǎng)杯的小金人插畫(huà)形象將評(píng)選活動(dòng)的高級(jí)感、儀式感、身份認(rèn)同感具象化，同時(shí)輔助鉆石等元素來(lái)增添精致氛圍。

考慮到線(xiàn)下延展以及活動(dòng)調(diào)性，在視覺(jué)呈現(xiàn)上進(jìn)行了多次嘗試，尤其是在配色上通過(guò)對(duì)比探索，選擇了更加別致、更具格調(diào)的紫金配色，突出「雪球之夜」頒獎(jiǎng)典禮的儀式感。

???? 雪球嘉年華

「雪球嘉年華」是三個(gè)系列活動(dòng)中最為重要的收官項(xiàng)目，因此設(shè)計(jì)上我們也安排了更多時(shí)間來(lái)打磨，選擇了 3D 和動(dòng)態(tài)的視覺(jué)形式，來(lái)豐富最終設(shè)計(jì)產(chǎn)出的層次。

為了保證手的最終形態(tài)能夠與符號(hào) Q 恰當(dāng)結(jié)合，我們進(jìn)行了很多嘗試，力求在保持動(dòng)態(tài)優(yōu)美的前提下，能與 Q 形成協(xié)調(diào)的負(fù)形。

3D 設(shè)計(jì)方面，我們從形態(tài)到材質(zhì)都做了很多探索。考慮到 3D 模型與整體畫(huà)面的結(jié)合，我們選擇了能與環(huán)境產(chǎn)生更多色彩關(guān)系的反光材質(zhì)，環(huán)境和小球的貼圖細(xì)節(jié)經(jīng)過(guò)反復(fù)推敲，才最得到終呈現(xiàn)的效果。

對(duì)于 XQ 符號(hào)的圖形和色彩演繹，我們也做了很多嘗試。圖形方面確定了斜切分割的視覺(jué)形式，來(lái)配合整體畫(huà)面的切割結(jié)構(gòu)；色彩方面我們選擇了水藍(lán)色傾向，因?yàn)樗{(lán)色可以更直接地傳遞雪球的品牌色彩，同時(shí)視覺(jué)上與 3D 元素的冷調(diào)反光材質(zhì)可以產(chǎn)生更自然的結(jié)合。

最終我們定義了一套可以靈活應(yīng)用的主視覺(jué)，純平面的 XQ 符號(hào)可以適應(yīng)各種尺度和媒介，平面結(jié)合 3D 的形式給動(dòng)態(tài)演繹帶來(lái)更多可能，適合在各種屏幕媒介上呈現(xiàn)。

至此 2020 雪球嘉年華三大階段的主 KV 設(shè)計(jì)工作已經(jīng)結(jié)束，但你以為這就完了？好戲還在后面吶！

就這？

我們需要一個(gè)將三個(gè)階段集合在一起的頁(yè)面，來(lái)承載更多的功能需求，同時(shí)我們想最大化用戶(hù)的線(xiàn)上體驗(yàn)，那就需要通過(guò)創(chuàng)新玩法、多維入口、交流互動(dòng)讓用戶(hù)更加沉浸在嘉年華活動(dòng)之旅中，所以這條既能展示雪球社區(qū)生態(tài)屬性，又能承載更多功能、滿(mǎn)足業(yè)務(wù)訴求的「嘉年華長(zhǎng)街 H5」應(yīng)運(yùn)而生。

雪球嘉年華長(zhǎng)街 H5 / The Fortune Street H5

1. 目標(biāo)梳理

嘉年華長(zhǎng)街 H5 的主要目標(biāo)功能有三個(gè)，分別是：活動(dòng)聚合、搶票功能、交流互動(dòng)，通過(guò)實(shí)現(xiàn)這三個(gè)功能目標(biāo)，最大化實(shí)現(xiàn)用戶(hù)線(xiàn)上的參與度。

通過(guò)目標(biāo)梳理后，我們根據(jù)以上需要滿(mǎn)足的功能需求，逐步分析內(nèi)容和拆解目標(biāo)后，然后在進(jìn)行畫(huà)面結(jié)構(gòu)、元素風(fēng)格。交互邏輯等探索，從設(shè)計(jì)的角度幫助完善功能，提升體驗(yàn)。

2. 設(shè)計(jì)過(guò)程

內(nèi)容分析

頁(yè)面需要承載三個(gè)階段活動(dòng) H5、26 個(gè)大 v 和 7 個(gè)基金公司等 36 個(gè)入口。為了讓長(zhǎng)街承載這些入口，我們將主要的入口打造成店鋪的視覺(jué)樣式，并能營(yíng)造社區(qū)氛圍。因入口較多，需要考慮屏效和畫(huà)面疏密節(jié)奏感問(wèn)題，所以我們把 36 個(gè)入口分成兩級(jí)，讓入口權(quán)重有了區(qū)分，以便設(shè)計(jì)師從視覺(jué)層面把控整體的節(jié)奏性。

畫(huà)面結(jié)構(gòu)

品牌、產(chǎn)品業(yè)務(wù)方希望通過(guò)這個(gè) H5 頁(yè)面，傳遞出雪球在線(xiàn)財(cái)富管理平臺(tái)理念，展示雪球社區(qū)生態(tài)屬性，所以項(xiàng)目主創(chuàng)三人也從長(zhǎng)街的畫(huà)面結(jié)構(gòu)、入口內(nèi)容到頁(yè)面交互邏輯、動(dòng)效設(shè)計(jì)等進(jìn)行了大量的腦暴討論。

從內(nèi)容上對(duì) 36 個(gè)入口分好級(jí)后，在草圖執(zhí)行階段即可對(duì)一/二級(jí)入口元素的視覺(jué)大小，細(xì)節(jié)豐富度做區(qū)分，確保在入口元素多的情景下，長(zhǎng)街整體的視覺(jué)節(jié)奏和街道的負(fù)形關(guān)系是舒服的。

H5 交互流程

在入口的視覺(jué)設(shè)計(jì)上我們花了許多精力在動(dòng)效呈現(xiàn)上，為的是更吸引用戶(hù)的點(diǎn)擊，同時(shí)增加標(biāo)簽，讓用戶(hù)一目了然。用戶(hù)在點(diǎn)擊進(jìn)入后，會(huì)結(jié)合入口的功能個(gè)性化定制子頁(yè)面，讓整個(gè)長(zhǎng)街之旅更加的統(tǒng)一和立體。比如長(zhǎng)街里我們加上了一些巧思，畫(huà)面中的一些車(chē)輛，店鋪門(mén)等元素是可以跟著手勢(shì)滑動(dòng)交互而移動(dòng)的。

視覺(jué)設(shè)計(jì)

我們通過(guò)前期對(duì)嘉年華長(zhǎng)街視覺(jué)風(fēng)格大量 research 和討論，希望長(zhǎng)街視覺(jué)上是「嘉年華」或「游樂(lè)園」的氛圍呈現(xiàn)，元素形態(tài)設(shè)計(jì)上也會(huì)貼合這兩個(gè)關(guān)鍵詞，結(jié)合一些「動(dòng)效設(shè)計(jì)」使長(zhǎng)街更加生動(dòng)有趣。

主視覺(jué)演變過(guò)程、動(dòng)態(tài)展示：

3. 視覺(jué)展示

靜態(tài)長(zhǎng)圖展示：

活動(dòng)呈現(xiàn) / Activity Effect

視頻鏈接：https://v.qq.com/x/page/a3228qm8zmb.html

結(jié)語(yǔ) / Summary

對(duì)于我們的用戶(hù)來(lái)說(shuō)，2020 雪球嘉年華這場(chǎng)投資界的盛會(huì)已經(jīng)圓滿(mǎn)落幕了，雪球致力于為用戶(hù)提供在線(xiàn)財(cái)富管理平臺(tái)的理念，也逐漸在用戶(hù)的心中生根發(fā)芽。

對(duì)于我們?cè)O(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，雪球嘉年華更像是一場(chǎng)期末大考，參與項(xiàng)目的三位主創(chuàng)設(shè)計(jì)師，在壓力面前承受住了這極富挑戰(zhàn)的考驗(yàn)，交上了一份創(chuàng)意十足、力求突破的答卷。過(guò)程中我們收獲了彌足珍貴的經(jīng)驗(yàn)，不僅是在設(shè)計(jì)層面，還有面對(duì)復(fù)雜項(xiàng)目、眾多需求方時(shí)，所展現(xiàn)出溝通協(xié)作、拆解目標(biāo)和助力業(yè)務(wù)的能力。

希望通過(guò)不斷創(chuàng)新突破和細(xì)致打磨我們的設(shè)計(jì)，在滿(mǎn)足用戶(hù)訴求，透?jìng)鳂I(yè)務(wù)需求的同時(shí)，賦予雪球品牌全新活力，這樣才能體現(xiàn)出設(shè)計(jì)的價(jià)值，助力雪球完成品牌使命。

面對(duì)未來(lái)，我們堅(jiān)信雪球會(huì)與用戶(hù)攜手一起乘風(fēng)破浪，滿(mǎn)倉(cāng)前行。

歡迎關(guān)注作者的微信公眾號(hào)：「雪球設(shè)計(jì)中心XDC?」