前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blend...

前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。

大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blender。

对普通的 UI 和视觉 设计师 而言，Blender 无疑更适合作为 3D 设计的工具：

多平台通用：Mac/Windows 双平台，Mac 用户无需额外购买主机 轻量化免费：对硬件要求低，安装包仅 230M，创作的作品可自由商用 3D 创作功能强大：绝大部分 3D 设计需求，都能通过 Blender 实现 渲染速度更快：Blender 自带渲染器速度很快，适合快速出图 当然，相比 C4D，Blender 的缺点是教程较少，遇到一个难题，有可能耗费一下午才能找到答案。

现在这个问题的系统解决方案来了！

优设联合京东高级视觉设计师小毅，耗费大半年的时间精力，打磨出这一套可能是目前性价比最高的 Blender 零基础直播课程！

课程原价 599 元， 限时特惠价 499 元

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

循序渐进，零基础也能轻松上手！ 3D 设计看似复杂，但只要掌握了正确完整的学习流程，也可以在短时间内快速上手。而一个拥有多年 3D 创作经验的设计师，无疑是你学习路上的绝佳帮手。

在课程设置上，Blender 系统直播课会从软件基础开始，帮你快速熟悉界面后，从一个小元素入手，用简单轻松的方式，创作出你的第一套 3D 作品，相信我，那一刻的成就感会让你有百倍信心跟完这门课！

之后课程逐步进阶，从中型场景到大型场景，每一步都增加了难度，但又控制在可接受的范围内，帮你实现 从零基础到 Blender 3D 创作达人的平滑过渡。

为了让你的基础更牢固，老师还额外录制了价值百元的 Blender 基础课，报名即送！

更详细的课程安排，可以看这份大纲：

有问必答，保姆级课程服务 无需再担心问题一直找不到答案了。参加课程后，遇到任何问题，老师和助教都会在群里解答。而且你的每一份作业，只要按时完成，都会在课程周期内得到老师的点评建议，不用担心自己在原地踏步，在这套课里，你的进步，我们帮你看见。

课程学习案例

首屈一指的小毅老师 与别的 3D 课老师不同，小毅老师作为现任的京东高级视觉设计师，承接过多次大型电商大促级别的视觉项目设计，成功落地多款上亿流量的设计项目，拥有一线实战和电商 3D 设计经验。聪明的人知道这意味着什么：他教给你的东西，是真正能落地成为作品集，去面试大厂的。

老师作品：

想跟着他一起学习 Blender，掌握 3D 创作的方法，今晚秒杀价就别错过啦

课程原价 599 元， 限时特惠价 499 元

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

Hello~大家好，我是优设插画实战营的讲师@Asen-阿森 ​很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼配色，顺便还能提升自己对造型和细节的刻画能力。在坚持画了 100 张速涂之后，我 get 到了这 4 点配色小技巧：配色被说不好看？高手这160...

Hello~大家好，我是优设插画实战营的讲师 @Asen-阿森 ​

很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼 配色 ，顺便还能提升自己对造型和细节的刻画能力。

在坚持画了 100 张 速涂 之后，我 get 到了这 4 点配色小技巧：

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

一、颜色丰富的技巧：利用色相变化 一部分朋友在刚开始画速涂的时候，会遇到一个问题“如何让照片画得看起来不像照片”，这很有可能就跟颜色有关系。

一开始速涂时，我们无法将照片的颜色转化成脑内想要的颜色，就会无脑抄照片或者直接吸照片的颜色，很容易出现颜色单调的问题。

而画面之所以产生了单调的感觉，是因为选色的时候只调整明度和饱和度，这样很难实现丰富的颜色变化。

首先要让色相产生变化。色相有对比的时候，画面自然就会看起来颜色丰富。

尽管很多照片素材本就是五彩缤纷的，当我们把色相彻底拉开的时候，确实能让画面中的颜色变多，但是颜色丰富不等于画面中出现非常多的颜色。多则乱，我们可以在色相有变化的基础上通过明度和饱和度的对比来丰富颜色。

所以想要让颜色丰富，就要在色相中找到变化，而非单纯的只调明度和饱和度，要让画面颜色有“跳跃感”，有变化。

用上面这些色彩组，来具体解释说明一下：

因此我画的这幅「露下新荷」速涂作品，也让色相产生了变化，画出来的荷叶会更有层次感。

接下来我们再大胆一点，在色相变化很大的基础上，让饱和度也完全对比开。

很多朋友也喜欢高级灰配色，高级灰它“高级”在哪，是因为削弱明度对比，且颜色的饱和度低，画面的颜色依旧很丰富，色相有变化。

我们可以把这种方式简单粗暴的理解为，在同样的黑白关系下（明度相同时），选择不同色相的颜色来进行替换，从而达到颜色丰富的效果。

tips：加入冷暖色，色相也产生会变化哦

同时我们要知道，任何一种颜色都是有冷暖倾向的，并没有绝对的意义上的冷暖颜色。红色分冷红暖红，绿色也分冷绿和暖绿。在选色的时候可以有意识地在颜色中，根据整体色调加入冷暖倾向。

二、颜色通透的技巧：利用明度&饱和度的对比 我们从一些照片中就能总结出“通透感”的共性，比如颜色整体的明度更接近于高阶区域，高阶色调的照片整体都会偏亮亮的，明度的数值在 0-33 之间（参数只是大概），比较亮丽；

又或者局部看起来透亮，是因为有饱和度及明度的对比，如同前面讲的冷暖有对比，饱和度明度也要有对比。

三、主观用色的技巧：观察客观色 主观色的前提是先学会观察客观色，利用速涂这种练习方式，从画面中看到越来越多的颜色，可以吸色但不能无脑吸色。弄明白照片中出现的颜色都是什么目的，怎么产生的。

当你观察到的客观色不局限于苹果是红色的、叶子是绿色的，而是你能发现红苹果的底部有桌面的反光色，绿叶子的表面的浅色是墙体的颜色，就代表能看到丰富的颜色，再逐渐进入到半主观色的阶段。

也就是能利用观察到的这些颜色，知道他们出现的目的，在自己的作品中就能够将这种类似的颜色效果画出来。

最后随着速涂练习的增加，你 get 到的颜色搭配组合也越多，就可以尝试从改变画面冷暖、背景颜色等这种简单的地方主观给照片改颜色。

花几分钟时间提炼照片带来的情绪，色彩情绪，明确大关系之后再开始刻画小细节，所有的局部小细节都要在包含在大的色彩关系之下。

一定要时时刻刻考虑最开始定好的冷暖色调（避免颜色过多多杂让画面看起来很碎，或者乱，或者不和谐）。

另外光对画面的颜色影响很大，有些光源色会把固有色本色覆盖掉，在没有光过多干扰下，固有色很稳定。

不断加入光之后，固有色开始发生改变（光的覆盖性），尤其是浅色的物体非常容易受周围环境色的影响。照片画多了之后，逐渐能预见光对固有色的影响而产生的变化，进而自己也会更熟练的运用主观色。

比如下面这两张，一张设定为暖色调并强化光感，营造了温馨的场景；另一张则直接改变照片的颜色，把光源色完全变成红色，其他物体的固有色受光源色的影响很大。

还有一种主观色的方法是利用现成的作品提取色卡，对照片重新进行颜色规划，这个时候我们就要打破固有色的观念，我们画的是颜色，而不是“物体”。

刚开始画速涂的时候，尽量用色块或者明显的笔触感来概括物体的颜色，而不是用笔刷磨或者糊颜色。例如下面这 4 张的物体轮廓不利索，导致细节不够或者笔触糊在一起让颜色脏脏的。

四、懒人配色的技巧 1. 相邻色搭配

在色轮上任意取一个颜色，让它与它左右两边的颜色进行组合，在色相上变化不大，基本是互相包含的关系，这种配色方式想要更丰富，就需要配合着调整明度和饱和度进行搭配。这种搭配方式不容易出错，但同时也更保守一些。

以下为相邻色搭配的作品。

2. 互补色或对比色搭配

在色环上任取一个颜色，再加上它正对面的颜色进行组合，比如黄紫。这种颜色搭配更难，因为互补色是完全不包含对方的颜色，一般都需要再加过一些过渡色让两者更和谐。当然也不排除某些作品中为了表现强烈的视觉冲击力所以会减少过渡色的面积，很强烈的对比，画面也会更活泼。

以下是采用互补色搭配的作品。

3. 三色或四色搭配

这两种方式都是在色环上直接用三角形，或者四边形取 3 或 4 种颜色（色系）。这种方法本身在色相上就已经足够丰富了，且颜色间既相互包容，又独立分明，只要控制好颜色面积，就更容易产生对比性、丰富性以及呼应性。

以下为三色和四色搭配的作品。

对于颜色来说，勇敢试错，才能试对，才能得到更多好看的并且是自己之前从未发现过的 色彩搭配 。

最后我想说的是从来都没有不好看的颜色，只有放错位置的颜色，并且对于新手来说绝大多数也并非是颜色的锅，跟造型结构、构图、甚至对元素及画面的简化概括有很大关系。

以下是一些我日常速涂作品，也都用以上所讲的内容进行配色。

UI设计中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。看似简单烦人的小红点提示，原来还有这么多设计细节！

UI设计 中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。

看似简单烦人的小红点提示，原来还有这么多设计细节！ 你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。

阅读文章 >

前言

你是否在打开 QQ、微信后，看到满屏的小红点，在强迫症的趋势下必须把它们全部消掉才感觉到能正常使用，针对社交类型的产品，我们也许愿意一一点开、逐个消除，但对非社交产品来说，很多小红点一无是处，点开纯属浪费时间、不消掉着实看着不舒服。

现实世界中存在两种人，一种是不管应用中有多少小红点都能做到“不管不问”，有需要时就点开对应的一项，对其他的直接无视；另一种是不把小红点处理干净就会原地“爆炸”的人，这就好比一觉醒来，发现脸上长了几颗痘，不挤掉浑身难受。

在笔者看来，小红点不管是为了消除而消除、还是为了将用户吸引到某处，这都是在利用设计手段为产品带来价值。作为设计师，需要思考的是如果降低或打消用户被小红点支配的恐惧、用户是否会跟随小红点的指示而产生转化，今天就来跟大家一起唠唠。

一、小红点的前世今生 1. 用户会“喜欢”小红点吗？

“强迫症”是指人们天生的对事/物的不对称、不和谐产生厌烦心理，并且打心底想要去消除这些“错误”，小红点正是利用了这一人性的弱点而成为了一把营销人手中利器。

那么用户真的会“喜欢”小红点吗？稍微查看一些资料就不难发现，大部分都是教我们“如何消除小红点”的内容，以至于很多应用被迫上线的“一键消除”操作。另外，据公开资料显示，在用户卸载 APP 的原因统计中，“消息提醒”名列前茅，这其中，小红点定然有着莫大的功劳。

事实证明，用户对小红点真的喜欢不起来，可有没有想过，一旦没了小红点，朋友发来的微信消息不能及时看到、爱人发来的短信没无法第一时间回应、钉钉上领导发来的工作任务都没能按时完成、线上购物的快递包裹被人直到顺走了才想起去找、等待打折购买的商品也跟你无缘……。无巧不成书，当自己没有碰到损失就想不到小红点还有用处。

用户对小红点可谓是又爱又恨（表面上恨大于爱），于是产品只要将其放在某些功能入口，用户要么无视它、要么刻意消除或点进去一探究竟，不管如何，站在产品角度目的就此达成。强调一点，别因为用户不得不接受就毫无底线的干扰用户，必须要在产品需求和用户体验上做到平衡，尽量想办法降低用户的抵触心理，不要天真的以为有了第一次就有很多次，没准这就是用户最后一次使用。

2. 小红点的发展历程

在如今的移动互联网时代，各大 APP 中几乎都有小红点的身影，它已然与我们的日常生活变的密不可分。那么，这些随处可见的小红点最初到底从何而来，先来了解一下小红点的起源。

关于小红点的发源地虽然众说芸芸，但其中有一个较受大众认可的说法，那就是小红点最早来自于黑莓手机系统。2009 年，黑莓推出 9700 系列，所搭载的黑莓系统使用了带“*”号的小红点，到了 2013 年，Apple 公司注册了相关专利并在 iOS 系统中使用小红点，从此，Apple 成为最终赢家、并在 iPhone 中将小红点发扬光大。

iOS 设计指南中，在推送通知方面对小红点的使用有明确的规范说明：每个通知都包含一个应用名称、APP 图标及一条消息，通知的到来伴随着声音提示、小红点即会出现在图标的右上角。随后，Android 也采用了小红点的这种视觉表现方式，以至于后来用户逐渐习惯了这种设计，小红点也成为了各 APP 的通用设计规范。

3. UI 设计中的小红点

小红点是大家最通俗的叫法，在 UI 设计中还有一个名称叫徽标（Badge），它指的是出现在图标或文字右上角、可带有数字或文字的红色圆点，小红点的出现则意味着有新内容或待处理的信息，其目的是为入口导流，起到引导用户操作、增加点击量的作用。

4. 深度了解小红点

小红点作为消息提醒的一种方式，并不仅仅只是表面上看到的视觉设计问题，它真正是一个产品营销策略及如何调度用户注意力的问题，所以我们在设计时要有敬畏之心，切勿乱用/滥用小红点，需要在产品的长期运行中不断寻找合理的契机再伺机而为，毕竟用户体验与产品利益挂钩。

用户对不同类型产品的消息提醒，其投入的精力成本和接受程度是不一样的。例如对 QQ、微信等即时通讯类产品消息的处理效率可以说是非常高，不管是认识的还是不认识的，只要是列表中的好友发来消息，有很大的概率立即点开回复，甚至在没有小红点的情况下也会去检查会话列表，以防有什么消息被漏掉；而抖音、快手这种内容型产品明显不一样，基于产品本身就没有那么强的诉求，一旦消息过多影响内容浏览就会让用户产生反感，直至忍耐度降低，就算熟人发来消息，大多数人都没有立即打开、即时回复的欲望。

这里必须要明确一点的是：适合其他产品内容提醒的 小红点设计 、并不一定适合自己的产品。

一味追求「高打开率」的小红点设计在短期内或可满足产品需求，在用户心中，不会刻意在乎小红点的多少，真正关注的是这个提醒是否跟“我”有关，如果产品不懂得节制，仅依靠“红点”的堆积来时刻吸引用户注意力，时间一长用户就会麻木，可能直接忽略掉小红点或因为不够专注而遗漏掉与自己相关的内容。所以在设计小红点之前，需要对其有一个清晰的认识，了解小红点的属性、使用场景及设计原则，然后酌情使用。

二、用户为什么会处理小红点 1. 打破信息自身的平衡

在正常情况下，任何内容都是没有小红点的，一旦某个地方突然出现小红点则意味着信息发生了变化或出现了异常，极度破坏原本信息的平衡，用户在本能反应的驱使下可能会不由自主的点开，消除红点或者一探究竟，不管如何，小红点诱发用户点击的目标就完成了。

2. 破坏周边环境的和谐

「相似性」原理告诉我们：共同视觉元素的物体看起来更有关联性，我们倾向于将看起来相似的对象视为一组或者一个模式，例如用颜色、形状，大小，方向以及纹理等视觉元素，共同组成相近的样式。

小红点的出现就严重破坏了周边的平衡、以及画面的和谐，让其中的某个内容变得与众不同并快速引起用户重视并诱发用户的点击行为。利用此种方式达到目的的还有如底部标签栏引人注目的「发布」按钮、金刚区的某个动效 icon…

3. 给用户带来不适

具有强迫症心理的人都明白，他们喜欢追求极致的完美，对于不和谐、不对称的事物会产生厌烦心理，并且会试图去纠正这些“错误”。小红点正是利用了人们的这个弱点，通过打破原本信息平衡，给用户带来不适，让用户主动点击并消除它，业务导流的目的也就此达成。

三、小红点设计三要素 小红点的天然使命就是为用户提供明确提醒，它可以是系统强加给用户的（功能/内容更新）、也可以是用户之间被动产生（对方发来的消息）或因用户自己的主动行为产生（操作结果反馈），不管以何种形式出现，它必须符合用户固有认知以及具备很强的可视性，这里我们可以从小红点的色彩、位置、形状三个方面来了解。

1. 色彩：为什么是红色

设计师都知道，红色会有一种危险、警示的感觉，并能与其他信息形成强烈的对比，很容易引用户起注意，所以小红点使用了高亮度的红色用以吸引用户注意力，促使用户去点击。

如下图所示，在不同颜色的徽标中，你是否对小红点情有独钟？

当然，也有一些产品将其他主题色用在圆点徽标中（国外产品居多），在视觉上显得与众不同，不过这也只是在少部分场景中用到，并非都统一成了主题色，且这跟产品想传达的信息权重、用户群体及内容属性有很大的关系，如果你对这一块拿捏的不是特别准，建议不要尝试，小红点虽然很大众化、很普通，可至少不会出错。

2. 形状：圆形的优势

相较于圆形，没有任何锋利的边缘及棱角，它本身的简洁性能让界面看起来更和谐、对用户更友好，且能将视线聚焦至圆的中心点，对于凸显圆形当中的文本再合适不过了。

设想一下，如果小红点用的是三角形、矩形或其他奇奇怪怪的形状，你看到后的第一反应会是什么？

一些文本内容稍多的小红点会使用圆角矩形（长方形），通过将圆角值调到最大，依然不影响使用，不存在任何棱角的圆角矩形，用户看到后的第一感觉是近乎椭圆形。

3. 位置：唯一的右上角

大家所看到的小红点绝大多数都是在元素的右上角，前面讲到过，小红点主要用于消息提醒，所以必然要依附于某个主体信息、作为辅助提示的存在，我们把主体信息看作一个整体（物体），那么它的中心点和四角存在不同的力场，会对用户产生不同的吸引力，下面将用排除法帮你找到小红点最合适的位置。

首先，为了不影响主体信息的识别性，直接排除小红点出现在元素中心位置的可能；

其次，在尼尔森的用户阅读视线模型中说过，用户浏览信息的视觉动线是从左到右、从上到下，小红点既然是辅助信息，放在元素左上角就会喧宾夺主，不太合适；

再者，因受到重力的影响，如果小红点出现在元素的左下角、右下角，总有一种向下倾斜的感觉，明显也不合适，这就是为什么倒三角“▽”总感觉立不起来、有种要倒下的感觉，而正三角“△”却能保持平衡，具有较强的稳定性；

最后只剩下右上角，虽然笔者也无法说出放在右上角的好处，甚至同样会对画面造成一定的破坏，但与出其现其他位置相比，右上角的劣势没那么明显，不管是出于产品需求、还是视觉体验，用户的接受程度自然会高一些。

（PS：不要去玩那一套，为了证明某个观点的正确性就使劲吹嘘正面、或拼命抹黑对立面，小红点放在右上角与其说明好处，倒不如说是别无选择）

有时候，我们在元素底部也会看到类似小红点的存在，例如头像下方的 VIP 标记、右下角的性别提示（女：小红点）、用户在线状态等，这些只是信息组合的一种方式，并非小红点。需记住一定，小红点的使命是传递新的消息、引导用户点击，用户一旦操作，小红点的目的就此达成、即刻消失。

四、应用场景及视觉表现方式 很多产品都会不停的更新迭代，其功能也在不断的丰富，为了提升用户对相关内容的点击率，于是小红点就被运用在了各个业务入口。因为使用场景及内容的重要程度不同，小红点也衍生出了几种不同的形式以满足对应的使用场景，笔者在这里作出了整理归类，分别对以下三种常见的样式进行分析。

1. 纯红点

纯红点是较为常见的类型，它的出现意味着“有新的内容、新的消息”，是一种较为轻量级的提醒方式，引导用户进入更深的层级或打开特定内容，从而达到增加点击量、提升业务曝光率的目的。例如：圈子有最新动态、APP 有版本、功能有新增内容等。

2. 红点/数字组合

相较于其他方式，这算是最强的红点提醒了，这种方式由纯红点演变而来，大多使用在与社交相关的功能模块中，通过红点加数字（具体数量）的消息提醒，吸引用户注意力，辅助用户获取更多信息并快速做出判断。例如：会话列表的未读消息、系统消息通知等。

3. 红点/文字组合

常用于运营活动场景中，通过“免费、热门、新、New…”等较为热门的文案，对用户产生很大的吸引力，这也是基于大多数用户的贪小便宜心理、猎奇心理等，促使用户产生强烈的点击欲望，从而达到营销的目的。

五、提升小红点价值的小技巧 1. 确保清晰的路径导向

不管是哪种类型的应用，在投放红点之前一定要考虑清楚每个层级的合理性，让所有页面的信息层级能够串联起来，确保用户有一个清晰的路径导向。

在一些体验较差应用中，点击小红点跳转至对应的页面后、却找不到与小红点相关的内容，直接导致了信息断层，用户根本不清楚产品到底想提示什么，返回到上层页面后，小红点依旧无法消除，这时候用户只能是一脸茫然，甚至一度吐槽、产生反感。

针对初/中的设计师，如果产品的功能信息繁杂、层级很难理清，可以尝试从小红点内容的最终级页面逐渐向上一层推导，这样做便于每个页面的小红点层级关系能很好地继承起来。

2. 匹配用户价值

对于小红点的投放，不能一味的图“更多、更大、更有吸引力”这种为了投放而投放的自嗨，必须要让当前内容与用户价值相匹配，才能起到小红点真正意义上的作用。

另外，也需要注意每个页面前后信息的一致性，如果最外层的小红点用了数字统计的样式，那么下一层页面所有红点数字之和应该与外层的数字统计相等，切勿将纯红点、数字组合、文字组合混合统计在一起，避免让用户产生疑惑，如有必要，下一页面的小红点可能样式云集，那就在最上层使用纯红点就可解决这个问题。

3. 微动效的使用

因为人们天生会对动态的事物更加敏感，将这一特性运用在小红点中是吸引用户注意力的好方法。很多 APP 在金刚区图标小红点中融入了动态效果，不仅能快速吸引用户注意力，还让小红点具有情感化或趣味性、带给用户更愉悦的使用体验。

动态效果只适用于运营、推广性质的文字小红点中，如果用在纯红点、数字红点中，可能会适得其反。

4. 友好的消除方式

早在 2014 年，手机 QQ 上线小红点“拖拽爆炸”的消除方式广受好评，相较于每次都要点击跳转页面、再返回的单个消除方式既便捷又有趣味性，同时又能避免追求一键清除的便捷而造成失误的尴尬（眼尖的网友会发现，大部分社交类型的应用都没有一键清除功能）。

背后的故事！手机QQ的一键消除红点功能是怎么诞生的？ 腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。

阅读文章 >

我们见过的小红点消除方式很多都是点击即可消除，还有一些需要跳转多个页面触达最终信息才能消除，同时也有部分产品为提供更便捷的操作，增加了「一键清除」功能。

那么这个页面到底是否适合一键清除操作，还得根据实际情况而定，且看以下分析：

社交/办公类型产品（数量不可控）：不适合一键清除功能，因为任何一条好友信息都有可能对用户很重要，用户有必要单独触达、且也有耐心一一点开并详细查看，一键清除有可能导致用户误操作，造成对信息的不可控；

其他类型产品（红点少）：无需一键清除，因红点本身就较少的原因，且不是必须要打开，用户可忽略或在感兴趣之余一探究竟，单独触发消除即可；

其他类型产品（红点多）：因很多红点信息是非必要打开的，可使用一键清除功能处理庞大的推送信息，让页面瞬间清净。

（PS：以上仅供参考，虽然没有足够的数据支撑，但笔者敢说的是大部分产品都是据此而行，而且也没有任何一个产品能满足所有用户的需求）

5. 验证投放效果

在一个应用中，我们在成百上千的业务入口中挑选一部分、利用小红点作为引流方式，即便前期做了充足的准备，在用户真实的使用场景中，也有可能会不合适，这时候就需要提前做好数据埋点，通过后期对用户的点击率、转化率、层级深入程度等进行综合分析，如果未达预期，则需要做出优化调整，更改小红点投放入口或表现方式。

（PS：对于新方案的规划，基于原有方案通常会设定一个提升 20%~30%的预期值，10%是勉强能接受的最低标准，如若低于 10%，必定会再次做出优化调整）

六、常见问题及处理方式 1. 避免图标元素自带红点

小红点已成为一种内容/消息提示的标志性象征，只要被用户看到就会认为有新的内容出现，在正向的回应中还好，但如果敏感的用户刻意忽略、或者以消除红点为目的的点击行为，这都将增加用户的理解成本和操作成本，得不偿失。

我们在创作图标的过程中，需要避免图标右上角本身就自带小红点的情况出现，因为绝大多数的图标造型、元素形状/大小并非无可替代，若因特殊情况不可更改，请将右上角圆点换成除红色以外的其他颜色，这也不失为一种解决方案。

