在各行各业以产品主导向用户主导的转变趋势下，用户体验领域受到了前所未有的关注。互联网产品一直秉持着以用户为中心的设计研发理念，在需求、设计、开发、测试、验证等各阶段开展着形形色色的用户体验研究（以下简称“用研”）工作。典型的以用户为中心的设计（User-Centered Design）包含五大步骤：共情用户（Em...

在各行各业以产品主导向用户主导的转变趋势下，用户体验领域受到了前所未有的关注。互联网产品一直秉持着以用户为中心的设计研发理念，在需求、设计、开发、测试、验证等各阶段开展着形形色色的用户体验研究（以下简称“ 用研 ”）工作。

典型的以用户为中心的设计（User-Centered Design）包含五大步骤：共情用户（Empathize）、定义需求（Define）、构思创意（Ideate）、原型设计（Prototype）、测试迭代（Test & Iterate）。用户研究工作不仅可以支持前期的用户需求挖掘，而且可以用于测试验证产品的效果，为迭代提供改进方向。

更多用研干货：

用户研究干货！设计师如何建立和利用用户画像？ 回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。

阅读文章 >

一、用研方法如何选择 除了常见的访谈、问卷等方法以外，针对不同目标的用研会采取不同的研究方法。选择在什么时候使用哪些方法成为了用研工作的一道门槛。为了解决这个难题，体验研究专家 Christian Rohrer 提出了一个 3 维度的框架理论，以帮助从业者更好地理解不同方法的特性和适用场合。这 3 个维度分别是：数据来源（态度 VS. 行为）、研究方式（定性 VS. 定量）、如何使用产品。

1. 数据来源（态度 VS. 行为）

态度数据代表人们说什么，主要用来了解人们的想法、观念等等；而行为数据则表示人们做什么。有趣的是，在实际研究中时常可以发现这两者并不统一，即用户陈述的信息并不完全符合他们的真实行为。这可能由于用户出于某种顾虑不想让研究人员知道其真实的想法，亦或是用户自己并没有意识到这种言行上的差异。不过，即使用户自己表达的信息不能保证 100%的准确性和真实性，但这类数据对于研究用户有着重要的价值。例如，问卷调研法就经常被用来测量和分类用户的想法；焦点小组则很适合于挖掘用户想法及对产品的期望；卡片分类法能够探索用户对于信息结构的心智模型。

与此相反，有一些研究方法专注于收集用户的行为数据。例如，A/B 测试通过比较不同版本产品的用户行为数据来判断产品表现；可用性测试用来发现用户在实际操作上的体验问题；眼动追踪技术对于理解用户的注视行为起着极大的作用。

2. 研究方式（定性 VS. 定量）

很多人认为定量研究就是问卷里的封闭式问题，定性研究就是问卷里的开放式问题。其实不然，定性研究与定量研究最本质的区别在于研究方式（是直接还是间接地收集数据）。定性研究是一种直接收集用户数据（如当面询问、直接观察行为）的研究方式；而定量研究是一种间接方式，如通过测量工具（问卷等）来收集用户的想法和行为。

由于定性研究和定量研究的这种本质区别， 定性研究 方式更适合于回答“为什么”、“怎么做”这一类问题，比如人们在购买定期理财产品时会关注哪些因素；而定量研究则更适合用来研究“多少”、“多少程度”等问题，比如哪个产品的支付流程更快。

3. 如何使用产品

不同的研究方法对于用户在参与研究过程中如何使用产品具有不同的要求.基本可以分为以下几类：自然使用、按脚本使用、不使用、混合。

自然使用产品的方式能够使研究的干扰降到最低，从而收集到最接近真实的用户数据。通过这种方式收集的数据具有较高的有效性，但是可控性稍弱。不仅田野调查中经常使用这种方式，一些定量研究也会使用该方式，如浏览行为的数据分析。

按脚本使用产品的方式经常用来研究特定方面的使用情况，比如产品的购买流程发生了变化，可以让用户按脚本完成特定购买流程，从而发现我们所关注的体验问题。根据研究目的，脚本设计的严格程度也不尽相同。如果要做不同产品、不同版本的基准比较（benchmarking），相应的测试脚本会比较严格且会产生可以比较的量化数据。

不使用产品的方式通常用来研究更广泛的问题，比如品牌态度、日常习惯、文化差异等等。

混合方式比较创新，比如在参与式设计中，用户不仅可以自然使用产品，还可以参与产品设计。让用户自己重组设计元素，从而引出用户的需求和想法。

不同的研究方法在上述 3 个维度上并不是固定不变的。例如，田野调查可以专注在用户说什么（访谈），也可以聚焦在用户行为（观察）；卡片分类既可以做成定性研究也可以做成定量研究；眼动追踪可以应用在按脚本使用的产品测试，也可以在自然使用的产品测试中使用。

二、定性方法 探幽索隐、精准定性

定性研究因其低门槛、高灵活的特性而被广泛应用于各个领域。由于定性研究人人都能做，所以常常被认为很简单。事实上，定性研究正由于执行起来“简单”，很容易使研究过程太随意、研究结果偏主观，而导致研究产出无价值。虽然定性研究不需要像定量研究那样严格控制，但也有实践原则可以遵循，来保证研究质量。

1. 访谈法

访谈是使用最广泛的研究方法之一，通过问答的方式来揭示用户对某一事物的潜在动机、态度及情感。要保证一次访谈效果，需要提前考虑清楚许多事项，如访谈大纲、地点、时间、记录方式、分析方法等等。其中，访谈大纲对于访谈质量起到了决定性的作用。最常使用的是半结构化的方式，即事先设计好核心问题，再临场追问有趣的回答。在设计问题大纲时，需要尽量做到：

问题表达清晰 用语符合被访者习惯 提问不带引导性 不要提双重问题 避免问题歧义 在执行访谈时，使用一些技巧可以使得访谈更加顺畅。首先，在最开始一定要花时间建立良好的聊天氛围，可以提一些简单的用于了解被访者的问题（如请聊聊您的兴趣爱好），让被访者放松和进入状态。过程中，适时引导被访者描述经历，因为人们在回忆过往经历时往往能够想起被遗忘的感受和细节。同时，对于被访者说的话也需要判别有无夸张或虚假成分，对于有疑问的地方可以让被访者说出具体的事实依据。更经常的是，会在访问过程中产生有意思的话题，研究员可以根据实际情况进行追问。

2. 焦点小组法

焦点小组作为高效收集丰富信息的一种研究方式，不仅可以用于需求的挖掘，而且可以用来收集对产品、服务的印象，还可以诊断产品成功或失败的因素，甚至可以用来帮助理解和解释定量调查的结果。焦点小组一般由 4-12 个人组成，一个典型的 6 人组往往会持续 2 个小时。不同于访谈，焦点小组法更注重参与者之间的互动引发的思想碰撞，而不只是单纯的一对多访谈。

要保证焦点小组的有效产出，需要主持人在一开始确立好基本规则，让参与者相互尊重，独立发表个人的想法，不对他人进行批评或指责。期间，也要注意意见领袖特质的参与者，可以通过减少与其眼神接触，多鼓励其他组员发言，来均衡每个组员的表达时长。同时，要注意避免从众效应的影响，在让大家表态时可以使用写下来的方式以减少组员之间的干扰。

需要多少组焦点小组才算足够呢？一个简单的判断方法是看有没有新的数据产生。当受访者重复以前小组收集到的信息，并且没有新的数据出现时，则研究达到了饱和。实际工作中，由于需要提前招募用户，往往会根据经验和项目具体情况来定义组数，有时候可能就 4 组，也有时候多达几十组。

3. 田野调查

田野调查并不是一种单独的方法，而是一种从用户实际的工作、生活和娱乐环境中收集信息的研究方式。在一个田野调查中，往往会使用多种研究方法，如观察法、访谈法、情境式访问、日志法等。

情境式访问是指边观察边询问，针对用户当下的行为做出及时的提问，立即获取到准确的答复，可以避免在事后访谈时的回忆偏差带来的影响。不过，研究员需要习惯这种挡在用户工作中的工作状态，不要感到奇怪和害羞，也不要害怕提出愚蠢的问题，把自己当成学徒，尽情享受调查过程。

三、定量方法 有的放矢、精确定量

定量研究很适合于特定用研场景，例如了解用户偏好、满意度、品牌美誉度等。针对偏好类研究，以权益定价为例，一般使用三个工具，分别是确定权益覆盖面的 TURF 方法，评估喜好程度的 KANO 模型及测算权益组合效用的 Conjoint Analysis 方法。在评价产品或服务的满意度时，可以采用结构化问卷，将满意度拆分到各个功能点或环节，再应用统计方法进行分析。

1. KANO 模型

KANO 模型是对用户需求进行分类和优先级排序的分析工具。利用特定的问卷题型收集用户对于不同需求的态度，并分类为五种类型，分别是魅力属性、期望属性、必备属性、无差异属性和反向属性。

UI 进阶必学系列：需求分析工具 KANO 模型 大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。

阅读文章 >

接着，通过不同类型需求的百分比计算出 Better-Worse 系数，用来诠释对不同需求的期望程度。例如，在研究手机银行支付优惠的偏好时，我们针对不同优惠内容（如餐饮券、商超券、还款券、出行券、旅游券等等）进行了 KANO 分析，发现用户对于在手机银行平台上的餐饮优惠券有较大的需求。

2. Conjoint Analysis（联合分析）

在权益活动设计时通常会遇到这样的问题：什么样的权益组合（内容、价格、时间等）是用户喜欢的？联合分析法就可以用来研究什么样的组合最受消费者欢迎。联合分析可以模拟用户决策，预测不同权益组合的效用，从而帮助制定推广组合战略和价格战略。例如，在研究手机银行支付优惠的偏好时，我们先确定权益活动的 3 个维度（领券时间、领券形式、优惠内容）的不同水平（3 x 2 x 4），然后使用正交设计缩减组合数再让用户进行打分。

最后，通过联合分析计算出各个维度对用户选择的影响程度。同时，还可以利用最大效用模型，模拟出不同优惠组合的受欢迎程度，以指导权益活动的设计。

3. 满意度研究

满意度研究关注用户期望与实际体验的匹配程度，可使用层次分析法和结构方程模型来搭建满意度体系。首先，借助已有经验建立影响因素之间的假设关系。再根据用户对不同因素的满意度评分，通过因子分析进行降维处理。确定因子后，进行回归路径分析，获得各因子对于总体满意度的贡献程度。这样，我们不仅可以知道各子功能/环节的满意度，而且还能明确其对总体满意度的影响，从而针对性地进行优化。

写在最后 用研工作的价值最终需要体现在产品体验提升及业务目标达成。所以，研究方法的理论分类是为了帮助从业者能够更好地理解，从而做出更优的选择。本文只是分享了用研方法的概览和结合实际工作的一些经验。如何让 用户研究 发挥更大的价值，还需要大家在实践中勤思考、多探索，以达到精准定性、精确定量。

参考资料

Https://www.nngroup.com/articles/which-ux-research-methods/ Ann Blandford, Dominic Furniss, and Stephann Makri. 2016. Qualitative HCI Research: Going Behind the Scenes. Caroline J. Oates and Panayiota J. Alevizou. 2021. Conducting Focus Groups for Business and Management Students. 欢迎关注作者微信公众号：「 OnepinganDesign」

2023年市场逐渐复苏，招聘行业也迎来了新的机会，通过这段时间对招聘平台的深入体验与了解，给本人带来了很多使用体验，所以此次我对 BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这五家招聘 App 的首页功能进行拆解与分析，让大家更加了解招聘行业与其背后的设计逻辑，希望对大家有所帮助。往期拆解：万字拆解！123...

2023年市场逐渐复苏，招聘行业也迎来了新的机会，通过这段时间对招聘平台的深入体验与了解，给本人带来了很多使用体验，所以此次我对 BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这五家招聘 App 的首页功能进行拆解与分析，让大家更加了解招聘行业与其背后的设计逻辑，希望对大家有所帮助。

往期拆解：

万字拆解！12306产品设计全方位深度解析 有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。

阅读文章 >

一、阅读须知 1. 时长说明

全文约 8000+字，深度阅读本文大约需要 25-30 分钟；

2. 观点阐述

本文所有观点不代表公司，仅个人观点；本文中的所有观点没有任何产品偏向，仅站在一个用户的角度来分析产品；

3. 适合人群

第一类：UI/UX 体验设计师：跳出设计执行层，去思考招聘产品背后的设计策略，提升产品设计分析能力；

第二类：产品/运营经理：通过全面的产品设计拆解、用户逻辑分析，获取产品设计参考；

第三类：招聘行业从业者：通过首页分析与拆解，获取竞品逻辑参考；

二、行业介绍 1. 招聘平台定义

指运用互联网及相关技术，帮助雇主和求职者完成招聘和求职的网络站点。

狭义的招聘网指以网络为媒体的招聘广告发布平台及相关的人力资源服务系统，广义的招聘网站拥有招聘网站且网络招聘营收比重较高的公司，提供如招聘信息发布、简历下载、定制招聘专区、求职简历生成、职位搜索、薪酬查询等。

2. 招聘平台优势

① 对企业

提高招聘效率； 改善招聘效果； 提高生产力； 提高响应速度； 提高各部门合作度； 提供可持续作为后备的人才库资料 ② 对求职者

快捷方便

对于求职者来说，只要在人才网站上登记了个人简历，即可等候企业的招聘信息，如果上网方便还可以主动出击。网络招聘平台不断升级更新，快捷而富有效率，求职者通过招聘网站，可以不出家门就对工作的类别、地区和需求进行全方位智能查询，快速准确地查询到所需要的包括行业、职能、工作地点、工资等信息。工作职位分类清晰、针对性强。一些大的招聘网站，可以随时查询到数万条信息，而且每天更新职位，只要在家关注招聘网站就能第一时间掌握用人单位的需求。

机会多

网络求职的一大特点是招聘信息量大，海量的职位库中，求职者选择适合职位的机会也就越大。

无限制

“传统的招聘会不是每天都有，而且浪费精力和金钱。”一名求职者在采访中这样表示。相比其他招聘形式，网络求职也没有区域和时间的限制，能够给个人创造更多的就业机会。对于异地求职者，这省却了奔波于不同城市的烦恼；对于一般院校学生，因为不易亲临知名企业校园招聘会，但通过网络就可以获取与其它求职者同等竞争的机会。

3. 盈利模式

目前国内的互联网招聘平台可以分为三类：第一类是以智联招聘、前程无忧为代表的综合类招聘平台；第二类是以 58 赶集为代表的分类信息发布平台；第三类是以 Boss 直聘、猎聘网等为代表的垂直招聘平台。这些垂直招聘平台更多的是专注于一个领域或特定人群，比如，猎聘网主要面向高端人才，Boss 直聘更专注于互联网行业。虽然招聘平台众多，但目前我国互联网招聘行业模式主要分为两种。

第一，传统模式，即招聘平台同时从 B 端（企业）和 C 端（个人用户）收取费用，综合类招聘平台均采用此模式。

第二，C 端免费模式。招聘平台以求职者用户为中心，主要向 B 端收费，如企业完成招聘后平台按单提成等。然而，无论是哪种商业模式，用户数量都是企业盈利的重中之重。

4. 排行图谱

根据易观千帆 2020 年 6 月招聘类 app 数据的显示，第一位 Boss 直聘，月活跃用户人数 1558.76 万，日均活跃人数 369.80 万。 第二位前程无忧，月活跃用户人数 1296.29 万，日均活跃人数 268.78 万。 第三位智联招聘，月活跃用户人数 1139.37 万，日均活跃人数 243.75 万。第四位猎聘，月活跃用户人数 509.81 万，日均活跃人数 97.48 万。（以上数据为 2020 年数据，数据仅供参考），从招聘排行不难看出，招聘行业目前是属于多强混战的状态，没有形成垄断局势。各家都还有弯道超车的机会。此次我们主要分析头部的招聘产品分别为：BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这 5 家招聘 APP。

5. 产品更新频次与平台 slogon

（1）产品更新频次：更新频次越高，说明产品更新换代速度越快，适应市场变化的能力越强，企业的发展就越有保障。根据点点数据提供的招聘类 app 更新频次数据的显示，BOSS 直聘的更新频次为：2.4 周/次、前程无忧 5 周/次、智联招聘 2.6 周/次、猎聘 2 周/次、拉钩招聘 2.1 周/次，从数据可看出猎聘的产品更新频次最高，前程无忧相对更新频次最低。

（2）平台 slogon：对于一个企业、一个产品和一个网站来说，slogan 都非常重要。广告口号是一种较长时期内反复使用的特定的商业用语，它所强调的是一家公司和它的产品最为突出的特点，以下为各公司的 slogon。

Boss 直聘：找工作，上 BOSS 直聘直接谈

前程无忧：专业招聘求职找工作平台

智联招聘：人才求职找工作招聘平台

猎聘：招人找工作上猎聘，准！

拉钩招聘：招聘找工作高薪求职

三、首页拆解 1. 框架结构分析

① 框架结构

首页各家的框架大同小异，整体分为：顶部操作区、运营区、内容筛选区、职位内容区、底部操作区这五个区域组成，下图为首页的框架图可以让大家快速熟悉页面结构。

② 首页页面与品牌色

虽功能相近，但各端的页面设计还是有很大的差异性，同时品牌色也有很大的差异，优秀的色彩会更好的占据用户的心智，合适的品牌色可以给产品带来更准确的调性与情感，下图为各产品首页样式与品牌色色值，让大家更加快速的了解界面与品牌色。

2. 顶部操作区

① 布局

首页的顶部导航栏，是界面中不可缺少的组成部分，出镜频率极高， 在苹果界面指南中，则被称为 导航栏（Navigation Bar）。在界面中，顶部栏会显示与当前屏幕相关的信息和操作素材。在招聘行业的顶导中 导航 栏主要结构为左右结构 主要功能为：选择职位、添加职位、搜索等。

② 顶部背景

顶部背景是首页视觉风格的关键，它决定着产品的调性。目前这五款产品中的顶导一共有两种风格：

渐变弥散风格：赋予界面更加轻松愉快的氛围感，营造出空间层次感的同时又不抢界面眼球，也是目前主流 APP 的设计趋势。应用产品为 boss 直聘、前程无忧、智联招聘 品牌单色风格：此风格会提升色彩在界面中的占比，相比渐变风格界面会显得传统与稳重，赋予产品严肃的调性。应用产品为猎聘、拉钩招聘

设计思考

这两种风格哪个更加适合招聘平台？

（1）通过这两种风格的分析，可以发现有两个大的方向一个是给予用户轻松的界面感受，一种是正式严肃的氛围，到底哪种更适合招聘行业呢，首先我们需要了解使用的用户人群与用户心智。用户人群：主要是来找工作的用户，使用人群体为 22-35 岁；用户心智：来找工作大多是忐忑的紧张的甚至对未来抱有期待的心理；

（2）接下来我们把用户带入到这两种界面中，我们会发现当一个紧张的人进入到轻松的氛围中自然会降低用户的负面情绪，但我们将这种用户心智的人带入到一个严肃的氛围中会带给用户更大的心理负担从而降低用户的使用体验。

接下来我把界面发给了不同行业不同职业的人群，让他们进行了匿名投票，其中选择渐变弥散的占比为：80%，主要反馈：好看、高级、看着更舒服轻松；10%的人选择了单色风格，主要反馈为：喜欢正式一些的；还有 10%选择弃票觉得两种都不太好；通过投票也认证了更多的用户喜欢招聘界面调性应该更加轻松些；

③ 搜索

这五款产品的搜索样式也是各有不同，主要分为：图标式入口搜索与搜索框搜索。其中 Boss 直聘与拉钩招聘为图标搜索入口；猎聘、智联招聘、前程无忧为搜索框搜索，这三款产品都支持上划隐藏输入框提高界面屏效（这里点一个赞）；

设计思考

搜索功能是否是招聘首页的核心功能？是否需要强化搜索框？

首先经过分析，招聘平台的搜索场景与频次，搜索功能支持的内容分别为搜索职位与公司。

（1）搜职位：首页上已经有用户预设好的职位，使用搜索可能是因为预设的职位不够精准（但现在职位分类已经十分精准）或预设以外的职位，所以本人很少用搜索来搜索职位；

（2）搜公司：当用户有固定想了解和想加入的公司时会通过搜索来进行查询，所以此场景的使用频次会更高；

其次我们发现现在带搜索框的产品上划后都会隐藏搜索框，由此可以判断搜索功能可能不是首页最核心的功能，没必要强化搜索框来影响用户使用核心功能，产品可以适当弱化搜索功能；

④ 管理职位

此场景主要是从首页的“+”中跳转进入，主要功能为管理当前职位、添加新职位、求职状态等功能，编辑求职中支持选择城市、期望职位、职位偏好、薪资要求、期望行业同时支持删除职位功能。

产品亮点

在管理职位页，Boss 直聘可以根据当前添加的职位推送相关与之前设置过的职位列表，这里采用了尼尔森十大原则中的易取原则，让选择可见，降低用户使用成本。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

设计误区

在编辑职位中拉钩招聘的表单设计有一个明显的设计缺陷，没有遵循尼尔森十大原则中的易扫原则，它让整体的表单动线呈现为多个"Z"字形，让用户的可读性降低，应当把标题放到输入区上方，让整体动线成直线，提升用户的阅读一致性。大家也可以检查下自己设计过的表单中有没有出现过这种问题，如果有及时改正。

设计误区：

猎聘与智联招聘在修改职位页中把主按钮做成删除功能，这在我使用产品中带来了非常不好的体验，当用户修改完内容后还要寻找保存在哪里时，如果用户不注意很容易进行误操作，很多用户来编辑职位可能就是改一下城市或者薪资。第二个问题点是两个按钮距离过大，操作体验不一致，建议统一把按钮放在下方，方便用户进行操作。

⑤ 职位交互

滑动首页区域可以进行职位之间的滑动切换，这一点在所有招聘产品中都保持一致，可以让用户快速的进行职位切换。

设计误区

智联招聘的顶导区域有两个模块，分别为“职位”和“靠谱榜”，首先第一个设计误区，我注意到“职位”下方有一个触控条，这个条出现的交互定义是可滑动区域，而进行滑动后发现是滑动下方的职位而不是此区域，所以这个触控条完全没有存在的必要（大家在设计入口的时，要充分考虑到用户的使用场景不要增加无故的设计来提升用户理解成本）；

接下来是第二个问题，当发现靠谱榜是点击才能进入后，想着这两个入口是可以来回点击切换的，结果发现是转到到一个 H5 落地页？是点返回 icon 回到首页，所以首页职位那两字存在的必要是什么？不仅让界面多了一个触控条甚至这俩字任何功能都没有，那为什么不直接去掉，然后把靠谱榜换成图标放到搜索的右边呢？属实不太理解。

