编者按：交互设计中如何让用户等待时不焦虑？本文总结了3种压缩客观等待时间和9种压缩主观时间的设计策略，内容极为全面，建议收藏。更多相关干货：通过3种状态+5种模式，帮你掌握加载设计的知识点大家好，我是 Clippp，今天为大家分享的是「加载状态分析」。

编者按： 交互设计 中如何让用户等待时不焦虑？本文总结了3种压缩客观等待时间和9种压缩主观时间的设计策略，内容极为全面，建议收藏。

更多相关干货：

通过3种状态+5种模式，帮你掌握加载设计的知识点 大家好，我是 Clippp，今天为大家分享的是「加载状态分析」。

阅读文章 >

之前我们介绍了用户情绪随等待时间的变化曲线：

图 1 用户情绪随等待时间的情绪变化曲线

这条曲线明确地告知我们：等待时间越长，用户情绪越负向。

行为生物学家指出：人和大多数动物一样，都偏好即时满足，天生不愿意等待。随着等待时间变长，用户会逐渐开始焦虑、烦躁，愤怒，甚至摔手机，从而降低对产品整体的评价。

在讨论设计等待策略之前，我们先回到等待的源头，看看等待是怎么产生的？

图 2 等待出现的原因

用户与软件产品交互后，前台需要将交互行为和数据传输给后台，后台经过计算后，再将相应的数据传输到前台，经前台刷新后呈现给用户。

如果我们把用户跟产品交互的时刻当做开始时间，把数据传到后台计算后再传送回到前台刷新的时刻当做结束时间，这两个时刻之间的时距就是客观等待时间，它是可以用计时器精准测量出来的，具有客观性和确定性。

图 3 等待时间的示意

与此同时，在操作开始和信息反馈结束之间，用户并不会拿着计时器来测量，而用户心理所感知到的等待时间就是用户的主观等待时间，主观等待时间具有主观性（因人而异）和伸缩性（可能比客观时间长，也可能比客观时间短）。

那么，回到我们的主题，为了让用户等待不焦虑，我们可以从两大维度出发：

 压缩客观等待时间 压缩主观等待时间

图 4 如何设计等待的 2 大维度

来达成缩短用户等待时间感知的目标，让用户等待不焦虑，下面我们就逐一来看。

一、如何压缩客观等待时间 一方面技术团队深入钻研，调整算法和信息传输方式，努力让客观等待时间变短。另一方面可以依靠 3 大设计策略：预加载、保留缓存和先行呈现，来减少用户操作后的客观等待时间，这三大策略的实现逻辑如下图：

图 5 压缩客观等待时间的 3 大策略

1. 预加载少等待

对于信息流类产品而言，预加载是非常普遍的一种设计策略。

当用户浏览信息流列表时，随着列表内容的曝光，通常还未展示到最后一条时就会提前加载下一刷的内容，给用户的感受是列表内容源源不断，用户压根感知不到列表的加载过程（如果非正常浏览，手势快速滑动还是可以看到加载状态的）

图 6 预加载少等待的案例

除了列表内容预加载外，信息流类产品通常还会预加载详情页的文本。以今日头条为例，我在浏览信息流列表时断网，上滑依然可以看到预加载的文字列表，点击有图片的新闻，还可以看到详情页的正文，这都是预加载的内容，预加载可以帮助用户实现少等待甚至不等待。

2. 保留缓存免等待

对于用户查看过的内容，保留缓存可以让用户再次查看内容时免等待。

对于刷新频率较低的内容，我们完全可以采用保留缓存的形式来避免用户等待。这个在客户端上是非常常见的设计策略，但在网页中却非常鲜见，很多浏览器每次打开网页都需要重新加载。

设想一下你正在浏览一个网页内容，不小心左滑退出了，不仅要再次点击等待网页加载，而且还要重新滑动来定位原来浏览的内容位置，这是一个多么糟糕的体验。

图 7 保留缓存免等待的案例

今日头条的搜索结果页，部分结果是保留了详情页缓存的，即使断网，也可以再次访问（但访问过的链接却没有已访问的状态变化，不易识别和定位，体验有待改善）

3. 先行呈现免等待

对于一些内容发布类的场景，还有一种常见的设计策略是：一键发布并先行呈现内容，然后后台默默地传输数据，避免卡在发布状态造成用户等待。

图 8 先行呈现免等待的案例

以微信朋友圈和信息发送为例，即使断网，依然可以发布图文或者发送消息并展示在相应的窗口，然后后台默默上传，只要在几分钟内有网就能上传成功。这种先行呈现的设计策略就把加载留给了后台，无需用户等待，当用户网络较慢或者网络较差时，体验会很顺畅。

二、如何压缩主观等待时间 在现实产品设计中，除了上述场景，还有很多其他场景，由于种种限制性因素，客观等待时间往往难以压缩，或者压缩成本过高，所以压缩用户等待时间更依赖于压缩用户等待的“时间感知”，也就是主观等待时间。

根据诺曼在《如何管理复杂》书籍中提出的排队等待 6 原则，以及李爱梅、赵丹等作者在《等待是一种折磨？等待时间直觉及其导致的非理性决策行为》论文中总结的影响时间感知的主客观因素：

图 9 压缩客观等待时间的设计原则与影响因素

结合用户与软件产品交互的具体场景，我筛选并总结了 6 条适用于软件产品交互的 等待设计 策略（具体筛选方式我将在小课堂中为大家详细介绍）下面我们就来逐一介绍：

图 10 压缩客观等待时间的设计原则与影响因素

1. 全链路的体验设计，保持用户的好情绪

好情绪会压缩用户的时间感知。

图 11 保持用户的好情绪

用户体验是一个整体，我们不能一叶障目，只关注用户当下的等待。即使我们无法预知和改变用户使用我们产品前的情绪，也要尽量保持用户与我们产品交互的全链路操作体验，激发并维持用户的好情绪。因为拥有好情绪的用户会更有耐心和期待，会更有探索欲，能够分散注意力多关注等待之外的信息，从而压缩等待时间的感知。

2. 告知等待原因，让等待看起来合理

合理的等待理由，会延长用户等待时间的预期

图 12 让等待看起来合理

反之，不符合用户预期的等待，会拉长等待时间感知。随着硬件设备的升级和网速的提升，多数人机交互反馈都是即时的，如果出现较长时间的等待（时间≥5秒）或者出现相对更长的等待时长，就需要给用户一个等待的理由：

比如：排队人数太多、参与人数太多、所获取资源较大、当前网络较差等等。这些理由能让用户理解并认同等待，避免负向情绪的产生。

3. 告知等待时间，给予用户掌控感

不确定的等待时长，会拉长用户的时间感知。

图 13 告知用户等待时间

人们偏爱确定性的等待时间。如果给等待中的用户提供等待时间相关的信息，他们感知到的等待时间会短于客观等待时间。因为在确定时间的等待情境下，人们可以较好的规划时间，增加对时间的有效利用，减少由于等待导致的负面情绪。 反之，如果用户对等待时间相关的信息一无所知，他们感知到的等待时间会长于客观等待时间。因为不确定的等待时间会降低用户的控制感，增加潜在的经济成本和心理压力。

所以为了给用户掌控感，压缩用户的等待时间感知，我们要尽量给予用户明确的时间点、时间范围、加载资源进度等时间相关信息。

4. 填充相关有用有趣内容，让用户保持忙碌

让用户保持忙碌可以压缩用户的等待时间感知。

图 14 填充相关内容

研究表明：人们感知到的未被占用的时间比被占用的时间更长。

所以在用户等待的过程中，我们可以多提供一些有趣有用的内容，占据用户无聊的等待时间，分散他们对等待时间的注意力，从而减少他们的等待时间感知。

休斯顿机场案例：

休斯顿机场不断收到乘客投诉，抱怨取行李的等待时间太长。高管们为此增加人手处理问题，把平均等候时间降低到了 8 分钟，远低于行业标准，但顾客投诉并没有减少。

再次分析发现：乘客们从下飞机的站门走到取行李处只需 1 分钟，需要等待 7 分钟才能拿到行李，也就是 88%的时间是在等待。所以机场的处理措施不是继续努力减少用户等待时间，而是把站门换到离行李传输带更远的地方，这样用户需要花 7 分钟走过来，再用 1 分钟等待行李。虽然取行李的总体时间没有变，但这种设计方式却让乘客投诉率几乎将为 0.

镜子电梯案例：

巴黎的一所公寓里，整栋楼只有一部电梯，上班高峰期着急上班的住户们，总是抱怨等待时间太长，甚至威胁公寓老板，如果不解决这个问题就换公寓。

但是增加电梯的改造成本太大了，老板听从心理学家彼埃尔的建议在电梯里安装了一面镜子，之后住户们的抱怨就逐渐消失了。

这两个案例都是让用户有事可做，占据他们原来单纯的等待时间，分散用户注意力，从而缩短用户的心理等待时间。

在产品设计中，设计师们最常用也最能发挥设计价值的策略就是设计填充内容，如果大家搜索一下 loading 和进度条的设计，就可以看到设计师们在这方面做了多少尝试和努力。确实设计师们在填充内容的类型、具体元素、表现形式上有比较大的发挥空间，我将在下一篇文章中结合案例为大家详细讲解。

5. 提升等待开始和结束时的体验

好的峰终体验可以压缩用户的等待时间感知。

图 15 提升开始和结束的等待体验

研究指出：人们在回忆体验时，峰值和终点的体验对决策行为的影响更大，其次是起始点。在等待期间创造惊喜峰值，或者在结束期间加快速度，或者让用户一

开始就对等待有好感，都可以压缩用户对等待时间的感知。 所以设计师们要尤其注意等待开始和等待结束的速度感设计，努力给用户一种快速的印象感知。

6. 提供超预期的服务和内容

超预期的等待结果可以压缩时间感知。

图 16 超预期的等待结果

用户体验是一个完整的链路，除了提升等待时间段内的体验外，更重要的是提供符合用户预期甚至超越用户预期的等待结果，让用户感知所有的等待物有所值。 因为等待之后的结果才是终极的结束体验，结果超预期可以有效的压缩甚至让用户忘却等待的过程。

小结 最后，小结一下，为了让用户等待不焦虑，我们从 2 大维度，提供了 9 大设计策略来压缩用户的等待时间感知：

图 17 压缩等待时间的 9 大设计策略

压缩客观等待时间：

预加载少等待 保留缓存免等待 先行呈现免等待 压缩主观等待时间：

① 全链路体验设计，保持用户的好情绪 ② 告知等待原因，让等待看起来合理 ③ 告知等待时间，给予用户掌控感 ④ 填充相关有趣有用内容，让用户保持忙碌 ⑤ 提升等待开始和结束时的体验 ⑥ 提供超预期的内容和服务 好了，如何设计等待的 9 大设计策略到这里就介绍结束了，如果大家有什么疑问，或者希望悦姐讲解新的交互课题，欢迎添加悦姐微信 yuechats，和悦姐一起学习成长~

从0到1的产品，如何一次性解决所有异常和加载状态？ 本篇文章的价值：看完之后可以独立统筹整个产品的全局设计。

阅读文章 >

参考文献

书籍《如何管理复杂》 论文《等待是一种折磨？等待时间直觉及其导致的非理性决策行为》 欢迎关注作者微信公众号：「悦姐聊设计」

前两天苹果悄无声息地上新了全新的 10 代 iPad 和新的 iPad Pro，没有发布会，但是依然相当惊艳！入门款的 iPad 终于换上了直角边的新设计，套上了 iPad Air 的皮，四色外观明快讨喜，不到 4K 的价格而且可以搭配最便宜的初代 Apple Pencil，简直是要将性价比进行到底！iPad P...

前两天苹果悄无声息地上新了全新的 10 代 iPad 和新的 iPad Pro，没有发布会，但是依然相当惊艳！

入门款的 iPad 终于换上了直角边的新设计，套上了 iPad Air 的皮，四色外观明快讨喜，不到 4K 的价格而且可以搭配最便宜的初代 Apple Pencil，简直是要将性价比进行到底！

iPad Pro 则升级了性能更强的 M2 芯片，而且为 Apple Pencil 追加了更加直觉自然的悬停交互！不仅可以让 Apple Pencil 悬停预览项目，而且还能更加便捷地提升手绘的体验！插画师在下笔之前，可以预览你的画笔笔触大小、透明度，同时可以借用另外一只手，单指调整或者双指缩放：

而 iPad Pro 的大屏幕输出和前台调度则让你可以在更大的屏幕上进行创作：

无论预算高低，总有适合你的 iPad 和 Apple Pencil，而距离彻底释放你创造力的，是一套手绘的技法和正确的创作姿势，而这些，正好是我们能提供的：

也许你已经在很多地方看到过闫老师的创作，这些保留笔触、色彩大胆、风格独特的作品，大部分作品是花了一两个小时就完成的速涂作品，而且全部都是在 iPad 上完成的。

如果你正好有 iPad 让它不再只用来看视频，或是准备下单最新款的 iPad 并且像插画师一样释放自己的创作力，让 iPad 价值翻倍，不妨加入这一期的速涂特训营：

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

一、为什么「iPad 速涂特训营」能让你爱上画画？ 闫老师并没有刻意去「坚持」画画，而是这种创作方式实在是太适合创作了：

超快：碎片化的时间就能涂抹，一个多小时就能完成创作 系统：启发式教学，你不仅会掌握软件的使用、绘画的技法，而且会被传授感知的方式、观察的要义、归纳的秘诀以及创意的思维 轻松：不用拘泥于场合，或站或坐或躺，怎么舒服怎么画，见缝插针随意涂抹 好学：抓住几项核心的训练内容就能创作，绘画对象随处可见 而学员反馈也正好体现了这一点：

左：专项有点像小游戏，做起来轻松，但收获很大

右：零基础开始画，在老师的鼓励下能自主完成速涂

注：以上学员反馈真实可查

更具体的说，这套课程的设置，就是循序渐进地带你进入创作的状态：

二、从零基础到速涂达人的全方位拔高！ 在这门 iPad 速涂特训营里，你可以收获到的不止是可以实时问答的直播教学，典型作业的点评修改，更有超多的速涂干货，包括不限于：

1. 六大插画实战案例手把手带练教学

课程实战案例囊括了多种插画风格，绘制类型也从建筑、植物、食物、光影到场景，逐步提升手绘水平。

2. 一套速涂练习的通用核心方法

如何观察画面才能把握正确的画面层级？ 如何快速概括形体才能又快又准？ 短时间内怎么塑造光影，构建层次感？ 这也是很多同学给满分的原因，干货超多：

注：以上学员反馈真实可查

3. 四大速涂专项训练

七巧板造型训练 主观色彩训练 黑白两分叠加训练 细化优化训练 4. 热门手绘软件 Procreate 快速上手指南

以前没接触过 iPad，不会使用 Procreate 也不用担心，我们有单独一节课来讲解软件基础和核心操作。（注：Procreate 是付费软件，需自行购买）

5. 老师私藏 iPad 绘画笔刷

所有参加课程的同学都可以免费领取石头老师的私藏笔刷。

6. 结课后免费加入速涂打卡小分队，继续学习进步

结课后大家可以参加闫实老师的打卡小分队，与一帮热爱速涂的同学一起，不断提高绘画水平。

不仅很多师兄师姐在打卡群里等你，还有二刷的同学：

注：以上学员反馈真实可查

更多的干货不一而足，直接看课程大纲最实在！

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

拟定这份大纲的闫实老师，很早就已经是 iPad 绘画圈的人气大咖了，他不仅是速涂的高手，也是高级原画师，手绘功底非常扎实，作品见真章：

闫老师速涂作品

当然，优秀的学员作品也是一抓一大把：

想跟着闫实老师在 26 天内学会 iPad 速涂，养成每天画画的好习惯，现在就抓紧啦！

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

