為了在“金三銀四”搶占先機(jī)，向本站導(dǎo)流，最重要的，是為了向廣大藍(lán)領(lǐng)招聘群體營造有趣、可信的平臺(tái)，輸出趕集優(yōu)秀的設(shè)計(jì)價(jià)值和體驗(yàn)，我們3個(gè)設(shè)計(jì)師進(jìn)行了各個(gè)維度的配合。

項(xiàng)目背景

不論從人員流動(dòng)，還是公司調(diào)整，亦或是市場行情來看，歷年的三、四月份都是求職的黃金期，即所謂的“金三銀四”。該段時(shí)間也是求職類網(wǎng)站全年中流量爆發(fā)和搶占市場的黃金期。為了滿足用戶節(jié)后返城求職的需求，趕集網(wǎng)在年前策劃了“2017年春季招聘節(jié)”，這也成為藍(lán)領(lǐng)和廣大求職者新的一年中尋找機(jī)會(huì)的開年大餐。

2017年度趕集招聘節(jié)主打職位多、類目全。因涉及的行業(yè)范圍較廣，最終確定以“主會(huì)場+分會(huì)場”的形式來承載各個(gè)類目的招聘企業(yè)。為了讓不同求職目標(biāo)的用戶精準(zhǔn)的找到自己所需行業(yè)的職位，最終確定了8大類行業(yè)作為分會(huì)場，其中涉及112個(gè)精選類目。

視覺風(fēng)格確定

由于本次活動(dòng)前期準(zhǔn)備（項(xiàng)目定位，涉及商戶的交涉及其他策劃事宜）流程較長，接到成型需求后所剩時(shí)間有限。在和產(chǎn)品同學(xué)多次溝通后，我們明確了產(chǎn)品的主要訴求：熱鬧有年味→招聘類目全／職位多→代言人露出以烘托氛圍的初步構(gòu)思。（2017年趕集網(wǎng)更換了新的代言人——SNH48，希望增加曝光）

趕集網(wǎng)作為一個(gè)本地服務(wù)類的網(wǎng)站，C端用戶人群主要集中在95后新藍(lán)領(lǐng)，他們是接觸新事物成長起來的新人類，喜歡潮流和跟風(fēng)，但又對(duì)復(fù)古逆潮流而動(dòng)的事物充滿好奇。所以在風(fēng)格設(shè)定上，我們可以引入90年代復(fù)古的游戲設(shè)計(jì)元素，再結(jié)合95后人群的特點(diǎn)：活力、個(gè)性又好玩，色彩上先聲奪人，鮮艷奪目。

相信大家在學(xué)生時(shí)代都被吉卜力的電影——《哈爾的移動(dòng)城堡》感動(dòng)過，那充滿了魔法與神奇的城堡不剛好契合了趕集網(wǎng)神奇集市的特性嗎？結(jié)合我們的項(xiàng)目，在多次溝通后我們確定了設(shè)計(jì)方向：為招聘企業(yè)和求職者打造吸引人們駐留探索的“招聘之城”。

《哈爾的移動(dòng)城堡》中的城堡場景

幾乎所有網(wǎng)吧必裝的PC游戲——《紅色警戒》

主體場景繪制

Step1 確定2.5D的場景風(fēng)格

想要打造一座招聘之城并不簡單，由于時(shí)間的緊迫，技術(shù)條件以及設(shè)備的限制，我們選擇用2.5D的風(fēng)格來實(shí)現(xiàn)“招聘之城”的創(chuàng)意。2.5D俗稱偽3D，能讓受技術(shù)限制的視覺設(shè)計(jì)師快速制作出立體風(fēng)格的物體和場景。它起源于建筑和工業(yè)設(shè)計(jì)中的軸測圖圖示手法，在擺脫了純扁平風(fēng)格的單調(diào)乏味之余，更加豐富有趣。

注：軸測圖，在軸向上具有可度量性，是一種令二維化的平面或立面呈現(xiàn)立體的技術(shù)圖；通過最小程度的變形整合為三維化圖示，但依然保持其可度量性、作業(yè)指導(dǎo)性的圖示方式。

Step2 重現(xiàn)工作場景，繪制場景組件

確定完設(shè)計(jì)風(fēng)格之后就是具體場景的繪制了，由于整個(gè)活動(dòng)包含內(nèi)容廣泛，主題多樣，所以我們決定將運(yùn)營畫面組件化。我們在前期主導(dǎo)建立視覺風(fēng)格后，快速延展出一個(gè)可以復(fù)用的基礎(chǔ)組件，便于多名視覺設(shè)計(jì)師和動(dòng)效設(shè)計(jì)師共同協(xié)作，快速搭建復(fù)雜的場景。根據(jù)不同行業(yè)的人物和具體工作場景而繪制了八個(gè)模塊，同時(shí)繪制了一些增加年味的元素例如：鞭炮、鑼鼓、福字等。以下就是具體繪制過程：