3. 运营区

① 类型

运营区是首页的引流功能，首页增加运营入口可以提升广告与运营活动的点击，但区域要进行克制，不能因为运营区影响主要功能的使用。在招聘行业的运营区的主要功能为：banner、直播、商业产品。其中 Boss 直聘没有运营区，智联招聘只有直播，猎聘有商业产品与直播，拉钩招聘是 banner 与商业产品，前程无忧全部都有。

② 占比

招聘行业作为工具类产品应当尽量减少运营区的占比，占比越高就会对用户的使用体验带来更大的体验阻碍，其中 Boss 直聘运营界面屏效占比为 0%，智联招聘占比为 23%，猎聘占比为 10%，拉钩招聘占比为 19%，前程无忧为 50%。

产品亮点

Boss 在首页没有设置运营区,这让界面更加工具化，把直播和活动的相关入口放到“我的”和“有了”里大大提升了首页的使用体验。

产品误区

前程无忧的运营区的屏效比占到了 50%，这已经严重的影响到了核心内容区的信息展示，其次运营区有两个 banner 位这样用户进入首页后显得杂乱无章，让用户无从下手。

4. 内容筛选区

① 功能

内容筛选区也是以左右结构为主，布局与顶导类似，左侧功能区为：推荐、附近、最新；右侧功能分为：地区选择、与筛选；此功能区所有产品功能相同。

设计思考

次标题选中时是否需要视觉强化？

根据界面层级关系发现，左侧的功能区在首页场景里属于一个次标题的位置，当前产品中有 3 款产品选中后样式为文字加粗，还有两款为选中后变为品牌色。其中猎聘最为复杂不仅改变了文字颜色还增加了圆角卡片。经观察主标题（也就是职位名称）为一级标题，产品都为默认色值，所以副标题应该遵循色彩规则保持设计一致性，选中加粗即可，没有必要强化，这样会导致模糊视觉层级，其次目前设计趋势为简化褪色，减去没必要的色值，给用户带来更简洁的体验。

设计误区

前程无忧的筛选列表中有一个月薪范围功能，这里是需要用户手动来填写，而其他产品则为滑动条滑动选择，这里前程无忧的手动填写就没有遵循尼尔森十大原则中的人性化帮助原则，相比滑动选择这种手写的交互方式会让用户的使用成本提高，建议改为滑动选择降低用户操作成本。

5. 职位内容区

① 布局

职位展示区是首页中最为重要的功能，主要展示职位的重要信息，方便用户进行基础的判断，布局整体是卡片化处理，主要内容为：职位名称、公司信息（公司名称、人数、是否上市）、招聘人员、职位标签、薪资、地点和不感兴趣。各产品的内容信息基本一致，但样式上有两种形式分别为：职位标签在公司下方和职位标签在职位下方；

设计思考

职位标签是应该放到职位名称下方还是放到公司信息下方？

首先要思考职位标签是什么，职位标签是对于职位进行的更详细的介绍如：工作经验要求、工作学历要求、职位类型等职位信息，这样看下来应该采用方案一（职位标签在职位名称下面）更合理，因为标签是根据职位而定的，但这样设计会导致主副文案（主文案为职位名称，副文案为公司信息）被标签所隔开，导致卡片的信息展示不协调。其次整体的卡片是职位卡片，卡片上的所有信息其实都是为这个职位服务的，标签只要出现在卡片内就可以满足用户预期，不会增加用户的理解成本，所以把标签放到更适合的位置让卡片展示更协调与舒适即可，所以方案二更加适合。

② 薪资展示

招聘平台中的薪资是非常重要的文字信息，找工作工作内容是一方面，但薪资对求职者来说才是重中之重。所以各产品中都对文字进行了一定的强化如：加入品牌色、专属数字字体等方式来进行特殊处理。薪资的文字结构为 xx-xx 万·xx 薪。

产品思考

薪资文字信息应该是用 K 为单位还是以万为单位？

从用户角度分析“万”是中国的通用单位，对国内用户的理解成本更低，“K”是英文单词前面都有“kilo”的前缀，在国外为数字的通用单位，而且外国是不用“万”来做单位的，通常用“K”来表达薪资 10K=1 万，随着“K”这个单位逐渐在国内普及，和招聘市场逐渐走向海外，单位也由“万”变成了"K"，不过“K”对于很多三线以下城市的人可能不理解什么意思，所以建议产品同时支持国际单位与中国单位，用户可以通过设置自定义展示需要的数字单位。随后将这些平台是否支持这个功能进行了对比分析，发现 Boss 直聘在设置-主题设置中可以选择数字单位，其他平台均不支持，这点为 Boss 点个赞。

设计亮点

Boss 直聘与拉钩招聘对薪资进行了特殊字体处理，对于招聘行业数字是一个很敏感的信息，这些设计细节就是拉开产品之间的设计差距，定制化的数字可以与普通文字拉开差异，让数字更具备识别性，提高薪资信息在职位卡片中的视觉比重。

③ 反馈功能

反馈功能是提升职位列表质量的重要途径，招聘行业的反馈原因主要分为：公司不感兴趣、地区不感兴趣、行业不匹配、职位不符合预期、薪资低、其他原因等方面来进行推荐列表优化。在有反馈功能的产品中，Boss 直聘和前程无忧反馈原因最多有 9 个，猎聘最少仅有两个，反馈原因越多推送就会越精准，所以反馈原因方面猎聘还需要继续提升。

产品误区

这 5 款产品中，职位卡片可以进行删除与不感兴趣反馈，这样可以通过用户反馈来进行推荐列表优化，从而提高推荐职位的精准度。但拉钩招聘目前不支持反馈功能，这样会导致推荐列表无法根据用户来定制职位推送，推荐不精准会严重的影响用户使用体验，从而降低使用频次。

6. 底部操作区

① 布局

底部布局随着时代的发展出现多种形式如：常规类展示、不规则突出展示、悬浮式展示、隐藏式交互展示等，但在这 5 个产品中，都采用的是常规类展示，其中猎聘、Boss 直聘、前程无忧为 4 个功能入口，智联招聘和拉钩招聘为 5 个功能入口。组合形式都为 icon+文字的形式，这种形式可以降低用户理解成本，提高用户操作体验。

设计思考

消息入口需要放到倒数第二个吗？

这个问题是我一直纠结很久的问题，通过日常高频使用的产品发现（抖音、微博、支付宝、闲鱼等）消息功能都放在倒数第二个入口，从而养成了用户习惯，所以当我使用猎聘和智联时就会经常出现点错的情况，其次像日常使用的其他软件（微信朋友圈、淘宝购物车等）也都把高频使用功能放到倒数第二个入口，这里我查阅了大量资料发现，一般产品第一个入口是最核心的功能，而第二个入口距离第一个入口过近这样会导致用户不容易察觉到，所以第三个入口或倒数第二个入口是底部最适合放置第二核心功能的区域。招聘平台消息是非常重要的功能，求职者和招聘方大多都是通过“聊”来促进职位达成，所以把消息放到倒数第二个位置最为合适。

② 图标设计

底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，而经过多年的设计迭代底导还具备着品牌调性、识别度、设计风格等功能。

设计亮点

前程无忧的首页入口选中后出现品牌 LOGO，这样可以很好的增加品牌曝光和识别度，更加凸显产品的专业与品牌调性。

设计亮点

Boss 直聘在底部图标设计上也是用尽了心思，在点击时增加渐变微动效让图标更具识别度，这种情感化的设计不仅可以提高感官体验，还可以更好的拉进产品与用户之间的亲和力，这些设计细节的累计才能不断的打动用户内心的惊喜感，也是设计师们不断探索的设计方向。

四、总结 通过对招聘行业首页的分析与拆解，发现整体体验下来这些平台的使用都还是不错的，因为此次是站在一个“挑刺者”的身份来横向体验对比产品，俗话说没有对比就没有伤害，如果用户体验单一产品是不会发现其中的问题与差异。在这次对比拆解中，发现 Boss 直聘是这 5 个招聘 APP 最好用的产品，无论是从产品层：薪资单位切换、反馈类别数量、没有运营广告等，还是从设计层：数字的特殊设计、底导 icon 动态设计等，都体现出产品与设计细节。希望其他平台可以弥补自身的问题，重视用户体验，努力做打动人心的好产品。

下面是本人对各产品的打分（仅个人观点）

Boss 直聘：☆☆☆☆☆

猎聘：☆☆☆☆

智联招聘：☆☆☆☆

前程无忧：☆☆☆

拉钩招聘：☆☆☆

参考文献：

点点数据-数据对比 易观千帆-招聘类产品数据分析 尼尔森十大原则  

今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。当然了人在床上躺水平心中涨是不可能的，了解这些技巧后也要尽可能的去实操练习一下，如果实操过程中出现什么问题可以随时加我末尾的微信，咱们可以互相交流讨论~往期回顾：案例实操！保姆级的元宵节海报设计教程来了！

今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。当然了人在床上躺水平心中涨是不可能的，了解这些技巧后也要尽可能的去实操练习一下，如果实操过程中出现什么问题可以随时加我末尾的微信，咱们可以互相交流讨论~

往期回顾：

案例实操！保姆级的元宵节海报设计教程来了！ 大家元宵节的设计都做了没，今天给大家带来的是关于元宵节的案例实操，同时也会给大家提供一些小方法帮助大家能更快速高质量的出稿，希望对大家有所帮助~ 更多海报设计教程： 往往做不出来设计，就是这三个问题。

阅读文章 >

一、藏头露尾 这种处理方式适用于可以被分割的主体，通过在主视觉区隐藏起来主体的一部分然后在另一区域让其显示出来，这样重复不同于单纯的复制可以有效避免呆板以及尴尬，当然了最大的优势还是操作起来比较简单。

双主体甚至更多主体同时出现的时候一定要注意平衡性，就想象两个主体是在画面里玩跷跷板，如果一侧过重就需要减少其在画面内的占比。

如果一侧过轻，则可以考虑让标题等信息集中集中到轻的一侧。

二、多维组合 二维三维的组合不仅仅体现在插画和照片，还有图形和图片的集合部分，采用真实化有助于给画面以焦点，能够有效避免纯图形过于抽象或者纯照片过于普通，是一种很有设计感的组合手法。

这种手法核心就是穿插，前后的叠压很重要，亦或者是通过一些细小的元素打造画面透视，无论哪一种手法都是为了打造空间感，如果觉得画面比较闷没有亮点，就非常有可能是空间感的塑造上出现问题。

三、出血文字 经常有读者跟我说，我不会图形造型怎么办，我设计看起来很普通怎么办，这个出血文字就能很好的解决这个问题，所谓出血文字就是把一个文字拉到极大让画面的边缘裁切掉这个文字的一部分。

特别适合书法体或者外文这种内部结构类似图形感觉的字，越过版心首先就会打破死板，如果使用的是书法体更有一种大气的感觉，细节是如果你使用大字出血不妨加上点属性的小字来进行点缀类似下图这种就很好。

如果变形特别厉害足以形成空间的话就可以尝试一下这种画面了，当然这种更加适合做练习的版视探索，实际商业中做这种画面大概率是没法协调好视觉性和阅读性的。

四、英文手写体 单独把这个字体拎出来讲是因为这个用好了真的能解决很多问题，包括局部的负空间，或者部分空间的空白，以及标题或者画面的死板感，甚至是主体的视觉性不足和画面亲和力不够情绪传达不到位等等，都可以通过手写英文来解决。

