2017赶集招聘节项目总结:建一座招聘之城

为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。


为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。

2017赶集招聘节项目总结:建一座招聘之城

项目背景

不论从人员流动,还是公司调整,亦或是市场行情来看,历年的三、四月份都是求职的黄金期,即所谓的“金三银四”。该段时间也是求职类网站全年中流量爆发和抢占市场的黄金期。为了满足用户节后返城求职的需求,赶集网在年前策划了“2017年春季招聘节”,这也成为蓝领和广大求职者新的一年中寻找机会的开年大餐。

2017年度赶集招聘节主打职位多、类目全。因涉及的行业范围较广,最终确定以“主会场+分会场”的形式来承载各个类目的招聘企业。为了让不同求职目标的用户精准的找到自己所需行业的职位,最终确定了8大类行业作为分会场,其中涉及112个精选类目。

视觉风格确定

由于本次活动前期准备(项目定位,涉及商户的交涉及其他策划事宜)流程较长,接到成型需求后所剩时间有限。在和产品同学多次沟通后,我们明确了产品的主要诉求:热闹有年味→招聘类目全/职位多→代言人露出以烘托氛围的初步构思。(2017年赶集网更换了新的代言人——SNH48,希望增加曝光)

赶集网作为一个本地服务类的网站,C端用户人群主要集中在95后新蓝领,他们是接触新事物成长起来的新人类,喜欢潮流和跟风,但又对复古逆潮流而动的事物充满好奇。所以在风格设定上,我们可以引入90年代复古的游戏设计元素,再结合95后人群的特点:活力、个性又好玩,色彩上先声夺人,鲜艳夺目。

2017赶集招聘节项目总结:建一座招聘之城

相信大家在学生时代都被吉卜力的电影——《哈尔的移动城堡》感动过,那充满了魔法与神奇的城堡不刚好契合了赶集网神奇集市的特性吗?结合我们的项目,在多次沟通后我们确定了设计方向:为招聘企业和求职者打造吸引人们驻留探索的“招聘之城”。

2017赶集招聘节项目总结:建一座招聘之城

《哈尔的移动城堡》中的城堡场景

2017赶集招聘节项目总结:建一座招聘之城

几乎所有网吧必装的PC游戏——《红色警戒》

主体场景绘制

Step1 确定2.5D的场景风格

想要打造一座招聘之城并不简单,由于时间的紧迫,技术条件以及设备的限制,我们选择用2.5D的风格来实现“招聘之城”的创意。2.5D俗称伪3D,能让受技术限制的视觉设计师快速制作出立体风格的物体和场景。它起源于建筑和工业设计中的轴测图图示手法,在摆脱了纯扁平风格的单调乏味之余,更加丰富有趣。

2017赶集招聘节项目总结:建一座招聘之城

注:轴测图,在轴向上具有可度量性,是一种令二维化的平面或立面呈现立体的技术图;通过最小程度的变形整合为三维化图示,但依然保持其可度量性、作业指导性的图示方式。

Step2 重现工作场景,绘制场景组件

确定完设计风格之后就是具体场景的绘制了,由于整个活动包含内容广泛,主题多样,所以我们决定将运营画面组件化。我们在前期主导建立视觉风格后,快速延展出一个可以复用的基础组件,便于多名视觉设计师和动效设计师共同协作,快速搭建复杂的场景。根据不同行业的人物和具体工作场景而绘制了八个模块,同时绘制了一些增加年味的元素例如:鞭炮、锣鼓、福字等。以下就是具体绘制过程:

2017赶集招聘节项目总结:建一座招聘之城

2017赶集招聘节项目总结:建一座招聘之城

2017赶集招聘节项目总结:建一座招聘之城

Step3 串联各单元模块

绘制完单个模块的场景后,我们类比生活中的元素,用各类链接物件例如楼梯,台阶,管道等元素,将各个场景串联,让各个场景之间转场平顺而自然。

2017赶集招聘节项目总结:建一座招聘之城

Step4 页面的多端适配

常规情况下,鉴于PC端尺寸宽广,包含内容全面,多半情况是先完成PC端,再延展适配移动端。而现在移动端作为最大的流量入口,成为我们本次设计的重点。在移动端我们遵循了“竖向全景图”的概念,进行了结构排版;这种对不同平台附以独立设计的方法虽然较为费时,但得益于我们组件化的设计,pc端可以被快速搭建。同时由于我们采用横排布局,各个场景在首屏均得以展示。