Step3 串聯(lián)各單元模塊

繪制完單個(gè)模塊的場景后，我們類比生活中的元素，用各類鏈接物件例如樓梯，臺(tái)階，管道等元素，將各個(gè)場景串聯(lián)，讓各個(gè)場景之間轉(zhuǎn)場平順而自然。

Step4 頁面的多端適配

常規(guī)情況下，鑒于PC端尺寸寬廣，包含內(nèi)容全面，多半情況是先完成PC端，再延展適配移動(dòng)端。而現(xiàn)在移動(dòng)端作為最大的流量入口，成為我們本次設(shè)計(jì)的重點(diǎn)。在移動(dòng)端我們遵循了“豎向全景圖”的概念，進(jìn)行了結(jié)構(gòu)排版；這種對(duì)不同平臺(tái)附以獨(dú)立設(shè)計(jì)的方法雖然較為費(fèi)時(shí)，但得益于我們組件化的設(shè)計(jì)，pc端可以被快速搭建。同時(shí)由于我們采用橫排布局，各個(gè)場景在首屏均得以展示。

招聘之城“動(dòng)”起來

動(dòng)作賦予人物性格，動(dòng)作賦予人物靈魂。

在“招聘之城”搭建中期及后期，動(dòng)效設(shè)計(jì)都全程進(jìn)行了參與。從畫面元素的搭配構(gòu)思，到數(shù)個(gè)場景的串聯(lián)動(dòng)畫，以及每個(gè)獨(dú)立的主會(huì)場內(nèi)的人物動(dòng)作，我們都進(jìn)行了協(xié)調(diào)統(tǒng)一。幾幀的動(dòng)畫，確為整個(gè)場景賦予了新鮮感和活力，調(diào)和了每個(gè)場景之間的關(guān)系。

在這里面，我們首先依照動(dòng)畫的基本原理對(duì)場景組件進(jìn)行分層，分別為頂層（云層，為了豐富層次），中層（場景組件層，也是基礎(chǔ)結(jié)構(gòu)和可點(diǎn)擊的GIF動(dòng)畫與位移動(dòng)畫的結(jié)合層），以及底層（背景，漸變的城市部分）。這三部分中，第一部分通過幾片云進(jìn)行連接，在不構(gòu)成干擾底部操作的基礎(chǔ)上交由我們另一位前端工程師進(jìn)行代碼編輯；而中層和底層分別進(jìn)行了切圖+GIF結(jié)合的輸出。鑒于物件運(yùn)動(dòng)距離較小，便于輸出和編輯的考慮，我們制作了4-8幀不等的GIF動(dòng)畫。

注：視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的有景深的視覺體驗(yàn)。作為近年網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢，越來越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。

在方案推進(jìn)的過程中我們了解到Airbnb的一個(gè)開源組件：lottie可以很方便的用AE進(jìn)行輸出，但礙于開發(fā)與設(shè)計(jì)銜接的調(diào)試，我們對(duì)此方法進(jìn)行了保留，不過我們相信隨著這個(gè)開源插件的普及，越來越多的場景可以被應(yīng)用，也會(huì)有更順暢的動(dòng)效活躍在58和趕集的界面里。

反思與感悟

參與這次設(shè)計(jì)過程道阻且艱，但收獲滿滿。為了在“金三銀四”搶占先機(jī)，向本站導(dǎo)流，最重要的，是為了向廣大藍(lán)領(lǐng)招聘群體營造有趣、可信的平臺(tái)，輸出趕集優(yōu)秀的設(shè)計(jì)價(jià)值和體驗(yàn)，我們3個(gè)設(shè)計(jì)師進(jìn)行了各個(gè)維度的配合。同時(shí)也再次感謝前端同學(xué)的得力配合，還原出效果佳體驗(yàn)好的界面，以及產(chǎn)品同學(xué)為我們營造的寬裕時(shí)間。相信隨著磨合的推進(jìn)以及新技術(shù)的普及，我們會(huì)在招聘設(shè)計(jì)的探索之路上百尺竿頭，更進(jìn)一步。

參與本項(xiàng)目的設(shè)計(jì)師：

視覺設(shè)計(jì)師：小葵 & 晨耀

動(dòng)效設(shè)計(jì)師：Bruce

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD）