拉勾APP产品分析

东莞/学生/6年前/484浏览
拉勾APP产品分析
MCYing

从视觉设计、交互设计浅析拉勾app,发掘其用户体验。


1.产品名称:拉勾  

 

2.产品介绍:是互联网人的招聘、求职神器  

 

3.需求量:月独立台数52万台  

 

4.用户分析:  

男女占比差异不大;  

35岁以下人群占比最大,36-40岁人群也有部分占比,但是占比不大;求职意向最大、波动较大的多是年轻人  

地区分布:多分布在中部和东部省份和地区,其中,广东和北京占比最大  

(以上数据来源:艾瑞数据)  

 

5.页面分析:求职流程图  

 undefined  

 

1.首页

       先来看搜索框,搜索框是一种接近白色的灰色,搜索框可以说是占据了整个页面的顶部,  

       搜索框内的浅灰色提示字和右边的“扫一扫”标志,都是搜索的一种优化,“二维码”是帮助用户快速与职位发布者聊天、快速在网页中进行简历的编辑。



 

.2搜索页面

       点击搜索框,跳转到搜索页面,并且底部的键盘自动上拉。

       在这个页面,给出了更多搜索的优化,分为5个部分:地区选择、按搜索分类、搜索历史、猜你喜欢、热门公司。这样分类能够帮助到用户有目的地进行精准搜索的同时,也能够为“迷茫”的求职者建立起更为准确的职业定位,也给浏览app的用户提供了很好的了解方向和参考内容。

       整体垂直分布,标题用黑色突出,垂直对齐;字块的边框用较浅的灰色,字体用较深的灰色,水平向左对齐,在垂直方向上较为随意,这样分布,有很强的流动性和可变性,但是不乏逻辑性。

 


3.选择城市

       我们先来进行城市的定位,点击跳转到“选择城市”的界面,界面分为左右两部分;


       左边1/4是常用地址的导航栏,用黑色标明“常用”,省份的名称用深灰色垂直对齐;

       旁边是一个绿色的小的导航条,用户可以上下滑动查看省份,但是导航条不会随之移动,只会一直放在顶部。当用户点击某个省份时,深灰色字体变成黑色,此时绿色导航条标示在右侧帮助定位。右边显示该省份的所有城市,也是用字块表示。

       这样,能够用导航条来引导用户进行“滑动”的习惯操作,并且让它强化定位同时不至于混淆我们的视觉。并且地区的选择是量大且细微的工作,这样有利于节省空间,布局清晰,一步步选择也让用户更轻松更易于接受。


       右边分为三个模块:当前定位、最近访问、热门城市。整体上垂直分布,同样也是标题+字块的形式出现。

       “当前定位”的城市,用我们十分熟悉的定位图标+绿色字体显示,较为突出,让用户一目了然。

       “最近访问”也是在优化搜索功能,帮助用户快速寻找。

       “热门城市”则是一项非常个性的推荐,基于互联网在各个地区发展不一,求职者更趋向于选择发展更为前沿的城市,能够提供良好的参考。

 

4.求职页面

       现在我们来选择一个城市,点击跳转到界定于某个城市的职位页面,并且弹窗显示“正在加载”,图标由app的图标构成,并且引入了“水在容器中不断加热冒泡,直至沸腾”的概念模型,虽然加载速度很快,用户不易发现,但是足以体现设计的细微之处,让用户预见“大量的信息”同时“目睹”了加载的过程。


       这个页面,主要分为两大模块引导搜索:“相关职位”“相关公司”;这两个模块可以相互切换,交互模型是一个横向的微型的绿色的滚动条,滚动条左右切换,同时,下方的内容也一并左右切换。定位在某一模块时,字体由深灰色变成黑色,滚动条在字体正下方加强定位。

  

5.相关职位

在“相关职位“的下方,还分为四个更加细微的模块:区域,要求,公司,排序。

1.区域