大家好，这里是和你们聊设计的花生~10 月 18 日至 20 日，一年一度的 Adobe Max 创新大会于如期举办。在此次大会上 Adobe 展示了的多项新功能，一旦更新可以进一步优化提升设计工具的创作流程和效率，让每个创作者都能更自由精准的表达自己的创意。如 Photoshop 中的「选择对象」功能在更新后可...

大家好，这里是和你们聊设计的花生~

10 月 18 日至 20 日，一年一度的 Adobe Max 创新大会于如期举办。在此次大会上 Adobe 展示了的多项新功能，一旦更新可以进一步优化提升设计工具的创作流程和效率，让每个创作者都能更自由精准的表达自己的创意。

如 Photoshop 中的「选择对象」功能在更新后可以识别复杂的对象和区域，如天空、建筑、水、植物和街道等，即使是头发这样复杂的对象也这可以保留精致细节和边缘；Illustrator 里新增了 Intertwine 功能，能轻松实现文本与插图之间的穿插遮挡效果；而在 Premiere Pro 里，可以通过"自动调色"对视频进行色彩校正。

Photoshop 更新后的对象选择工具可以挑选出复杂的对象和区域

Illustrator 中的 Intertwine 使其能够轻松实现不同元素间的穿插效果

Premiere Pro 里的"自动调色"功能对视频进行色彩校正

上面这些功能虽然令人兴奋，但更令人期待的是 Adobe 宣布正在研究将备受瞩目的生成性人工智能（Generative AI）技术整合到其设计工具中，也就是说以后在 Ps 等设计工具里也可以实现智能绘图修图。

提起 AI 图像生成技术，我之前也已经为大家推荐过很多相关内容了，如 DALLE 2、Midjounery 和 Dream Studio 等。它们今年以来非常热门的 AI 图像生成工具，可以根据文本提示生成高精度的图像、修改替换图像内容或在原有图片的基础上延展外绘或者生成相似的变体。

使用 AI 工具 Midjounery 生成的图像，从左到右作者分别为 @22th_c.painter 和 @gizemuzunoglu__  

AI 工具 Dream Studio 可以根据文本提示修改图像内容

了解更多有关 AI 图像生成工具：

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

AI绘图神器Dream studio又出黑科技！以图绘图、智能改图终于来啦 大家好，这里是和你们聊设计的花生~ 8 月的时候向大家推荐了一款 AI 图像生成工具 Dream Studio。

阅读文章 >

在此次 Adobe Max 2022 中，Adobe 向我们展示了生成性 AI 技术在 Photoshop、Adobe Express 和 Lightroom 里的应用效果。

①人工智能技术在Ps里的应用

利用 AI 生成技术，我们可以以文本描述的方式，在 Ps 中为图像中添加新对象、无痕消除元素以及修改内容。从下方的官方演示视频中可以看到，通过框选图像的某一部分并输入文本提示，ps 就能自动在对应区域生成一只猫头鹰的形象，并且有多个不同的形象可供选择，AI 生成的图像元素与图片整体的融合效果也很好，没有突兀的感觉。

此外还可以根据图像内容向外延展绘制内容：将画布拉伸至比原本的图像更大，然后输入文本提示，Ps 就能在空白区域智能生成对应的内容，与原图像完美衔接，效果非常惊人。

② 人工智能技术在Adobe Express里的应用

Adobe Express 是一个拥有大量专业设计的模板和资源的在线设计工具，可以快速创作出社交媒体图片、图标等，与 canvas 类似。

Adobe Express 的界面

在官方展示的演示视频中，通过结合 AI 技术，创作者可以用文本提示在 Adobe Express 中生成设计模板，或在场景中添加元素，甚至直接用文本描述生成文字特效。这样既提高了设计效率，也避免设计结构千篇一律的问题。

③ 人工智能技术在Adobe Lightroom里的应用

通过结合 AI 技术，创作者还可以在 Lightroom 把照片由白天的场景改为夜间；改变照片的环境内容，如背景和阴影细节；甚至可以根据真实照片自动外延，生成原本没有拍摄到的内容，且与原图像的内容完美融为一体。

其实 AI 技术从很早开始应用到设计工具中了，给我们的设计工作带来很大的便利。像之前和大家提到过专门出设计神器的公司 Clipdrop，它就是利用 AI 技术，实现了快速精准抠图、智能识别修图、图片高清放大和智能立体打光，让设计师可以从重复繁琐设计工作中解脱出来，一些原本不可能实现的后期特效也能轻松实现。

Clipdrop 的智能抠图效果展示，亲测效果非常好

了解 Clipdrop 出品的设计神器：

扣头发丝不留痕！最新免费抠图神器 ClipDrop Remove Background 来啦~ 大家好，我是和你们聊设计的花生~ 随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。

阅读文章 >

照片没有氛围感？快来试试这款打光修图的神器「Relight」 大家好这里是和你们聊设计的花生~ 在人像摄影中，灯光设置是非常重要重要的一环，好的打光能丰富画面层次，提升整体情绪氛围。

阅读文章 >

现在 Adobe 也开始将 AI 图像生成技术整合到自己的设计工具中，相信一键抠图、智能修图这些之前需要在独立工具中实现的效果也能在 Ps 等工具中直接完成，我认为对设计师而言这肯定可以节省很多精力。

除了通过文本描述生成、修改图像，Adobe 还相信 AI 技术在视频、3D 设计、纹理创作、标志设计等方面也可以起到作用。这意味着除了前面提到的 Photoshop、Adobe Express 和 Lightroom，Adobe 家族里的 Ai、Ae、Substance 3D 甚至是 Figma，将来都有可能借 AI 强大的创作能力，实现更多令人惊喜和震撼的设计效果。

对于这一未来可能出现的情况，身为设计师的你觉得是好事还是坏事呢？你觉得现在用的设计工具中，哪些功能是最需要 AI 来替代和优化的呢？我在「优设问答」栏目里专门发表了一个提问，欢迎大家点击下方链接进入问答，表达自己的看法和观点。

「问答链接」 https://www.uisdc.com/talk/121207479566.html

好啦以上就是今天的内容，觉得有用的话记得点赞哦~ 有关本文或设计的问题可以在评论区提出，我会第一时间为大家回复。

参考资料

https://www.jianji666.com/287799.html Bringing the Next Wave of Artificial Intelligence to Creative Cloud | Adobe Blog https://www.dpreview.com/news/1395223461/adobe-max-2022-major-updates-to-lightroom-photoshop-plus-more-on-adobe-s-ai-future 推荐阅读：

效率翻倍！10个人工智能设计神器和素材生成工具 越来越多的人工智能服务正在出现，但是这些人工智能不应该成为设计师的「竞争对手」，用好这些服务相反能够帮助设计师事半功倍地完成设计，搞定项目，解决问题。

阅读文章 >

编者按：B端设计师如果想了解客户关系管理CRM产品，这篇堪称保姆级教程了。从定义、作用、业务、流程到页面，5个完整章节深度解析CRM产品。更多B端干货：B端设计长文！

编者按：B端 设计师 如果想了解客户关系管理CRM产品，这篇堪称保姆级教程了。从定义、作用、业务、流程到页面，5个完整章节深度解析 CRM产品 。

更多B端干货：

B端设计长文！深度分析桌面端与移动端的设计差异 编者按：B端设计中，桌面端与移动端究竟差别有多大？

阅读文章 >

在我们平时的沟通交流过程当中，经常会提到这个词，但是对于 B 端产品的具体划分，其实也会不尽相同。比如对视觉、交互的要求都会比较高的项目协同类产品；也会有对业务、交互要求更高的垂直业务型产品。

不同的产品，对于页面的模式、表现上都会有明显的差异，今天我们就来聊聊客户关系管理系统。

一、定义 CRM 的全称为客户关系管理系统，是 Customer Relationship Management 的缩写，顾名思义就是提供给销售人员进行使用的管理系统，来帮助销售人员管理他手下的客户。从产品类型来看，CRM 产品是属于垂直业务型的产品，主要是为各行各业的企业，提供管理销售的服务。

当然在 CRM 产品当中目前主要分为两个赛道，分别是以：Salesforce、纷享销客、销售易、悟空 CRM 为首的管理型 CRM，它们最为主要的功能是管理客户，也就是将销售人员手中的客户，通过公司的 CRM 系统进行统一的管理，能够保证企业的权益不会受到伤害。

而另一个赛道则是 SCRM，这应该算是国内比较火的新名词（其实也出现了很长一段时间了），它的全称是 Social Customer Relationship Management 也就是社交化客户关系管理系统。主要典型的产品包含：EC、尘锋、探马、微盛 等等…

如何去理解 SCRM？

比如我们现在日常沟通、获取信息，会从以前的传统媒体像是 “电视、报纸、收音机” ，逐渐迁移到 微信、知乎、小红书、抖音 等等，而这些社交媒体上我们的各种喜好、最近发生的事情，都能够在 SCRM 当中展示，并且他可以根据你的喜好，来与你进行沟通进而帮助它进行获客、成单。

比如今天我想买 Figma，然后我又在微信朋友圈当中吐槽 Sketch 很卡，那作为销售的你肯定会给我推销说，咱们 Figma 一点也不卡。当然 SCRM 的功能还会有很多，由于篇幅有限，我们目前分析还是以 CRM 为主，再加上 SCRM 篇幅太大，后面在做分析。或者是有在这些行业工作的小伙伴，可以在评论区进行补充。

二、作用 想要了解 CRM 产品究竟能够给用户带来什么作用，我们今天换一个视角，来说说如果企业不使用 CRM，会有哪些后果。

1. 客户安全性很难保证

因为在传统的销售业务模式当中，销售人员可以与客户直接进行对接，企业无法对销售进行合理的管控，所以经常会发生客户跟着销售“跑了”，也就是销售离职，带走了之前他负责的客户。这个时候你作为企业老板即没有掌握客户的基本信息，同时对于这位客户的经历也不了解，这样很容易就会流失一个客户。而客户对于企业来说至关重要，因为每一个客户都是企业通过运营人员沟通获取来的，因此企业的客户安全性无法得到保证（这也是为什么很多企业选择使用企业微信而不是个人微信的原因）。

2. 数据信息不够统一

一个销售获客的渠道有很多，其中包含名片、微信推荐、电话分享 等，而这些客户信息，如果不统一管理，就会变成一个个孤岛，对于企业的日常管理是非常麻烦，无法全局监控。

当然企业也可以将数据统一放在传统的 Excel 表格当中，但是表格传播过于简单，风险太大，并且无法去做协同，一旦后续数据增多也会导致整个管理非常的混乱，不能分权限将企业的所有客户统一进行查看。

3. 难以建立良好的客户关系

传统方式管理客户的时候，销售人员对于客户印象主要来自 之前的微信聊天记录以及朋友圈，而想要深入了解这位客户的具体信息、具体对接的联系人、以及公司的具体规模，就可能会因为时间的关系而忘记，因此传统的方式无法追踪客户，将客户的资料统一整理。

4. 销售难以管理

对于企业的销售人员来说，他们的工作常年在外，因此企业很难对手下的销售进行管理，比如想了解员工今天的工作情况，又或者是员工的后续工作安排。之前企业都是通过收集员工每日工作汇报来判断，依旧很低效率。

CRM 系统可以连接日常工作和业务，在辅助销售人员完成工作的同时，也完成了对信息的收集，管理者可以清晰地看到该客户的跟进记录，以及重点客户员工是如何跟进的，提高了管理团队的洞察力。

其实了解 CRM 产品的作用，最终的目的就是为了了解这款产品能够给企业带来什么价值，什么核心的能力能够驱动客户进行购买，了解了过后你才能知道这个功能带来的价值是什么。

三、业务 关于 CRM 的业务，我们主要会分为专业词汇、关键角色、流程 三个维度进行分析，我们先来了解一下常见的专业词汇。

1. 专业词汇

销售线索：销售线索是与客户初次接触获得的原始信息， 可以是从展会中获得的名片，通过推广活动获得的电话号码 ，或是会议、广告、外部购买等渠道获得的客户简单信息，然后通过管理和跟进可以转化为客户。

线索池：将线索通过按不同行业不同地区或是其它的方式组合一起，即成为线索池，如上海区线索池、北京区线索池、教育行业线索池、金融行业线索池等。

客户：客户是指有业务往来企业、团体或个人，是企业的重要资源，可以通过线索转化而来，或是销售挖掘等多种渠道获取。

公海：按不同行业不同地区或是按某种相同特性组合一起的客户分组，即成为公海，如上海区公海、北京区公海、教育行业公海等。

联系人：即与企业直接联系的客户方相关人员。如果是企业客户，联系人是您与企业联系沟通的人。如果是个人客户，联系人可以是与客户有关系的沟通联系人。

商机：商机是与客户做一笔生意的跟进过程，如果是企业客户，一个完整的销售周期大概包括产品咨询、报价、方案评估及最后的赢单或输单。

2. 关键角色

在 CRM 产品里面，会涉及到形形色色不同的人员，其中最主要的角色包含：市场、销售、销售主管、老板。

市场：主要负责整个产品的营销以及线索的分配，与 CRM 产品相关的就是会安排市场人员来与销售进行对接，将他们在官网、内部推荐得到的线索流转给销售。

销售：销售人员对于企业来说非常关键，他主要是企业与客户对接的重要人员，是这份订单是否成功的关键角色。

虽然都叫销售，但是会根据工作性质的不同，将销售分为：电话销售、产品销售与大客户销售。

电话销售：电销通常是销售当中最基础的，通常就是拿着通讯录不停地拨打客户电话，算是一个重复性非常高的职位。

产品销售：产品销售更多就是自有产品，当线索来了过后，销售人员也会与客户去电话沟通，但是沟通的目的是了解你公司的具体情况，分析是否有潜在的购买需求，后续主要任务便是促成订单的成交。

比如你们每次去试用别人的 B 端产品的时候，都是产品销售来与你对接（别以为我不知道你们每天在做什么~）

大客户销售：大客户销售顾名思义，主要针对的是企业较为重要的客户，他们在整体的决策层面链路较长、金额较大，因此会安排经验丰富的人员进行对接。

软件实施：负责现场培训、协助项目验收、负责需求的初步确认、把控项目进度、与客户沟通个性化需求、负责项目维护。总之就是你购买了产品过后，需要实施人员来进行项目落地（有的公司没有实施会让销售人员负责）。

客户成功：客户成功扮演主要是提升客户的认同感，让客户感受到使用这款产品能够给他带来价值。简单来说客户成功就是要找出客户的问题，并制定相应的解决方案，然后基于不同的产品，把解决方案落进系统。客户有问题反馈，就需要与客户成功进行对接，评判客户成功好坏的标准就是看产品的续费率。

四、流程 要了解一款 B 端产品的业务，那业务流程自然是十分重要，因为这样能够最快的了解清楚整个产品的流转方式（当然不同公司对于产品的流程不同，只是作为参考）。

在 CRM 产品当中，所有的客户都是从线索开始，因此线索是作为整个 CRM 产品的起点，也是业务流程当中的最主要一步。当然针对于线索，他最主要的特点便是线索来源，一般分为：官网、展会、朋友推荐、以及新媒体渠道当中获取到的线索（这可能就是 SCRM 存在原因）。

而在线索这里，通常系统会去自动对接官网当中的提交的表单线索，同时也会给各个员工开放自己新建线索的入口（有的企业，新增一个有效线索是有对应的提成）

当然线索在类型上主要分为：线索池、有效线索、培育线索：

线索池：就是将所有的线索都放在一个地方，方便销售人员进行选择

有效线索：有真正购买意愿的线索，通常敏锐的市场人员会从规模、电话、行业 等综合信息进行判断

培育线索：也就是客户对于这个产品比较犹豫，对于产品购买意愿不太明确，因此可以通过培育线索，让他了解到产品过后，转化为有效线索。