2. 小红点需克制投放

很多产品为了营销、导流等原因，将大量的小红点强加给用户，这样很容易产生极端情况，要么造成用户的厌烦心理、对产品的满意度下降、甚至卸载应用，要么用户对过多的小红点产生免疫、看到后直接忽略或为了消除而消除，最终都无法达到产品想要的结果。

在投放小红点之前，除了要分析清楚投放目的及合适的入口，还需要思考是否有其他更好的方式能代替小红点，力求发挥其最大价值，如此才不至于顾此失彼。

3. 红点内容的长度限制

针对数字/文字组合的小红点，因空间有限，需提前设定好内容的长度极限值。数字红点在 99 条内都属于实时统计，超过 99 条通常会统一成“99+的样式”；两个字符为文字红点的最佳展示方式，我们在设定上限时，一般不超过 3 个字符。

4. 主层级红点数据统计

如果次级页面的小红点数量较多且样式混搭、在主层级页面需用数字红点统计数量，那么只统计次级页面只带数字红点消息的总量即可，纯红点与文字组合的直接忽略。

5. 矩形小红点的用法

在国内的应用中，矩形小红点应该很难见到，但你可能还不知道，有很多小红点都是矩形，只不过是将圆角半径值调到最大、以障眼法的形式让用户误以为这就是这个圆形。

不要以为这样做多此一举，当内容由少变多时，小红点可自由纵向、横向延伸，非常方便。例如：红点中的“折”是圆形，当变成“折扣”时就变成了长椭圆（圆角矩形）。

6. 红色元素上的小红点

当小红点用在红色图标、图片或色块时，就会与之融合在一起，很难单独看出小红点的存在，通过给红点描边就能将其分离出来，确保在红色背景或载体中能被用户清晰的看到。

7. 添加合适的投影

除了上述所说给小红点添加描边外，使用投影效果也是突出小红点不错的方式（不适合红色背景），通过吸取红点色值、然后适当加深，让小红点有一种悬浮效果，呼之欲出。

七、结语 整体看来，小红点已成为页面导流的一种有效途径，虽然不同的应用业务入口和功能使用场景也有所不同，但其设计的本质应该是如何更高效的、友好的提醒用户，不要为了应付了事而随意投放，最终红不仅严重影响用户体验，还有可能造成用户流失。

在设计小红点之前，要考虑清楚投放的必要性、以及跟产品风格一致性的表现方式，在条件允许的情况下适当增加趣味性，这样才能让那些烦人的“小红点”真正被用户接受，对产品转化起到正向效果。

以上是笔者对小红点的相关思考与总结，希望对大家有所帮助，如有不同意见，欢迎相互交流、取长补短。

欢迎关注作者微信公众号：「能量眼球」

Hello~大家好，我是优设插画实战营的讲师@Asen-阿森 ​很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼配色，顺便还能提升自己对造型和细节的刻画能力。在坚持画了 100 张速涂之后，我 get 到了这 4 点配色小技巧：配色被说不好看？高手这160...

Hello~大家好，我是优设插画实战营的讲师 @Asen-阿森 ​

很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼 配色 ，顺便还能提升自己对造型和细节的刻画能力。

在坚持画了 100 张 速涂 之后，我 get 到了这 4 点配色小技巧：

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

一、颜色丰富的技巧：利用色相变化 一部分朋友在刚开始画速涂的时候，会遇到一个问题“如何让照片画得看起来不像照片”，这很有可能就跟颜色有关系。

一开始速涂时，我们无法将照片的颜色转化成脑内想要的颜色，就会无脑抄照片或者直接吸照片的颜色，很容易出现颜色单调的问题。

而画面之所以产生了单调的感觉，是因为选色的时候只调整明度和饱和度，这样很难实现丰富的颜色变化。

首先要让色相产生变化。色相有对比的时候，画面自然就会看起来颜色丰富。

尽管很多照片素材本就是五彩缤纷的，当我们把色相彻底拉开的时候，确实能让画面中的颜色变多，但是颜色丰富不等于画面中出现非常多的颜色。多则乱，我们可以在色相有变化的基础上通过明度和饱和度的对比来丰富颜色。

所以想要让颜色丰富，就要在色相中找到变化，而非单纯的只调明度和饱和度，要让画面颜色有“跳跃感”，有变化。

用上面这些色彩组，来具体解释说明一下：

因此我画的这幅「露下新荷」速涂作品，也让色相产生了变化，画出来的荷叶会更有层次感。

接下来我们再大胆一点，在色相变化很大的基础上，让饱和度也完全对比开。

很多朋友也喜欢高级灰配色，高级灰它“高级”在哪，是因为削弱明度对比，且颜色的饱和度低，画面的颜色依旧很丰富，色相有变化。

我们可以把这种方式简单粗暴的理解为，在同样的黑白关系下（明度相同时），选择不同色相的颜色来进行替换，从而达到颜色丰富的效果。

tips：加入冷暖色，色相也产生会变化哦

同时我们要知道，任何一种颜色都是有冷暖倾向的，并没有绝对的意义上的冷暖颜色。红色分冷红暖红，绿色也分冷绿和暖绿。在选色的时候可以有意识地在颜色中，根据整体色调加入冷暖倾向。

二、颜色通透的技巧：利用明度&饱和度的对比 我们从一些照片中就能总结出“通透感”的共性，比如颜色整体的明度更接近于高阶区域，高阶色调的照片整体都会偏亮亮的，明度的数值在 0-33 之间（参数只是大概），比较亮丽；

又或者局部看起来透亮，是因为有饱和度及明度的对比，如同前面讲的冷暖有对比，饱和度明度也要有对比。

三、主观用色的技巧：观察客观色 主观色的前提是先学会观察客观色，利用速涂这种练习方式，从画面中看到越来越多的颜色，可以吸色但不能无脑吸色。弄明白照片中出现的颜色都是什么目的，怎么产生的。

当你观察到的客观色不局限于苹果是红色的、叶子是绿色的，而是你能发现红苹果的底部有桌面的反光色，绿叶子的表面的浅色是墙体的颜色，就代表能看到丰富的颜色，再逐渐进入到半主观色的阶段。

也就是能利用观察到的这些颜色，知道他们出现的目的，在自己的作品中就能够将这种类似的颜色效果画出来。

最后随着速涂练习的增加，你 get 到的颜色搭配组合也越多，就可以尝试从改变画面冷暖、背景颜色等这种简单的地方主观给照片改颜色。

花几分钟时间提炼照片带来的情绪，色彩情绪，明确大关系之后再开始刻画小细节，所有的局部小细节都要在包含在大的色彩关系之下。

一定要时时刻刻考虑最开始定好的冷暖色调（避免颜色过多多杂让画面看起来很碎，或者乱，或者不和谐）。

另外光对画面的颜色影响很大，有些光源色会把固有色本色覆盖掉，在没有光过多干扰下，固有色很稳定。

不断加入光之后，固有色开始发生改变（光的覆盖性），尤其是浅色的物体非常容易受周围环境色的影响。照片画多了之后，逐渐能预见光对固有色的影响而产生的变化，进而自己也会更熟练的运用主观色。

比如下面这两张，一张设定为暖色调并强化光感，营造了温馨的场景；另一张则直接改变照片的颜色，把光源色完全变成红色，其他物体的固有色受光源色的影响很大。

还有一种主观色的方法是利用现成的作品提取色卡，对照片重新进行颜色规划，这个时候我们就要打破固有色的观念，我们画的是颜色，而不是“物体”。

刚开始画速涂的时候，尽量用色块或者明显的笔触感来概括物体的颜色，而不是用笔刷磨或者糊颜色。例如下面这 4 张的物体轮廓不利索，导致细节不够或者笔触糊在一起让颜色脏脏的。

四、懒人配色的技巧 1. 相邻色搭配

在色轮上任意取一个颜色，让它与它左右两边的颜色进行组合，在色相上变化不大，基本是互相包含的关系，这种配色方式想要更丰富，就需要配合着调整明度和饱和度进行搭配。这种搭配方式不容易出错，但同时也更保守一些。

以下为相邻色搭配的作品。

2. 互补色或对比色搭配

在色环上任取一个颜色，再加上它正对面的颜色进行组合，比如黄紫。这种颜色搭配更难，因为互补色是完全不包含对方的颜色，一般都需要再加过一些过渡色让两者更和谐。当然也不排除某些作品中为了表现强烈的视觉冲击力所以会减少过渡色的面积，很强烈的对比，画面也会更活泼。

以下是采用互补色搭配的作品。

3. 三色或四色搭配

这两种方式都是在色环上直接用三角形，或者四边形取 3 或 4 种颜色（色系）。这种方法本身在色相上就已经足够丰富了，且颜色间既相互包容，又独立分明，只要控制好颜色面积，就更容易产生对比性、丰富性以及呼应性。

以下为三色和四色搭配的作品。

对于颜色来说，勇敢试错，才能试对，才能得到更多好看的并且是自己之前从未发现过的 色彩搭配 。

最后我想说的是从来都没有不好看的颜色，只有放错位置的颜色，并且对于新手来说绝大多数也并非是颜色的锅，跟造型结构、构图、甚至对元素及画面的简化概括有很大关系。

以下是一些我日常速涂作品，也都用以上所讲的内容进行配色。

UI设计中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。看似简单烦人的小红点提示，原来还有这么多设计细节！

UI设计 中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。

看似简单烦人的小红点提示，原来还有这么多设计细节！ 你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。

阅读文章 >

前言

你是否在打开 QQ、微信后，看到满屏的小红点，在强迫症的趋势下必须把它们全部消掉才感觉到能正常使用，针对社交类型的产品，我们也许愿意一一点开、逐个消除，但对非社交产品来说，很多小红点一无是处，点开纯属浪费时间、不消掉着实看着不舒服。

现实世界中存在两种人，一种是不管应用中有多少小红点都能做到“不管不问”，有需要时就点开对应的一项，对其他的直接无视；另一种是不把小红点处理干净就会原地“爆炸”的人，这就好比一觉醒来，发现脸上长了几颗痘，不挤掉浑身难受。

在笔者看来，小红点不管是为了消除而消除、还是为了将用户吸引到某处，这都是在利用设计手段为产品带来价值。作为设计师，需要思考的是如果降低或打消用户被小红点支配的恐惧、用户是否会跟随小红点的指示而产生转化，今天就来跟大家一起唠唠。

一、小红点的前世今生 1. 用户会“喜欢”小红点吗？

“强迫症”是指人们天生的对事/物的不对称、不和谐产生厌烦心理，并且打心底想要去消除这些“错误”，小红点正是利用了这一人性的弱点而成为了一把营销人手中利器。

那么用户真的会“喜欢”小红点吗？稍微查看一些资料就不难发现，大部分都是教我们“如何消除小红点”的内容，以至于很多应用被迫上线的“一键消除”操作。另外，据公开资料显示，在用户卸载 APP 的原因统计中，“消息提醒”名列前茅，这其中，小红点定然有着莫大的功劳。

事实证明，用户对小红点真的喜欢不起来，可有没有想过，一旦没了小红点，朋友发来的微信消息不能及时看到、爱人发来的短信没无法第一时间回应、钉钉上领导发来的工作任务都没能按时完成、线上购物的快递包裹被人直到顺走了才想起去找、等待打折购买的商品也跟你无缘……。无巧不成书，当自己没有碰到损失就想不到小红点还有用处。

用户对小红点可谓是又爱又恨（表面上恨大于爱），于是产品只要将其放在某些功能入口，用户要么无视它、要么刻意消除或点进去一探究竟，不管如何，站在产品角度目的就此达成。强调一点，别因为用户不得不接受就毫无底线的干扰用户，必须要在产品需求和用户体验上做到平衡，尽量想办法降低用户的抵触心理，不要天真的以为有了第一次就有很多次，没准这就是用户最后一次使用。

2. 小红点的发展历程

在如今的移动互联网时代，各大 APP 中几乎都有小红点的身影，它已然与我们的日常生活变的密不可分。那么，这些随处可见的小红点最初到底从何而来，先来了解一下小红点的起源。

关于小红点的发源地虽然众说芸芸，但其中有一个较受大众认可的说法，那就是小红点最早来自于黑莓手机系统。2009 年，黑莓推出 9700 系列，所搭载的黑莓系统使用了带“*”号的小红点，到了 2013 年，Apple 公司注册了相关专利并在 iOS 系统中使用小红点，从此，Apple 成为最终赢家、并在 iPhone 中将小红点发扬光大。