2.要求

       点击“区域“,字体由深灰色变成绿色,出现下拉框,还有我们十分熟悉的”三角形倒向“。

       布局上,同样运用了左边微型导航,右边具体定位的样式。

       左边的导航分为:商圈和地铁,因为商圈和地铁一般是产业聚集、交通方便的地方,是求职者的一大关注点。

       右边这次采用的也还是垂直导航的形式,因为信息量太大,需要列举的信息太多,为了布局上的清晰、整齐一致,没有采用字块的形式。


       滑动选中某个区,字体由深灰色变成绿色,右边出现更为细微的选择,定位到某个区的某个地段,这里的选项可以多选,选择时字体变成绿色,在方框内√,勾选的设计是面形的设计。勾选的数目在”商圈“旁用绿色的数字标明。如果重新选择其他区,则从头再来。

       我认为:在这里,应该可以进行不同商圈、不同地段的复选,这样方便用户进行比对,而确实会有部分用户在选区上需要同时考虑好几个商圈。因为目前的布局,既能让目的性用户精准定位,也能引导”迷茫的不知如何定位的“的用户一步步去思考并且尝试做出选择,但更可以在此基础上提供给用  户参考对比的方便,而且这个功能不妨碍进行”单选“的用户。

       我认为,即使多选,我们需要进行重新选择时,不应该采用暴力的“重置“,因为用户会专注于职位的浏览,而对于自己的选择却模糊了记忆。应该留下一定的浏览痕迹,用所以我们可以选择打灰色√,用这语义,能让用户知道做过的选择,这样既方便用户做出新的选择,也不妨碍用户再次选择。


3.公司

       点击“公司“,交互方式一样,在布局上, 分成3个模块:公司规模、融资阶段、行业领域;内容较少,都是采用了字块的布局和选中方式。 其中有非常重要的一项,”屏蔽已投递的公司“,这个就是我之前所说的留下痕迹,方便用户重新选择。而且,它的交互方式也非常特别,面性的对勾,并且,文字上出现浅绿色的光晕。但是它应该放在最上面,让用户首先注意到。

 

4.其他

 

       在这下面还有一些选项,是一些近来求职者较为关注的点而且十分个性化,交互的方式是横向的滑动选择+下拉框,我认为可以减少横向滑动的方式,因为横向的方式因为位置受限,不能让用户一目了然地知道大概有哪些内容。同时可以增加复选的功能,这样既可以方便用户选择,也不妨碍单选。布局方式同样是字块,交互方式同样是字块“变色“。

       下方的职位用卡片的形式展示,垂直对齐排列。整个的底面是浅灰色的,卡片的底面是白色的。卡片中的信息包括分为上下两部分:职位相关和公司相关;

       职位相关包括:职位名称、地区、经验条件、学历条件、薪金、hr到来时间;

       公司相关包括:企业的LOGO、公司名称、融资情况、公司规模、所在领域。这几个内容都用了大小、颜色饱和度、粗细、不一的字体,还用了竖线、字块的分隔方式,错落有致又和谐统一。

       我们可以看见,排序方式包括:智能排序、时间排序、HR回复速度、HR简历处理速度,我认为这是一个非常好的以求职者为本的设计,对于HR来说,更活跃的HR获得了更多曝光的机会,更容易得到求职者的青睐;而对于求职者来说,更加希望能够即时地跟HR进行交流,也希望自己投递的简历可以得到及时的反馈。所以总的来说,这是为求职者而设计的。


6.职位详情

       我们根据目前所选,点击查看一个具体的职位。

       点击跳转到“职位详情“,在顶栏,除了告诉用户位置信息之余,还有3个图标:收藏、分享、举报。这3个图标,我认为,表达意思不够到位。     

       先来说,💗,可能会让很多用户误认为这个是”喜欢“,但它实际上是”收藏“,破坏了用户一直以来的习惯。同时,它在💗上加了绿色的一笔,这一笔,对于一个线性设计的图标来看,并没有增加什么,反而让它”和吸睛“。如果是一个面性的图标,则可能是是为了制造亮面,增加立体感。

       再来看看”举报”,这个功能也是表达不够到位,可能会有人认为这个是“注意事项”,也可能是这个功能较少使用,用户并没有形成一致的使用习惯。


       看一下布局,分为:概述、职位亮点、职位详情、公司信息;滑动屏幕,最上方的“职位详情”变成职位名称,并且出现一个下拉框,并且用定位图标+颜色变成绿色表示当前所在的位置,分别有:概述、职位详情、公司、看了又看;让用户在上下滑动浏览的时候,知道自己所在的位置和前后的位置,是非常好的线索模型。

       但是,这里的名称却和各个模块的名称不一致,例如,职位描述->职位详情,公司信息->公司,我觉得这里应该保持一致的名称,更加简洁明了。

        来看看“”职位的概述“”,用了一种卡片的展示方式,分为上下两部分,上方是职位相关的概述,下方是HR相关的个人情况。同样是采用了不同大小、粗细、颜色饱和度不一的字体来呈现内容。点击可以跳转到公司的详细信息页面或者是HR   的详细情况页面。


       然后是“”职位亮点“,用了文字描述的方式,这个模块,对于企业来说是个化的职位体现,对于求职者来说,方便他们找到与个性化需求契合的职位。

       然后是“”职位描述”,首先用字块给出职位的标签,接下来的部分是职责描述,用列举的方式,清晰明了;接着是“”“任职要求”,也是用了列举的方式;但是我认为这些小标题应该和文本区分开来。文本里面的关键字用了绿色来显示突出。

       然后是“公司信息”,同样分为上下两部分,上部是公司的概要信息,下部是公司的地址信息。同样用了大小、粗细、颜色饱和度不一的字体来表现;点击可以分别跳转到公司的详细页面,或者跳转到公司详细的地图页面。

       然后是“”看了又看“,这是一个推荐系统,推荐系统会从痕迹中作选择,给出与我们目标兴趣爱好相似的人留下的痕迹,遵循这些痕迹,我们可以收获到不一样的东西,或者更快捷的接近我们的目标。这里同样用了卡片展示的方式列举了一些职位。

       下底是当求职者有意向时操作的两个键,“立即沟通”、“”投递简历“,“立即沟通”用了线性的设计,“投递简历”用了面性的设计,两个图标相辅相成互为补充,整体更舒适。并且一直放在底端,引导用户操作,方便用户操作。


 