当你完成线索流转过后，你就会是一个商机，这也就代表着你对咱们的产品非常感兴趣，开始询问报价，销售人员就会给你去做各种各样的演示与沟通，而在每一次销售与客户的沟通情况，企业都会要求他去录入跟进信息，如果不填写可能会面临罚款的风险，然后就是销售人员一次又一次的和客户沟通，商讨价格直到客户签单，在此过程当中就会涉及到商务，然后就是 订单、合同、回款、开票 等流程阶段 来对整个过程进行统一管理，并且所有的过程都会在系统当中进行记录，直到最后的赢单，有得必有失，那后续输单也是同样，便是没有取得进展，最后以失败告终。

我们来整理一下，举一个实际例子，比如现在想要去了解一款人事管理系统，你打开了薪人薪事的官网，在他们的官网当中经过简单的了解，填写了你的企业信息与表单：

紧接着，你的信息就会给到市场人员，他们会根据你的表单信息、所在城市、公司规模 给你安排更为合适的销售人员来对你进行跟进，在跟进的过程当中就会根据你的各种 “反馈与表现” ，将你定义为各种名称 线索、商机、客户。

并且目的只有一个，就是让你购买产品，后续涉及到 订单、合同、打款 等，都属于正常流程当中非常重要的一环，直到最终的赢单与输单。

五、页面 CRM 产品当中较为重要的页面，因为作为设计师，我们最终的设计思考一定是通过页面来去呈现，而前面的整体业务模块则更多是为了理解它们之间的关系，将问题讲清楚。

1. 客户详情页

客户详情页面作为 CRM 里面最为重要的一个页面，它主要是呈现这个客户当中的所有完整信息。比如销售人员，他高频进入的页面一定是客户的详情页面，因为他想要了解这个客户，在整个过程当中了解哪些信息、想要得到什么内容都可以通过客户想以企业快速的找到。

但是由于客户详情页 页面的整体设计难度较大，会存在大量信息以及关联的内容，因此客户详情页更加考验设计师的信息处理能力。这里分享了 Hubspot、Salesforce、纷享销客、销售易、悟空 CRM 的客户详情页：

2. 客户列表页

客户列表页更多就是呈现数据，和普通 B 端产品的列表页基本相同，只是说会根据不同的产品类型有所调整。比如 CRM 产品，它更加强调的就是客户信息的快速检索以及快速寻找，因此你会发现在产品里面它的筛选功能做的非常强大。

当然关于表格的内容我们这里就不做过多的赘述，因为之前几期通用的表格文章。已经写得非常详细，感兴趣的话可以去看一下咱们之前的表格文章：

万字干货！超全面的B端设计指南：表格篇（上） 目前我主要深耕于B端设计中，深知B端表格设计与C端有很大的不同，无论是表格的展示形式以及承载内容上都有非常大的差异。

阅读文章 >

上万字干货！超全面的B端设计指南：表格篇（下） 下面的10问都是大家常见的表格问题，同时也给出相应的解决方法。

阅读文章 >

3. 跟进记录的填写

跟进记录在 CRM 产品里面是非常重要的板块，因为跟进记录也就意味着销售人员需要去反复的填写。有点像一个快速的表单让我需要把每一次我们具体聊的内容写到整个系统里面来。

通常一个销售非常规范的公司，会要求销售人员把和顾客每一次的数据都记录到跟进记录里面，因此在跟进记录当中，我们要去考虑他如何频繁去呈现，以及如何快速的去阅读。

CRM 产品对于设计师的影响

聊完了 CRM 产品过后，我们来说说整个产品会对设计师造成哪些影响，因为在整个的数据过程当中，我们需要去关注的点非常的多：

了解用户习惯

简单来说，其实 CRM 产品本身就是为销售人员服务的一种产品类型，那作为设计师了解 销售的日常习惯就显得尤为重要。虽然在文章当中已经讲的过于详细，但是你会发现，用户的习惯当中，不同的产品类型，它的日常习惯本身就会有所不同，像是 电话销售、产品销售、大客户销售、传统业务销售，其实这对于我们来说，更需要了解用户的习惯才能更好的去做设计。

懂得业务

因为 CRM 产品本身是难以理解的你，也就导致了我们作为设计师需要快速的了解业务，去懂业务究竟应该怎么去实现。比如和同事快速的沟通，进而快速掌握业务信息，又或者是寻找各种资料帮助你了解业务。那关于这些内容我们之前也有讲过，这里就不展开去赘述。

B 端设计师如何快速了解业务？先从这4个步骤做起 作为一个 B 端设计师，经常会切换到不同的业务产品线，也就会导致我们需要具备“快速了解业务”的能力，而快速了解业务的能力其实并不会在面试时进行考验，对于有了几年 B 端工作经验的同学早就已经驾轻就熟，而刚“入坑”B 端的小伙伴则会显得有些困难，我就结合自身经历说说我是如何快速了解 B 端

阅读文章 >

快速转换

CRM 本质上是一个针对于多行业的产品类型，也就导致了我们需要在设计的过程当中快速的进行切换。需要我们将用户多行业的需求进行整合，因为在工作当中你确实会发现不同的企业，他的关注点是不太一样的。那如何把这不同的关注点进行融合整理，就需要设计师充分的参与才行。

关于 CRM 产品，一直都是我的一个情怀，因为之前在这个行业呆了很久，也说的蛮多的，希望能够对大家换工作、了解这类型产品有所帮助~觉得文章不错，也别忘了点赞~

欢迎关注作者的微信公众号： CE青年Youthce

编者按：B端设计师如果想了解客户关系管理CRM产品，这篇堪称保姆级教程了。从定义、作用、业务、流程到页面，5个完整章节深度解析CRM产品。更多B端干货：B端设计长文！

编者按：B端 设计师 如果想了解客户关系管理CRM产品，这篇堪称保姆级教程了。从定义、作用、业务、流程到页面，5个完整章节深度解析 CRM产品 。

更多B端干货：

B端设计长文！深度分析桌面端与移动端的设计差异 编者按：B端设计中，桌面端与移动端究竟差别有多大？

阅读文章 >

在我们平时的沟通交流过程当中，经常会提到这个词，但是对于 B 端产品的具体划分，其实也会不尽相同。比如对视觉、交互的要求都会比较高的项目协同类产品；也会有对业务、交互要求更高的垂直业务型产品。

不同的产品，对于页面的模式、表现上都会有明显的差异，今天我们就来聊聊客户关系管理系统。

一、定义 CRM 的全称为客户关系管理系统，是 Customer Relationship Management 的缩写，顾名思义就是提供给销售人员进行使用的管理系统，来帮助销售人员管理他手下的客户。从产品类型来看，CRM 产品是属于垂直业务型的产品，主要是为各行各业的企业，提供管理销售的服务。

当然在 CRM 产品当中目前主要分为两个赛道，分别是以：Salesforce、纷享销客、销售易、悟空 CRM 为首的管理型 CRM，它们最为主要的功能是管理客户，也就是将销售人员手中的客户，通过公司的 CRM 系统进行统一的管理，能够保证企业的权益不会受到伤害。

而另一个赛道则是 SCRM，这应该算是国内比较火的新名词（其实也出现了很长一段时间了），它的全称是 Social Customer Relationship Management 也就是社交化客户关系管理系统。主要典型的产品包含：EC、尘锋、探马、微盛 等等…

如何去理解 SCRM？

比如我们现在日常沟通、获取信息，会从以前的传统媒体像是 “电视、报纸、收音机” ，逐渐迁移到 微信、知乎、小红书、抖音 等等，而这些社交媒体上我们的各种喜好、最近发生的事情，都能够在 SCRM 当中展示，并且他可以根据你的喜好，来与你进行沟通进而帮助它进行获客、成单。

比如今天我想买 Figma，然后我又在微信朋友圈当中吐槽 Sketch 很卡，那作为销售的你肯定会给我推销说，咱们 Figma 一点也不卡。当然 SCRM 的功能还会有很多，由于篇幅有限，我们目前分析还是以 CRM 为主，再加上 SCRM 篇幅太大，后面在做分析。或者是有在这些行业工作的小伙伴，可以在评论区进行补充。

二、作用 想要了解 CRM 产品究竟能够给用户带来什么作用，我们今天换一个视角，来说说如果企业不使用 CRM，会有哪些后果。

1. 客户安全性很难保证

因为在传统的销售业务模式当中，销售人员可以与客户直接进行对接，企业无法对销售进行合理的管控，所以经常会发生客户跟着销售“跑了”，也就是销售离职，带走了之前他负责的客户。这个时候你作为企业老板即没有掌握客户的基本信息，同时对于这位客户的经历也不了解，这样很容易就会流失一个客户。而客户对于企业来说至关重要，因为每一个客户都是企业通过运营人员沟通获取来的，因此企业的客户安全性无法得到保证（这也是为什么很多企业选择使用企业微信而不是个人微信的原因）。

2. 数据信息不够统一

一个销售获客的渠道有很多，其中包含名片、微信推荐、电话分享 等，而这些客户信息，如果不统一管理，就会变成一个个孤岛，对于企业的日常管理是非常麻烦，无法全局监控。

当然企业也可以将数据统一放在传统的 Excel 表格当中，但是表格传播过于简单，风险太大，并且无法去做协同，一旦后续数据增多也会导致整个管理非常的混乱，不能分权限将企业的所有客户统一进行查看。

3. 难以建立良好的客户关系

传统方式管理客户的时候，销售人员对于客户印象主要来自 之前的微信聊天记录以及朋友圈，而想要深入了解这位客户的具体信息、具体对接的联系人、以及公司的具体规模，就可能会因为时间的关系而忘记，因此传统的方式无法追踪客户，将客户的资料统一整理。

4. 销售难以管理

对于企业的销售人员来说，他们的工作常年在外，因此企业很难对手下的销售进行管理，比如想了解员工今天的工作情况，又或者是员工的后续工作安排。之前企业都是通过收集员工每日工作汇报来判断，依旧很低效率。

CRM 系统可以连接日常工作和业务，在辅助销售人员完成工作的同时，也完成了对信息的收集，管理者可以清晰地看到该客户的跟进记录，以及重点客户员工是如何跟进的，提高了管理团队的洞察力。

其实了解 CRM 产品的作用，最终的目的就是为了了解这款产品能够给企业带来什么价值，什么核心的能力能够驱动客户进行购买，了解了过后你才能知道这个功能带来的价值是什么。

三、业务 关于 CRM 的业务，我们主要会分为专业词汇、关键角色、流程 三个维度进行分析，我们先来了解一下常见的专业词汇。

1. 专业词汇

销售线索：销售线索是与客户初次接触获得的原始信息， 可以是从展会中获得的名片，通过推广活动获得的电话号码 ，或是会议、广告、外部购买等渠道获得的客户简单信息，然后通过管理和跟进可以转化为客户。

线索池：将线索通过按不同行业不同地区或是其它的方式组合一起，即成为线索池，如上海区线索池、北京区线索池、教育行业线索池、金融行业线索池等。

客户：客户是指有业务往来企业、团体或个人，是企业的重要资源，可以通过线索转化而来，或是销售挖掘等多种渠道获取。

公海：按不同行业不同地区或是按某种相同特性组合一起的客户分组，即成为公海，如上海区公海、北京区公海、教育行业公海等。

联系人：即与企业直接联系的客户方相关人员。如果是企业客户，联系人是您与企业联系沟通的人。如果是个人客户，联系人可以是与客户有关系的沟通联系人。

商机：商机是与客户做一笔生意的跟进过程，如果是企业客户，一个完整的销售周期大概包括产品咨询、报价、方案评估及最后的赢单或输单。

2. 关键角色

在 CRM 产品里面，会涉及到形形色色不同的人员，其中最主要的角色包含：市场、销售、销售主管、老板。

市场：主要负责整个产品的营销以及线索的分配，与 CRM 产品相关的就是会安排市场人员来与销售进行对接，将他们在官网、内部推荐得到的线索流转给销售。

销售：销售人员对于企业来说非常关键，他主要是企业与客户对接的重要人员，是这份订单是否成功的关键角色。

虽然都叫销售，但是会根据工作性质的不同，将销售分为：电话销售、产品销售与大客户销售。

电话销售：电销通常是销售当中最基础的，通常就是拿着通讯录不停地拨打客户电话，算是一个重复性非常高的职位。

产品销售：产品销售更多就是自有产品，当线索来了过后，销售人员也会与客户去电话沟通，但是沟通的目的是了解你公司的具体情况，分析是否有潜在的购买需求，后续主要任务便是促成订单的成交。

比如你们每次去试用别人的 B 端产品的时候，都是产品销售来与你对接（别以为我不知道你们每天在做什么~）

大客户销售：大客户销售顾名思义，主要针对的是企业较为重要的客户，他们在整体的决策层面链路较长、金额较大，因此会安排经验丰富的人员进行对接。

软件实施：负责现场培训、协助项目验收、负责需求的初步确认、把控项目进度、与客户沟通个性化需求、负责项目维护。总之就是你购买了产品过后，需要实施人员来进行项目落地（有的公司没有实施会让销售人员负责）。

客户成功：客户成功扮演主要是提升客户的认同感，让客户感受到使用这款产品能够给他带来价值。简单来说客户成功就是要找出客户的问题，并制定相应的解决方案，然后基于不同的产品，把解决方案落进系统。客户有问题反馈，就需要与客户成功进行对接，评判客户成功好坏的标准就是看产品的续费率。

四、流程 要了解一款 B 端产品的业务，那业务流程自然是十分重要，因为这样能够最快的了解清楚整个产品的流转方式（当然不同公司对于产品的流程不同，只是作为参考）。

在 CRM 产品当中，所有的客户都是从线索开始，因此线索是作为整个 CRM 产品的起点，也是业务流程当中的最主要一步。当然针对于线索，他最主要的特点便是线索来源，一般分为：官网、展会、朋友推荐、以及新媒体渠道当中获取到的线索（这可能就是 SCRM 存在原因）。

而在线索这里，通常系统会去自动对接官网当中的提交的表单线索，同时也会给各个员工开放自己新建线索的入口（有的企业，新增一个有效线索是有对应的提成）

当然线索在类型上主要分为：线索池、有效线索、培育线索：

线索池：就是将所有的线索都放在一个地方，方便销售人员进行选择

有效线索：有真正购买意愿的线索，通常敏锐的市场人员会从规模、电话、行业 等综合信息进行判断

培育线索：也就是客户对于这个产品比较犹豫，对于产品购买意愿不太明确，因此可以通过培育线索，让他了解到产品过后，转化为有效线索。

当你完成线索流转过后，你就会是一个商机，这也就代表着你对咱们的产品非常感兴趣，开始询问报价，销售人员就会给你去做各种各样的演示与沟通，而在每一次销售与客户的沟通情况，企业都会要求他去录入跟进信息，如果不填写可能会面临罚款的风险，然后就是销售人员一次又一次的和客户沟通，商讨价格直到客户签单，在此过程当中就会涉及到商务，然后就是 订单、合同、回款、开票 等流程阶段 来对整个过程进行统一管理，并且所有的过程都会在系统当中进行记录，直到最后的赢单，有得必有失，那后续输单也是同样，便是没有取得进展，最后以失败告终。

我们来整理一下，举一个实际例子，比如现在想要去了解一款人事管理系统，你打开了薪人薪事的官网，在他们的官网当中经过简单的了解，填写了你的企业信息与表单：

紧接着，你的信息就会给到市场人员，他们会根据你的表单信息、所在城市、公司规模 给你安排更为合适的销售人员来对你进行跟进，在跟进的过程当中就会根据你的各种 “反馈与表现” ，将你定义为各种名称 线索、商机、客户。

并且目的只有一个，就是让你购买产品，后续涉及到 订单、合同、打款 等，都属于正常流程当中非常重要的一环，直到最终的赢单与输单。