iOS 设计指南中，在推送通知方面对小红点的使用有明确的规范说明：每个通知都包含一个应用名称、APP 图标及一条消息，通知的到来伴随着声音提示、小红点即会出现在图标的右上角。随后，Android 也采用了小红点的这种视觉表现方式，以至于后来用户逐渐习惯了这种设计，小红点也成为了各 APP 的通用设计规范。

3. UI 设计中的小红点

小红点是大家最通俗的叫法，在 UI 设计中还有一个名称叫徽标（Badge），它指的是出现在图标或文字右上角、可带有数字或文字的红色圆点，小红点的出现则意味着有新内容或待处理的信息，其目的是为入口导流，起到引导用户操作、增加点击量的作用。

4. 深度了解小红点

小红点作为消息提醒的一种方式，并不仅仅只是表面上看到的视觉设计问题，它真正是一个产品营销策略及如何调度用户注意力的问题，所以我们在设计时要有敬畏之心，切勿乱用/滥用小红点，需要在产品的长期运行中不断寻找合理的契机再伺机而为，毕竟用户体验与产品利益挂钩。

用户对不同类型产品的消息提醒，其投入的精力成本和接受程度是不一样的。例如对 QQ、微信等即时通讯类产品消息的处理效率可以说是非常高，不管是认识的还是不认识的，只要是列表中的好友发来消息，有很大的概率立即点开回复，甚至在没有小红点的情况下也会去检查会话列表，以防有什么消息被漏掉；而抖音、快手这种内容型产品明显不一样，基于产品本身就没有那么强的诉求，一旦消息过多影响内容浏览就会让用户产生反感，直至忍耐度降低，就算熟人发来消息，大多数人都没有立即打开、即时回复的欲望。

这里必须要明确一点的是：适合其他产品内容提醒的 小红点设计 、并不一定适合自己的产品。

一味追求「高打开率」的小红点设计在短期内或可满足产品需求，在用户心中，不会刻意在乎小红点的多少，真正关注的是这个提醒是否跟“我”有关，如果产品不懂得节制，仅依靠“红点”的堆积来时刻吸引用户注意力，时间一长用户就会麻木，可能直接忽略掉小红点或因为不够专注而遗漏掉与自己相关的内容。所以在设计小红点之前，需要对其有一个清晰的认识，了解小红点的属性、使用场景及设计原则，然后酌情使用。

二、用户为什么会处理小红点 1. 打破信息自身的平衡

在正常情况下，任何内容都是没有小红点的，一旦某个地方突然出现小红点则意味着信息发生了变化或出现了异常，极度破坏原本信息的平衡，用户在本能反应的驱使下可能会不由自主的点开，消除红点或者一探究竟，不管如何，小红点诱发用户点击的目标就完成了。

2. 破坏周边环境的和谐

「相似性」原理告诉我们：共同视觉元素的物体看起来更有关联性，我们倾向于将看起来相似的对象视为一组或者一个模式，例如用颜色、形状，大小，方向以及纹理等视觉元素，共同组成相近的样式。

小红点的出现就严重破坏了周边的平衡、以及画面的和谐，让其中的某个内容变得与众不同并快速引起用户重视并诱发用户的点击行为。利用此种方式达到目的的还有如底部标签栏引人注目的「发布」按钮、金刚区的某个动效 icon…

3. 给用户带来不适

具有强迫症心理的人都明白，他们喜欢追求极致的完美，对于不和谐、不对称的事物会产生厌烦心理，并且会试图去纠正这些“错误”。小红点正是利用了人们的这个弱点，通过打破原本信息平衡，给用户带来不适，让用户主动点击并消除它，业务导流的目的也就此达成。

三、小红点设计三要素 小红点的天然使命就是为用户提供明确提醒，它可以是系统强加给用户的（功能/内容更新）、也可以是用户之间被动产生（对方发来的消息）或因用户自己的主动行为产生（操作结果反馈），不管以何种形式出现，它必须符合用户固有认知以及具备很强的可视性，这里我们可以从小红点的色彩、位置、形状三个方面来了解。

1. 色彩：为什么是红色

设计师都知道，红色会有一种危险、警示的感觉，并能与其他信息形成强烈的对比，很容易引用户起注意，所以小红点使用了高亮度的红色用以吸引用户注意力，促使用户去点击。

如下图所示，在不同颜色的徽标中，你是否对小红点情有独钟？

当然，也有一些产品将其他主题色用在圆点徽标中（国外产品居多），在视觉上显得与众不同，不过这也只是在少部分场景中用到，并非都统一成了主题色，且这跟产品想传达的信息权重、用户群体及内容属性有很大的关系，如果你对这一块拿捏的不是特别准，建议不要尝试，小红点虽然很大众化、很普通，可至少不会出错。

2. 形状：圆形的优势

相较于圆形，没有任何锋利的边缘及棱角，它本身的简洁性能让界面看起来更和谐、对用户更友好，且能将视线聚焦至圆的中心点，对于凸显圆形当中的文本再合适不过了。

设想一下，如果小红点用的是三角形、矩形或其他奇奇怪怪的形状，你看到后的第一反应会是什么？

一些文本内容稍多的小红点会使用圆角矩形（长方形），通过将圆角值调到最大，依然不影响使用，不存在任何棱角的圆角矩形，用户看到后的第一感觉是近乎椭圆形。

3. 位置：唯一的右上角

大家所看到的小红点绝大多数都是在元素的右上角，前面讲到过，小红点主要用于消息提醒，所以必然要依附于某个主体信息、作为辅助提示的存在，我们把主体信息看作一个整体（物体），那么它的中心点和四角存在不同的力场，会对用户产生不同的吸引力，下面将用排除法帮你找到小红点最合适的位置。

首先，为了不影响主体信息的识别性，直接排除小红点出现在元素中心位置的可能；

其次，在尼尔森的用户阅读视线模型中说过，用户浏览信息的视觉动线是从左到右、从上到下，小红点既然是辅助信息，放在元素左上角就会喧宾夺主，不太合适；

再者，因受到重力的影响，如果小红点出现在元素的左下角、右下角，总有一种向下倾斜的感觉，明显也不合适，这就是为什么倒三角“▽”总感觉立不起来、有种要倒下的感觉，而正三角“△”却能保持平衡，具有较强的稳定性；

最后只剩下右上角，虽然笔者也无法说出放在右上角的好处，甚至同样会对画面造成一定的破坏，但与出其现其他位置相比，右上角的劣势没那么明显，不管是出于产品需求、还是视觉体验，用户的接受程度自然会高一些。

（PS：不要去玩那一套，为了证明某个观点的正确性就使劲吹嘘正面、或拼命抹黑对立面，小红点放在右上角与其说明好处，倒不如说是别无选择）

有时候，我们在元素底部也会看到类似小红点的存在，例如头像下方的 VIP 标记、右下角的性别提示（女：小红点）、用户在线状态等，这些只是信息组合的一种方式，并非小红点。需记住一定，小红点的使命是传递新的消息、引导用户点击，用户一旦操作，小红点的目的就此达成、即刻消失。

四、应用场景及视觉表现方式 很多产品都会不停的更新迭代，其功能也在不断的丰富，为了提升用户对相关内容的点击率，于是小红点就被运用在了各个业务入口。因为使用场景及内容的重要程度不同，小红点也衍生出了几种不同的形式以满足对应的使用场景，笔者在这里作出了整理归类，分别对以下三种常见的样式进行分析。

1. 纯红点

纯红点是较为常见的类型，它的出现意味着“有新的内容、新的消息”，是一种较为轻量级的提醒方式，引导用户进入更深的层级或打开特定内容，从而达到增加点击量、提升业务曝光率的目的。例如：圈子有最新动态、APP 有版本、功能有新增内容等。

2. 红点/数字组合

相较于其他方式，这算是最强的红点提醒了，这种方式由纯红点演变而来，大多使用在与社交相关的功能模块中，通过红点加数字（具体数量）的消息提醒，吸引用户注意力，辅助用户获取更多信息并快速做出判断。例如：会话列表的未读消息、系统消息通知等。

3. 红点/文字组合

常用于运营活动场景中，通过“免费、热门、新、New…”等较为热门的文案，对用户产生很大的吸引力，这也是基于大多数用户的贪小便宜心理、猎奇心理等，促使用户产生强烈的点击欲望，从而达到营销的目的。

五、提升小红点价值的小技巧 1. 确保清晰的路径导向

不管是哪种类型的应用，在投放红点之前一定要考虑清楚每个层级的合理性，让所有页面的信息层级能够串联起来，确保用户有一个清晰的路径导向。

在一些体验较差应用中，点击小红点跳转至对应的页面后、却找不到与小红点相关的内容，直接导致了信息断层，用户根本不清楚产品到底想提示什么，返回到上层页面后，小红点依旧无法消除，这时候用户只能是一脸茫然，甚至一度吐槽、产生反感。

针对初/中的设计师，如果产品的功能信息繁杂、层级很难理清，可以尝试从小红点内容的最终级页面逐渐向上一层推导，这样做便于每个页面的小红点层级关系能很好地继承起来。

2. 匹配用户价值

对于小红点的投放，不能一味的图“更多、更大、更有吸引力”这种为了投放而投放的自嗨，必须要让当前内容与用户价值相匹配，才能起到小红点真正意义上的作用。

另外，也需要注意每个页面前后信息的一致性，如果最外层的小红点用了数字统计的样式，那么下一层页面所有红点数字之和应该与外层的数字统计相等，切勿将纯红点、数字组合、文字组合混合统计在一起，避免让用户产生疑惑，如有必要，下一页面的小红点可能样式云集，那就在最上层使用纯红点就可解决这个问题。

3. 微动效的使用

因为人们天生会对动态的事物更加敏感，将这一特性运用在小红点中是吸引用户注意力的好方法。很多 APP 在金刚区图标小红点中融入了动态效果，不仅能快速吸引用户注意力，还让小红点具有情感化或趣味性、带给用户更愉悦的使用体验。

动态效果只适用于运营、推广性质的文字小红点中，如果用在纯红点、数字红点中，可能会适得其反。

4. 友好的消除方式

早在 2014 年，手机 QQ 上线小红点“拖拽爆炸”的消除方式广受好评，相较于每次都要点击跳转页面、再返回的单个消除方式既便捷又有趣味性，同时又能避免追求一键清除的便捷而造成失误的尴尬（眼尖的网友会发现，大部分社交类型的应用都没有一键清除功能）。

背后的故事！手机QQ的一键消除红点功能是怎么诞生的？ 腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。

阅读文章 >

我们见过的小红点消除方式很多都是点击即可消除，还有一些需要跳转多个页面触达最终信息才能消除，同时也有部分产品为提供更便捷的操作，增加了「一键清除」功能。

那么这个页面到底是否适合一键清除操作，还得根据实际情况而定，且看以下分析：

社交/办公类型产品（数量不可控）：不适合一键清除功能，因为任何一条好友信息都有可能对用户很重要，用户有必要单独触达、且也有耐心一一点开并详细查看，一键清除有可能导致用户误操作，造成对信息的不可控；

其他类型产品（红点少）：无需一键清除，因红点本身就较少的原因，且不是必须要打开，用户可忽略或在感兴趣之余一探究竟，单独触发消除即可；

其他类型产品（红点多）：因很多红点信息是非必要打开的，可使用一键清除功能处理庞大的推送信息，让页面瞬间清净。

（PS：以上仅供参考，虽然没有足够的数据支撑，但笔者敢说的是大部分产品都是据此而行，而且也没有任何一个产品能满足所有用户的需求）

5. 验证投放效果

在一个应用中，我们在成百上千的业务入口中挑选一部分、利用小红点作为引流方式，即便前期做了充足的准备，在用户真实的使用场景中，也有可能会不合适，这时候就需要提前做好数据埋点，通过后期对用户的点击率、转化率、层级深入程度等进行综合分析，如果未达预期，则需要做出优化调整，更改小红点投放入口或表现方式。

（PS：对于新方案的规划，基于原有方案通常会设定一个提升 20%~30%的预期值，10%是勉强能接受的最低标准，如若低于 10%，必定会再次做出优化调整）

六、常见问题及处理方式 1. 避免图标元素自带红点

小红点已成为一种内容/消息提示的标志性象征，只要被用户看到就会认为有新的内容出现，在正向的回应中还好，但如果敏感的用户刻意忽略、或者以消除红点为目的的点击行为，这都将增加用户的理解成本和操作成本，得不偿失。