更多英文字体推荐：

婚礼设计必备！5款带连笔的高质量英文花字体（已打包） 大家好，这里是你们聊设计的花生。

阅读文章 >

五、竖版横做 顾名思义就是拿竖版的图片横着做，优点就是形式感很强，因为打破常规所以看起来会比较有新鲜感，但缺点也同样不小，主流商业难接受，影响阅读甚至影响视觉传达，因为人很少会歪着脑袋看海报，除非你的内容真的吸引到他。

做这种有几点需要注意，第一并不是所有元素都要翻转，该保留的阅读元素一定要保留好。第二不是所有项目都适合，如果你的项目很重视形式感并且客户有一定的审美基础可以考虑采用这种形式。第三规律不变，版式结构思维还是用纵向思维做，翻转后的元素视为图形就可以了。

欢迎关注作者微信公众号：「视研设」

今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。当然了人在床上躺水平心中涨是不可能的，了解这些技巧后也要尽可能的去实操练习一下，如果实操过程中出现什么问题可以随时加我末尾的微信，咱们可以互相交流讨论~往期回顾：案例实操！保姆级的元宵节海报设计教程来了！

今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。当然了人在床上躺水平心中涨是不可能的，了解这些技巧后也要尽可能的去实操练习一下，如果实操过程中出现什么问题可以随时加我末尾的微信，咱们可以互相交流讨论~

往期回顾：

案例实操！保姆级的元宵节海报设计教程来了！ 大家元宵节的设计都做了没，今天给大家带来的是关于元宵节的案例实操，同时也会给大家提供一些小方法帮助大家能更快速高质量的出稿，希望对大家有所帮助~ 更多海报设计教程： 往往做不出来设计，就是这三个问题。

阅读文章 >

一、藏头露尾 这种处理方式适用于可以被分割的主体，通过在主视觉区隐藏起来主体的一部分然后在另一区域让其显示出来，这样重复不同于单纯的复制可以有效避免呆板以及尴尬，当然了最大的优势还是操作起来比较简单。

双主体甚至更多主体同时出现的时候一定要注意平衡性，就想象两个主体是在画面里玩跷跷板，如果一侧过重就需要减少其在画面内的占比。

如果一侧过轻，则可以考虑让标题等信息集中集中到轻的一侧。

二、多维组合 二维三维的组合不仅仅体现在插画和照片，还有图形和图片的集合部分，采用真实化有助于给画面以焦点，能够有效避免纯图形过于抽象或者纯照片过于普通，是一种很有设计感的组合手法。

这种手法核心就是穿插，前后的叠压很重要，亦或者是通过一些细小的元素打造画面透视，无论哪一种手法都是为了打造空间感，如果觉得画面比较闷没有亮点，就非常有可能是空间感的塑造上出现问题。

三、出血文字 经常有读者跟我说，我不会图形造型怎么办，我设计看起来很普通怎么办，这个出血文字就能很好的解决这个问题，所谓出血文字就是把一个文字拉到极大让画面的边缘裁切掉这个文字的一部分。

特别适合书法体或者外文这种内部结构类似图形感觉的字，越过版心首先就会打破死板，如果使用的是书法体更有一种大气的感觉，细节是如果你使用大字出血不妨加上点属性的小字来进行点缀类似下图这种就很好。

如果变形特别厉害足以形成空间的话就可以尝试一下这种画面了，当然这种更加适合做练习的版视探索，实际商业中做这种画面大概率是没法协调好视觉性和阅读性的。

四、英文手写体 单独把这个字体拎出来讲是因为这个用好了真的能解决很多问题，包括局部的负空间，或者部分空间的空白，以及标题或者画面的死板感，甚至是主体的视觉性不足和画面亲和力不够情绪传达不到位等等，都可以通过手写英文来解决。

更多英文字体推荐：

婚礼设计必备！5款带连笔的高质量英文花字体（已打包） 大家好，这里是你们聊设计的花生。

阅读文章 >

五、竖版横做 顾名思义就是拿竖版的图片横着做，优点就是形式感很强，因为打破常规所以看起来会比较有新鲜感，但缺点也同样不小，主流商业难接受，影响阅读甚至影响视觉传达，因为人很少会歪着脑袋看海报，除非你的内容真的吸引到他。

做这种有几点需要注意，第一并不是所有元素都要翻转，该保留的阅读元素一定要保留好。第二不是所有项目都适合，如果你的项目很重视形式感并且客户有一定的审美基础可以考虑采用这种形式。第三规律不变，版式结构思维还是用纵向思维做，翻转后的元素视为图形就可以了。

欢迎关注作者微信公众号：「视研设」

2023年市场逐渐复苏，招聘行业也迎来了新的机会，通过这段时间对招聘平台的深入体验与了解，给本人带来了很多使用体验，所以此次我对 BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这五家招聘 App 的首页功能进行拆解与分析，让大家更加了解招聘行业与其背后的设计逻辑，希望对大家有所帮助。往期拆解：万字拆解！123...

2023年市场逐渐复苏，招聘行业也迎来了新的机会，通过这段时间对招聘平台的深入体验与了解，给本人带来了很多使用体验，所以此次我对 BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这五家招聘 App 的首页功能进行拆解与分析，让大家更加了解招聘行业与其背后的设计逻辑，希望对大家有所帮助。

往期拆解：

万字拆解！12306产品设计全方位深度解析 有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。

阅读文章 >

一、阅读须知 1. 时长说明

全文约 8000+字，深度阅读本文大约需要 25-30 分钟；

2. 观点阐述

本文所有观点不代表公司，仅个人观点；本文中的所有观点没有任何产品偏向，仅站在一个用户的角度来分析产品；

3. 适合人群

第一类：UI/UX 体验设计师：跳出设计执行层，去思考招聘产品背后的设计策略，提升产品设计分析能力；

第二类：产品/运营经理：通过全面的产品设计拆解、用户逻辑分析，获取产品设计参考；

第三类：招聘行业从业者：通过首页分析与拆解，获取竞品逻辑参考；

二、行业介绍 1. 招聘平台定义

指运用互联网及相关技术，帮助雇主和求职者完成招聘和求职的网络站点。

狭义的招聘网指以网络为媒体的招聘广告发布平台及相关的人力资源服务系统，广义的招聘网站拥有招聘网站且网络招聘营收比重较高的公司，提供如招聘信息发布、简历下载、定制招聘专区、求职简历生成、职位搜索、薪酬查询等。

2. 招聘平台优势

① 对企业

提高招聘效率； 改善招聘效果； 提高生产力； 提高响应速度； 提高各部门合作度； 提供可持续作为后备的人才库资料 ② 对求职者

快捷方便

对于求职者来说，只要在人才网站上登记了个人简历，即可等候企业的招聘信息，如果上网方便还可以主动出击。网络招聘平台不断升级更新，快捷而富有效率，求职者通过招聘网站，可以不出家门就对工作的类别、地区和需求进行全方位智能查询，快速准确地查询到所需要的包括行业、职能、工作地点、工资等信息。工作职位分类清晰、针对性强。一些大的招聘网站，可以随时查询到数万条信息，而且每天更新职位，只要在家关注招聘网站就能第一时间掌握用人单位的需求。

机会多

网络求职的一大特点是招聘信息量大，海量的职位库中，求职者选择适合职位的机会也就越大。

无限制

“传统的招聘会不是每天都有，而且浪费精力和金钱。”一名求职者在采访中这样表示。相比其他招聘形式，网络求职也没有区域和时间的限制，能够给个人创造更多的就业机会。对于异地求职者，这省却了奔波于不同城市的烦恼；对于一般院校学生，因为不易亲临知名企业校园招聘会，但通过网络就可以获取与其它求职者同等竞争的机会。

3. 盈利模式

目前国内的互联网招聘平台可以分为三类：第一类是以智联招聘、前程无忧为代表的综合类招聘平台；第二类是以 58 赶集为代表的分类信息发布平台；第三类是以 Boss 直聘、猎聘网等为代表的垂直招聘平台。这些垂直招聘平台更多的是专注于一个领域或特定人群，比如，猎聘网主要面向高端人才，Boss 直聘更专注于互联网行业。虽然招聘平台众多，但目前我国互联网招聘行业模式主要分为两种。

第一，传统模式，即招聘平台同时从 B 端（企业）和 C 端（个人用户）收取费用，综合类招聘平台均采用此模式。

第二，C 端免费模式。招聘平台以求职者用户为中心，主要向 B 端收费，如企业完成招聘后平台按单提成等。然而，无论是哪种商业模式，用户数量都是企业盈利的重中之重。

4. 排行图谱

根据易观千帆 2020 年 6 月招聘类 app 数据的显示，第一位 Boss 直聘，月活跃用户人数 1558.76 万，日均活跃人数 369.80 万。 第二位前程无忧，月活跃用户人数 1296.29 万，日均活跃人数 268.78 万。 第三位智联招聘，月活跃用户人数 1139.37 万，日均活跃人数 243.75 万。第四位猎聘，月活跃用户人数 509.81 万，日均活跃人数 97.48 万。（以上数据为 2020 年数据，数据仅供参考），从招聘排行不难看出，招聘行业目前是属于多强混战的状态，没有形成垄断局势。各家都还有弯道超车的机会。此次我们主要分析头部的招聘产品分别为：BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这 5 家招聘 APP。

5. 产品更新频次与平台 slogon

（1）产品更新频次：更新频次越高，说明产品更新换代速度越快，适应市场变化的能力越强，企业的发展就越有保障。根据点点数据提供的招聘类 app 更新频次数据的显示，BOSS 直聘的更新频次为：2.4 周/次、前程无忧 5 周/次、智联招聘 2.6 周/次、猎聘 2 周/次、拉钩招聘 2.1 周/次，从数据可看出猎聘的产品更新频次最高，前程无忧相对更新频次最低。

（2）平台 slogon：对于一个企业、一个产品和一个网站来说，slogan 都非常重要。广告口号是一种较长时期内反复使用的特定的商业用语，它所强调的是一家公司和它的产品最为突出的特点，以下为各公司的 slogon。

Boss 直聘：找工作，上 BOSS 直聘直接谈

前程无忧：专业招聘求职找工作平台

智联招聘：人才求职找工作招聘平台

猎聘：招人找工作上猎聘，准！

拉钩招聘：招聘找工作高薪求职

三、首页拆解 1. 框架结构分析

① 框架结构

首页各家的框架大同小异，整体分为：顶部操作区、运营区、内容筛选区、职位内容区、底部操作区这五个区域组成，下图为首页的框架图可以让大家快速熟悉页面结构。

② 首页页面与品牌色

虽功能相近，但各端的页面设计还是有很大的差异性，同时品牌色也有很大的差异，优秀的色彩会更好的占据用户的心智，合适的品牌色可以给产品带来更准确的调性与情感，下图为各产品首页样式与品牌色色值，让大家更加快速的了解界面与品牌色。

2. 顶部操作区

① 布局

首页的顶部导航栏，是界面中不可缺少的组成部分，出镜频率极高， 在苹果界面指南中，则被称为 导航栏（Navigation Bar）。在界面中，顶部栏会显示与当前屏幕相关的信息和操作素材。在招聘行业的顶导中 导航 栏主要结构为左右结构 主要功能为：选择职位、添加职位、搜索等。

② 顶部背景

顶部背景是首页视觉风格的关键，它决定着产品的调性。目前这五款产品中的顶导一共有两种风格：