五、页面 CRM 产品当中较为重要的页面，因为作为设计师，我们最终的设计思考一定是通过页面来去呈现，而前面的整体业务模块则更多是为了理解它们之间的关系，将问题讲清楚。

1. 客户详情页

客户详情页面作为 CRM 里面最为重要的一个页面，它主要是呈现这个客户当中的所有完整信息。比如销售人员，他高频进入的页面一定是客户的详情页面，因为他想要了解这个客户，在整个过程当中了解哪些信息、想要得到什么内容都可以通过客户想以企业快速的找到。

但是由于客户详情页 页面的整体设计难度较大，会存在大量信息以及关联的内容，因此客户详情页更加考验设计师的信息处理能力。这里分享了 Hubspot、Salesforce、纷享销客、销售易、悟空 CRM 的客户详情页：

2. 客户列表页

客户列表页更多就是呈现数据，和普通 B 端产品的列表页基本相同，只是说会根据不同的产品类型有所调整。比如 CRM 产品，它更加强调的就是客户信息的快速检索以及快速寻找，因此你会发现在产品里面它的筛选功能做的非常强大。

当然关于表格的内容我们这里就不做过多的赘述，因为之前几期通用的表格文章。已经写得非常详细，感兴趣的话可以去看一下咱们之前的表格文章：

万字干货！超全面的B端设计指南：表格篇（上） 目前我主要深耕于B端设计中，深知B端表格设计与C端有很大的不同，无论是表格的展示形式以及承载内容上都有非常大的差异。

阅读文章 >

上万字干货！超全面的B端设计指南：表格篇（下） 下面的10问都是大家常见的表格问题，同时也给出相应的解决方法。

阅读文章 >

3. 跟进记录的填写

跟进记录在 CRM 产品里面是非常重要的板块，因为跟进记录也就意味着销售人员需要去反复的填写。有点像一个快速的表单让我需要把每一次我们具体聊的内容写到整个系统里面来。

通常一个销售非常规范的公司，会要求销售人员把和顾客每一次的数据都记录到跟进记录里面，因此在跟进记录当中，我们要去考虑他如何频繁去呈现，以及如何快速的去阅读。

CRM 产品对于设计师的影响

聊完了 CRM 产品过后，我们来说说整个产品会对设计师造成哪些影响，因为在整个的数据过程当中，我们需要去关注的点非常的多：

了解用户习惯

简单来说，其实 CRM 产品本身就是为销售人员服务的一种产品类型，那作为设计师了解 销售的日常习惯就显得尤为重要。虽然在文章当中已经讲的过于详细，但是你会发现，用户的习惯当中，不同的产品类型，它的日常习惯本身就会有所不同，像是 电话销售、产品销售、大客户销售、传统业务销售，其实这对于我们来说，更需要了解用户的习惯才能更好的去做设计。

懂得业务

因为 CRM 产品本身是难以理解的你，也就导致了我们作为设计师需要快速的了解业务，去懂业务究竟应该怎么去实现。比如和同事快速的沟通，进而快速掌握业务信息，又或者是寻找各种资料帮助你了解业务。那关于这些内容我们之前也有讲过，这里就不展开去赘述。

B 端设计师如何快速了解业务？先从这4个步骤做起 作为一个 B 端设计师，经常会切换到不同的业务产品线，也就会导致我们需要具备“快速了解业务”的能力，而快速了解业务的能力其实并不会在面试时进行考验，对于有了几年 B 端工作经验的同学早就已经驾轻就熟，而刚“入坑”B 端的小伙伴则会显得有些困难，我就结合自身经历说说我是如何快速了解 B 端

阅读文章 >

快速转换

CRM 本质上是一个针对于多行业的产品类型，也就导致了我们需要在设计的过程当中快速的进行切换。需要我们将用户多行业的需求进行整合，因为在工作当中你确实会发现不同的企业，他的关注点是不太一样的。那如何把这不同的关注点进行融合整理，就需要设计师充分的参与才行。

关于 CRM 产品，一直都是我的一个情怀，因为之前在这个行业呆了很久，也说的蛮多的，希望能够对大家换工作、了解这类型产品有所帮助~觉得文章不错，也别忘了点赞~

欢迎关注作者的微信公众号： CE青年Youthce

本文由腾讯光子设计中心的交互设计师和视觉设计师分别讲述如何实现《Apex 英雄》手游的体验突破与UI创新。更多光子设计中心的好文：上亿人在玩的《和平精英》，如何做好机甲主题创意设计？导语 通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。

本文由腾讯光子设计中心的 交互设计 师和视觉 设计师 分别讲述如何实现《 Apex 英雄 》手游的体验突破与UI创新。

更多光子设计中心的好文：

上亿人在玩的《和平精英》，如何做好机甲主题创意设计？ 导语 通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。

阅读文章 >

大家好，我是杨泽锋，大家都叫我阿泽，我来自腾讯 IEG 光子设计中心，我是一名游戏交互设计师。很荣幸能够参加这次行业交流盛会，本次我和另一位同事 Sandy 一起给大家带来分享，这次我们分享的内容是：方寸见巅峰——ApexM的设计体验突破。

本次分享的内容会分为两部分：

端游功能如何在手游布局 HUD？ 手游如何在复杂功能中做简化？ 在此抛出一个发散问题：端游移植到手游，体验上会遇到哪些问题？

首先从体验的角度，端转手经常会遇到许多难点，如：这么多功能如何布局 HUD 界面？端游功能这么复杂，照搬还是简化？上图提到的问题都是在端转手中会遇到的重点难点。

由于时间有限，选择两个问题和大家分享一下，也是我认为在研发期间遇到的比较有挑战性的问题。第一个难点，端游这么多功能，如何布局 HUD？

传统 PC，键盘主要是负责移动的操控，比如跑跳蹲等基础行为，鼠标则负责开火射击、转视角等操控，大脑对左右手有更清晰的指令。在手游上只能通过搓屏幕，并且双手手指的遮挡会导致屏幕仅剩三分之二区域，在手游上优化操作体验是射击类手游必须重点解决的问题。

作为游戏交互设计师，基于端转手的背景下，可以从几个点去进行思考：

操作习惯，不同玩家类型的操作习惯不一样； 继承和改变，因为基于端转手，很多端游的功能很复杂，我们要基于手游的操作布局进行改变； 学习成本，要考虑不同的 IP 玩家和 Apex 手游玩家的不同操作习惯。

如何打造更好的操作体验？ApexM 秉承的交互理念是：简单上手、快捷流畅、爽快炫技，这些理念会在后续的方案中体现。

首先来看一下我们局内战斗的一个框架，因为篇幅有限无法全部罗列，大概有 12 个模块，80+功能，36 个一级操作按钮。

那么问题来了，大家看到这么多的功能和按钮，我们是如何确定在手机上的屏幕位置呢？

首先我认为需要确定一个评估维度。先要确定操作热区，然后是罗列功能优先级，最后综合考虑放置各类按钮的位置，这样才能让我们的按钮布局做到设计有理有据。

大家可以先看上图左侧，操作热区可以分为三级，根据手指的操作范围和难易度来划分。

一级热区：操作频率最高，也是交互成本最低，通常都是移动、开火这类基础体验，直接影响玩家完成基础的射击操控体验；

二级热区：二级操作热区可以定位为更好地完成核心操作体验，可以定义为辅助玩家更好地完成射击操作，比如说瞄准、转视角；

三级热区：这个区域可以明显地感受到对于二指操作的玩家而言已经是比较困难，这些区域的位置通常放置玩法、沟通、与队伍互动相关的按钮。

右侧是我们把 HUD 的核心功能都罗列出来，然后进行优先级排序，这就是我们当前的 HUD 方案。最后会统筹放置各类信息的位置，并且根据实际战斗体验再进行微调。这个方案也适用于大部分玩家，面对新手也较为友好，上手门槛低，信息的呈现更加直接。

当我们很开心地对外测试时，我们的主美 Nono 抛来一个灵魂拷问：这不够 Apex 啊？我们就瞬间心里一紧，想想确实，按照目前的方案，能满足大部分玩家的操控体验，但和目前市面上的 FPS 手游的体验大同小异，如何更加“Apex”？成为一个我们的新的命题。

制作一个更有 Apex 特色化的 HUD 界面，那么什么是 Apex 特色化？通过提炼这句话的内容，我们从体验和视觉的两个差异维度来进行探索。

首先是体验上的差异，不同玩家群体的操作习惯都会不同，比如新手和 IP/进阶玩家的操作体验会带来布局差异。

新手玩家以基础操作为主，更注重信息的平铺直叙，双手紧贴左右布局位置。IP/进阶玩家有 IP 认知基础，在信息和操作上可以尝试一些更加整合性的方案，更符合这类玩家的需求。

衡量的维度是什么？哪些应该变，哪些又不能变？需要有一个衡量标准，我们与战斗组的策划进行多次内部测试，最终达成两个协议。

不变的是基础操作，比如跑跳蹲、开火这类操作不会发生改变，因为玩家有操作习惯，会形成一定的肌肉记忆。

变的是武器栏、技能的操作，这些相对个性化的操作，还可以整合信息：队友信息、辅助功能等，比如说投掷物，可以采用圆盘的投掷物方式，从根本上去符合 I 玩家的操作体验。

另一个差异是视觉维度的差异化。我们从端游提炼了一些视觉特征，比如终极技能居中，武器栏是一个整体，投掷轮盘、斜切元素等等。

在过程中我们做了很多方案选择，最后关于方向我们有三个选择。还原端游的布局，带来的问题是不符合移动设备的操作体验，比如信息会被拇指挡住；完全创新对我们来说，玩家认知成本太高；最后我们决定还是基于现有的方案基础上，往特色化的方向去靠近。

我们的目标玩家是进阶和 IP 玩家，他对端游是有一定的熟悉度，在 BR 类型的游戏有一定的熟练度。

由于我们是基于 EA 的 Apex 这个 IP 来开发，所以需求都会和 EA 团队合作讨论，我们把这个想法同步给了 EA 团队，很高兴这样的想法也符合 EA 团队的预期，最后双方达成一致，在保留原有方案的基础上，为玩家新增一套新的方案。

左右两套方案的对比，右侧是我们的 HUD2 方案，大家可以看到这个的功能色块都发生了改变，位置的改变也导致握持的手势也发生了变化。

大家看一下实际演示视频，这是国外主播的一个操作视频：

大家可以看到，玩家对界面进行了自定义，基于原有的信息进行了整合，玩家有更多的操作空间，内容呈现也更加简洁。 ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

有句话想和大家分享：不是看到了结果才做，而是做了才有结果。

在做这个方案的过程中，我们也有很多挫折，比如说这不符合操作习惯、这个和市面上的操作布局不一样，种种的自我怀疑。在主美的步步紧逼和摧残下，最后才把这套方案呈现给玩家。我们也倡导更多的游戏设计师能够去探索更多的设计可能性。

第二个难点，面对复杂的功能如何简化手游体验呢？

这是 Apex 的一个特色局内系统，据说是 EA 研发团队在战斗中关闭麦克风状态下设计出来的，玩家可以利用这 8 个内容进行各类标记，也获得了许多玩家很高的认可度，甚至有玩家因此写感谢信。

面对这么优秀的战斗沟通系统，我们想的肯定就是先还原，一方面我们是根据 IP 还原端游体验，另一方面以固有的思维去设计。

因此第一版最终采用 6 个标记作为默认功能，玩家可以通过长按标记按钮，呼出轮盘进行标记。我们高兴地进行第一轮测试，但结果并不符合我们预期。

那么完全复刻端游功能，这条路就走不通了吗？我们在用研团队的帮助下，梳理了 2 个核心痛点：

图标数量多且难识别； 战斗节奏快难以高精准标记。 还原的路走不通，我们就换条路走：优化。作为游戏交互设计师，可以运用交互设计中四策略的方式：删除、组织、隐藏、转移。

根据总结的问题，整理了 2 个对应的设计策略：第一是减少数量，第二是使用场景精细化，提升操作效率。接下来我会对这 2 个问题进行解决方案的分享。

问题 1：图标多且难识别

我们从玩家的使用场景中发现，图标数量太多且造型相似，会造成新手认知门槛高，所以要梳理一下玩家的标记行为，这里可以分为两大类：

第一类是战术性预判，这一类是使用比较低频的，可以考虑隐藏，兼顾高手玩家；

第二类是需要自主判断的，比如像前往、遇敌、物资，要考虑大盘玩家，可以默认保留。

我们的解决方案是，保留最核心、高频的操作，即前往和遇敌的标记，其余则默认隐藏，玩家通过设置可以自行开启，来兼顾高阶玩家的操作需求。

问题 2：战斗节奏快难以高精准标记

这时候我们就想，从规则上入手，是否可以把一些简单规则交给系统来判断。

于是我们将一些有品级划分的物资（里面会有一些通用规则判断），并把这些东西交给了系统，实现自动化，玩家再也不用瞄准了。这样就能给他们减负，而复杂的状况还是交由人脑来判断，保留玩家的手动操作。

解决方案是，在自动化方面，将一些通用规则判断的信息交给系统，减少玩家操作负担；同时在玩家标记后，会及时反馈给队友提示，队友也可以预订物品。玩家的行为和队友的反馈形成闭环，避免信息的遗漏。

手动方面，前往和遇敌需要根据战况判断的信息，要充分确保玩家的操控感，因此我们还是交给玩家自主判断。

当我们将端游的标记系统，部分标记内容简化成自动化就没有问题了吗？显然不是，因为自动化也会带来其他的问题。

比如频繁的标记提醒，还有标记内容不是队友需要的等等，我们又对这些细节进行更多的打磨，在其他环节完善，目的是为了玩家更好的团队协作。

最后的测试结果也符合我们的预期，玩家每局平均操作的次数，从 8 次下降为 2 次，简化的策略极大减少了玩家的操作负担。

简单总结一下设计切入角度：基于功能，从使用场景出发，可以从频率和规则两个角度可以切入。频率角度，高频可以显示，低频操作隐藏；在规则角度，需要精细化的保留手动，通用规则可以考虑自动化。

最后总结本次分享的思路，针对第一个难点我总结了两个内容：

第一个是确立评估维度，快速确定操作布局；

第二个从玩家群体特性出发，结合 IP 的特色做差异化。

针对第二个难点：

第一，善用交互设计的四策略：删除、组织、转移、隐藏；

第二，基于使用场景去简化功能，从频率和规则入手。

以上是我的分享，谢谢大家！

王珊：大家好，我是腾讯互娱光子设计中心《ApexM》项目主设王珊。很荣幸今天可以参加 TGDC 这个大分享盛会。今天视觉部分想和大家分享：ApexM 端转手过程中视觉 UI 的继承与创新。

今天的内容分为两部分。第一：局内系统，浅谈一下我们的栅格化系统。

前面我的同事阿泽分享了局内的 HUD 交互内容，对于一款 FPS 来说，游戏图形的识别性与秩序感的建立至关重要。我们在前期局内的图形设计中，也一度有设计不统一的情况，那后续是做哪些调整，保持这种统一性呢？

在这里不得不提到栅格化系统的建立和使用。栅格化系统在网页设计中应用很广泛，但是在游戏 UI 界面中的使用还未被普及，这里由于敏感原因，我们的设计稿无法投放，但是会有一些示范图例。

栅格化的作用核心就是在版式布局上建立辅助参考系统再设计，所有的图形元素尺寸有专属的度量单位，会让界面和图形产生一种隐形的信息秩序感。

怎么使用？简单概括为四步骤：

第一步，定义版面和画布尺寸；

第二步，制定栅格数量；

第三步，确定布局和结构之后；

第四步，利用黄金分割比例对界面和元素进行定位。

中间有几个需要注意的关键点分别是：整体的比例、节奏感、空白、层次。

ApexM 在游戏图形图标的设计上，会更加要求外轮廓造型是简洁和概括的，我们会避免很多细碎的细节塑造，更加注重体块感传达出来的直接感受。