2017赶集招聘节项目总结:建一座招聘之城

招聘之城“动”起来

动作赋予人物性格,动作赋予人物灵魂。

在“招聘之城”搭建中期及后期,动效设计都全程进行了参与。从画面元素的搭配构思,到数个场景的串联动画,以及每个独立的主会场内的人物动作,我们都进行了协调统一。几帧的动画,确为整个场景赋予了新鲜感和活力,调和了每个场景之间的关系。

在这里面,我们首先依照动画的基本原理对场景组件进行分层,分别为顶层(云层,为了丰富层次),中层(场景组件层,也是基础结构和可点击的GIF动画与位移动画的结合层),以及底层(背景,渐变的城市部分)。这三部分中,第一部分通过几片云进行连接,在不构成干扰底部操作的基础上交由我们另一位前端工程师进行代码编辑;而中层和底层分别进行了切图+GIF结合的输出。鉴于物件运动距离较小,便于输出和编辑的考虑,我们制作了4-8帧不等的GIF动画。

2017赶集招聘节项目总结:建一座招聘之城

注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。

在方案推进的过程中我们了解到Airbnb的一个开源组件:lottie可以很方便的用AE进行输出,但碍于开发与设计衔接的调试,我们对此方法进行了保留,不过我们相信随着这个开源插件的普及,越来越多的场景可以被应用,也会有更顺畅的动效活跃在58和赶集的界面里。

2017赶集招聘节项目总结:建一座招聘之城

反思与感悟

参与这次设计过程道阻且艰,但收获满满。为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。同时也再次感谢前端同学的得力配合,还原出效果佳体验好的界面,以及产品同学为我们营造的宽裕时间。相信随着磨合的推进以及新技术的普及,我们会在招聘设计的探索之路上百尺竿头,更进一步。

参与本项目的设计师:

视觉设计师:小葵 & 晨耀

动效设计师:Bruce

 

本文来源于人人都是产品经理合作媒体@58用户体验设计中心(微信公众号@58UXD)

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22111/

(0)
CatherineCatherine
上一篇 2017-04-30 13:58
下一篇 2017-04-30 16:08

相关推荐

  • 案例|设置是查看还是修改?

    本文作者将浅析网站设置和手机设置,且针对“设置是查看还是修改?”的问题提出了她的解决方案,一起来看看~

    2017-05-01
  • 【设计思考】中西医结合,开出交互良方

    中医通过“望、闻、问、切”四诊合参的方法,探求病因、病性、病位,这就好比定性研究中通过访谈法、观察法、焦点小组、可用性测试、卡片分类、情绪版等方法进行的研究工作。 西医更多的是借助医疗仪器和实验室对疾病…

    2017-05-17
  • 在交互设计过程中,你需要持续关注的五个问题

    认真对待交互设计过程中的每一个设计环节、每一个问题,是提高交互稿质量的基石。过程中的问题很多,需要我们持续关注并解决。

    2017-05-02
  • 如何辨别一个Banner的好坏?(附案例)

    平时经常会有人问我“什么样才算是好的Banner ?”、“我这个Banner 有什么问题呢?”之类的问题,还有时候大家会分享一些作品但是我觉得并不是特别好,所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧,因为我们常说设计师要多看,但是多看的前提是要学会辨别一个东西的好坏,要多看好的而非不好的东西哈,要不然怎么提高审美提高眼界呢?

    2017-05-24
  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12
  • 产品原型设计之交互体验的思考过程(二)

    接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

    2017-05-23
  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 一个完整的交互设计流程是怎样的?

    看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素     用…

    2015-11-19
  • 客户体验,体验的是什么?

    近年来,“客户体验”成了一个很常用的词,但就像“创新”和“设计”一样,你实际上很难给它找到一个众所公认的明确定义,尽管许多企业都将改进客户体验视为一项差异化的竞争优势。可是,如果我们连某种东西的定义都说不清楚,又如何谈得上对其加以改进呢?

    2017-05-29
  • 浅谈APP交互设计师是一个什么样的职位

    这篇文章算是一篇对APP交互设计师重新阐述的一篇常识文章。希望对哪些想要从事APP交互设计师的小伙伴们有一定的基础认识。
    今天跟大家从下面4个方面来聊聊APP交互设计师到底是一个什么样的职位。

    2017-05-29