渐变弥散风格：赋予界面更加轻松愉快的氛围感，营造出空间层次感的同时又不抢界面眼球，也是目前主流 APP 的设计趋势。应用产品为 boss 直聘、前程无忧、智联招聘 品牌单色风格：此风格会提升色彩在界面中的占比，相比渐变风格界面会显得传统与稳重，赋予产品严肃的调性。应用产品为猎聘、拉钩招聘

设计思考

这两种风格哪个更加适合招聘平台？

（1）通过这两种风格的分析，可以发现有两个大的方向一个是给予用户轻松的界面感受，一种是正式严肃的氛围，到底哪种更适合招聘行业呢，首先我们需要了解使用的用户人群与用户心智。用户人群：主要是来找工作的用户，使用人群体为 22-35 岁；用户心智：来找工作大多是忐忑的紧张的甚至对未来抱有期待的心理；

（2）接下来我们把用户带入到这两种界面中，我们会发现当一个紧张的人进入到轻松的氛围中自然会降低用户的负面情绪，但我们将这种用户心智的人带入到一个严肃的氛围中会带给用户更大的心理负担从而降低用户的使用体验。

接下来我把界面发给了不同行业不同职业的人群，让他们进行了匿名投票，其中选择渐变弥散的占比为：80%，主要反馈：好看、高级、看着更舒服轻松；10%的人选择了单色风格，主要反馈为：喜欢正式一些的；还有 10%选择弃票觉得两种都不太好；通过投票也认证了更多的用户喜欢招聘界面调性应该更加轻松些；

③ 搜索

这五款产品的搜索样式也是各有不同，主要分为：图标式入口搜索与搜索框搜索。其中 Boss 直聘与拉钩招聘为图标搜索入口；猎聘、智联招聘、前程无忧为搜索框搜索，这三款产品都支持上划隐藏输入框提高界面屏效（这里点一个赞）；

设计思考

搜索功能是否是招聘首页的核心功能？是否需要强化搜索框？

首先经过分析，招聘平台的搜索场景与频次，搜索功能支持的内容分别为搜索职位与公司。

（1）搜职位：首页上已经有用户预设好的职位，使用搜索可能是因为预设的职位不够精准（但现在职位分类已经十分精准）或预设以外的职位，所以本人很少用搜索来搜索职位；

（2）搜公司：当用户有固定想了解和想加入的公司时会通过搜索来进行查询，所以此场景的使用频次会更高；

其次我们发现现在带搜索框的产品上划后都会隐藏搜索框，由此可以判断搜索功能可能不是首页最核心的功能，没必要强化搜索框来影响用户使用核心功能，产品可以适当弱化搜索功能；

④ 管理职位

此场景主要是从首页的“+”中跳转进入，主要功能为管理当前职位、添加新职位、求职状态等功能，编辑求职中支持选择城市、期望职位、职位偏好、薪资要求、期望行业同时支持删除职位功能。

产品亮点

在管理职位页，Boss 直聘可以根据当前添加的职位推送相关与之前设置过的职位列表，这里采用了尼尔森十大原则中的易取原则，让选择可见，降低用户使用成本。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

设计误区

在编辑职位中拉钩招聘的表单设计有一个明显的设计缺陷，没有遵循尼尔森十大原则中的易扫原则，它让整体的表单动线呈现为多个"Z"字形，让用户的可读性降低，应当把标题放到输入区上方，让整体动线成直线，提升用户的阅读一致性。大家也可以检查下自己设计过的表单中有没有出现过这种问题，如果有及时改正。

设计误区：

猎聘与智联招聘在修改职位页中把主按钮做成删除功能，这在我使用产品中带来了非常不好的体验，当用户修改完内容后还要寻找保存在哪里时，如果用户不注意很容易进行误操作，很多用户来编辑职位可能就是改一下城市或者薪资。第二个问题点是两个按钮距离过大，操作体验不一致，建议统一把按钮放在下方，方便用户进行操作。

⑤ 职位交互

滑动首页区域可以进行职位之间的滑动切换，这一点在所有招聘产品中都保持一致，可以让用户快速的进行职位切换。

设计误区

智联招聘的顶导区域有两个模块，分别为“职位”和“靠谱榜”，首先第一个设计误区，我注意到“职位”下方有一个触控条，这个条出现的交互定义是可滑动区域，而进行滑动后发现是滑动下方的职位而不是此区域，所以这个触控条完全没有存在的必要（大家在设计入口的时，要充分考虑到用户的使用场景不要增加无故的设计来提升用户理解成本）；

接下来是第二个问题，当发现靠谱榜是点击才能进入后，想着这两个入口是可以来回点击切换的，结果发现是转到到一个 H5 落地页？是点返回 icon 回到首页，所以首页职位那两字存在的必要是什么？不仅让界面多了一个触控条甚至这俩字任何功能都没有，那为什么不直接去掉，然后把靠谱榜换成图标放到搜索的右边呢？属实不太理解。

3. 运营区

① 类型

运营区是首页的引流功能，首页增加运营入口可以提升广告与运营活动的点击，但区域要进行克制，不能因为运营区影响主要功能的使用。在招聘行业的运营区的主要功能为：banner、直播、商业产品。其中 Boss 直聘没有运营区，智联招聘只有直播，猎聘有商业产品与直播，拉钩招聘是 banner 与商业产品，前程无忧全部都有。

② 占比

招聘行业作为工具类产品应当尽量减少运营区的占比，占比越高就会对用户的使用体验带来更大的体验阻碍，其中 Boss 直聘运营界面屏效占比为 0%，智联招聘占比为 23%，猎聘占比为 10%，拉钩招聘占比为 19%，前程无忧为 50%。

产品亮点

Boss 在首页没有设置运营区,这让界面更加工具化，把直播和活动的相关入口放到“我的”和“有了”里大大提升了首页的使用体验。

产品误区

前程无忧的运营区的屏效比占到了 50%，这已经严重的影响到了核心内容区的信息展示，其次运营区有两个 banner 位这样用户进入首页后显得杂乱无章，让用户无从下手。

4. 内容筛选区

① 功能

内容筛选区也是以左右结构为主，布局与顶导类似，左侧功能区为：推荐、附近、最新；右侧功能分为：地区选择、与筛选；此功能区所有产品功能相同。

设计思考

次标题选中时是否需要视觉强化？

根据界面层级关系发现，左侧的功能区在首页场景里属于一个次标题的位置，当前产品中有 3 款产品选中后样式为文字加粗，还有两款为选中后变为品牌色。其中猎聘最为复杂不仅改变了文字颜色还增加了圆角卡片。经观察主标题（也就是职位名称）为一级标题，产品都为默认色值，所以副标题应该遵循色彩规则保持设计一致性，选中加粗即可，没有必要强化，这样会导致模糊视觉层级，其次目前设计趋势为简化褪色，减去没必要的色值，给用户带来更简洁的体验。

设计误区

前程无忧的筛选列表中有一个月薪范围功能，这里是需要用户手动来填写，而其他产品则为滑动条滑动选择，这里前程无忧的手动填写就没有遵循尼尔森十大原则中的人性化帮助原则，相比滑动选择这种手写的交互方式会让用户的使用成本提高，建议改为滑动选择降低用户操作成本。

5. 职位内容区

① 布局

职位展示区是首页中最为重要的功能，主要展示职位的重要信息，方便用户进行基础的判断，布局整体是卡片化处理，主要内容为：职位名称、公司信息（公司名称、人数、是否上市）、招聘人员、职位标签、薪资、地点和不感兴趣。各产品的内容信息基本一致，但样式上有两种形式分别为：职位标签在公司下方和职位标签在职位下方；

设计思考

职位标签是应该放到职位名称下方还是放到公司信息下方？

首先要思考职位标签是什么，职位标签是对于职位进行的更详细的介绍如：工作经验要求、工作学历要求、职位类型等职位信息，这样看下来应该采用方案一（职位标签在职位名称下面）更合理，因为标签是根据职位而定的，但这样设计会导致主副文案（主文案为职位名称，副文案为公司信息）被标签所隔开，导致卡片的信息展示不协调。其次整体的卡片是职位卡片，卡片上的所有信息其实都是为这个职位服务的，标签只要出现在卡片内就可以满足用户预期，不会增加用户的理解成本，所以把标签放到更适合的位置让卡片展示更协调与舒适即可，所以方案二更加适合。

② 薪资展示

招聘平台中的薪资是非常重要的文字信息，找工作工作内容是一方面，但薪资对求职者来说才是重中之重。所以各产品中都对文字进行了一定的强化如：加入品牌色、专属数字字体等方式来进行特殊处理。薪资的文字结构为 xx-xx 万·xx 薪。

产品思考

薪资文字信息应该是用 K 为单位还是以万为单位？

从用户角度分析“万”是中国的通用单位，对国内用户的理解成本更低，“K”是英文单词前面都有“kilo”的前缀，在国外为数字的通用单位，而且外国是不用“万”来做单位的，通常用“K”来表达薪资 10K=1 万，随着“K”这个单位逐渐在国内普及，和招聘市场逐渐走向海外，单位也由“万”变成了"K"，不过“K”对于很多三线以下城市的人可能不理解什么意思，所以建议产品同时支持国际单位与中国单位，用户可以通过设置自定义展示需要的数字单位。随后将这些平台是否支持这个功能进行了对比分析，发现 Boss 直聘在设置-主题设置中可以选择数字单位，其他平台均不支持，这点为 Boss 点个赞。

设计亮点

Boss 直聘与拉钩招聘对薪资进行了特殊字体处理，对于招聘行业数字是一个很敏感的信息，这些设计细节就是拉开产品之间的设计差距，定制化的数字可以与普通文字拉开差异，让数字更具备识别性，提高薪资信息在职位卡片中的视觉比重。

③ 反馈功能

反馈功能是提升职位列表质量的重要途径，招聘行业的反馈原因主要分为：公司不感兴趣、地区不感兴趣、行业不匹配、职位不符合预期、薪资低、其他原因等方面来进行推荐列表优化。在有反馈功能的产品中，Boss 直聘和前程无忧反馈原因最多有 9 个，猎聘最少仅有两个，反馈原因越多推送就会越精准，所以反馈原因方面猎聘还需要继续提升。

产品误区

这 5 款产品中，职位卡片可以进行删除与不感兴趣反馈，这样可以通过用户反馈来进行推荐列表优化，从而提高推荐职位的精准度。但拉钩招聘目前不支持反馈功能，这样会导致推荐列表无法根据用户来定制职位推送，推荐不精准会严重的影响用户使用体验，从而降低使用频次。

6. 底部操作区

① 布局

底部布局随着时代的发展出现多种形式如：常规类展示、不规则突出展示、悬浮式展示、隐藏式交互展示等，但在这 5 个产品中，都采用的是常规类展示，其中猎聘、Boss 直聘、前程无忧为 4 个功能入口，智联招聘和拉钩招聘为 5 个功能入口。组合形式都为 icon+文字的形式，这种形式可以降低用户理解成本，提高用户操作体验。

设计思考

消息入口需要放到倒数第二个吗？

这个问题是我一直纠结很久的问题，通过日常高频使用的产品发现（抖音、微博、支付宝、闲鱼等）消息功能都放在倒数第二个入口，从而养成了用户习惯，所以当我使用猎聘和智联时就会经常出现点错的情况，其次像日常使用的其他软件（微信朋友圈、淘宝购物车等）也都把高频使用功能放到倒数第二个入口，这里我查阅了大量资料发现，一般产品第一个入口是最核心的功能，而第二个入口距离第一个入口过近这样会导致用户不容易察觉到，所以第三个入口或倒数第二个入口是底部最适合放置第二核心功能的区域。招聘平台消息是非常重要的功能，求职者和招聘方大多都是通过“聊”来促进职位达成，所以把消息放到倒数第二个位置最为合适。

