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

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

活動概述 / About The Snowball Festival

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

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

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

嘉年華品牌形象 / About The Brand

1. 新生與回顧

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

我們創(chuàng)造了專屬于雪球嘉年華的視覺符號后，得到了許多用戶的認可，以及對嘉年華視覺全新升級后品牌好感度的提升，這些反饋也給了我們堅持以 XQ 為雪球嘉年華視覺符號的信心。

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

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

設(shè)計過程 / Design Process

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 視覺設(shè)計過程

三期活動上線時間非常緊湊，設(shè)計上的策略是按上線時間順序，對三套視覺逐個擊破。

????我要上嘉年華

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

?? 雪球獎

「雪球獎/雪球之夜」這個階段分為線上、線下兩個部分，首先是線上「雪球獎」評選活動，通過符號 Q 里手持獎杯的小金人插畫形象將評選活動的高級感、儀式感、身份認同感具象化，同時輔助鉆石等元素來增添精致氛圍。

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

???? 雪球嘉年華

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

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

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

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

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

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

就這？

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

雪球嘉年華長街 H5 / The Fortune Street H5

1. 目標(biāo)梳理

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

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

2. 設(shè)計過程

內(nèi)容分析

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

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

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

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

H5 交互流程

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

視覺設(shè)計

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

主視覺演變過程、動態(tài)展示：

3. 視覺展示

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

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

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

結(jié)語 / Summary

對于我們的用戶來說，2020 雪球嘉年華這場投資界的盛會已經(jīng)圓滿落幕了，雪球致力于為用戶提供在線財富管理平臺的理念，也逐漸在用戶的心中生根發(fā)芽。

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

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

面對未來，我們堅信雪球會與用戶攜手一起乘風(fēng)破浪，滿倉前行。

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