我们在创作图标的过程中，需要避免图标右上角本身就自带小红点的情况出现，因为绝大多数的图标造型、元素形状/大小并非无可替代，若因特殊情况不可更改，请将右上角圆点换成除红色以外的其他颜色，这也不失为一种解决方案。

2. 小红点需克制投放

很多产品为了营销、导流等原因，将大量的小红点强加给用户，这样很容易产生极端情况，要么造成用户的厌烦心理、对产品的满意度下降、甚至卸载应用，要么用户对过多的小红点产生免疫、看到后直接忽略或为了消除而消除，最终都无法达到产品想要的结果。

在投放小红点之前，除了要分析清楚投放目的及合适的入口，还需要思考是否有其他更好的方式能代替小红点，力求发挥其最大价值，如此才不至于顾此失彼。

3. 红点内容的长度限制

针对数字/文字组合的小红点，因空间有限，需提前设定好内容的长度极限值。数字红点在 99 条内都属于实时统计，超过 99 条通常会统一成“99+的样式”；两个字符为文字红点的最佳展示方式，我们在设定上限时，一般不超过 3 个字符。

4. 主层级红点数据统计

如果次级页面的小红点数量较多且样式混搭、在主层级页面需用数字红点统计数量，那么只统计次级页面只带数字红点消息的总量即可，纯红点与文字组合的直接忽略。

5. 矩形小红点的用法

在国内的应用中，矩形小红点应该很难见到，但你可能还不知道，有很多小红点都是矩形，只不过是将圆角半径值调到最大、以障眼法的形式让用户误以为这就是这个圆形。

不要以为这样做多此一举，当内容由少变多时，小红点可自由纵向、横向延伸，非常方便。例如：红点中的“折”是圆形，当变成“折扣”时就变成了长椭圆（圆角矩形）。

6. 红色元素上的小红点

当小红点用在红色图标、图片或色块时，就会与之融合在一起，很难单独看出小红点的存在，通过给红点描边就能将其分离出来，确保在红色背景或载体中能被用户清晰的看到。

7. 添加合适的投影

除了上述所说给小红点添加描边外，使用投影效果也是突出小红点不错的方式（不适合红色背景），通过吸取红点色值、然后适当加深，让小红点有一种悬浮效果，呼之欲出。

七、结语 整体看来，小红点已成为页面导流的一种有效途径，虽然不同的应用业务入口和功能使用场景也有所不同，但其设计的本质应该是如何更高效的、友好的提醒用户，不要为了应付了事而随意投放，最终红不仅严重影响用户体验，还有可能造成用户流失。

在设计小红点之前，要考虑清楚投放的必要性、以及跟产品风格一致性的表现方式，在条件允许的情况下适当增加趣味性，这样才能让那些烦人的“小红点”真正被用户接受，对产品转化起到正向效果。

以上是笔者对小红点的相关思考与总结，希望对大家有所帮助，如有不同意见，欢迎相互交流、取长补短。

欢迎关注作者微信公众号：「能量眼球」

本文主要探讨的是在iOS交互设计中，针对「是否应该有首页 Tab」和「保持底部导航栏常驻」这两点差异展开讨论。灵动岛和 iOS 16 实时活动设计规范来了！编者按：灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，原文在这里，做设计和开发的同学记得看看。

本文主要探讨的是在iOS 交互设计 中，针对「是否应该有首页 Tab」和「保持 底部导航 栏常驻」这两点差异展开讨论。

灵动岛和 iOS 16 实时活动设计规范来了！ 编者按：灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，原文在这里，做设计和开发的同学记得看看。

阅读文章 >

苹果全球开发者大会（WWDC22）在今年 6 月如期举行，大会主要目的是向研发者们展示最新的软件和技术，其中也不乏一些设计思想。今天的文章引自会上苹果设计师分享的关于如何改善 iOS 导航的视频，结合了新观点来探讨 iOS 导航建议与实际设计中的差异。

一、iOS 导航建议概述 导航的目的是帮助人们尽快熟悉界面，以轻松发现内容并与 App 进行互动。好的导航能让人把注意力都集中在内容和体验上。导航会告诉人们在你的 App 中如何呈现项目、如何寻找信息以及如何实现目的。而导航跟用户的自然认知落差太大，就会让用户感觉这个 App 很不好用。

原视频 ¹ 陈述了底部导航栏（Tab bars）、层级式导航（Hierarchical navigation）及模态式呈现（Modal presentations）的各种改良技巧与方法。底部导航栏即我们常见的全局标签式导航，我们也称 Tab；层级式导航出现于由上层往下层信息深入的时候，通常表现为从右往左推进页面；模态式呈现专门用于展示某个界面中的独立任务，通常表现为从下往上呈现。苹果提出，底部导航栏的几个设计要点有：

使用底部 Tab 反映信息层级； 使用清晰简洁的文案； 底部 Tab 间的功能分布平衡，无重复或耦合； 避免在同一个页面反复强调一个功能； 保持底部 Tab 导航栏常驻。 其中，「使用底部 Tab 反映信息层级」与「使用清晰简洁的文案」相对明确；「底部 Tab 间功能分布平衡」和「避免在同一个 Tab 页面反复强调同一个功能」常与首页的设计相悖，由此引发苹果“删除首页”的建议；「保持底部 Tab 导航栏常驻」指全局导航栏必须始终位于屏幕底部，包括进行层级交互时，仅当模态交互时隐藏底部全局导航。这或多或少和我们常见的 App 设计实践有所出入，下面针对「是否应该有首页 Tab」和「保持底部导航栏常驻」这两点差异展开讨论。

二、是否应该有首页 Tab 1. iOS 建议 vs 实际现状

苹果不建议 App 在底部 Tab 中设置「首页」，因为首页常被用来一次性展示 App 内部的所有功能，因此会破坏了 App 的层级结构，这造成的负面影响是多方面的：

用户需要大量翻页才能找到想要的内容，并且要消耗精力来排除无关功能的干扰； 用户使用 App 完成不同行动时涉及到的功能乃至思维方式都是截然不同的，而堆砌在首页的功能缺乏足够的内容支持，影响了用户的使用决策； 如果因为碰巧点击某个元素而被迫切换到其他 Tab 的功能页面还会导致用户晕头转向。 另一个常见的现象是在同一个 Tab 页面内（常常是首页）反复强调同一个功能，然而过多的重复功能将使用户弄不清信息本应在哪里又为什么被放置到那里。无论是功能在 Tab 间的重复还是页面内的重复都可能导致用户被“困”在首页而直接放弃探索导航栏其他区域。

假设一个兼具筛选地点、规划行程与我的路线的骑行规划 App，常出现这样的首页设计

苹果建议放弃首页，以清晰的结构划分 Tab

同时苹果也澄清了，此处所说的「重复」特指「功能的重复」，而非「内容的重复」。在不同的界面，用不同的方式显示同类型内容如歌曲或照片是合理的。但功能就不一样了，因为功能涉及到人们出于某种目的所要采取的行动，这种时候重复将让用户感到困惑。

尽管苹果内置 App 坚持着无首页的设计方案，但纵观国内外 App，多数产品都会使用首页，例如国外的 Twitter、Facebook、Youtube…国内的淘宝、Bilibili、豆瓣…反而没有首页的产品屈指可数。在首页的设计上出现实际应用与规范建议的偏差可能是由以下的原因造成：

2. 此”首页”非彼”首页”

我们常见的全局导航可以简单归为两类：

一种表现为通过 Tab 平铺 App 内的所有功能，功能之间互斥、泾渭分明（例如微信读书、airbnb）； 另一种表现为首页 Tab +关键内容/功能 Tab，整体 Tab 间呈现总分结构（例如 ins、微博、豆瓣）。 前者较多出现在功能型产品上，以功能划分 Tab，后者较多出现在内容型产品，围绕内容归属、内容类型等内容维度划分 Tab。因此使用首页的产品也多为内容社区型或有意转型为内容社区的产品。

苹果建议规避的是功能在首页的重复推荐，这种方式相当于用首页做了一个全站的功能介绍和导航，自然与底部的全局导航有冲突。如上述所说，我们常见的首页推荐多是内容上的推荐，这种情况仅是引用了“首页”的概念，而非苹果推荐删除的“首页”(聚合了其他 Tab 的功能)。类似围绕推荐能力进行内容投放的 Tab 在苹果设计中也有呈现，只是不叫“首页”，而叫“推荐”，Apple Store 中就有“为你推荐” Tab。

以“首页”之名行推荐之事的情况

3. 设计视角不同

虽说常见的“首页”更多是基于内容的推荐，但偶尔也能见到首页重复曝光其他 Tab 功能的情况。加上有时内容与功能之间的界限没有这么清晰，比如在图文信息流里插入推荐的小组讨论时，很难厘清推荐的属于小组的信息内容还是加入讨论的功能，因此由于加入首页导致用户放弃探索导航栏的问题确实存在。然而我们很少会否定这样的设计，之所以如此，可能是操作系统设计视角与软件设计视角的区别。苹果是手机厂商，可以在销售手机时预先安装 App，内置软件无下载门槛，因此可以做到每个 App 各司其职，天气 App 只需要做好天气展示，音乐 App 只需要做好听歌体验。App 定位稳定且单一使 Tab 间很容易做到清晰、平衡。而 App 开发商不同，需要不断拓宽业务范围，产品成熟后要寻求突破，一旦寻求突破就很难在不打破原有底部 Tab 结构的情况下维持结构清晰。这时首页推荐就作为一种折衷的“万能”方案出现了。当然也不是说有“理由”了就可以心安理得地往首页塞功能，苹果的建议不无道理，比起完成“万能”方案，探索合理且有效的解法更值得我们投入精力。

三、保持底部导航栏的常驻 1. iOS 建议 vs 实际情况

依照苹果的观点，保持底部导航栏的常驻能帮助用户在不同层次的信息间轻松切换，同时各层级间的关系还能保持清晰。比如我可以在“城市”页面查看一条新路线，并与我“行程”页面里一条行程中已存储的路线作比较，后者在“行程”的层级中要低两层，要实现这种比较，不同页面就必须目的明确，内容的区分也要细致。

对比城市 Tab 里找到的路线和行程里已有的路线

至少自 07 年 iOS2 问世以来，苹果的内置 App 就一直在层级切换中保持底部导航栏常驻，且国外产品（Twiter、Youtube、Ins、Facebook…）也都遵循这项建议设计。相比之下，国内产品几乎找不到常驻底部导航栏的产品。

为什么会出现这样国内外的差异，或许我们可以从以下几个方面来思考：

2. 在一个 Tab 做完事再去另一个 Tab？

iOS 建议「保持底部导航栏常驻」的出发点是“让用户始终能访问 App 的核心区域，帮助用户在不同层次的信息间轻松切换，同时各层级间的关系还能保持清晰”。我认为它的核心思路是 Tab 之间功能清晰平衡的情况下，用户不需要在 Tab1 做完一件事后，再去做 Tab2 的事，也就是说两个 Tab 的功能可以一起执行，甚至可以互相影响（如上文举例的对比城市 Tab 里的路线和我的行程里的路线）。从该角度上看，保持底部导航栏常驻也适用于国内 App。

3. 沿袭自网页端设计

保持全局导航常驻的思想很有可能沿袭自网页端设计。Steve Krug 在《Don‘t Make Me Think》一书中提到（06 年）：

导航应该总是出现在这里…仅仅让导航部分在每一页以一致的外观出现在同样的位置这一点，就会让你立即确认自己仍然待在这个网站上…如果在网站上找不到方向，人们不会使用你的网站…

后续也有其他作者在书中提及：

（全局导航）是固定的，不会在用户浏览网站的过程中变动…浏览网站时，用户可以通过全局导航大致明白自己所在的位置，并能通过它跳转到主界面，这样的话，即使迷失了方向，也可以顺利回到主路径，在结构化内容中，这就像安全出口一样。你也可以把它说成传送门，用户能够借此在产品的主要区域之间跳转。 ——《内容即未来》Mike Atherton

可以看出，自网页端设计以来，全局导航就被建议保持常驻，这一思想也在移动端被继承下来了。而进入移动端后，这一思想是否依然有效？从上述引文中可以看出网页端需要常驻全局导航的原因（“确认自己仍然待在这个网站上”“迷失时的安全出口”）在移动端似乎并不成立。网页端很容易在连续点击中跳出原本浏览的网页，而移动端除非用户主动退出或杀掉 App，否则就会持续在 App 内。App 的层级和复杂度也相比网页更低，用户在 App 内迷失的情况很少。既然保持常驻的理由在移动端已消失，拒绝常驻也未尝不可。