② 图标设计

底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，而经过多年的设计迭代底导还具备着品牌调性、识别度、设计风格等功能。

设计亮点

前程无忧的首页入口选中后出现品牌 LOGO，这样可以很好的增加品牌曝光和识别度，更加凸显产品的专业与品牌调性。

设计亮点

Boss 直聘在底部图标设计上也是用尽了心思，在点击时增加渐变微动效让图标更具识别度，这种情感化的设计不仅可以提高感官体验，还可以更好的拉进产品与用户之间的亲和力，这些设计细节的累计才能不断的打动用户内心的惊喜感，也是设计师们不断探索的设计方向。

四、总结 通过对招聘行业首页的分析与拆解，发现整体体验下来这些平台的使用都还是不错的，因为此次是站在一个“挑刺者”的身份来横向体验对比产品，俗话说没有对比就没有伤害，如果用户体验单一产品是不会发现其中的问题与差异。在这次对比拆解中，发现 Boss 直聘是这 5 个招聘 APP 最好用的产品，无论是从产品层：薪资单位切换、反馈类别数量、没有运营广告等，还是从设计层：数字的特殊设计、底导 icon 动态设计等，都体现出产品与设计细节。希望其他平台可以弥补自身的问题，重视用户体验，努力做打动人心的好产品。

下面是本人对各产品的打分（仅个人观点）

Boss 直聘：☆☆☆☆☆

猎聘：☆☆☆☆

智联招聘：☆☆☆☆

前程无忧：☆☆☆

拉钩招聘：☆☆☆

参考文献：

点点数据-数据对比 易观千帆-招聘类产品数据分析 尼尔森十大原则  

一、如何看待被小需求覆盖的工作日常？方法有两种，第一就是对日常工作情况分析，第二就是找出产生问题的原因一个设计师一般同时负责多个项目，多个产品老师同事提了不计其数的小需求，有的需求太小，一点挑战都没有，没有价值，做了对自己没有提升，许多设计师觉得自己做小项目没有价值，实则上是设计师自己的视角局限导致看问题比较片面...

一、如何看待被小需求覆盖的工作日常？ 方法有两种，第一就是对日常工作情况分析，第二就是找出产生问题的原因

一个设计师一般同时负责多个项目，多个产品老师同事提了不计其数的小需求，有的需求太小，一点挑战都没有，没有价值，做了对自己没有提升，许多设计师觉得自己做小项目没有价值，实则上是设计师自己的视角局限导致看问题比较片面，没有认识到自己实际的价值。

每个设计师都觉得没有空间展现自己无限创造力、才华和艺术品味，感觉这一身的艺术细菌都被浪费了

我们常常认为我们是固定的，世界是可塑的，但大多数情况下，世界是固定的，我们是可塑的。

所以我们应该改变心态，认真对待小需求也能够提升个人能力，展现创造力和逻辑性。此外，调整工作方式，从解决问题的本质出发，认真分析问题，想清楚如何解决，不再随意思考随性设计从而产生随机结果。

工作需求很琐碎，如何制作完整吸睛的作品集？ 前言 我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。

阅读文章 >

二、怎么解决这种情况，有哪些门道？ 我们是不是经常遇到这样：

但不管是什么需求，都需要设计师明确业务流程，在了解业务基础上才能够梳理清晰思路。

1. 分析目标用户，了解用户人群

当我们拿到一个需求的时候，我们需要对业务有所基本的认知，以买保险为例，完成投保的步骤分为以上四步，用户首先进入到保险首页，浏览保险列表页面，点击查看保险详情，最后决定购买保险完成投保。

用户人群：目标用户人群中，男性用户占比较高，且大部分处于婚育年纪的家庭车主，上有老下有小，生活的重担和家庭责任使他们具有较高的风险意识，注重品牌效应，追求品质，但大部分并不了解自身需求。

现存问题：不知道应该买哪种保险？性价比高吗？适合全家购买吗？理赔方便吗？是官方平台吗？有哪些保障权益？

2. 横向拓展功能矩阵，竖向梳理全流程

我们还需要对用户行为有个基本面的了解。投保四个步骤分别对应什么样的用户行为？根据用户行为去做出什么样的设计决策呢？这个时候就需要设计师们做进一步的思考了。

横向拓展思考，梳理产品框架。引入场景建立基本认知。提供辅助决策，产生价值认同。帮助用户做决策驱动，激励转化。

竖向梳理全流程。用户使用流程包括了点击买保险入口、进入浏览保险列表、查看产品详情页、用户投保完成。而影响用户行为的因素有三点：

提供可持续被感知的动机，吸引潜在的用户，利用保险应用场景引入到用户生活当中，给予用户基础认知 将复杂的保险内容简洁化，降低用户认知门槛，让用户清晰了解到产品是否适合自己 当用户被动机吸引进入到投保页面后，驱动用户做出决策需要建立在信任基础上，用户首次接触新产品时会选择熟悉的品牌，结合信用背书，让二者产生连接，增强产品可信度 此外，保险产品具有一定的周期性的，我们不仅需要考虑用户行为上的痛点，还要思考产品周期对用户决策的影响。

3. 了解覆盖保险周期

用户所处的保险阶段分为：新手期、决定期、犹豫期、复购期，处于不同保险阶段的用户对于保险内容有不同的诉求，需要在框架和内容上去适配他自身的认知和意愿。与市场营销、产品运营策略相结合相关案例分析。

三、实际案例分析 1. 在上个版本的续保详情页存在了几个问题：

当前详情页无法得知购买的是哪个保险，保险的特点和客户群体不清晰 用户不清楚什么时候到了续保阶段，以及为什么会欠费 信息层级不突出，文案信息冗杂，增加了用户了解产品内容的压力 续保详情页和其他页面视觉差异不大，引起用户视觉疲劳 根据以上的问题，可以给出对应的优化点：

突出保险本身的优势，强调已保障天数 明确费用计算规则，确保费用清晰明了 加强保单与缴费明细的内容主次层级对比，强化产品信息 统一保险页面设计风格 相关展示：

再来看个例子，下面是个保险复购期间续保 H5 优化。

在上个版本存在的问题是：

用户无法得知距离保险失效还剩多少天。 产品升级前后对比弱，升级的内容无法有效并且直观地感知。 设计风格上和投保详情页不一致，无法从品牌上传递信任感。

根据以上问题，可以给出对应的优化点：

明确失效保险名称以及天数的关键信息 强化升级前后的对比，从内容信息上强化视觉展示 这个页面要跳转到详情页，所以没必要展示全部内容，信息在一屏内展示完成 视觉上统一设计风格 同样，弹窗也有可以优化的地方

突出保险额度和关键的保险信息 增加已有多人完善信息，让用户产生从众心理 把完善内容包装成用户福利，只有幸运用户才可以享有 其他页面需要保持统一的设计风格

四、这些对我们有什么启示呢？ 产品工作流程：

产品设计流程：

无论是接到一个大的项目还是日常小需求的维护，设计师都应该多去从业务流程去思考产品的痛点，找到业务流程中每个步骤间设计目标，对工作不同阶段要有清晰的认识。运用设计方法了解我们的用户、了解产品核心诉求。

欢迎关注作者微信公众号：「产险设计事务所 PIDO」

大家好，这里适合你们聊设计的花生~配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求...

大家好，这里适合你们聊设计的花生~

配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的 配色技巧 和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求的 配色 方案，并提升对色彩的感知力和掌控力。

往期回顾：

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！ 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。

阅读文章 >

一、Adobe Color 网站直达： https://color.adobe.com/zh/create/color-wheel （需要魔法）

Adobe Color 是 Adobe 公司开发的专业色彩灵感网站。如果只看它的首页，会觉得它只能用来寻找和谐配色方案，但它有两项经常被忽略的色彩功能：探索和趋势。

Adobe Color 的“探索”功能可以让设计师按关键词搜索配色方案。比如在搜索框内输入 Cyberpunk，网站就会推荐很多相关的图像，并自动生成其的配色方案。配色方案可以下载为 JPG，右上角还有筛选器，可以按色卡、艺术作品、摄影照片来筛选内容。从绘画的角度来说，这种方式能帮助我们快速找到指定风格或场景的参考图片及配色方案，比自己先找参考图片、再提取照片配色更高效。

“趋势”则是从 Behance 和 Adobe Stock 中抓取最新的图像内容，提取其配色方案，并按时尚、UI、建筑、插画、风景、美食等进行分类呈现。如果你觉得的自己在色彩方面的感知力较弱，不如多到这里逛逛，既能迅速了解不同行业最新的色彩趋势，也可以获取高质量的配色灵感。

二、Color leap 网站直达： https://colorleap.app/home

Color Leap 是一个记录不同年代作品色彩的网站，包含公元前 2000 年至 20 世纪 60 年代间的 12 个年代。点击主页的年代标签，进入后可以找到多套符合时代特色的配色方案和代表作品。多了解不同年代的配色风格，可以加深我们对色彩含义的了解，提升对不同配色风格的掌控能力。

色彩时光机！可查询每个时代流行配色组合的 Color Leap 每个时代都有代表的文化和呈现样貌，如果对于一些绘画或摄影作品有研究，可能也会发现不同年代会使用的颜色也大不相同，当然这牵涉到许多层面，就不在本文深入探讨了。

阅读文章 >

三、Google Palette Art 网站直达： https://artsexperiments.withgoogle.com/artpalette/ （需要魔法）

Google Arts and Culture 和世界各地超 2000 间博物馆达成合作，拍摄它们馆内的艺术作品并上传网上用户欣赏。又在此基础上推出 Google Palette Art，利用电脑视觉演算技术分析并标记了这些作品的配色，让用户可以通过色卡来搜索艺术作品，

在 Google Palette Art 上可以随机生成一组 5 种颜色的方案，然后得到所有类似配色的作品推荐。颜色是可以修改的，每修改一次推荐的艺术作品也会随之改变。我们还可以自己上传图片，网站会提取其中的 5 种颜色并推荐类似的配色作品。

在 Google Palette Art 内我们不仅可以搜索配色灵感，提升艺术审美，还能了解作品背后的艺术知识。将鼠标悬停在作品卡片上，会有一个「更多详情」的选项，点击后会跳转到作品的介绍页，里面有作者信息。点击作者名称，就能跳转到艺术家主页，里面有艺术家的生平介绍、代表作品和作品故事。

四、Designspiration 网站直达： https://www.designspiration.com/

Designspiration 是一个类似 Pinterest 设计灵感网站，但它可以通过色彩搜索站内的 设计灵感 。Designspiration 会自动为每个作品生成一组色卡，点击色轮可以查所有使用类似配色的作品，包含插画、平面设计、摄影照片、建筑等多个方面。色卡的颜色可以独立调整，我们也可上传自己喜欢的作品，用这种功能查询所有类似配色的灵感。

spiration 在主页搜索栏右侧有一个调色盘小图标，点开后是一个调色板。我们可以在上面选择至多 5 种颜色，然后搜索以这种配色为主的所有灵感。这个网站非常适合刚开始学习设计或插画的小伙伴，如果在配色阶段被卡住了，可以先选一两种颜色进行搜索，过程中根据推荐的作品随时调整颜色，直到找到符合自己需求的配色。

