為了在“金三銀四”搶占先機，向本站導流，最重要的，是為了向廣大藍領招聘群體營造有趣、可信的平臺，輸出趕集優(yōu)秀的設計價值和體驗，我們3個設計師進行了各個維度的配合。

項目背景

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

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

視覺風格確定

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

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

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

《哈爾的移動城堡》中的城堡場景

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

主體場景繪制

Step1 確定2.5D的場景風格

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

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

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

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

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

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

Step4 頁面的多端適配

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

招聘之城“動”起來

動作賦予人物性格，動作賦予人物靈魂。

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

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

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

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

反思與感悟

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

參與本項目的設計師：

視覺設計師：小葵 & 晨耀

動效設計師：Bruce

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