7.查看公司

1.基本信息

       了解了职位之后,我们肯定会进一步了解公司的情况。我们点击进去公司详情页面,像朋友圈一样拥有背景墙,并且把公司的图标LOGO嵌入到背景墙中,可以在这里放置一些公司的环境图片,有助于为求职者建立良好的第一印象,但是多数企业使用了默认的背景图片。

       下方有一个横向的导航栏,分别是:基本信息、在招职位、公司福利、企业空间;


       基本信息分为几个模块:公司简介、主要产品、大事记、管理团队、公司地址、工商信息;

       公司简介用了浅灰色的纯文本,底部有一个缩放的三角键,点击可以展开或者收起文本内容,这个设计非常美妙,可以让用户选择性地阅读这些冗长的文本。

       靠上的是公司的概况,在右边增加了一项“+关注”字块,点击可以出现弹窗,弹窗是黑底白字,和背景形成对比,提示关注成功,字块颜色由绿色变成浅灰色。

       这种是轻量级的弹窗,能够给用户提供及时的反馈,但是又不至于打扰到用户,很可能被用户忽略。但是我认为,这个弹窗跑去了底部,让用户的视线一下子从上部跨越到了下部,非常不舒服。而且,同一个软件系统,我认为,弹窗的位置应该   大致一致,形成统一的认知习惯。看上面的取消收藏。


       接下来是“主要产品“,这个模型是一个向右滑动切换到轮播框,并且会在标题旁边标明,一共有几个产品,这个是第几个。但是缺少可见的提示,提示用户可以左右滑动切换画面,这样会误导用户的操作。点击进去,会有产品的简介,在这个页面中,同时出现了垂直导航条和左右切换提示圆点,这样可以引导用户进行正确的操作。但是,这里却缺少了一个返回键。同时我认为:简介的内容相对较少,我们关注的重点也不是产品,我们可以把它们释放出来,用展开收起的方式进行展示,而不必另外跳转一个网页,减轻繁杂。


       接下来是管理团队,同样,也是用了跳转的方式展示,我认为同样可以采用展开收起的方式。


       接下来是公司地址,点击进入到地图页面,上面1/2是地图,下面展示的和我们平常看到的地图APP相似,最下面“导航”运用了面性的设计,占据整个底面。

        在这个页面,我认为给出的信息不具有参考价值,例如给出了公司到手机定位的距离、打车的时间、大巴的时间、步行的时间,而这些不是用户真正需求的,手机的定位很多时候不是用户真正需要的距离,可以把这个归并到“导航中“;点击“导航“,跳转到”高德地图“。

 

 

2.在招职位

       我们试着切换到“在招职位”,

       首先用字块来进行职位分类,清晰而且易于点击,但是这个字块区别于之前出现的字块,之前的是近似线性的,但是这个是面性的。  

       点击,下方的职位进行相应的切换,职位的显示只给出最主要信息,这样简明扼要。除了种类的选择,下面还给出一个较小的导航栏:城市、经验、薪资;点击,页面上滑,出现下拉的动作栏。