局内外所有图形都是基于大家现在看到的规范元素组件去设计，看到这个方块会不会觉得有点像小时候练字用到的田字格，其实它们的道理是相通的。

怎么使用？有一个基本理解，假设我们图标尺寸定义为 48x48 pt，这里是以 pt 为单位，可以把它放大到 400%尺寸进行编辑，再使用 4dp 的网格单位进⾏切分，最后使用关键分割线来作为视觉比例的设计基准。

最后这两幅也是最后的 HUD 效果图，栅格化为 HUD 布局进行了更合理的区域划分，HUD 所有功能模块采用统一绘制尺寸和统一的间距规范，所有的图标、文本、间距都是基于栅格化计算之后再设计的。

栅格化的意义，除了保证清晰度和一致性，也是有利于视觉引导。通过规则以加强视觉层次结构，提升设计理解力；更符合多设备环境的动态响应式设计要求；一致性的 UI 元素规范有益于加快设计进程，避免重复劳动；使设计易于修改和重复使用；更有利于各模块岗位的设计协作，比如发给 CP 方制作也是有规范可循的。

ApexM 手游的目标是，全球化面对更广的玩家群体，去焕发 IP 新的活力，成长为一款长线运营的经典产品。

基于刚才的目标，端转手有许多困难摆在视觉设计师的面前，比如如何找到与端游的设计共性，又能创新凸显出手游独特的视觉调性。

我认为，不论是还原还是创新，设计前都需要先去了解世界观，并且深挖。

Apex 源于《泰坦陨落 2》中持续多年的边境战争后期，发生在太空边缘星球间的传奇竞赛故事。正是因为 Apex 有着和泰坦同源的强科幻故事背景，所以它依然始终保持着一种高科技和重工业的气质，并且这个 IP 体现出非常多例如动感、热烈、朋克、戏剧化等多元特征。

世界观中的许多传奇故事也是为后续做视觉包装提供了非常多的灵感和素材。玩法是 BR、英雄技能、多人小队，有复活机制，且地形多样。

基于 Apex 这样一个庞大的世界观，为了保持与端游一致性，视觉又做了哪些工作？

首先肯定是要对 IP 界面进行梳理和分类。前期我们收到了监修方 Respawn 工作室提供的非常大体量的 UI 资源，首先肯定要进行梳理和分类，在我们不断整理的过程中也开始逐步提炼视觉元素和图形语言。

不仅仅是对局内外的系统，我们对外域传奇故事 CG 中的元素也进行了分析提炼，例如“传奇密客”的屏幕科技元素，“地平线”传奇故事中的电子显示元素等等。这些设定也成为了我们后续做运营类传奇活动包装时，提供了非常多的用来做延展设计的灵感来源。

经过前期大量的提炼和分析，我们也逐步地总结出了更适合手游视觉语言，而扁平化的设计需要依赖严谨的视觉平衡与克制的色彩运用。端游图形基本构成有：斜切、切割、矩形、菱形、点阵排列；质感有：毛玻璃，战损等等。

特别是贯穿在三人小队的旗帜图形，也是成为 SEED 核心视觉元素。界面的色彩使用上保留了端游经典的红白灰的配色组合。

第二步进行模块化的 UI 规范输出。在项目开发周期时限短且需求量巨大的前提下，我们建立了一个建立完善的组件库与规范库，这是保证设计的统一性和延展性的必要前提。

持续做规范化设计能有效地减少试错成本，也可以避免一些不必要的争议。搭建完整的组件库可方便各模块同学后续快速查找和响应。除了保证输出的统一性，也为后续铺量打下坚实基础。

经过前期端游资源梳理、视觉元素提炼与规范制作，又是如何应用？这里将以大厅设计为例为大家分享。

大厅是玩家接触到的第一个界面，也是核心体验中的重要展示部分，承载了各大核心功能与商业化入口。

端游的赛季主题多变，在游戏大厅的设计上也是有很好的延展。手游视觉设计，如何保持视觉平衡能兼具功能性与运营要求，还能传达 ApexM 独有的调性？

初版的大厅设计在内部公布时虽然有认可的声音，但并未能让大家觉得眼前一亮，所以在项目主美的支持下，我们又开始寻找新的方向，寻找更鲜明的记忆点。

就在我们苦于没有灵感的时候，端游 S3 赛季有一段预告片展示的是英雄跳伞前，在船舱内部活动的一些桥段，每个英雄都有属于自己的一块休息区域，跳伞前也会有升降仓和头顶 LED 屏幕显示小队传奇的照片，整体仪式感非常强。

所以看过这个视频之后，引发了大家很多思考，经过很多轮的脑暴，我们决定试着将从新手引导到最后的游戏结算，整合成一条游戏备赛的概念，贯穿进入游戏各个关键环节，希望利用镜头做流畅过渡，强化视觉表现力。

大厅的背景设定，也就锁定在船舱内部，成为核心体验中的很重要的核心环节。船舱这个概念确定，仅是一个大的前提，落地在具体 UI 设计时，我们同样经历了长时间的推敲和打磨。

期间目标是很明确，比如角色的展示就是 Demo 期就确定会用到半身像。这是和端游不同的一点，但后续切换到组队的时候就会变成全身，目的就是为了让玩家在小画幅手机上看到更好的展示模型品质效果。

与端游相同点在哪里？延续一贯扁平与斜切视觉语言，界面色调也是还原了端游的灰白红的组合，并且保留底部 TAB 页少部分毛玻璃的质感。

与端游不同的是，UI 整体框架会模拟机舱 HUD 操控台，利用 45% 切角与斜切图形元素提炼组合使用。最为重点是非常醒目的红色 Play 按钮，它在中心摆放的位置。前期其实我们也是有一些讨论，最后经过多轮讨论，我们也是觉得这样的摆放位置可以让玩家操作更具仪式感，也是可以区别于其他 FPS 游戏的设计，渐渐地也成为我们手游独有的非常强的记忆点。

综上所述，我们在 IP 视觉继承上可以总结出几个方面：

对 IP 方的海量 UI 资源进行分类整合，便于后续视觉提炼与快速找查； 对端游界面的图形、色彩、质感提炼，并且最重要找到核心 SEED 图形并延展设计，从而强化视觉认知； 模块化的 UI 规范输出； 深挖世界观，例如大厅舱内场景的选择，或者是商城哈蒙德，还有新手引导中的身份证，即便它们并未在端游游戏画面出现过，玩家仍会认为这“还是那个 Apex”，我我们只是让它更完整地呈现出来。 刚才聊了我们基于 IP 的继承，那手游里需要找到自己特性的创新点又有哪些呢？

拿赛季举例，端游是平均每 90 天更新一次大赛季，手游更新内容则更为丰富，分为大小双赛季，并且更新时间更快。除了 BattlePass、运营化的主题包装和赛季商店，赛季币完成局外的兑换与购买，还有其他丰富的运营活动内容并行。

那么赛季视觉包装怎么做？首先我简单说一下赛季的主要作用是什么。

赛季作为竞技类型游戏核心商业化最重要的组成部分，整合了新的卖点、新的角色和皮肤，以及 BattlePass 和其他的特别奖励。它的重要任务是通过快速和强烈的视觉冲击来吸引玩家，反复强化玩家对赛季的印象，引导玩家去接触赛季相关的内容。

这里总结了几个设计重点，分别是：主题定位，传奇画像，风格气氛定调，镜头情境感的代入。

大家看到的这个 Apex 端游赛季主题所做的视觉风格拓展，已经很丰富了。ApexM 也会延续了这一设计方式，将更具整体性的主题感氛围做到代入设计，结合新传奇属性，拓展丰富度和新鲜感。

现在大家看到的是端游赛季主体标识，主要色彩的提炼。

我现在介绍一下 S1 赛季的视觉设计。S1 赛季的主题是“Prime Time 鼎沸之刻”，它是 Apex Game 的一场盛大揭幕赛，整体设计力求最大还原端游的基础上，突出这场顶级赛事的宏大和热烈氛围，地图也是 Apex 的经典战场，世界边缘。

S1 赛季 LOGO，分别是扁平化、3D 和结合动效之后的效果。这个 S1 LOGO 图形上方的 7 个星球，代表了辛迪加组织控制下的 7 个国家，概念是 Apex 在辛迪加世界中举行的首场竞赛。实体 LOGO 演绎也是视觉设计通过分镜方式创意输出，而最终得到的效果呈现。

现在大家看到的 S1 赛季的色彩与视觉元素，也是与端游首赛季保持一致。用到红色作为首赛季的主基调色彩，辅助色为黄黑金，选择融入了热烈氛围的飘带，端游代表性 LOGO 旗帜元素，结合世界边缘有场景的岩浆地貌作为氛围感的烘托，并且保留了端游最具有仪式感的旗帜转场的效果。

现在展示的是赛季商店，赛季商店作为赛季包装系列内容的一部分。前期概念设定受美国一档体育频道 ESPN 演播室启发，最终锁定在了该赛季主题下的商店展厅去延展做设计。

前期综合主美意见，考虑到后续的制作成本，所以后续只需在原 3D 搭建的基础上进行屏幕设计，结合动效与场景的灯光渲染，完成了一个可复制利用的场景模块。

大家看到蓝色的这块就是 S1.5 赛季复用之后的效果。

在视觉元素上的运用，我们选择了 LED 故障风与字母动态展示屏幕的效果结合展厅地面的折射，整体氛围感是更酷炫的。

S1 整套赛季商店设计也成为了一个优秀设计案例，奠定了 ApexM 官网风格。

所以主题化的视觉包装，只要一旦找到了世界观作为切入主线，后面精彩内容的涌现也就顺理成章，但是前期所花费的思考与决策准备时间需要更充分，对于促成好的设计结果尤为重要。

S1 赛季的视觉包装也是确立了我们手游的基本视觉方向，同时也获得了项目与监修方的认可。ApexM 的品牌设计从赛季商店的设计中获得灵感并开始提炼，进行延伸和发展，于是形成了手游自身的品牌调性。某种层面说，游戏视觉和品牌设计形成了比较一致的表达。

图上是 S1 赛季的拍脸图，有电子感的故障元素在，我们就是将电子故障感元素替换了之前端游的弹道战损元素。为什么要做替换呢？就是因为战损风在大屏端游上会很容易被识别出来，但换到手机小画幅的局限性，视觉上就会表现成脏色和一些不规则的点儿，替换之后这种电子故障肌理感在手机上看其实也像某种程度的战损。

下面说一下品牌色，我们的手游品牌色也是传承端游，但手游的红会来得比端游更加热烈，对比也更为强烈，而这恰恰就是我们手游想体现的味道：更大胆、更快、更有活力与能量。

现在看到的是 ApexM 商业运营图，设计难度在于，如何做到吸引玩家还能保有强烈独特的品牌感， 而且这个品牌感手游独有的，是可以区别于端游的。

ApexM 每个赛季都有非常鲜明的主题，拿 S2 赛季来举例子，主题是“失真”，它有几个关键词，分别是电音、律动、派对、霓虹灯， 构成了这个赛季的核心概念。

我们选择了紫色代表这个赛季印象色彩，结合 ApexM 故障元素作为基本的构成形式。结合新传奇女 DJ 自身属性，既延续了赛季本身的包装特点，又突出了品牌感，最终呈现的效果也是非常具有 ApexM 的辨识性和冲击力。

基于 IP 创新做一个回答：首先，手游品牌色更加明快，手游与端游整体区分度更高；把原有图形的某些设计细节改为更适合手游的新表达，不仅在平面结构中不断把它强调出来，去广泛应用于大型版面设计，提升图形曝光量；手游也有更完整的赛季展示，更快的更新节奏，和更鲜明的商业化主题包装内容。

综上所述，手游延续 IP 视觉设计是为了让玩家可以体验到原汁原味的 Apex。Apex 手游视觉设计所做的一切继承与创新，都是基于产品环境的改变。

手机平台较之于 PC 平台，有着受众群体庞大、小屏幕高 DPI、在线时间更灵活、观察与操作一体等天然区别，随之产生诸如游戏时间碎片化、使用场景复杂、目标用户范围扩展等一系列需要解决的问题。

针对这些问题，所以 ApexM 在视觉调性上选择更大胆、更快、更有活力与能量的新表达，希望将 ApexM 带到了用户规模更加庞大的新舞台。

Apex 故事还在继续，ApexM 设计之路也在继续。我今天的分享到此结束，感谢各位，谢谢。

转载自光子设计中心公众号：「光子设计中心（GZDesigncenter）」

本文由腾讯光子设计中心的交互设计师和视觉设计师分别讲述如何实现《Apex 英雄》手游的体验突破与UI创新。更多光子设计中心的好文：上亿人在玩的《和平精英》，如何做好机甲主题创意设计？导语 通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。

本文由腾讯光子设计中心的 交互设计 师和视觉 设计师 分别讲述如何实现《 Apex 英雄 》手游的体验突破与UI创新。

更多光子设计中心的好文：

上亿人在玩的《和平精英》，如何做好机甲主题创意设计？ 导语 通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。

阅读文章 >

大家好，我是杨泽锋，大家都叫我阿泽，我来自腾讯 IEG 光子设计中心，我是一名游戏交互设计师。很荣幸能够参加这次行业交流盛会，本次我和另一位同事 Sandy 一起给大家带来分享，这次我们分享的内容是：方寸见巅峰——ApexM的设计体验突破。

本次分享的内容会分为两部分：

端游功能如何在手游布局 HUD？ 手游如何在复杂功能中做简化？ 在此抛出一个发散问题：端游移植到手游，体验上会遇到哪些问题？

首先从体验的角度，端转手经常会遇到许多难点，如：这么多功能如何布局 HUD 界面？端游功能这么复杂，照搬还是简化？上图提到的问题都是在端转手中会遇到的重点难点。

由于时间有限，选择两个问题和大家分享一下，也是我认为在研发期间遇到的比较有挑战性的问题。第一个难点，端游这么多功能，如何布局 HUD？

传统 PC，键盘主要是负责移动的操控，比如跑跳蹲等基础行为，鼠标则负责开火射击、转视角等操控，大脑对左右手有更清晰的指令。在手游上只能通过搓屏幕，并且双手手指的遮挡会导致屏幕仅剩三分之二区域，在手游上优化操作体验是射击类手游必须重点解决的问题。

作为游戏交互设计师，基于端转手的背景下，可以从几个点去进行思考：

操作习惯，不同玩家类型的操作习惯不一样； 继承和改变，因为基于端转手，很多端游的功能很复杂，我们要基于手游的操作布局进行改变； 学习成本，要考虑不同的 IP 玩家和 Apex 手游玩家的不同操作习惯。

如何打造更好的操作体验？ApexM 秉承的交互理念是：简单上手、快捷流畅、爽快炫技，这些理念会在后续的方案中体现。

首先来看一下我们局内战斗的一个框架，因为篇幅有限无法全部罗列，大概有 12 个模块，80+功能，36 个一级操作按钮。

那么问题来了，大家看到这么多的功能和按钮，我们是如何确定在手机上的屏幕位置呢？

首先我认为需要确定一个评估维度。先要确定操作热区，然后是罗列功能优先级，最后综合考虑放置各类按钮的位置，这样才能让我们的按钮布局做到设计有理有据。

大家可以先看上图左侧，操作热区可以分为三级，根据手指的操作范围和难易度来划分。

一级热区：操作频率最高，也是交互成本最低，通常都是移动、开火这类基础体验，直接影响玩家完成基础的射击操控体验；

二级热区：二级操作热区可以定位为更好地完成核心操作体验，可以定义为辅助玩家更好地完成射击操作，比如说瞄准、转视角；

三级热区：这个区域可以明显地感受到对于二指操作的玩家而言已经是比较困难，这些区域的位置通常放置玩法、沟通、与队伍互动相关的按钮。