五、Palettemaker 网址直达： https://palettemaker.com/

Palettemaker 是一个免费的在线配色预览网站，它可以随机生成配色方案，或者根据一种配色方案生成 100+ 配色灵感，以及将配色实时应用到不同的设计模板上，模板包括 UI 界面、插画、排版、图案等。

如果你突然有一个配色灵感，可以将其复制到 Palettemaker 当中，看看实际应用的效果如何。因为配色效果是实时呈现的，我们可以根据感觉一点点修改直至自己满意为止，然后在这个过程中总结色彩搭配的经验和技巧，积累多了对色彩掌握能力自然会有提升。如果是想迅速获得配色灵感，就可以使用它的 “Generator”功能，选一种颜色让 Palettemaker 推荐灵感，然后从中挑选自己喜欢的。

以上就是本期的色彩灵感网站推荐，非常适合设计师和插画师日常浏览使用。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~

推荐阅读:

看电影学审美！5款超实用的电影拉片资源 大家好，这里是和你们聊设计的花生~ 之前为大家推荐了 8 位 B 站上值得关注的电影拉片 UP 主，可以帮助大家了解电影拉片的基本知识。

阅读文章 >

2023年，让这20款AI工具帮你更高效地完成工作~ 2023年，让这20款AI工具帮你更高效的完成工作~ 大家好，这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。

阅读文章 >

编者按：为什么所有的好莱坞科幻电影当中，用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影？这种风尚是如何流行开的？它们对于未来的 UI 设计有影响么？

编者按：为什么所有的好莱坞科幻电影当中，用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影？这种风尚是如何流行开的？它们对于未来的 UI 设计有影响么？目前 全息影像 发展到什么程度了？如果你厌倦了近期关于 AIGC 的持续热炒，不妨来看看 资深 UX 设计师 Daley Wilhelm 关于全息影像、未来 UI/UX 的探讨 。

AR 和 VR 诞生前，人类的视觉增强探索史 编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。

阅读文章 >

托尼史塔克像抓住真实物体一样握住虚拟物品

科幻电影喜欢炫耀技术的巨大飞跃。最新的《阿凡达》电影中，蜘蛛型自走机器人可以在数周内搭建一整座城市，在人体冷冻技术加持下，飞船可以将人类运送到数光年以外的地方。在詹姆斯卡梅隆的想象中，我们可以将记忆下载，上传到新的身体当中，所有这些极为先进的技术都是通过可触摸的、透明单色的的全息影像来进行控制的，而这个和好莱坞其他很多科幻电影中的界面如出一辙。

阿凡达

当我们透过科幻电影窥见未来的时候，我们看到的是无所不在的语音助手，超凡脱俗的可穿戴设备和大量的全息影像和3D交互。在这其中，不知道是出于何种原因，这些全息图几乎全都是蓝色的，漂亮地悬浮于桌面上方，每个路过的人都能看到。这种未来派的 UI 设计一直都令我困惑，因为它看起来很酷，但是实际并不实用。不过，好莱坞电影似乎极度痴迷于这种被蓝光包裹的未来科技。

星球大战中莱雅公主的全息投影

也许这种好莱坞设计公式源自于最早、最有影响力的科幻题材电影星球大战系列。星球大战当中许多科幻元素为后来者提供了灵感，而后续的很多作品会自然而然在前辈的基础上沿袭设计。《阿凡达》系列电影当中，对于蓝色全息影象就有着明显的偏爱。

什么是全息影像 我们先重新回顾一下好莱坞对全息影像的呈现形式。通常在电影当中，全息影像有两种形态，平面全息图和立体全息图。平面全息图其实早已出现，从平面的3D效果收藏卡到舞台上的初音未来全息图，都属于这种平面全息影像。而在科幻电影当中，投射到透明屏幕上的界面，也同属于这类。

初音未来

然而，立体全息影像则截然不同。顾名思义，它是立体的，占据空间体积的，那么我们要如何让光占据特定的空间，并且拥有三维立体的物体一样的「特征」？如何让光线停留在特定的地方而不是继续向前投射？

而这正是物理学家 Daniel Smalley 这样的人所研究的课题。受到星球大战中莱娅公主的立体投影的启发，他已经能够通过激光击中纤维素粒子，在空中形成立体的 3D 蝴蝶轮廓，这个技术上的飞跃意味着全息影像已经成为可能，但是距离钢铁侠手中可以交互、随着手掌转动的立体投影太远，实在是相形见绌。乐观点预测，我们有可能在 10 年内看到一些拥有体积感、尺寸更大的全息影像，但是现在它依然是科幻电影和小说里供人想象的未来。

最初打破常规的是《星际迷航》 值得注意的是，最初打破这种使用全息影像「惯性」的是早期的《星际迷航》系列的电影和剧集，影片中 设计师 采用了浓郁 60 年代设计语言的扎实显示屏。

然而此后剧集和电影重启的时候，又折返回去采用好莱坞的未来感全息 UI 界面，舰桥上悬浮着蓝色基调的全息影像 UI 界面，最新的 USS Discovery 当中，船员不再能够透过硬质屏幕和敌舰视频语音，所有人直接在全息影像频道里实时通话，还能便捷地进行战斗调动。

然而如果真的要细抠设定的话，USS Discovery 的剧情所在时间段相反发生在柯克船长掌舵之前的事情，但是看起来技术相反更加先进，不过星际迷航粉对此倒是有一番详细解释，只是实际上主要原因还是好莱坞影视产业的发展的必然结果。

好莱坞对于全息影像呈现的着迷是理所当然的，更加炫酷的视觉效果是必然的趋势。复古的黑蓝橙色如今也被蓝色和白色为主的色调所取代。

漫威电影重塑了范式

设计蜘蛛侠套装的界面就是经典的蓝白光影

漫威的科幻电影如今比以往任何时候都要主流。是的，这些包含令人难以置信的未来技术的超级英雄电影被归类为科幻。甚至雷神所使用的魔法也已经被堂而皇之被解释为「被误解的科学」，而这也进一步推动漫威将蓝白色全息投影界面普及到整个漫威扩展宇宙。

总部位于纽约的设计公司 Perception 是漫威电影中钢铁侠各色技术的创意源头。每当神盾局的尼克福瑞局长在和全世界领导人争论的时候，其实都是 Perception 的设计师在背后加班熬夜。当蜘蛛侠在设计战衣的时候，也是 Perception 的设计师建模渲染，并且操控哪些全息影像，而真正决定瓦坎达技术风格走向和未来感是否充足的，同样是 Perception 的工作人员。根据他们创意总监 John LePore 的说法：

「了解电影所处的是哪个阶段以及技术所属的阵营，对我们而言是很重要的。它是否属于军队？如果是，那么我们需要添加更加扎实和实用的感觉。它是否是量产并且市售的产品？如果是，那么它需要有更加友好的界面。它是否是钢铁侠那样专业人士所使用的设备？如果是，那么它所拥有的界面就会高度的个人化。」

案例研究：Tony Stark 的界面设计

钢铁侠打开了太多的标签页

钢铁侠 Tony Stark 是亿万富翁，天才发明家，花花公子，也是慈善家，但是他同样是一位专业的用户界面和用户体验设计师。他设计的界面是适合他自己的，并且有着非常具体的需求，但是由于他本身同时也是科技企业的负责人，这也意味着他所设计的界面会在更广阔的世界当中使用。

接下来，我们按照时间顺序来看看 Tony Stark 的用户体验设计，以及它们在漫威宇宙中的演变。

钢铁侠1（2008） 除了制造 MK I 的阿富汗山洞，这是 Tony Stark 的工作区域技术含量最低的版本。很多跑车被放置在这里，桌面上的 Mac 显示器显示着繁复的界面，他可以透过语音来命名人工智能 Jarvis 辅助操作：

他还有一支笔一样的交互工具，方便他将屏幕上的设计文件直接拖放到桌子上，以全息影像的方式呈现，并且可以与之交互：

在 2023 年这种技术还无法实现。而其中最科幻的部分，就是他可以直接用手抓取，或者将特定的组件挑选出来，揉碎删除。

Tony Stark 的这种展现方式，和如今的 HoloLens 2 在 AR 触觉领域的探索类似，也许我们和这样的交互方式已经非常接近了。

钢铁侠2（2010） 在第二部当中，Tony Stack 在国会听证会上，突然拿出的全透明手机，同样出自 Perception的设计，而这种想法也一度让现实世界中的科技企业感到兴奋，三星甚至专门参考电影中的内容，起草了一些关于透明手机的专利文件。

在这个场景中，Tony 使用这个手机直接入侵了现场的电子设备。

Perception 设计了一款带有透明玻璃的咖啡桌，Tony 轻拍两下即可启动，整个交互逻辑和我们日常使用触摸屏是高度一致的，滑动，缩放，虚拟键盘，当然，还有典型的蓝色透明界面：

其实这类投影触摸屏本身并不算什么新鲜技术，它们可以使用摄像头、AI 感知来确定指尖的位置。另外，在发现新元素的场景当中，Tony 大量使用了手势交互来操控立体全息影像：

钢铁侠3（2013） 在《钢铁侠3》当中，传统显示器彻底被淘汰了。Stark 的实验室中，所有的信息呈现都已经使用全息影像了。这使得 Jarvis 所控制的投影区域比以往任何一部都要大。

在这一部当中，Stark 使用全息影像重现了整个爆炸犯罪现场，在此过程中，Tony 穿行在全息影像中，使用极其详尽的数据分析寻找线索，找到罪魁祸首，他甚至不得不跳到工具箱的顶部，才能鸟瞰整个镜像，与此同时，大量的辅助信息的窗口、新闻报道和数据在空中交错，提供信息支持。

使用整个房间来作为全息影像的载体是惊艳的，我们没有除此之外更好的范例，这中技术也许可以借助如今的虚拟现实技术来进行类比，但是全息影像无疑更加惊艳。

复仇者联盟（2012）之后 进入新阶段之后，Stark 大厦当中每个屏幕都已经是交互式的全息影像了。即使是离开自家实验室，在神盾局的天空母舰上，基于透明屏幕的平面全息影像也无处不在。

近期上映的《黑豹2》当中，Shuri 的实验室里面也全都是全息影像，有2D的也有3D课交互式的。

瓦坎达的普通民众使用的个人终端也不是我们熟知的智能手机，他们使用的是 Kimoyo 念珠手串，接听电话进行沟通的时候，这个小巧的念珠会让信息以3D全息影像的形式呈现出来。

为什么好莱坞偏爱全息影像

《银翼杀手2049》中的超大型全息影像

电影当中为什么会使用全息影像和透明界面？问题的答案其实是显而易见的。全息影像在体验上更加直观，比起在手机上来回切换要更加令人愉悦，即使沟通的对象和你不在一个星球上，也同样可以面对面地进行沟通，这种无视空间且直观的沟通方式，毫无疑问是炫酷的。

为什么是透明的界面和蓝色的光影？除了因为本身看起来足够具有科技感，而且也便于拍摄。但是从用户体验的角度来审视，全息影像受到如此青睐也是符合逻辑的。

这种科幻美学符合预期 不管全息影像在好莱坞是如何衍生出如此多丰富多彩的呈现，它现在已经成为了未来技术的一个代名词。《银翼杀手》《星际迷航》《阿凡达》全都是针对未来的幻想，科幻作品所描绘的未来生活方式，无论好坏，都已然成为客观存在的、大众对于未来的共同想象，它们就是我们对于未来的期许。Pamela Sargent 将这种现象称为「思想文学」，这些虚构发明一直被我们重述，我们才能不断想象、发明和验证，将之带入现实。