8.相关公司

       切换到“相关公司”,点击“筛选”,出现下拉的动作框,分为3个模块:公司模块、融资阶段、行业领域;同样采用了字块的表现。排序方式包括:智能排序、好评优先、最近发布职位;

       这个同样也是一种以求职者为本的设计,好评度高的更容易受到求职者的青睐,而求职者也会更多地去关注最新的职位发布信息。

       下面的列表中“正在热招”,把公司的需求直接“告诉”求职者,引导用户进行点击了解详情。并且这次,用了红色的火焰图标、职位也用了红色来凸显,增加了动感。


9.按分类搜索页面

       我们返回,用分类搜索,点击跳转,用列表的方式给出了很多分类;点击一项,底部上拉出现一个动作栏,左边是类型,右边对应的具体职位,清晰明了、易于选择。点击其中一项,跳转到职位列表,同时,在搜索框内用灰色的提示字标明“UI”,提示这里可以直接进行职位的搜索。

 

10.消息页面

      接下来,看一下“消息”页面,这个是求职者查看反馈的重要页面。顶部绿色和白色镶嵌,分成3个模块:我的投递、谁看过我、专属热招;分别都用了面性图标来展示,图标的设计也很别致,没有生硬地填充纯色,而是用阴影做出了错落感。下面有一栏提示字,提示用户开启消息提醒,用了两个圆角矩形,字体底面都是用了灰色,并且文案中用了“避免错过“字眼,来提醒用户开启推送通知的重要性。

       但是我认为,文案应该更活泼温柔,不再错过新消息和投递反馈。这里没有像其他软件一样,使用弹窗方式,避免分散用户对信息的注意力、避免打扰用户。


       在这里就要提到一开始的消息推送请求了,当第一次打开app时,首先给出了推送请求的弹窗。但是我认为这个弹窗有3个问题:

       1.文案做得不出彩,“第一时间获取你的推荐职位“。字体的大小和粗细都让它容易被埋没,反而是下方的动图,十分惹眼,让用户不明所以,为什么我一上来就要我做这个操作;并且,用户还没有开始真正体验app,所以,目前的背景、内容和推送请求是脱节的,用户很难把它们进行关联,理解便无从谈起。

       2.”请开启消息通知“”打开消息通知“,两个重复的信息,用了最显眼的效果,放在了最显眼的位置,犹如一个聒噪的人。     

       3.没有”拒绝“的选择?!看上去是一项强制性的功能,但是没有重视用户的选择权。同时我认为,如果,第一次用户用户拒绝了这个请求,我们可以在用户使用到“消息页面”时,对新消息和投递反馈有一定渴望时,再次发起请求,因为这样更                

容易被用户理解。而不成功时,我们可以继续采取第三部,把它安安静静地放在页面的中上位置(现在的位置)。

 

       接下来是沟通列表。

       其中“投了又投”“离线助手”“通知”,是3个很别致的通知栏,右边是图标,图标是面性设计,添加了渐变和透明度,并且都是圆角的设计,极具亲切感。栏中显示了几样重要的消息:栏目的名字、简单介绍了栏目的作用、推送的时间。点击进去,跳转到相关页面,查看相关的消息。

        “投了又投”是根据投递来推荐职位,而“离线助手”则是强调了求职者不在线时,如何满足求职者的迫切的需求,也是对职位搜素功能的一种补充,细致入微的区分,正是一种以求职者为主的设计。

        点击“全部沟通“,底部上拉出现一个白色的操作栏,背景蒙上黑色的阴影分为:全部沟通、我发起的沟通、对反发起的沟通,也非常的美妙。求职者可以根据心里的优先   

级,快速查看到最重要的消息。

       但是,我认为,这种操作框,一般是用在”多种功能选择“上,例如,分享功能。这里用一个在标题处下拉的选择器更合适,因为它只是在”查看消息“的功能上去选择不同的展示方式。

 

11.与hr进行沟通

       我们试着点击进去与一位HR进行沟通。整个聊天的窗口跟微信的设计相似,灰白一码色,头像用了圆形。

       主要说两个地方,在窗口的顶部,还放置了hr的主要情况:最近活跃时间、聊天达人、在招职位。这样可以方便用户对于反馈,有一个心理预期,左右着用户的回复内容。

       在底栏,有两个特别的“快捷回复“”切换职位“,这些设计都是为了用户有一个高效率的沟通。

 

 

 


 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 


 


               

 

 

 

 

 

 

 






 


 



 

 

 

 

 

 

 

 

 



 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 


 


2
Report
|
6
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Be the first to comment
Log in