4. 占用屏幕空间

大多数国内产品都选择不常驻，或许更大的原因是保持底部 Tab 常驻会占用屏幕空间。这是产品设计从桌面端转移到移动端后绕不开的问题。为此，也曾涌现出了许多 导航设计 ，例如跳板式（也称 Launchpad）、抽屉式、列表式等等…

16 年以前，或许是出于减少占用屏幕空间、增加导航栏数目的目的，安卓的设计规范一直倡导导航栏相关要素应置于顶部，侧边抽屉导航搭配顶部导航使用。直到 16 年才提出了底部导航的概念。在这期间，Facebook 针对抽屉式导航与底部标签导航进行了 AB 实验，并最终投入了底部标签导航的怀抱。虽然没有找到 Facebook 的实验文章，但国外某设计团队做了相同的实验，并得出了结论：使用侧边抽屉导航会减少一半的用户参与度 ⁵。

在「稳定呈现」与「减少屏幕占用」的多年博弈中，底部导航栏似乎获得了最终的胜利，但即使在几乎所有 App 都一致使用底部导航栏的现在，为了节省屏幕空间占用，Meterial Design 的设计规范中仍有一项是允许在页面滚动的时候隐藏导航栏，可见占用屏幕空间仍是困扰设计的“头等”大事，而国内的设计选择在二级及以下层级的页面隐藏导航栏，或许也是更好的解决方式之一。

四、总结 苹果在 WWDC22 上分享的 iOS 导航建议，可以总结如下：

底部 Tab 导航、层级导航和模态式呈现这三种基础的导航模式反映了日常流程设计中的三种思路：并行、串行与打断。

全局底部 Tab 导航栏是并行的设计思路。全局底部 Tab 展示了 App 的主要功能，主要功能之间允许并行执行。 层级导航是串行的设计思路。层级导航隐藏的含义是一屏只做一个决定直到用户到达目的地。当用户要去另一个目的地时，必须原路返回，重新做出不同的决定。随着细节的推进，内容应当越来越具体，选择应当越来越少。 模态式呈现是打断的设计思路，它强调了用户在完成或者取消当前任务前，不能进行其他操作，所有注意力都应集中在当前任务。 在实际的 App 设计中，我们没有严格遵循 iOS 规范，对此也不必太过惊慌失措。规范建议并非一成不变，而是持续发展的。要知道在 19 年时，苹果对导航的分类还是层级导航、扁平导航与内容/体验驱动导航。可见规范会随着时代的进步和产品的迭代更新变化，与其一味地照搬照做，不如探索规范形成的原因，在了解设计理念的基础上，结合自身业务做新的尝试，或许会有规范之外的意外收获。

参考文献：

¹ https://developer.apple.com/videos/play/wwdc2022/10001/

² https://material.io/components/bottom-navigation#specs

³《移动应用 UI 设计模式》Theresa Neil, 2013

⁴《Don’t Make Me Think》, Steve Krug, 2005

⁵ https://thenextweb.com/news/ux-designers-side-drawer-navigation-costing-half-user-engagement

⁶《内容即未来·数字产品规划与建模》, Mike Atherton, 2018

欢迎关注作者微信公众号：「We-Design」

本文主要探讨的是在iOS交互设计中，针对「是否应该有首页 Tab」和「保持底部导航栏常驻」这两点差异展开讨论。灵动岛和 iOS 16 实时活动设计规范来了！编者按：灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，原文在这里，做设计和开发的同学记得看看。

本文主要探讨的是在iOS 交互设计 中，针对「是否应该有首页 Tab」和「保持 底部导航 栏常驻」这两点差异展开讨论。

灵动岛和 iOS 16 实时活动设计规范来了！ 编者按：灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，原文在这里，做设计和开发的同学记得看看。

阅读文章 >

苹果全球开发者大会（WWDC22）在今年 6 月如期举行，大会主要目的是向研发者们展示最新的软件和技术，其中也不乏一些设计思想。今天的文章引自会上苹果设计师分享的关于如何改善 iOS 导航的视频，结合了新观点来探讨 iOS 导航建议与实际设计中的差异。

一、iOS 导航建议概述 导航的目的是帮助人们尽快熟悉界面，以轻松发现内容并与 App 进行互动。好的导航能让人把注意力都集中在内容和体验上。导航会告诉人们在你的 App 中如何呈现项目、如何寻找信息以及如何实现目的。而导航跟用户的自然认知落差太大，就会让用户感觉这个 App 很不好用。

原视频 ¹ 陈述了底部导航栏（Tab bars）、层级式导航（Hierarchical navigation）及模态式呈现（Modal presentations）的各种改良技巧与方法。底部导航栏即我们常见的全局标签式导航，我们也称 Tab；层级式导航出现于由上层往下层信息深入的时候，通常表现为从右往左推进页面；模态式呈现专门用于展示某个界面中的独立任务，通常表现为从下往上呈现。苹果提出，底部导航栏的几个设计要点有：

使用底部 Tab 反映信息层级； 使用清晰简洁的文案； 底部 Tab 间的功能分布平衡，无重复或耦合； 避免在同一个页面反复强调一个功能； 保持底部 Tab 导航栏常驻。 其中，「使用底部 Tab 反映信息层级」与「使用清晰简洁的文案」相对明确；「底部 Tab 间功能分布平衡」和「避免在同一个 Tab 页面反复强调同一个功能」常与首页的设计相悖，由此引发苹果“删除首页”的建议；「保持底部 Tab 导航栏常驻」指全局导航栏必须始终位于屏幕底部，包括进行层级交互时，仅当模态交互时隐藏底部全局导航。这或多或少和我们常见的 App 设计实践有所出入，下面针对「是否应该有首页 Tab」和「保持底部导航栏常驻」这两点差异展开讨论。

二、是否应该有首页 Tab 1. iOS 建议 vs 实际现状

苹果不建议 App 在底部 Tab 中设置「首页」，因为首页常被用来一次性展示 App 内部的所有功能，因此会破坏了 App 的层级结构，这造成的负面影响是多方面的：

用户需要大量翻页才能找到想要的内容，并且要消耗精力来排除无关功能的干扰； 用户使用 App 完成不同行动时涉及到的功能乃至思维方式都是截然不同的，而堆砌在首页的功能缺乏足够的内容支持，影响了用户的使用决策； 如果因为碰巧点击某个元素而被迫切换到其他 Tab 的功能页面还会导致用户晕头转向。 另一个常见的现象是在同一个 Tab 页面内（常常是首页）反复强调同一个功能，然而过多的重复功能将使用户弄不清信息本应在哪里又为什么被放置到那里。无论是功能在 Tab 间的重复还是页面内的重复都可能导致用户被“困”在首页而直接放弃探索导航栏其他区域。

假设一个兼具筛选地点、规划行程与我的路线的骑行规划 App，常出现这样的首页设计

苹果建议放弃首页，以清晰的结构划分 Tab

同时苹果也澄清了，此处所说的「重复」特指「功能的重复」，而非「内容的重复」。在不同的界面，用不同的方式显示同类型内容如歌曲或照片是合理的。但功能就不一样了，因为功能涉及到人们出于某种目的所要采取的行动，这种时候重复将让用户感到困惑。

尽管苹果内置 App 坚持着无首页的设计方案，但纵观国内外 App，多数产品都会使用首页，例如国外的 Twitter、Facebook、Youtube…国内的淘宝、Bilibili、豆瓣…反而没有首页的产品屈指可数。在首页的设计上出现实际应用与规范建议的偏差可能是由以下的原因造成：

2. 此”首页”非彼”首页”

我们常见的全局导航可以简单归为两类：

一种表现为通过 Tab 平铺 App 内的所有功能，功能之间互斥、泾渭分明（例如微信读书、airbnb）； 另一种表现为首页 Tab +关键内容/功能 Tab，整体 Tab 间呈现总分结构（例如 ins、微博、豆瓣）。 前者较多出现在功能型产品上，以功能划分 Tab，后者较多出现在内容型产品，围绕内容归属、内容类型等内容维度划分 Tab。因此使用首页的产品也多为内容社区型或有意转型为内容社区的产品。

苹果建议规避的是功能在首页的重复推荐，这种方式相当于用首页做了一个全站的功能介绍和导航，自然与底部的全局导航有冲突。如上述所说，我们常见的首页推荐多是内容上的推荐，这种情况仅是引用了“首页”的概念，而非苹果推荐删除的“首页”(聚合了其他 Tab 的功能)。类似围绕推荐能力进行内容投放的 Tab 在苹果设计中也有呈现，只是不叫“首页”，而叫“推荐”，Apple Store 中就有“为你推荐” Tab。

以“首页”之名行推荐之事的情况

3. 设计视角不同

虽说常见的“首页”更多是基于内容的推荐，但偶尔也能见到首页重复曝光其他 Tab 功能的情况。加上有时内容与功能之间的界限没有这么清晰，比如在图文信息流里插入推荐的小组讨论时，很难厘清推荐的属于小组的信息内容还是加入讨论的功能，因此由于加入首页导致用户放弃探索导航栏的问题确实存在。然而我们很少会否定这样的设计，之所以如此，可能是操作系统设计视角与软件设计视角的区别。苹果是手机厂商，可以在销售手机时预先安装 App，内置软件无下载门槛，因此可以做到每个 App 各司其职，天气 App 只需要做好天气展示，音乐 App 只需要做好听歌体验。App 定位稳定且单一使 Tab 间很容易做到清晰、平衡。而 App 开发商不同，需要不断拓宽业务范围，产品成熟后要寻求突破，一旦寻求突破就很难在不打破原有底部 Tab 结构的情况下维持结构清晰。这时首页推荐就作为一种折衷的“万能”方案出现了。当然也不是说有“理由”了就可以心安理得地往首页塞功能，苹果的建议不无道理，比起完成“万能”方案，探索合理且有效的解法更值得我们投入精力。

三、保持底部导航栏的常驻 1. iOS 建议 vs 实际情况

依照苹果的观点，保持底部导航栏的常驻能帮助用户在不同层次的信息间轻松切换，同时各层级间的关系还能保持清晰。比如我可以在“城市”页面查看一条新路线，并与我“行程”页面里一条行程中已存储的路线作比较，后者在“行程”的层级中要低两层，要实现这种比较，不同页面就必须目的明确，内容的区分也要细致。

对比城市 Tab 里找到的路线和行程里已有的路线

至少自 07 年 iOS2 问世以来，苹果的内置 App 就一直在层级切换中保持底部导航栏常驻，且国外产品（Twiter、Youtube、Ins、Facebook…）也都遵循这项建议设计。相比之下，国内产品几乎找不到常驻底部导航栏的产品。

为什么会出现这样国内外的差异，或许我们可以从以下几个方面来思考：

2. 在一个 Tab 做完事再去另一个 Tab？

iOS 建议「保持底部导航栏常驻」的出发点是“让用户始终能访问 App 的核心区域，帮助用户在不同层次的信息间轻松切换，同时各层级间的关系还能保持清晰”。我认为它的核心思路是 Tab 之间功能清晰平衡的情况下，用户不需要在 Tab1 做完一件事后，再去做 Tab2 的事，也就是说两个 Tab 的功能可以一起执行，甚至可以互相影响（如上文举例的对比城市 Tab 里的路线和我的行程里的路线）。从该角度上看，保持底部导航栏常驻也适用于国内 App。

3. 沿袭自网页端设计

保持全局导航常驻的思想很有可能沿袭自网页端设计。Steve Krug 在《Don‘t Make Me Think》一书中提到（06 年）：

导航应该总是出现在这里…仅仅让导航部分在每一页以一致的外观出现在同样的位置这一点，就会让你立即确认自己仍然待在这个网站上…如果在网站上找不到方向，人们不会使用你的网站…

后续也有其他作者在书中提及：

（全局导航）是固定的，不会在用户浏览网站的过程中变动…浏览网站时，用户可以通过全局导航大致明白自己所在的位置，并能通过它跳转到主界面，这样的话，即使迷失了方向，也可以顺利回到主路径，在结构化内容中，这就像安全出口一样。你也可以把它说成传送门，用户能够借此在产品的主要区域之间跳转。 ——《内容即未来》Mike Atherton

