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

相关推荐

  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 译文|为什么产品思考将成为交互设计中的一大重要的步骤

    生命有限,不能去浪费时间去做一些没人用的东西“明确用户想要什么,不是用户本身的责任” – Steve Jobs“沉浸在一个问题当中,而不是一个具体的解决方案。”- Laura Javier“创造功能很容易,但是创造出合适的功能给需要的人就很具有挑战了。”

    2017-05-29
  • 用户体验与可用性的差别有多大?

    一个好的用户体验究竟是什么?它与可用性易用性的差别有多大?这是从事这份工作后没有停止思考过的一个问题,因为对用户体验不同的解释会导致不同的测量范围。哪些用户体验信息(从我们的定位用户处直接或者间接可测量的数据)是对你们的组织有用的?起到什么样的作用?

    2017-05-13
  • 设计中的 “潜在过程的外在可见后果”分析

    设计中的 “潜在过程的外在可见后果”分析 ——以第三方账号登录为例 “潜在过程的外在可见后果”,是在勒庞的《乌合之众》一书中看到的文字,这也是心理学家通常的研究切入点。外在结果作为表象,其潜在的发生过程才是更…

    2016-02-25
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • UI设计实例:如何将功能性动画完美融入设计以提升用户体验

    来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。

    2017-05-10
  • 交互设计:如何设计更好用更舒适的触控手势?

    引言:我们生活在一个人机互动频繁,由设备驱动的世界中。 随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模…

    2017-08-04
  • 【译】2016年UX发展状态

    原文:The State of UX in 2016 作者:Fabricio Teixeira 译者:冬火鸟 简介:总结2015,了解目前发展趋势,hold住2016UX发展动态 #1 抠像素的时代已经结束了 2015年,你将“UX”这个流行的词汇加入到了你的简历中——…

    2016-01-29
  • 超全面的APP数据图表展现方式深度总结

    之前研究过一段数据图 表的最佳表达方式,随着手机端应用层出不穷地发展,这次将数据图 表的表现延用到手机端。相比 Web 端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?是否有更加合适的表现方式?下面是翻阅或试用了各种有数据的 App 后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表 的特性有更深的理解。

    2017-05-30
  • 【Mockplus教程】重命名

    对页面和分组的重命名可以选中单个页面,然后使用F2进入名字修改状态,改完之后鼠标随便 点击其它地方即可完成修改。 对于选中页面也可以双击页面节点进入修改状态。 完整演示如下:

    交互设计 2015-09-10