不受传统屏幕限制 Tony Stark 在电影中使用全息影像的妙处在于，所有的界面几乎已经不用受到传统屏幕的限制，除了可以随意变大变小，它们还能脱离传统屏幕的存在，被拖拽出来，在全息影像中，随意放置和缩放 ，这也是为什么 Tony 可以肆无忌惮地打开如此之多的界面窗口。

而立体的全息影像则开辟了新的可能性。如果我们都可以像瓦坎达人一样使用全息影像聊天，那么原本高度依赖线下执行的任务，很大概率可以在线上完成了，比如购物。相比于使用 VR 和 AR 来预览商品和效果，全息影像所提供的效果会更进一步，这才是真正革命性的变化。而在《钢铁侠3》中，Tony 借助全息影像查看犯罪现场，就是立体全息影像的绝佳演示。

值得一提的是，即使最终能落地，全息影像并非全是优点，有很多务实的问题有待解决。

透明度界面其实有问题 通常，我们认为内容通透干净清晰是一个优点，但是全透明的载体，无论是2D的屏幕还是3D的空间之下，所有的信息都是一览无遗的，毫无隐私可言，无论你在做的是什么事情，都会彻底地向所有人展示。除此之外，这种高度通透的视觉信息，有很大概率会造成视觉疲劳，在光照充足的区域，全息影像要如何呈现，同样是一个非常具体务实的问题，如果无法解决高亮度情况下的信息呈现，那么全息影像就只能存在于暗室当中了。

针对全息影像优化 如今依然有网站还没有针对移动端屏幕进行优化，甚至没有针对如今流行的高清屏幕进行优化。在全息影像开始发展、走向民用之后，会逐渐开始形成设计标准，那么咱们的数码设备、网站、内容都需要在这个标准下有意识地兼容才行。

手势交互的遗漏 全息影像是需借助手势来进行交互的。但是，我们目前尚且没有掌握所有的 iPad 手势，又谈何全息影像的交互呢？如果这项技术最终在现实世界流行开来，那么我们需要面对它相对陡峭的学习曲线。与此同时，即使具备了成熟的全套交互操作，能够像 Tony Stark 一样进行交互的人毕竟还是少数，多数人可能依然需要借助一些工具来更好地和全息影像进行交互，包括但不限于键盘和鼠标这些传统的交互工具。

结语：全息影像是未来吗？ https://image.uisdc.com/wp-content/uploads/2023/02/2466635606.mp4

 

电影中一直在使用平面全息影像和立体全息影像，因为它们在大荧幕上看起来很赞，为用户提供了颇为不错的视觉享受。这种交互式、透明的蓝色界面已经透过好莱坞，成为了未来设计的代名词。如果科幻作品代表了我们对于未来的愿景，那是不是全息影像就是设计的未来方向？

或许是。从我们目前在 VR 和 AR 领域的探索来看，用户的确非常想触摸虚拟屏幕，用户也想像 Tony Stark 一样操作虚拟物品，就像我们上面提到的 Microsoft HoloLens 2 那种混合现实交互的前进方向。实际上，现在的技术人员也在尽力借助产品来弥补虚拟环境下的感官体验，对于如今的 VR 设备而言，手持控制器是必不可少的，用户要靠它们获得触觉反馈。

当下我们所拥有的技术是远落后于科幻作品的，但是指向这个方向的研究，是一直在推进的，起码我们现在已经攻克了一部分全息影像的可用性问题。

早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的运营设计出发，分析运营设计师如何通过设计语言去帮助运营活动提升数据的思路与技巧。拓展阅读：如何高效完成运营设计？

早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的 运营设计 出发，分析运营 设计师 如何通过设计语言去帮助运营活动提升数据的思路与技巧。

拓展阅读：

如何高效完成运营设计？大厂高手总结了这3个方面！ 前言 在现如今的社会中，每天都有各式各样的商战。

阅读文章 >

什么是好的运营设计？ 对于很多设计师来说，设计的好不好看？风格独不独特？专业表现力如何？在设计领域里有没有开创先河？可能是更看重的。而对于业务方来说，活动的数据好不好？市场反应如何？能否在此成功案例基础上建立一个成功的商业标准？是业务方更看重的。

设计师追求的是运营活动的设计品“质”，而业务方则更追求的是运营活动数据“量”，各有侧重点，但如果只纯粹的追求一面，那肯定是不确切的。好的运营设计，应该是“质”和“量”两者兼具，在保证设计专业性的同时运用视觉语言吸引用户参与活动，达到多流量、多曝光、多转化等目的，从而帮助业务提升商业价值，才称得上好的运营设计。简单讲，有“质”有“量”的设计才是好的运营设计。

运营设计应该关注哪些数据“量”？ 正常的 DAU、MAU、CTR、CVR、GMV，我们都需要理解这些数据代表的含义；但有一点需要注意，数据跟设计的影响关联度到底有多大，因为有的数据不一定是设计改动就会带来的，而是诸多其它因素变动导致的。那影响活动数据“量”的因素有很多，如投放渠道、投放时间、活动成本、产品价格，口碑、玩法以及页面的适配性、流畅度等等都有关系。

常见 数据指标 ：

用6个章节，帮你掌握常见的数据指标和数据分析模型 一文读懂设计师应该懂的数据指标和数据分析模型。

阅读文章 >

举个例子，用户的活跃数据，比如日活 DAU 与月活 MAU，往往跟内容与服务本身的质量有关系。设计很难影响到活跃度，用户并不怎么会因为你的设计，而特地跑过来瞄两眼，除非你的设计也是属于内容的一部分；所以这块需要你自己多想想，把其中的因果关系梳理清楚。所以，我们的更多精力，往往可以放在点击率 CTR 上，这个才比较能代表，你的设计是否能吸引到用户点击，是否能吸引到用户进入详情页消费。

那是不是提高了资源位/落地页的点击就一定能提高业务转化？

并不是，提高点击可以说是变相提高了曝光，意味着有更多的销售机会，但下单转化是受很多方面的因素影响的，单纯提高点击其实不一定能提高销售转化，但正如上所述，我们能通过设计上的一些小小的“技巧”来帮助业务创造更多的机会，正是我们运营设计的价值。所以对于运营设计来说，着重需要关注的是前两层，资源位和落地页的点击率 CTR。那今天我就举几个小例子，分享一下帮助业务创造更多机会的设计小技巧：

资源位 1. 版式结构

针对 banner 图中，左边放文案/商品哪种点击更好而进行测试

测试结果显示手机类新品广告是左边放商品，右边放文案的效果更好，具体原因是什么？我们可以先看看其他类目的测试情况。

其他类目包括美妆、家具以及虚拟类等等，均是左边放文案，右边放商品点击更高，这时我们再看看具体原因究竟是什么。

首先有一个前提，人类的阅读惯性是从左至右、从上至下的一个过程。对应我们的 banner 来说，自然是左边区域的信息更容易被用户接收得到。基于这个前提，我们再看回案例。

以上数据内容引自分期乐广告研究所

首先左边是推新品手机的广告，手机类有什么品牌，有什么新品上市，关注这块的用户都比较了解（品牌方早已有铺天盖地的宣传），这时先看图就知道是不是他们所需要的，也就是说左边放商品的识别成本更低，于是点击会更好；而其他类目或卖场活动由于品牌十分繁杂，缺少知名爆款，用户其实是很难会被商品图吸引的。用户更多是先看有什么优惠，然后再进去看看有没自己喜欢的，这时候左边放文案的识别成本更低，点击也就更高。因此不同类目的用户诉求不同，应根据用户的需求来决定版式形式。

2. 设计形式

之前商旅有一个系列化的运营活动-差旅图鉴城市篇，会根据不同城市属性，介绍优质的酒店内容，引导用户预订。为了能体现系列化，在设计上，采用相同的设计风格，以此来帮助用户培养活动心智。

广州篇上线之后，点击率不错并高于平均点击。但当北京篇上线后，数据呈现下滑趋势，而且低于平均数值。在合肥篇上线前，复盘了数据回落的原因：

1）视觉较为相似，容易引起用户视觉疲劳。

2）城市名太小，用户容易忽略，以为是同一个活动。因此合肥篇 banner 在设计形式上以极简的文字放大并突出城市名字再加上醒目的按钮来测试点击效果。

没想到合肥篇上线后，点击率飙升，并超过之前其他城市篇的点击数据，大大超出预期。当资源位点击率遇到瓶颈的时候，不妨试试改变下设计形式，说不定是一个突破口。

3. 动效

在实践中我们发现，用户对动态的元素关注度是最高的，其次是色彩最后是明度。

通过合理的优先级规划，可以有效的吸引用户注意力，让他们关注设计师想让他们关注的东西。在 banner 中，行动点按钮优先级最高，所以可以采用动态按钮，成为用户最关注的东西引导他点击。

我们在携程商旅的入口进行动效按钮的首次尝试，通过和过往 banner 平均点击率对比，动效可显著提升点击率。

落地页 在设计移动端的落地页面时，一定要注意首屏主图高度的设置。常规的主图一般高度都定在 600px-750px 左右，余下一屏能展现的内容区域有限。如果将头部高度缩短，从而用户也可以在首屏看到更多信息，引导用户有兴趣向下滑动。于是我们将主图高度缩减到 550px。

2. 分割线符号化

视觉分割线是一种布局元素，有助于将主图和内容区清晰划分。使用分割线的目的在于使布局变得清晰，更易于用户理解。我们将携程商旅的 logo 为基础图形进行创意演变，和分割线相结合，为品牌营销传播制造抓手的同时也能和其他竞品产生视觉差异化。

3. CTA 按钮位置

CTA，Call to Action，行为召唤，是一种营销术语。用普通人类语言说，就是通过一些形式（通常都是按钮）让用户采取下一步行动，通过提升点击率来进一步提升转化率。能够为产品带来正向价值的按钮（关注、支付、下单、订阅等）都是 CTA 按钮，因此，作为页面中的 CTA 按钮，优先级是最高的。

根据@Josh Clark 屏幕拇指原则，将按钮放在屏幕底部可以有效降低点击行为所消耗的成本。通常一屏内无法放满所有的内容，如果放在第二屏甚至长图末尾，对点击来说是大打折扣的。所以对于 CTA 按钮，一般都采用吸底处理。

3 月底上线的促开通「对公支付」的活动上，我们按照以上三点设计策略进行了落地页规范化设计，并在 CTA 按钮上增加了动态的效果有效的吸引用户注意，帮助页面提升点击率。

如何提高CTA按钮的点击率：

学会这3个方面，帮你提高CTA按钮的点击率 怎样设计 CTA 按钮，能够增加点击率和转化率呢？

阅读文章 >

落地页设计，常见的页面信息结构：主图+内容区，主图：主副标题+氛围图；内容区：模块平铺/叠加，做设计之前就需要对页面中的内容进行布局的规范化，包括 logo 位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，给用户带来一致体验和品牌感知。

呈现效果

写在最后 无论是用数据指标做效果衡量，还是用数据指标进行问题判断和原因锁定，客观公正的态度和科学的实验方法都是最重要的。

数据相关的知识体系非常复杂，甚至需要有专职的数据分析师或用户研究员参与，文中列举的是一些基础的数据分析，或许不太全面，也是个人阶段性的心得总结，不足之处请多包涵，欢迎大家一起讨论。

欢迎关注作者微信公众号：「TripDesign」