可以看出，自网页端设计以来，全局导航就被建议保持常驻，这一思想也在移动端被继承下来了。而进入移动端后，这一思想是否依然有效？从上述引文中可以看出网页端需要常驻全局导航的原因（“确认自己仍然待在这个网站上”“迷失时的安全出口”）在移动端似乎并不成立。网页端很容易在连续点击中跳出原本浏览的网页，而移动端除非用户主动退出或杀掉 App，否则就会持续在 App 内。App 的层级和复杂度也相比网页更低，用户在 App 内迷失的情况很少。既然保持常驻的理由在移动端已消失，拒绝常驻也未尝不可。

4. 占用屏幕空间

大多数国内产品都选择不常驻，或许更大的原因是保持底部 Tab 常驻会占用屏幕空间。这是产品设计从桌面端转移到移动端后绕不开的问题。为此，也曾涌现出了许多 导航设计 ，例如跳板式（也称 Launchpad）、抽屉式、列表式等等…

16 年以前，或许是出于减少占用屏幕空间、增加导航栏数目的目的，安卓的设计规范一直倡导导航栏相关要素应置于顶部，侧边抽屉导航搭配顶部导航使用。直到 16 年才提出了底部导航的概念。在这期间，Facebook 针对抽屉式导航与底部标签导航进行了 AB 实验，并最终投入了底部标签导航的怀抱。虽然没有找到 Facebook 的实验文章，但国外某设计团队做了相同的实验，并得出了结论：使用侧边抽屉导航会减少一半的用户参与度 ⁵。

在「稳定呈现」与「减少屏幕占用」的多年博弈中，底部导航栏似乎获得了最终的胜利，但即使在几乎所有 App 都一致使用底部导航栏的现在，为了节省屏幕空间占用，Meterial Design 的设计规范中仍有一项是允许在页面滚动的时候隐藏导航栏，可见占用屏幕空间仍是困扰设计的“头等”大事，而国内的设计选择在二级及以下层级的页面隐藏导航栏，或许也是更好的解决方式之一。

四、总结 苹果在 WWDC22 上分享的 iOS 导航建议，可以总结如下：

底部 Tab 导航、层级导航和模态式呈现这三种基础的导航模式反映了日常流程设计中的三种思路：并行、串行与打断。

全局底部 Tab 导航栏是并行的设计思路。全局底部 Tab 展示了 App 的主要功能，主要功能之间允许并行执行。 层级导航是串行的设计思路。层级导航隐藏的含义是一屏只做一个决定直到用户到达目的地。当用户要去另一个目的地时，必须原路返回，重新做出不同的决定。随着细节的推进，内容应当越来越具体，选择应当越来越少。 模态式呈现是打断的设计思路，它强调了用户在完成或者取消当前任务前，不能进行其他操作，所有注意力都应集中在当前任务。 在实际的 App 设计中，我们没有严格遵循 iOS 规范，对此也不必太过惊慌失措。规范建议并非一成不变，而是持续发展的。要知道在 19 年时，苹果对导航的分类还是层级导航、扁平导航与内容/体验驱动导航。可见规范会随着时代的进步和产品的迭代更新变化，与其一味地照搬照做，不如探索规范形成的原因，在了解设计理念的基础上，结合自身业务做新的尝试，或许会有规范之外的意外收获。

参考文献：

¹ https://developer.apple.com/videos/play/wwdc2022/10001/

² https://material.io/components/bottom-navigation#specs

³《移动应用 UI 设计模式》Theresa Neil, 2013

⁴《Don’t Make Me Think》, Steve Krug, 2005

⁵ https://thenextweb.com/news/ux-designers-side-drawer-navigation-costing-half-user-engagement

⁶《内容即未来·数字产品规划与建模》, Mike Atherton, 2018

欢迎关注作者微信公众号：「We-Design」

本文作者通过实践，整理出一份较为成熟的 B 端产品的设计走查流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的体验走查能更有成效。设计师如何推进全员体验走查？来看VIVO的实战案例！

本文作者通过实践，整理出一份较为成熟的 B 端产品的 设计走查 流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的 体验走查 能更有成效。

设计师如何推进全员体验走查？来看VIVO的实战案例！ 前言 体验走查，是每个设计师的日常工作： 设计迭代前，通过体验走查，发现现有产品的体验问题；设计进行中，通过体验走查，审视当前设计方案存在的体验问题；设计开发时，通过体验走查，审视研发还原时存在的体验问题；设计上线后，通过体验走查，发现真实环境中存在的体验问题。

阅读文章 >

一、什么是体验走查 1. 概念

体验走查是设计走查的一个类型，设计走查顾名思义是根据一定的设计标准和设计原则，对产品中的设计方案页面从头到尾进行一次问题的发现与总结，便于修改与完善。体验走查则是站在产品用户体验的角度出发，以这个维度进行界面中的问题发现。

体验走查类似于我们去医院体检，按照一定的检查项目对身体进行检查，最后得到一个体检报告，根据体检报告看出身体的健康状况。

2. 复杂性

走查的过程是复杂的，需要设计师一定的积累。

在一定程度上，B 端产品是一个复杂的系统，产品牵涉到场景、用户、业务等多个因素。对产品优劣的评价，也不是一句话一个角度就能说清楚的。对于 设计师 而言，产品设计优劣不能仅仅是好与坏的评价，而应该有更加精准的评价，好在哪里以及为什么好。因此，对设计稿的走查需要较为客观全面的维度。

在实际的项目中，作者通过实践，整理一份较为成熟的 B 端产品的设计走查流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的体验走查能更有成效。

二、为什么需要体验走查 1. 体验走查的使用场景

体验走查的优势在于快速评估产品的用户体验，发现链路中的关键问题。因此非常适合周期短、对时效性要求高的项目。

体验走查可以服务于整个产品生命周期，在上线前用于发现方案未覆盖的用户需求，加深内部对用户的理解，为新产品功能和设计赋能，确保新流程合理、风险可控；上线后，可用于搜集体验问题，为产品后续优化迭代输出建议。

B 端产品相较于 C 端而言，产品功能多，角色复杂，业务庞大，，在项目前期难免会出现产品的各种问题，通过及时的走查能够快速发现问题并解决问题。同时从体验角度出发，去评测某些核心高频功能是否能够达到体验目标。

2. 走查工作的时间和频率

① 研发大版本决定

走查的频率可以根据研发的大版本来确定，例如作者所在的某 B 端产品公司内部进行一次产品大版本更新和发版，那么体验走查的时间可以定在正式发版前的一个月进行。

选择这个时间发版，可以保证提供给客户的产品及界面经过了我们设计师的走查后保证了更高的一致性和合理性，还能避免在发版后由于少了必要的检查而出现大的系统 bug。

所以各位设计总监在制定年度计划的时候，可以根据产品大版本迭代的发版时间来规划我们体验走查的时间，整个走查的计划时间也不能太长，在我们发现问题后需要留给开发一些修改时间，这个时间在一周左右是比较合理的。

② 时间和需求数量决定

第二种确定方法可以根据研发时长和需求数量来确定。

比如每个季度一次或者在研发的需求达到一定的数量级以后，可以进行一次体验走查。在产品团队所完成的需求达到一定的数量之后，功能以及界面的质量可能会出现下降，所以需要我们设计体验团队针对产品需求界面进行体验走查，从而提高各个需求功能点的质量。

③ 日常任务

接触一个新产品，优化一个旧功能，验收一个新特性，阶段性的点检整个产品的体验，可以说体验走查一直贯穿着设计师的日常。

设计迭代前，通过体验走查，发现现有产品的体验问题； 设计进行中，通过体验走查，审视当前设计方案存在的体验问题； 设计开发时，通过体验走查，检查开发在还原时存在的体验问题； 设计上线后，通过体验走查，发现真实环境中存在的体验问题。 所以设计师的体验走查工作不仅仅有助于提高产品的交付质量，也能够让设计师快速了解业务，快速成长。

三、B 端对比 C 端体验走查差异

1. 产品侧重点差异

B 端的走查过程主要关注数据、业务、操作路径和效率，看组件是否搭配得当。从设计角度来看，结合交互，结合部分的业务需求、业务场景去来完成这个过程。

C 端的走查过程集中在操作性和数据反馈方面，对某一功能操作以及埋点数据进行走查。对于未达到体验目标的功能进行操作漏斗分析，找到其中数据未达预期的原因，提升数据。

2. 体验目标差异

很多中小型的 B 端产品公司，在产品初创期时往往更注重功能的实现模型，而忽略了表现层和用户心智。

市场上很多的中小型 B 端产品公司都是开发担任产品经理，通常会从实现角度出发去考虑功能，有时候会忽略产品的体验。所以对于这个阶段的产品来说，体验的走查目标更多是要发现界面中的问题和使用体验方面的问题。

C 端产品相比于 B 端，往往都是小而美的产品。这也间接体现了产品业务不同而导致的目标差异。

C 端往往用户人群简单，业务简单，没有太多的专业壁垒，操作简单的情况下产品更希望各个功能能够达到体验目标。打开一个产品，找到你准备走查的第一个页面，从本能层次出发，去体验当前页面的设计是否主次分明、合理、一致。作为设计师，在本能的感官层面，我们要求当前页面的设计，一定要好看、好懂、好找、好点。

3. 走查过程差异

① 走查前期首先会制定计划，确定走查范围

由于 B 端产品架构和功能页面很庞大，在有限的时间内不可能走查完整个系统所有页面，所以需要确定走查的范围和所涉及的功能版本。

② 确定体验走查量表

由于 B 端和 C 端产品的差异，导致两类产品在体验量表上使用标准可能会存在一些差异。

最常见的可用性量表——尼尔森十大可用性原则，但是从1995年提出到现在，已经过去了二十多年，互联网世界已经发生了巨大的变化。

在这样的情况下，尼尔森的十大可用性原则明显有些不那么符合，或者说不能给出针对现今产品太全面的启发。各大用户体验部门会针对产品的实际特性重新整理了一套可用性原则，以更适应现代的 C 端产品。

四、如何做 B 端的体验走查 1. 确定走查计划和范围

在走查开始之前会确定走查的范围和大致计划，例如走查涉及到哪些产品、哪些模块、使用哪个环境。详细的走查计划能够让我们设计师了解到走查的内容和计划，我们可以按照计划内的时间进行走查任务分配和规划。

走查计划可能并不一定是由设计体验部门牵头发起的，但是作为设计师我们也需要了解。完整的走查计划需要包含如下内容：

走查目标、产品的版本、所涉及的产品的功能模块、走查时间、报告时间、项目组问题修改时间、复查等。

2. 制定走查标准

① 走查标准表

很多产品的体验部门重新整理了适合自己产品的一套可用性原则，使得可用性原则更针对现今互联网产品，基本可以覆盖到所有出现的用户体验问题。

例如：京东最新 21 条可用性原则、VIVO 体验问题评估标准 V1.0 等。

我们可以在尼尔森十大可用性原则的基础上去制定适合自己产品的可用性原则，也可以在其基础上进行简化，使其适合 B 端的产品。

② 走查问题评估等级标准量表

在产品页面中出现了某项问题，我们需要针对这项问题的严重程度进行评估，每个等级对应的评估标准也会记录下来方便定位，问题通常分为四级：致命、严重、一般、轻微。

问题越严重处理的时候优先级越高，后续输出走查报告的时候开发需要优先处理优先级高的问题。

3. 体验走查思路

走查时有一个思考的路径就是想要优先解决什么体验问题，第二要解决什么问题，进而开展走查的过程。

走查的思路可以是由下至上的，首先关注产品的底层可用性问题，基础体验是否理想、基础视觉体验是否合理统一规范、使用的组件是否符合规范等。往上一层是体验层面的内容就是用户体验是否足够友好清晰；一些反馈的关键的信息，视觉上能不能起到决策的效率是否突出。

最顶层就是认知品牌传递层面的内容。就是整个产品设计是否体现公司与产品的品牌价值，是否符合产品的特性。

走查的思路上，可以沿着思路从最基础的问题去建立，把基础打好，才可以解决更上层的问题。

找完问题后需要对这些问题进行分类，从三个角度考虑：

从规范 UI 样式考虑（即组件和规范合理性）； 从体验操作反馈，反馈与操作保持统一； 考虑品牌传递价值，产品所传递的价值是否符合品牌传递价值以及符合品牌的特性。 4. 输出体验走查报告

对于查找出的问题，也将其区分等级：