右侧是我们把 HUD 的核心功能都罗列出来，然后进行优先级排序，这就是我们当前的 HUD 方案。最后会统筹放置各类信息的位置，并且根据实际战斗体验再进行微调。这个方案也适用于大部分玩家，面对新手也较为友好，上手门槛低，信息的呈现更加直接。

当我们很开心地对外测试时，我们的主美 Nono 抛来一个灵魂拷问：这不够 Apex 啊？我们就瞬间心里一紧，想想确实，按照目前的方案，能满足大部分玩家的操控体验，但和目前市面上的 FPS 手游的体验大同小异，如何更加“Apex”？成为一个我们的新的命题。

制作一个更有 Apex 特色化的 HUD 界面，那么什么是 Apex 特色化？通过提炼这句话的内容，我们从体验和视觉的两个差异维度来进行探索。

首先是体验上的差异，不同玩家群体的操作习惯都会不同，比如新手和 IP/进阶玩家的操作体验会带来布局差异。

新手玩家以基础操作为主，更注重信息的平铺直叙，双手紧贴左右布局位置。IP/进阶玩家有 IP 认知基础，在信息和操作上可以尝试一些更加整合性的方案，更符合这类玩家的需求。

衡量的维度是什么？哪些应该变，哪些又不能变？需要有一个衡量标准，我们与战斗组的策划进行多次内部测试，最终达成两个协议。

不变的是基础操作，比如跑跳蹲、开火这类操作不会发生改变，因为玩家有操作习惯，会形成一定的肌肉记忆。

变的是武器栏、技能的操作，这些相对个性化的操作，还可以整合信息：队友信息、辅助功能等，比如说投掷物，可以采用圆盘的投掷物方式，从根本上去符合 I 玩家的操作体验。

另一个差异是视觉维度的差异化。我们从端游提炼了一些视觉特征，比如终极技能居中，武器栏是一个整体，投掷轮盘、斜切元素等等。

在过程中我们做了很多方案选择，最后关于方向我们有三个选择。还原端游的布局，带来的问题是不符合移动设备的操作体验，比如信息会被拇指挡住；完全创新对我们来说，玩家认知成本太高；最后我们决定还是基于现有的方案基础上，往特色化的方向去靠近。

我们的目标玩家是进阶和 IP 玩家，他对端游是有一定的熟悉度，在 BR 类型的游戏有一定的熟练度。

由于我们是基于 EA 的 Apex 这个 IP 来开发，所以需求都会和 EA 团队合作讨论，我们把这个想法同步给了 EA 团队，很高兴这样的想法也符合 EA 团队的预期，最后双方达成一致，在保留原有方案的基础上，为玩家新增一套新的方案。

左右两套方案的对比，右侧是我们的 HUD2 方案，大家可以看到这个的功能色块都发生了改变，位置的改变也导致握持的手势也发生了变化。

大家看一下实际演示视频，这是国外主播的一个操作视频：

大家可以看到，玩家对界面进行了自定义，基于原有的信息进行了整合，玩家有更多的操作空间，内容呈现也更加简洁。 ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

有句话想和大家分享：不是看到了结果才做，而是做了才有结果。

在做这个方案的过程中，我们也有很多挫折，比如说这不符合操作习惯、这个和市面上的操作布局不一样，种种的自我怀疑。在主美的步步紧逼和摧残下，最后才把这套方案呈现给玩家。我们也倡导更多的游戏设计师能够去探索更多的设计可能性。

第二个难点，面对复杂的功能如何简化手游体验呢？

这是 Apex 的一个特色局内系统，据说是 EA 研发团队在战斗中关闭麦克风状态下设计出来的，玩家可以利用这 8 个内容进行各类标记，也获得了许多玩家很高的认可度，甚至有玩家因此写感谢信。

面对这么优秀的战斗沟通系统，我们想的肯定就是先还原，一方面我们是根据 IP 还原端游体验，另一方面以固有的思维去设计。

因此第一版最终采用 6 个标记作为默认功能，玩家可以通过长按标记按钮，呼出轮盘进行标记。我们高兴地进行第一轮测试，但结果并不符合我们预期。

那么完全复刻端游功能，这条路就走不通了吗？我们在用研团队的帮助下，梳理了 2 个核心痛点：

图标数量多且难识别； 战斗节奏快难以高精准标记。 还原的路走不通，我们就换条路走：优化。作为游戏交互设计师，可以运用交互设计中四策略的方式：删除、组织、隐藏、转移。

根据总结的问题，整理了 2 个对应的设计策略：第一是减少数量，第二是使用场景精细化，提升操作效率。接下来我会对这 2 个问题进行解决方案的分享。

问题 1：图标多且难识别

我们从玩家的使用场景中发现，图标数量太多且造型相似，会造成新手认知门槛高，所以要梳理一下玩家的标记行为，这里可以分为两大类：

第一类是战术性预判，这一类是使用比较低频的，可以考虑隐藏，兼顾高手玩家；

第二类是需要自主判断的，比如像前往、遇敌、物资，要考虑大盘玩家，可以默认保留。

我们的解决方案是，保留最核心、高频的操作，即前往和遇敌的标记，其余则默认隐藏，玩家通过设置可以自行开启，来兼顾高阶玩家的操作需求。

问题 2：战斗节奏快难以高精准标记

这时候我们就想，从规则上入手，是否可以把一些简单规则交给系统来判断。

于是我们将一些有品级划分的物资（里面会有一些通用规则判断），并把这些东西交给了系统，实现自动化，玩家再也不用瞄准了。这样就能给他们减负，而复杂的状况还是交由人脑来判断，保留玩家的手动操作。

解决方案是，在自动化方面，将一些通用规则判断的信息交给系统，减少玩家操作负担；同时在玩家标记后，会及时反馈给队友提示，队友也可以预订物品。玩家的行为和队友的反馈形成闭环，避免信息的遗漏。

手动方面，前往和遇敌需要根据战况判断的信息，要充分确保玩家的操控感，因此我们还是交给玩家自主判断。

当我们将端游的标记系统，部分标记内容简化成自动化就没有问题了吗？显然不是，因为自动化也会带来其他的问题。

比如频繁的标记提醒，还有标记内容不是队友需要的等等，我们又对这些细节进行更多的打磨，在其他环节完善，目的是为了玩家更好的团队协作。

最后的测试结果也符合我们的预期，玩家每局平均操作的次数，从 8 次下降为 2 次，简化的策略极大减少了玩家的操作负担。

简单总结一下设计切入角度：基于功能，从使用场景出发，可以从频率和规则两个角度可以切入。频率角度，高频可以显示，低频操作隐藏；在规则角度，需要精细化的保留手动，通用规则可以考虑自动化。

最后总结本次分享的思路，针对第一个难点我总结了两个内容：

第一个是确立评估维度，快速确定操作布局；

第二个从玩家群体特性出发，结合 IP 的特色做差异化。

针对第二个难点：

第一，善用交互设计的四策略：删除、组织、转移、隐藏；

第二，基于使用场景去简化功能，从频率和规则入手。

以上是我的分享，谢谢大家！

王珊：大家好，我是腾讯互娱光子设计中心《ApexM》项目主设王珊。很荣幸今天可以参加 TGDC 这个大分享盛会。今天视觉部分想和大家分享：ApexM 端转手过程中视觉 UI 的继承与创新。

今天的内容分为两部分。第一：局内系统，浅谈一下我们的栅格化系统。

前面我的同事阿泽分享了局内的 HUD 交互内容，对于一款 FPS 来说，游戏图形的识别性与秩序感的建立至关重要。我们在前期局内的图形设计中，也一度有设计不统一的情况，那后续是做哪些调整，保持这种统一性呢？

在这里不得不提到栅格化系统的建立和使用。栅格化系统在网页设计中应用很广泛，但是在游戏 UI 界面中的使用还未被普及，这里由于敏感原因，我们的设计稿无法投放，但是会有一些示范图例。

栅格化的作用核心就是在版式布局上建立辅助参考系统再设计，所有的图形元素尺寸有专属的度量单位，会让界面和图形产生一种隐形的信息秩序感。

怎么使用？简单概括为四步骤：

第一步，定义版面和画布尺寸；

第二步，制定栅格数量；

第三步，确定布局和结构之后；

第四步，利用黄金分割比例对界面和元素进行定位。

中间有几个需要注意的关键点分别是：整体的比例、节奏感、空白、层次。

ApexM 在游戏图形图标的设计上，会更加要求外轮廓造型是简洁和概括的，我们会避免很多细碎的细节塑造，更加注重体块感传达出来的直接感受。

局内外所有图形都是基于大家现在看到的规范元素组件去设计，看到这个方块会不会觉得有点像小时候练字用到的田字格，其实它们的道理是相通的。

怎么使用？有一个基本理解，假设我们图标尺寸定义为 48x48 pt，这里是以 pt 为单位，可以把它放大到 400%尺寸进行编辑，再使用 4dp 的网格单位进⾏切分，最后使用关键分割线来作为视觉比例的设计基准。

最后这两幅也是最后的 HUD 效果图，栅格化为 HUD 布局进行了更合理的区域划分，HUD 所有功能模块采用统一绘制尺寸和统一的间距规范，所有的图标、文本、间距都是基于栅格化计算之后再设计的。

栅格化的意义，除了保证清晰度和一致性，也是有利于视觉引导。通过规则以加强视觉层次结构，提升设计理解力；更符合多设备环境的动态响应式设计要求；一致性的 UI 元素规范有益于加快设计进程，避免重复劳动；使设计易于修改和重复使用；更有利于各模块岗位的设计协作，比如发给 CP 方制作也是有规范可循的。

ApexM 手游的目标是，全球化面对更广的玩家群体，去焕发 IP 新的活力，成长为一款长线运营的经典产品。

基于刚才的目标，端转手有许多困难摆在视觉设计师的面前，比如如何找到与端游的设计共性，又能创新凸显出手游独特的视觉调性。

我认为，不论是还原还是创新，设计前都需要先去了解世界观，并且深挖。

Apex 源于《泰坦陨落 2》中持续多年的边境战争后期，发生在太空边缘星球间的传奇竞赛故事。正是因为 Apex 有着和泰坦同源的强科幻故事背景，所以它依然始终保持着一种高科技和重工业的气质，并且这个 IP 体现出非常多例如动感、热烈、朋克、戏剧化等多元特征。

世界观中的许多传奇故事也是为后续做视觉包装提供了非常多的灵感和素材。玩法是 BR、英雄技能、多人小队，有复活机制，且地形多样。

基于 Apex 这样一个庞大的世界观，为了保持与端游一致性，视觉又做了哪些工作？

首先肯定是要对 IP 界面进行梳理和分类。前期我们收到了监修方 Respawn 工作室提供的非常大体量的 UI 资源，首先肯定要进行梳理和分类，在我们不断整理的过程中也开始逐步提炼视觉元素和图形语言。

不仅仅是对局内外的系统，我们对外域传奇故事 CG 中的元素也进行了分析提炼，例如“传奇密客”的屏幕科技元素，“地平线”传奇故事中的电子显示元素等等。这些设定也成为了我们后续做运营类传奇活动包装时，提供了非常多的用来做延展设计的灵感来源。

经过前期大量的提炼和分析，我们也逐步地总结出了更适合手游视觉语言，而扁平化的设计需要依赖严谨的视觉平衡与克制的色彩运用。端游图形基本构成有：斜切、切割、矩形、菱形、点阵排列；质感有：毛玻璃，战损等等。

特别是贯穿在三人小队的旗帜图形，也是成为 SEED 核心视觉元素。界面的色彩使用上保留了端游经典的红白灰的配色组合。

第二步进行模块化的 UI 规范输出。在项目开发周期时限短且需求量巨大的前提下，我们建立了一个建立完善的组件库与规范库，这是保证设计的统一性和延展性的必要前提。

持续做规范化设计能有效地减少试错成本，也可以避免一些不必要的争议。搭建完整的组件库可方便各模块同学后续快速查找和响应。除了保证输出的统一性，也为后续铺量打下坚实基础。

经过前期端游资源梳理、视觉元素提炼与规范制作，又是如何应用？这里将以大厅设计为例为大家分享。

大厅是玩家接触到的第一个界面，也是核心体验中的重要展示部分，承载了各大核心功能与商业化入口。

端游的赛季主题多变，在游戏大厅的设计上也是有很好的延展。手游视觉设计，如何保持视觉平衡能兼具功能性与运营要求，还能传达 ApexM 独有的调性？

初版的大厅设计在内部公布时虽然有认可的声音，但并未能让大家觉得眼前一亮，所以在项目主美的支持下，我们又开始寻找新的方向，寻找更鲜明的记忆点。

就在我们苦于没有灵感的时候，端游 S3 赛季有一段预告片展示的是英雄跳伞前，在船舱内部活动的一些桥段，每个英雄都有属于自己的一块休息区域，跳伞前也会有升降仓和头顶 LED 屏幕显示小队传奇的照片，整体仪式感非常强。

所以看过这个视频之后，引发了大家很多思考，经过很多轮的脑暴，我们决定试着将从新手引导到最后的游戏结算，整合成一条游戏备赛的概念，贯穿进入游戏各个关键环节，希望利用镜头做流畅过渡，强化视觉表现力。

大厅的背景设定，也就锁定在船舱内部，成为核心体验中的很重要的核心环节。船舱这个概念确定，仅是一个大的前提，落地在具体 UI 设计时，我们同样经历了长时间的推敲和打磨。

期间目标是很明确，比如角色的展示就是 Demo 期就确定会用到半身像。这是和端游不同的一点，但后续切换到组队的时候就会变成全身，目的就是为了让玩家在小画幅手机上看到更好的展示模型品质效果。

与端游相同点在哪里？延续一贯扁平与斜切视觉语言，界面色调也是还原了端游的灰白红的组合，并且保留底部 TAB 页少部分毛玻璃的质感。

与端游不同的是，UI 整体框架会模拟机舱 HUD 操控台，利用 45% 切角与斜切图形元素提炼组合使用。最为重点是非常醒目的红色 Play 按钮，它在中心摆放的位置。前期其实我们也是有一些讨论，最后经过多轮讨论，我们也是觉得这样的摆放位置可以让玩家操作更具仪式感，也是可以区别于其他 FPS 游戏的设计，渐渐地也成为我们手游独有的非常强的记忆点。

综上所述，我们在 IP 视觉继承上可以总结出几个方面：

对 IP 方的海量 UI 资源进行分类整合，便于后续视觉提炼与快速找查； 对端游界面的图形、色彩、质感提炼，并且最重要找到核心 SEED 图形并延展设计，从而强化视觉认知； 模块化的 UI 规范输出； 深挖世界观，例如大厅舱内场景的选择，或者是商城哈蒙德，还有新手引导中的身份证，即便它们并未在端游游戏画面出现过，玩家仍会认为这“还是那个 Apex”，我我们只是让它更完整地呈现出来。 刚才聊了我们基于 IP 的继承，那手游里需要找到自己特性的创新点又有哪些呢？

拿赛季举例，端游是平均每 90 天更新一次大赛季，手游更新内容则更为丰富，分为大小双赛季，并且更新时间更快。除了 BattlePass、运营化的主题包装和赛季商店，赛季币完成局外的兑换与购买，还有其他丰富的运营活动内容并行。

那么赛季视觉包装怎么做？首先我简单说一下赛季的主要作用是什么。

赛季作为竞技类型游戏核心商业化最重要的组成部分，整合了新的卖点、新的角色和皮肤，以及 BattlePass 和其他的特别奖励。它的重要任务是通过快速和强烈的视觉冲击来吸引玩家，反复强化玩家对赛季的印象，引导玩家去接触赛季相关的内容。

这里总结了几个设计重点，分别是：主题定位，传奇画像，风格气氛定调，镜头情境感的代入。