致命：数据丢失、缺失，功能不可用，按钮点击无反应； 严重：功能设计与需求严重不符，数据结果错误，程序接口调用错误等； 一般：功能未实现但不影响使用，操作时间长，数据字段过长，页面样式（页面布局不规范、显示重叠、不该显示不隐藏、描述不清，晦涩难懂未注释、默认提示不准确、文字排列不对齐、光标图标寓意不正确）； 轻微：建议问题，不影响使用，只是体验差点。 与之相对应的处理等级是紧急处理、优先处理、一般处理、暂不处理。

产品体验流程梳理优化，主要分为三大部分，流程优化、功能优化、视觉优化。下面逐一详细说明。

流程优化：我们是否要保留两套流程，如果保留，要分析出核心流程是什么。利用核心流程引导用户。对于非核心流程的关键环节进行优化，某些页面、交互对用户是否存在干扰。 功能优化：对于冗余、复杂的功能进行删除或者合并，文案的整理修改优化。 视觉优化：优先级最低的优化，页面结构、信息层级、颜色控件等细节优化，情感化元素的增加修改。 根据走查结果输出一份体验走查报告，并设置好开发的负责人，以及修改时间。将文档整理好后通过正式邮件发送给产品部门。

5. 推动体验问题解决

产品部门在接到走查报告后，需要根据问题进行修改，其中部分问题可能需要设计师的配合，例如 UI 样式方面的问题需要重新进行 UI 设计；体验流程方面的问题需要重新进行交互设计。在遇到需要设计部门配合的时候，我们设计师一定要积极响应产品部门的需求，早点修改完问题早点结束走查。

同时对于产品部门不愿意修改的问题，设计部门也需要及时跟进，了解他们不修改的原因。这些原因需要备注好，并要求产品部门承诺修改时间。

在问题修改完成后，设计部门会进行最后的验收，在验收过程中将有问题的地方进行再次走查，问题修改完成后我们就算进行了一次完成的体验走查工作了。

本文作者通过实践，整理出一份较为成熟的 B 端产品的设计走查流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的体验走查能更有成效。设计师如何推进全员体验走查？来看VIVO的实战案例！

本文作者通过实践，整理出一份较为成熟的 B 端产品的 设计走查 流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的 体验走查 能更有成效。

设计师如何推进全员体验走查？来看VIVO的实战案例！ 前言 体验走查，是每个设计师的日常工作： 设计迭代前，通过体验走查，发现现有产品的体验问题；设计进行中，通过体验走查，审视当前设计方案存在的体验问题；设计开发时，通过体验走查，审视研发还原时存在的体验问题；设计上线后，通过体验走查，发现真实环境中存在的体验问题。

阅读文章 >

一、什么是体验走查 1. 概念

体验走查是设计走查的一个类型，设计走查顾名思义是根据一定的设计标准和设计原则，对产品中的设计方案页面从头到尾进行一次问题的发现与总结，便于修改与完善。体验走查则是站在产品用户体验的角度出发，以这个维度进行界面中的问题发现。

体验走查类似于我们去医院体检，按照一定的检查项目对身体进行检查，最后得到一个体检报告，根据体检报告看出身体的健康状况。

2. 复杂性

走查的过程是复杂的，需要设计师一定的积累。

在一定程度上，B 端产品是一个复杂的系统，产品牵涉到场景、用户、业务等多个因素。对产品优劣的评价，也不是一句话一个角度就能说清楚的。对于 设计师 而言，产品设计优劣不能仅仅是好与坏的评价，而应该有更加精准的评价，好在哪里以及为什么好。因此，对设计稿的走查需要较为客观全面的维度。

在实际的项目中，作者通过实践，整理一份较为成熟的 B 端产品的设计走查流程，和大家分享一下我个人的经验，也希望能得到你的反馈和交流，让我们之后的体验走查能更有成效。

二、为什么需要体验走查 1. 体验走查的使用场景

体验走查的优势在于快速评估产品的用户体验，发现链路中的关键问题。因此非常适合周期短、对时效性要求高的项目。

体验走查可以服务于整个产品生命周期，在上线前用于发现方案未覆盖的用户需求，加深内部对用户的理解，为新产品功能和设计赋能，确保新流程合理、风险可控；上线后，可用于搜集体验问题，为产品后续优化迭代输出建议。

B 端产品相较于 C 端而言，产品功能多，角色复杂，业务庞大，，在项目前期难免会出现产品的各种问题，通过及时的走查能够快速发现问题并解决问题。同时从体验角度出发，去评测某些核心高频功能是否能够达到体验目标。

2. 走查工作的时间和频率

① 研发大版本决定

走查的频率可以根据研发的大版本来确定，例如作者所在的某 B 端产品公司内部进行一次产品大版本更新和发版，那么体验走查的时间可以定在正式发版前的一个月进行。

选择这个时间发版，可以保证提供给客户的产品及界面经过了我们设计师的走查后保证了更高的一致性和合理性，还能避免在发版后由于少了必要的检查而出现大的系统 bug。

所以各位设计总监在制定年度计划的时候，可以根据产品大版本迭代的发版时间来规划我们体验走查的时间，整个走查的计划时间也不能太长，在我们发现问题后需要留给开发一些修改时间，这个时间在一周左右是比较合理的。

② 时间和需求数量决定

第二种确定方法可以根据研发时长和需求数量来确定。

比如每个季度一次或者在研发的需求达到一定的数量级以后，可以进行一次体验走查。在产品团队所完成的需求达到一定的数量之后，功能以及界面的质量可能会出现下降，所以需要我们设计体验团队针对产品需求界面进行体验走查，从而提高各个需求功能点的质量。

③ 日常任务

接触一个新产品，优化一个旧功能，验收一个新特性，阶段性的点检整个产品的体验，可以说体验走查一直贯穿着设计师的日常。

设计迭代前，通过体验走查，发现现有产品的体验问题； 设计进行中，通过体验走查，审视当前设计方案存在的体验问题； 设计开发时，通过体验走查，检查开发在还原时存在的体验问题； 设计上线后，通过体验走查，发现真实环境中存在的体验问题。 所以设计师的体验走查工作不仅仅有助于提高产品的交付质量，也能够让设计师快速了解业务，快速成长。

三、B 端对比 C 端体验走查差异

1. 产品侧重点差异

B 端的走查过程主要关注数据、业务、操作路径和效率，看组件是否搭配得当。从设计角度来看，结合交互，结合部分的业务需求、业务场景去来完成这个过程。

C 端的走查过程集中在操作性和数据反馈方面，对某一功能操作以及埋点数据进行走查。对于未达到体验目标的功能进行操作漏斗分析，找到其中数据未达预期的原因，提升数据。

2. 体验目标差异

很多中小型的 B 端产品公司，在产品初创期时往往更注重功能的实现模型，而忽略了表现层和用户心智。

市场上很多的中小型 B 端产品公司都是开发担任产品经理，通常会从实现角度出发去考虑功能，有时候会忽略产品的体验。所以对于这个阶段的产品来说，体验的走查目标更多是要发现界面中的问题和使用体验方面的问题。

C 端产品相比于 B 端，往往都是小而美的产品。这也间接体现了产品业务不同而导致的目标差异。

C 端往往用户人群简单，业务简单，没有太多的专业壁垒，操作简单的情况下产品更希望各个功能能够达到体验目标。打开一个产品，找到你准备走查的第一个页面，从本能层次出发，去体验当前页面的设计是否主次分明、合理、一致。作为设计师，在本能的感官层面，我们要求当前页面的设计，一定要好看、好懂、好找、好点。

3. 走查过程差异

① 走查前期首先会制定计划，确定走查范围

由于 B 端产品架构和功能页面很庞大，在有限的时间内不可能走查完整个系统所有页面，所以需要确定走查的范围和所涉及的功能版本。

② 确定体验走查量表

由于 B 端和 C 端产品的差异，导致两类产品在体验量表上使用标准可能会存在一些差异。

最常见的可用性量表——尼尔森十大可用性原则，但是从1995年提出到现在，已经过去了二十多年，互联网世界已经发生了巨大的变化。

在这样的情况下，尼尔森的十大可用性原则明显有些不那么符合，或者说不能给出针对现今产品太全面的启发。各大用户体验部门会针对产品的实际特性重新整理了一套可用性原则，以更适应现代的 C 端产品。

四、如何做 B 端的体验走查 1. 确定走查计划和范围

在走查开始之前会确定走查的范围和大致计划，例如走查涉及到哪些产品、哪些模块、使用哪个环境。详细的走查计划能够让我们设计师了解到走查的内容和计划，我们可以按照计划内的时间进行走查任务分配和规划。

走查计划可能并不一定是由设计体验部门牵头发起的，但是作为设计师我们也需要了解。完整的走查计划需要包含如下内容：

走查目标、产品的版本、所涉及的产品的功能模块、走查时间、报告时间、项目组问题修改时间、复查等。

2. 制定走查标准

① 走查标准表

很多产品的体验部门重新整理了适合自己产品的一套可用性原则，使得可用性原则更针对现今互联网产品，基本可以覆盖到所有出现的用户体验问题。

例如：京东最新 21 条可用性原则、VIVO 体验问题评估标准 V1.0 等。

我们可以在尼尔森十大可用性原则的基础上去制定适合自己产品的可用性原则，也可以在其基础上进行简化，使其适合 B 端的产品。

② 走查问题评估等级标准量表

在产品页面中出现了某项问题，我们需要针对这项问题的严重程度进行评估，每个等级对应的评估标准也会记录下来方便定位，问题通常分为四级：致命、严重、一般、轻微。

问题越严重处理的时候优先级越高，后续输出走查报告的时候开发需要优先处理优先级高的问题。

3. 体验走查思路

走查时有一个思考的路径就是想要优先解决什么体验问题，第二要解决什么问题，进而开展走查的过程。

走查的思路可以是由下至上的，首先关注产品的底层可用性问题，基础体验是否理想、基础视觉体验是否合理统一规范、使用的组件是否符合规范等。往上一层是体验层面的内容就是用户体验是否足够友好清晰；一些反馈的关键的信息，视觉上能不能起到决策的效率是否突出。

最顶层就是认知品牌传递层面的内容。就是整个产品设计是否体现公司与产品的品牌价值，是否符合产品的特性。

走查的思路上，可以沿着思路从最基础的问题去建立，把基础打好，才可以解决更上层的问题。

找完问题后需要对这些问题进行分类，从三个角度考虑：

从规范 UI 样式考虑（即组件和规范合理性）； 从体验操作反馈，反馈与操作保持统一； 考虑品牌传递价值，产品所传递的价值是否符合品牌传递价值以及符合品牌的特性。 4. 输出体验走查报告

对于查找出的问题，也将其区分等级：

致命：数据丢失、缺失，功能不可用，按钮点击无反应； 严重：功能设计与需求严重不符，数据结果错误，程序接口调用错误等； 一般：功能未实现但不影响使用，操作时间长，数据字段过长，页面样式（页面布局不规范、显示重叠、不该显示不隐藏、描述不清，晦涩难懂未注释、默认提示不准确、文字排列不对齐、光标图标寓意不正确）； 轻微：建议问题，不影响使用，只是体验差点。 与之相对应的处理等级是紧急处理、优先处理、一般处理、暂不处理。

产品体验流程梳理优化，主要分为三大部分，流程优化、功能优化、视觉优化。下面逐一详细说明。

流程优化：我们是否要保留两套流程，如果保留，要分析出核心流程是什么。利用核心流程引导用户。对于非核心流程的关键环节进行优化，某些页面、交互对用户是否存在干扰。 功能优化：对于冗余、复杂的功能进行删除或者合并，文案的整理修改优化。 视觉优化：优先级最低的优化，页面结构、信息层级、颜色控件等细节优化，情感化元素的增加修改。 根据走查结果输出一份体验走查报告，并设置好开发的负责人，以及修改时间。将文档整理好后通过正式邮件发送给产品部门。

5. 推动体验问题解决

产品部门在接到走查报告后，需要根据问题进行修改，其中部分问题可能需要设计师的配合，例如 UI 样式方面的问题需要重新进行 UI 设计；体验流程方面的问题需要重新进行交互设计。在遇到需要设计部门配合的时候，我们设计师一定要积极响应产品部门的需求，早点修改完问题早点结束走查。

同时对于产品部门不愿意修改的问题，设计部门也需要及时跟进，了解他们不修改的原因。这些原因需要备注好，并要求产品部门承诺修改时间。

在问题修改完成后，设计部门会进行最后的验收，在验收过程中将有问题的地方进行再次走查，问题修改完成后我们就算进行了一次完成的体验走查工作了。