大家看到的这个 Apex 端游赛季主题所做的视觉风格拓展，已经很丰富了。ApexM 也会延续了这一设计方式，将更具整体性的主题感氛围做到代入设计，结合新传奇属性，拓展丰富度和新鲜感。

现在大家看到的是端游赛季主体标识，主要色彩的提炼。

我现在介绍一下 S1 赛季的视觉设计。S1 赛季的主题是“Prime Time 鼎沸之刻”，它是 Apex Game 的一场盛大揭幕赛，整体设计力求最大还原端游的基础上，突出这场顶级赛事的宏大和热烈氛围，地图也是 Apex 的经典战场，世界边缘。

S1 赛季 LOGO，分别是扁平化、3D 和结合动效之后的效果。这个 S1 LOGO 图形上方的 7 个星球，代表了辛迪加组织控制下的 7 个国家，概念是 Apex 在辛迪加世界中举行的首场竞赛。实体 LOGO 演绎也是视觉设计通过分镜方式创意输出，而最终得到的效果呈现。

现在大家看到的 S1 赛季的色彩与视觉元素，也是与端游首赛季保持一致。用到红色作为首赛季的主基调色彩，辅助色为黄黑金，选择融入了热烈氛围的飘带，端游代表性 LOGO 旗帜元素，结合世界边缘有场景的岩浆地貌作为氛围感的烘托，并且保留了端游最具有仪式感的旗帜转场的效果。

现在展示的是赛季商店，赛季商店作为赛季包装系列内容的一部分。前期概念设定受美国一档体育频道 ESPN 演播室启发，最终锁定在了该赛季主题下的商店展厅去延展做设计。

前期综合主美意见，考虑到后续的制作成本，所以后续只需在原 3D 搭建的基础上进行屏幕设计，结合动效与场景的灯光渲染，完成了一个可复制利用的场景模块。

大家看到蓝色的这块就是 S1.5 赛季复用之后的效果。

在视觉元素上的运用，我们选择了 LED 故障风与字母动态展示屏幕的效果结合展厅地面的折射，整体氛围感是更酷炫的。

S1 整套赛季商店设计也成为了一个优秀设计案例，奠定了 ApexM 官网风格。

所以主题化的视觉包装，只要一旦找到了世界观作为切入主线，后面精彩内容的涌现也就顺理成章，但是前期所花费的思考与决策准备时间需要更充分，对于促成好的设计结果尤为重要。

S1 赛季的视觉包装也是确立了我们手游的基本视觉方向，同时也获得了项目与监修方的认可。ApexM 的品牌设计从赛季商店的设计中获得灵感并开始提炼，进行延伸和发展，于是形成了手游自身的品牌调性。某种层面说，游戏视觉和品牌设计形成了比较一致的表达。

图上是 S1 赛季的拍脸图，有电子感的故障元素在，我们就是将电子故障感元素替换了之前端游的弹道战损元素。为什么要做替换呢？就是因为战损风在大屏端游上会很容易被识别出来，但换到手机小画幅的局限性，视觉上就会表现成脏色和一些不规则的点儿，替换之后这种电子故障肌理感在手机上看其实也像某种程度的战损。

下面说一下品牌色，我们的手游品牌色也是传承端游，但手游的红会来得比端游更加热烈，对比也更为强烈，而这恰恰就是我们手游想体现的味道：更大胆、更快、更有活力与能量。

现在看到的是 ApexM 商业运营图，设计难度在于，如何做到吸引玩家还能保有强烈独特的品牌感， 而且这个品牌感手游独有的，是可以区别于端游的。

ApexM 每个赛季都有非常鲜明的主题，拿 S2 赛季来举例子，主题是“失真”，它有几个关键词，分别是电音、律动、派对、霓虹灯， 构成了这个赛季的核心概念。

我们选择了紫色代表这个赛季印象色彩，结合 ApexM 故障元素作为基本的构成形式。结合新传奇女 DJ 自身属性，既延续了赛季本身的包装特点，又突出了品牌感，最终呈现的效果也是非常具有 ApexM 的辨识性和冲击力。

基于 IP 创新做一个回答：首先，手游品牌色更加明快，手游与端游整体区分度更高；把原有图形的某些设计细节改为更适合手游的新表达，不仅在平面结构中不断把它强调出来，去广泛应用于大型版面设计，提升图形曝光量；手游也有更完整的赛季展示，更快的更新节奏，和更鲜明的商业化主题包装内容。

综上所述，手游延续 IP 视觉设计是为了让玩家可以体验到原汁原味的 Apex。Apex 手游视觉设计所做的一切继承与创新，都是基于产品环境的改变。

手机平台较之于 PC 平台，有着受众群体庞大、小屏幕高 DPI、在线时间更灵活、观察与操作一体等天然区别，随之产生诸如游戏时间碎片化、使用场景复杂、目标用户范围扩展等一系列需要解决的问题。

针对这些问题，所以 ApexM 在视觉调性上选择更大胆、更快、更有活力与能量的新表达，希望将 ApexM 带到了用户规模更加庞大的新舞台。

Apex 故事还在继续，ApexM 设计之路也在继续。我今天的分享到此结束，感谢各位，谢谢。

转载自光子设计中心公众号：「光子设计中心（GZDesigncenter）」

编者按：本文从用户行为的特征、相关的设计模型、用户行为设计和验证4个方面，帮你掌握交互设计中的用户行为设计。更多行为设计干货：万字长文！超全面的行为设计指南在实际的设计过程中，通过观察或共情用户行为可以反映出很多问题，可以帮助洞察出更多价值或新的机遇。

编者按：本文从用户行为的特征、相关的设计模型、 用户行为设计 和验证4个方面，帮你掌握 交互设计 中的用户行为设计。

更多行为设计干货：

万字长文！超全面的行为设计指南 在实际的设计过程中，通过观察或共情用户行为可以反映出很多问题，可以帮助洞察出更多价值或新的机遇。

阅读文章 >

什么是交互设计？

交互设计是针对流程进行的设计，为确保用户与产品接触时有符合的行为习惯，保持操作过程的流畅逻辑，需要通过交互设计来引导行为，设计整个行为流程。

流程中需要考虑接触前的信息显示，接触过程中的体验反馈，以及接触后的结果反馈，来给予我们下一步的行为指示。交互流程的目的以提升用户使用产品过程的体验感受为目标。

那么我们应该根据用户习惯设计功能？还是设计可以改变用户原有使用习惯？产品设计该以什么样的交互方式呈现？我们的设计又是否为用户带来愉悦的使用体验？

一、用户行为特征 1. 用户行为的认知塑造

在《俞军产品方法论》中关于用户行为背后原理的阐述，在行为发生前，用户会接受一个情境的刺激，然后用户会根据已有的认知经验去产生一个主观的期望效果，并产生与之对应的行为。行为产生的结果反馈又会成为认知经验，从而可能对用户的下一次行为产生影响。

用户的行为认知具有可塑性，会根据每次行为的反馈积累经验来完善认知模型，每次的结果反馈也会影响用户下一次产生相应行为的判断。可见用户行为其实也是一个不断学习和适应的过程。

用户行为受以往经验影响，即在使用产品前就会根据认知去引导行为的产生。不只在同一产品中会有这种行为，用户同样会把认知经验也代入到相似产品上，继而有着相同的使用期望和操作行为。

这与尼尔森提出的雅各布定律有着相同的理论结果，作为 10 大可用性原则的提出者，他通过研究发现用户更善于根据已积累的经验来使用产品。

雅各布定律

用户将大部分时间花在其他网站上。这意味着用户更喜欢您的网站与他们已经知道的所有其他网站相同的方式工作。

让设计更有说服力的20条经典原则：雅各布定律 编者按：作者整理了 20 条经典原则，并通过正反例子说明这些原则在设计中是如何运用的。

阅读文章 >

遇到新事物时，当产品概念与用户认知不匹配，用户在使用产品的过程中就会由于不一样的理解方式而产生困惑，甚至产生持续性的错误操作，所以在设计思考中应尽量考虑用户原有认知习惯。

举个较简单的例子，在抖音习惯了竖屏沉浸式浏览短视频的行为后，在相应视频类产品也会产生同样需求的场景，提供对应的功能满足用户需求，有助于用户使用产品提升平台内容的消费曝光，相同的交互方式和内容信息展示也有助于降低用户理解成本，提升使用体验。

2. 习惯养成的用户体验

认知负荷

为什么用户更喜欢根据已有经验来使用产品？这就需要了解另一个概念，认知负荷。

认知负荷是指一个人工作记忆中正在使用的注意力或者精神力总量。

人对信息的理解、短时记忆存储是有容量限制的，当我们的大脑接收的信息超过了上限, 就会减慢大脑信息处理的效率，在短时间内处理大量信息必然会增加大脑的认知负荷，进而影响到判断与决策。

而用户在操作任务时，相关信息又会存储在大脑的短期记忆中，在理解页面信息时，需要识别、思考、记忆越多就会产生负荷。

表现在用户自身上的就会觉得复杂，“这个是什么意思？”、“接下来要做什么”等等问题都会转变成负向的情绪反馈。

所以用户行为的习惯性是因为行为反馈符合自身认知，这样让产品使用起来更“简单”。好的设计不需要让用户过多思考，这也指导我们设计师在方案思考的时候要可能降低用户学习成本。

习惯迁移

既然用户行为习惯如此重要，那么就无法改变了吗？

一般来说，旧的行为体验越久，形成的沉没成本越高，由于损失厌恶心理的存在，用户接受新体验方式的意愿会越低，沉没成本是指过去的决策所产生的不可挽回的成本，包括时间、金钱和精力等等。

用户和产品的关系在于价值互换，如果一个产品对用户来说没有价值，即使体验再好也不会去用，而当用户因为需求价值来使用产品时，如果体验足够好就可能留下来，用户习惯迁移的最迫切问题就是怎样让新的产品（体验）所能提供的用户使用价值，足够忽略沉没成本的损失。

在《俞军产品方法论》中，给出了提升用户价值有三种方式：让新体验最大化，让旧体验最小化，降低替换成本，三者互相影响。

在产品设计中，我认为尽可能的根据用户行为习惯去设计可以帮助用户更好的理解和使用产品，为用户习惯设计不是简单的对竞品模仿复制功能使用，而是更多关注用户自身的行为需求去提供更多的产品价值，提升使用过程中的体验，做到有价值的设计创新。

抖音目前的成功毋庸置疑，它改变了原有的视频浏览方式，通过沉浸式内容展示提升了用户专注度，滑动切换视频保证了视频浏览的延续性，将音乐当成视频素材进行二次创作等等一系列创新都提升了产品价值。

所有的行为习惯都需要学习，但是好的习惯用户只需要学习一次，上滑手势的交互动作几乎不需要什么成本，对视频流内容获取也有着很强的成瘾性，很容易形成行为习惯。

作为抖音前身的 Musically，创始人朱骏通过观察当代年轻人在手机上的使用，将原本教育平台的构想转向做娱乐化平台适应人群行为习惯。

年轻人有着极强的个性表现需求，并且已经在诸如 YouTube，Snapchat 等平台懂得如何剪辑，拍摄视频，内容生产不需要有过多的学习成本。但即便如此，还是发现了平台用户的上传频率不高，用户很难保持高活跃的产出。

后来为了养成用户随时随地创作内容的习惯，将产品价值调整为专业对口型 APP，顺应当时一个对口型挑战的节目观众的模仿需求，进一步降低了内容生产门槛，优化了原本普遍认知下的上传拍好的视频片段到软件，再添加音乐进行剪辑的流程，这也极大的提升了内容生产效率。

我很认同他说的，一个产品成功的核心，其实是因为他的一个功能很能打，不在于一直增加功能。

二、用户行为模型 商业产品开发最终都是为实现商业价值，循序渐进地培养用户行为习惯，有助于更高的留存，对于用户行为设计、习惯设计，本质上都是通过一系列优秀的体验来强化行为习惯，加强用户需求与产品价值间的关联，让用户自然而然的形成品牌认知，比如当用户想打车或者想购物时心中所浮现的产品。

在行为设计中，有诸多因素会影响用户是否会去使用产品/功能，福格模型将影响用户行为的因素总结成以下概念：

B=MAP

这个概念看似简单，但是适用于所有类型的行为，并且有很强的通用性，这个概念由行为科学家福格提出来，为各个领域的行为设计提供解决方案。

福格行为模型

当动机 (M)、能力 (A) 和提示 (P) 同时出现时，就会发生行为 (B)

如何提高设计转化？先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。

阅读文章 >

希望用户具有哪些行为，用策略进行引导，设计满足三个条件的方案或制造条件满足，福格模型对我们的设计方向也提供了更多的想法。

总的来说，为触发用户对产品的使用行为，需要给予用户足够的动机，帮助用户获得能力，设计足够明显的提示。

在动机方面可以考虑用户自身想要的内在需求，或通过外界获得利益激励，也可以根据用户心理需求形成用户间竞争、跟风、群聚等羁绊。

我们在设计上极可能地降低使用门槛，降低复杂程度，帮助用户减轻心理负担或解除忧虑。

考虑当下场景给予明显的提示，做到“需要什么的时候刚好出现什么”，符合自身行为需求，保持用户产品使用流程的连续性也有助于体验的提升。

三、用户行为设计 用户行为是指用户与产品进行交互的方式，设计师根据用户行为特征进行设计，来提升产品使用过程中的用户体验，通过福格模型我们可以有更多的方案思考方向，在产品行为设计上比较常用的方式可以分成引导和预判两种类型。

引导设计 需要让用户明确当前的状态，知道下一步能做的事情，避免用户行为中断；而预判类型主要需要考虑用户下一步的行为，当用户有明确的行为目标时，辅助用户高效完成。

1. 引导 未完成效应

利用心理学上的蔡格尼克记忆效应来提升用户对未完成状态的关注度，比如以进度条形式的任务类型。部分遮挡的内容信息设计方式也可以传达给用户，滑动可以查看更多内容的行为引导。

让设计更有说服力的20条经典原则：冯·雷斯托夫效应、蔡格尼克记忆效应 编者按：文章将设计理论运用到实际案例中进行分析，更有助于理解。

阅读文章 >

信息提示

在用户操作过程中，通过信息提示可以让用户明确不同操作行为的结果反馈，引导用户做出符合自己预期的行为，降低不确定性和误操作。

比如通过下拉操作出现的淘宝二楼，和微信中语音信息的发送都进行了信息提示。

视觉动线

通过对用户视线方向进行引导，达到传达提示作用，在游戏设计中比较常用于方向指引。

如光遇中，用户行进方向错误时，会有些微的镜头偏移到正确方向来进行提示，或者如原神中，直接以道路的行进方向来提示位置信息。

物理映射

通过隐喻设计的方式，让用户联想与物理环境中相似事物的特征，通过拟物的方式建立联系，将现实生活中的认知代入产品中，以达到降低理解成本的作用。

比如在好好住中，利用陀螺仪来模拟物体掉落的重力感，增强了徽章的真实感和趣味性，网易云音乐模拟了黑胶唱片换盘、播放暂停等操作，仪式感满满。

2. 预判 符合情境

产品设计的一个值得关注的点是合时宜，在不同的情境中，用户的行为和意图也会有所不同，针对性的进行区分设计才会更符合用户预期。

比如在美团外卖中，在午间或晚间不同时间段打开的内容推荐也会有所差异，会根据时间段区分不同的内容展示。

高频行为

用户与产品的关系是，用户通过产品的使用来解决自身需求。在支付宝中，作为支付平台，用户间的高频行为是转账、发红包等交易行为，给予更多显示可以降低查找成本。

腾讯视频作为内容平台，内容推荐的优先级也受用户喜好等因素影响，在一般情况下，用户手动标记的追剧内容会比单纯平台内容推荐更有播放需求，也更容易触达用户提升播放动机。

临时反馈

在一些流程设计中可能存在较强的上下步骤连续性，在系列行为完成前，用户的关注度会更高。当原流程中，若短时间内重要的反馈信息需要强调时，将信息以成本最低的方式直接曝光给用户，可以提升在整个流程中的高效率体验。

饿了么作为外卖应用，当用户下单后到收到外卖之前，再次使用 APP，关注度最高的是当前订单配送的位置时效，收货后订单状态的优先级就会被降低，通过临时状态的显示规则，可以灵活的解决信息显示优先级的不同状态。

同样在 iOS 短信验证码的获取过程中，因为验证码的获取和输入有着较强的关联，收到短信后直接显示便于填写，输入之后信息的需求降低，可以间隔时间或操作后自动消失。

简化流程

在功能使用中，设计师应该在功能使用，有符合用户行为认知的前提下，尽可能不需要让用户频繁操作，应该缩短操作路径，减少多余思考成本。

在微博首页的信息流中，当没有评论数时点击，会在当前页面直接显示进入评论流程，不中断当前信息浏览的状态；当有评论时点击，会进入详情页的评论区。

一般来说，签到都是为了提升用户活跃的功能，通过外部奖励养成启动 APP 的习惯。朴朴中用户点击签到入口，跳转到签到页时，会自动进行签到，在用户目的明确的情况下减少了还需手动再次触发点击的行为。

四、用户行为验证 在设计方案的分析中，我们会设想最理想的用户行为路径来思考，但用户实际的产品使用过程有时候会与我们设想的有所差异。

在设计之初就需要考虑到用户的行为路径可能不只是一个线性活动，需要考虑多种行为路径的情况加以权衡。并且我们所做的设计是针对某一类群体的行为，而非独立的某一个用户，考虑这类群体的行为共通性，才避免陷入过于过于绝对的细节判断。

为了设计更符合用户行为的方案，用户调研应贯穿整个流程，通过定性和定量分析相结合来辅助我们做设计决策。

定性分析一般可以通过用户访谈的方式来来了解用户体验的具体反馈和原因。

定量分析通过埋点数据来验证群体行为的普遍特征，常用的数据主要关注以下两种类型：

使用数据：

PV：进入页面或者功能使用的次数 UV：进入页面或者是功能使用的用户个数，基于 PV 进行查重 曝光率：进入用户视野中的次数 步骤转化：

转化率：完成上一个步骤到下一个步骤的用户个数百分比 参考资料：

尼尔森诺曼集团 Nielsen Norman Group： www.nngroup.com 福格行为模型 B=MAP： https://behaviormodel.org/ 欢迎关注作者微信公众号：「小馒头的交互笔记」

编者按：本文从用户行为的特征、相关的设计模型、用户行为设计和验证4个方面，帮你掌握交互设计中的用户行为设计。更多行为设计干货：万字长文！超全面的行为设计指南在实际的设计过程中，通过观察或共情用户行为可以反映出很多问题，可以帮助洞察出更多价值或新的机遇。

编者按：本文从用户行为的特征、相关的设计模型、 用户行为设计 和验证4个方面，帮你掌握 交互设计 中的用户行为设计。

更多行为设计干货：

万字长文！超全面的行为设计指南 在实际的设计过程中，通过观察或共情用户行为可以反映出很多问题，可以帮助洞察出更多价值或新的机遇。

阅读文章 >

什么是交互设计？

交互设计是针对流程进行的设计，为确保用户与产品接触时有符合的行为习惯，保持操作过程的流畅逻辑，需要通过交互设计来引导行为，设计整个行为流程。

流程中需要考虑接触前的信息显示，接触过程中的体验反馈，以及接触后的结果反馈，来给予我们下一步的行为指示。交互流程的目的以提升用户使用产品过程的体验感受为目标。

那么我们应该根据用户习惯设计功能？还是设计可以改变用户原有使用习惯？产品设计该以什么样的交互方式呈现？我们的设计又是否为用户带来愉悦的使用体验？

一、用户行为特征 1. 用户行为的认知塑造

在《俞军产品方法论》中关于用户行为背后原理的阐述，在行为发生前，用户会接受一个情境的刺激，然后用户会根据已有的认知经验去产生一个主观的期望效果，并产生与之对应的行为。行为产生的结果反馈又会成为认知经验，从而可能对用户的下一次行为产生影响。

用户的行为认知具有可塑性，会根据每次行为的反馈积累经验来完善认知模型，每次的结果反馈也会影响用户下一次产生相应行为的判断。可见用户行为其实也是一个不断学习和适应的过程。

用户行为受以往经验影响，即在使用产品前就会根据认知去引导行为的产生。不只在同一产品中会有这种行为，用户同样会把认知经验也代入到相似产品上，继而有着相同的使用期望和操作行为。

这与尼尔森提出的雅各布定律有着相同的理论结果，作为 10 大可用性原则的提出者，他通过研究发现用户更善于根据已积累的经验来使用产品。

雅各布定律

用户将大部分时间花在其他网站上。这意味着用户更喜欢您的网站与他们已经知道的所有其他网站相同的方式工作。

让设计更有说服力的20条经典原则：雅各布定律 编者按：作者整理了 20 条经典原则，并通过正反例子说明这些原则在设计中是如何运用的。

阅读文章 >

遇到新事物时，当产品概念与用户认知不匹配，用户在使用产品的过程中就会由于不一样的理解方式而产生困惑，甚至产生持续性的错误操作，所以在设计思考中应尽量考虑用户原有认知习惯。

举个较简单的例子，在抖音习惯了竖屏沉浸式浏览短视频的行为后，在相应视频类产品也会产生同样需求的场景，提供对应的功能满足用户需求，有助于用户使用产品提升平台内容的消费曝光，相同的交互方式和内容信息展示也有助于降低用户理解成本，提升使用体验。

2. 习惯养成的用户体验

认知负荷

为什么用户更喜欢根据已有经验来使用产品？这就需要了解另一个概念，认知负荷。

认知负荷是指一个人工作记忆中正在使用的注意力或者精神力总量。

人对信息的理解、短时记忆存储是有容量限制的，当我们的大脑接收的信息超过了上限, 就会减慢大脑信息处理的效率，在短时间内处理大量信息必然会增加大脑的认知负荷，进而影响到判断与决策。

而用户在操作任务时，相关信息又会存储在大脑的短期记忆中，在理解页面信息时，需要识别、思考、记忆越多就会产生负荷。

表现在用户自身上的就会觉得复杂，“这个是什么意思？”、“接下来要做什么”等等问题都会转变成负向的情绪反馈。

所以用户行为的习惯性是因为行为反馈符合自身认知，这样让产品使用起来更“简单”。好的设计不需要让用户过多思考，这也指导我们设计师在方案思考的时候要可能降低用户学习成本。

习惯迁移

既然用户行为习惯如此重要，那么就无法改变了吗？

一般来说，旧的行为体验越久，形成的沉没成本越高，由于损失厌恶心理的存在，用户接受新体验方式的意愿会越低，沉没成本是指过去的决策所产生的不可挽回的成本，包括时间、金钱和精力等等。

用户和产品的关系在于价值互换，如果一个产品对用户来说没有价值，即使体验再好也不会去用，而当用户因为需求价值来使用产品时，如果体验足够好就可能留下来，用户习惯迁移的最迫切问题就是怎样让新的产品（体验）所能提供的用户使用价值，足够忽略沉没成本的损失。

在《俞军产品方法论》中，给出了提升用户价值有三种方式：让新体验最大化，让旧体验最小化，降低替换成本，三者互相影响。

在产品设计中，我认为尽可能的根据用户行为习惯去设计可以帮助用户更好的理解和使用产品，为用户习惯设计不是简单的对竞品模仿复制功能使用，而是更多关注用户自身的行为需求去提供更多的产品价值，提升使用过程中的体验，做到有价值的设计创新。

抖音目前的成功毋庸置疑，它改变了原有的视频浏览方式，通过沉浸式内容展示提升了用户专注度，滑动切换视频保证了视频浏览的延续性，将音乐当成视频素材进行二次创作等等一系列创新都提升了产品价值。

所有的行为习惯都需要学习，但是好的习惯用户只需要学习一次，上滑手势的交互动作几乎不需要什么成本，对视频流内容获取也有着很强的成瘾性，很容易形成行为习惯。

作为抖音前身的 Musically，创始人朱骏通过观察当代年轻人在手机上的使用，将原本教育平台的构想转向做娱乐化平台适应人群行为习惯。

年轻人有着极强的个性表现需求，并且已经在诸如 YouTube，Snapchat 等平台懂得如何剪辑，拍摄视频，内容生产不需要有过多的学习成本。但即便如此，还是发现了平台用户的上传频率不高，用户很难保持高活跃的产出。

后来为了养成用户随时随地创作内容的习惯，将产品价值调整为专业对口型 APP，顺应当时一个对口型挑战的节目观众的模仿需求，进一步降低了内容生产门槛，优化了原本普遍认知下的上传拍好的视频片段到软件，再添加音乐进行剪辑的流程，这也极大的提升了内容生产效率。

我很认同他说的，一个产品成功的核心，其实是因为他的一个功能很能打，不在于一直增加功能。

二、用户行为模型 商业产品开发最终都是为实现商业价值，循序渐进地培养用户行为习惯，有助于更高的留存，对于用户行为设计、习惯设计，本质上都是通过一系列优秀的体验来强化行为习惯，加强用户需求与产品价值间的关联，让用户自然而然的形成品牌认知，比如当用户想打车或者想购物时心中所浮现的产品。

在行为设计中，有诸多因素会影响用户是否会去使用产品/功能，福格模型将影响用户行为的因素总结成以下概念：

B=MAP

这个概念看似简单，但是适用于所有类型的行为，并且有很强的通用性，这个概念由行为科学家福格提出来，为各个领域的行为设计提供解决方案。

福格行为模型

当动机 (M)、能力 (A) 和提示 (P) 同时出现时，就会发生行为 (B)

如何提高设计转化？先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。

阅读文章 >

希望用户具有哪些行为，用策略进行引导，设计满足三个条件的方案或制造条件满足，福格模型对我们的设计方向也提供了更多的想法。

总的来说，为触发用户对产品的使用行为，需要给予用户足够的动机，帮助用户获得能力，设计足够明显的提示。

在动机方面可以考虑用户自身想要的内在需求，或通过外界获得利益激励，也可以根据用户心理需求形成用户间竞争、跟风、群聚等羁绊。

我们在设计上极可能地降低使用门槛，降低复杂程度，帮助用户减轻心理负担或解除忧虑。

考虑当下场景给予明显的提示，做到“需要什么的时候刚好出现什么”，符合自身行为需求，保持用户产品使用流程的连续性也有助于体验的提升。

三、用户行为设计 用户行为是指用户与产品进行交互的方式，设计师根据用户行为特征进行设计，来提升产品使用过程中的用户体验，通过福格模型我们可以有更多的方案思考方向，在产品行为设计上比较常用的方式可以分成引导和预判两种类型。

引导设计 需要让用户明确当前的状态，知道下一步能做的事情，避免用户行为中断；而预判类型主要需要考虑用户下一步的行为，当用户有明确的行为目标时，辅助用户高效完成。

1. 引导 未完成效应

利用心理学上的蔡格尼克记忆效应来提升用户对未完成状态的关注度，比如以进度条形式的任务类型。部分遮挡的内容信息设计方式也可以传达给用户，滑动可以查看更多内容的行为引导。

让设计更有说服力的20条经典原则：冯·雷斯托夫效应、蔡格尼克记忆效应 编者按：文章将设计理论运用到实际案例中进行分析，更有助于理解。

阅读文章 >

信息提示

在用户操作过程中，通过信息提示可以让用户明确不同操作行为的结果反馈，引导用户做出符合自己预期的行为，降低不确定性和误操作。

比如通过下拉操作出现的淘宝二楼，和微信中语音信息的发送都进行了信息提示。

视觉动线

通过对用户视线方向进行引导，达到传达提示作用，在游戏设计中比较常用于方向指引。

如光遇中，用户行进方向错误时，会有些微的镜头偏移到正确方向来进行提示，或者如原神中，直接以道路的行进方向来提示位置信息。

物理映射

通过隐喻设计的方式，让用户联想与物理环境中相似事物的特征，通过拟物的方式建立联系，将现实生活中的认知代入产品中，以达到降低理解成本的作用。

比如在好好住中，利用陀螺仪来模拟物体掉落的重力感，增强了徽章的真实感和趣味性，网易云音乐模拟了黑胶唱片换盘、播放暂停等操作，仪式感满满。

2. 预判 符合情境

产品设计的一个值得关注的点是合时宜，在不同的情境中，用户的行为和意图也会有所不同，针对性的进行区分设计才会更符合用户预期。

比如在美团外卖中，在午间或晚间不同时间段打开的内容推荐也会有所差异，会根据时间段区分不同的内容展示。

高频行为

用户与产品的关系是，用户通过产品的使用来解决自身需求。在支付宝中，作为支付平台，用户间的高频行为是转账、发红包等交易行为，给予更多显示可以降低查找成本。

腾讯视频作为内容平台，内容推荐的优先级也受用户喜好等因素影响，在一般情况下，用户手动标记的追剧内容会比单纯平台内容推荐更有播放需求，也更容易触达用户提升播放动机。

临时反馈

在一些流程设计中可能存在较强的上下步骤连续性，在系列行为完成前，用户的关注度会更高。当原流程中，若短时间内重要的反馈信息需要强调时，将信息以成本最低的方式直接曝光给用户，可以提升在整个流程中的高效率体验。

饿了么作为外卖应用，当用户下单后到收到外卖之前，再次使用 APP，关注度最高的是当前订单配送的位置时效，收货后订单状态的优先级就会被降低，通过临时状态的显示规则，可以灵活的解决信息显示优先级的不同状态。

同样在 iOS 短信验证码的获取过程中，因为验证码的获取和输入有着较强的关联，收到短信后直接显示便于填写，输入之后信息的需求降低，可以间隔时间或操作后自动消失。

简化流程

在功能使用中，设计师应该在功能使用，有符合用户行为认知的前提下，尽可能不需要让用户频繁操作，应该缩短操作路径，减少多余思考成本。

在微博首页的信息流中，当没有评论数时点击，会在当前页面直接显示进入评论流程，不中断当前信息浏览的状态；当有评论时点击，会进入详情页的评论区。

一般来说，签到都是为了提升用户活跃的功能，通过外部奖励养成启动 APP 的习惯。朴朴中用户点击签到入口，跳转到签到页时，会自动进行签到，在用户目的明确的情况下减少了还需手动再次触发点击的行为。

四、用户行为验证 在设计方案的分析中，我们会设想最理想的用户行为路径来思考，但用户实际的产品使用过程有时候会与我们设想的有所差异。

在设计之初就需要考虑到用户的行为路径可能不只是一个线性活动，需要考虑多种行为路径的情况加以权衡。并且我们所做的设计是针对某一类群体的行为，而非独立的某一个用户，考虑这类群体的行为共通性，才避免陷入过于过于绝对的细节判断。

为了设计更符合用户行为的方案，用户调研应贯穿整个流程，通过定性和定量分析相结合来辅助我们做设计决策。

定性分析一般可以通过用户访谈的方式来来了解用户体验的具体反馈和原因。

定量分析通过埋点数据来验证群体行为的普遍特征，常用的数据主要关注以下两种类型：

使用数据：

PV：进入页面或者功能使用的次数 UV：进入页面或者是功能使用的用户个数，基于 PV 进行查重 曝光率：进入用户视野中的次数 步骤转化：

转化率：完成上一个步骤到下一个步骤的用户个数百分比 参考资料：

尼尔森诺曼集团 Nielsen Norman Group： www.nngroup.com 福格行为模型 B=MAP： https://behaviormodel.org/ 欢迎关注作者微信公众号：「小馒头的交互笔记」