编辑指南:当你打开一个界面，吸引你的是什么，取决于设计师是如何设计的。突出重点，对比放大这些只是基本操作。根据我们平时看到的一些案例，本文作者将从目的、方法、如何验证要点三个方面与大家进行交谈和分享。

说到突出重点，作者马上就想出了各种比较方法，各种放大操作，但是只有通过比较才能达到目的吗？需要注意什么？所以作者决定根据平时看到的一些案例谈谈目的、方法以及如何验证要点，如有错误请指正。

01突出重点的目的

突出重点，我总结为四个方面:引导用户操作、提高阅读效率、重要信息提醒、有效曝光。

突出重点的四个目的

1.1指导用户操作

当用户执行任务时，即使页面内容与布局完全相同，突出显示不同的内容也会带来完全不同的结果。以知乎最喜欢的答案为例，图1突出显示了“创建收藏夹”(底部的蓝色按钮)，用户不仔细看的话很容易直接点击，但此时用户最有可能的结果是将答案添加到创建的“插图”收藏夹中。

Zhihu(网页侧)添加了一个喜欢的弹出窗口

图2突出显示了“收藏夹”按钮。如果有合适的直接喜欢的，就要新建一个。此时，用户的视线已经移动到弹出窗口的底部，然后他看到“Create Favorite”并点击它。这个过程是相反的。

1.2提高阅读效率

提高阅读效率主要表现在两个方面:一是分层页面方便用户快速掌握关键信息；二是为用户设置高效的阅读路线，减少二次信息的干扰。比如下面这张海报，标题是“莫奈&印象派大师展”的关键信息是最突出的，即使旁边有各种小字和颜色。其次是时间、地址等信息，信息层次明显，阅读路线是从上到下，从关键信息到次要信息，所以阅读效率比较高。

莫奈&印象派大师展海报

1.3提醒重要信息

对用户影响较大的信息，如错误提示(例如下图用红色文字提示，很明显)、用户的预约提醒等。，必须以用户更容易感知的方式进行提醒，因此在此不再重复。

百度应用登录错误提示

1.4有效暴露

主要是实现业务目标，提高点击率等。比如下图的新人红包很容易成为视觉焦点，所以它的曝光非常有效。

寺庙图书馆应用主页

但是因为下图业务线多，页面内容复杂，所以就出现了一个问题:试图突出一切，导致什么都不突出。比如能一眼找到新成员的入口吗？这种曝光效果是打折的，需要各产品线协调改善。

每日游仙主页

02突出重点的方法

视觉信息只有被人眼接受才能发挥作用，所以我重复一下人眼在阅读时的两个特点。

“一个穿蝙蝠侠服的人去参加化妆舞会，别人顶多看一眼，你的存在感几乎为零；但当你穿着这件衣服去写字楼上班，回报率几乎是100%。”

这就体现了第一个特点:不同的东西越多，就越会受到重视，也就是平面设计中提到的“特别”。另外，在信息没有区分的情况下，人眼的阅读习惯是从左到右，从上到下，这就是尼尔森总结的“F”视觉模型。基于这两个特点，我整理出五种方法:

突出重点的五种方法

2.1合理布局

关于信息布局，我们可以看看罗宾威廉姆斯总结的布局设计的四个原则。这里我只重点讲重点，讲需要注意的内容:

设定视觉层次(优先级)，越重要越突出；

信息优先级应该是动态的；

在同一页面上，不同条件下要突出显示的内容是不同的。比如用户从不下单时，箱马优先显示新楼层，普通用户优先显示广告横幅。添加新内容时要考虑所有场景。

箱马主页

省略不必要的信息；

如果页面信息过多，可以省略或隐藏非核心内容。比如购物应用的订单信息往往是隐藏的。

品多多订单详情

优先考虑用户心理预期的内容；

在用户从入口到达一个页面之前，基本上对页面的内容有一个简单的期待。比如入口购物应用展示的产品图(左下角图)会显示在接收页面的最前面位置(右图)。

小红书商城页面

如果进入此页面时找不到预期内容，会造成混乱，用户退出的概率很大。例如，如果你在Tik Tok刷电影评论的上半部分，你想继续看下一部分(如下所示)。所以你向左滑动(因为你向下滑动到新内容，所以只能向左滑动)，但是UPmaster的主页出现了，你看到的部分没有定位。而且号已经更新了几千部电影，搜索不到，只好退出。页面的布局确实很清晰，但此时的显示状态与用户无关。

颤音视频播放页面和主个人中心

2.2应用比较

这是区别显示信息的核心方式。下图是一些常用的比较方法，这里就不赘述了。

部分比较法

2.3辐射效应

比如你在公园跑步，川普正好在你后面跑。这个时候，不仅他是大众关注的焦点，你也会受到很大的关注，虽然和你没什么关系。总之，得出的结论是，任何放在最突出内容旁边的内容都会比原来的位置更突出，那就是辐射效应(因为作者研究的很少，在平面设计中找不到相应的理论名称，所以暂时也叫“辐射效应”)。

那么这种现象如何应用到实际设计中呢？简单的方法就是把用户最能理解的非核心信息放在突出的内容旁边。比如下图中最突出的内容就是红色按钮。“自动”帮助用户同意协议，但告诉用户时不打扰用户。此时，将副本放在红色按钮旁边很好地实现了目标。

小红书登录页面

再比如晚上的活动，需要通过限制时间来营造紧迫感。这个信息不是很重要但是一定要刻在用户的脑海里，所以安排在最明显的量下面(如下图)。这一行文字可以说是整个页面中最小的，但还是不容易被忽略，这就是辐射效应的作用。

品多多“每天收现金”页面

2.4视线引导

“框架油墨”插图

上图，你最后看的是右上角的小人吗？它们不出现在左上角(“F”视觉模型最突出的位置)，体积很小，也不使用颜色高亮，为什么还盯着看？因为狙击手在看着他们，他们的枪对着他们。这是使用特定指示元素来引导视线的效果。

常见的有眼睛的方向、手指的方向、箭头的方向、线条的引导(如下图所示，云虽然占据了很大的面积，但你关心的是山顶的位置)等。，其目的是引导视线的落脚点。

“框架油墨”插图

那么这种方法如何应用于页面设计呢？第一，跟着葫芦画瓢。比如这个活动页面(下图)也是用一些透视线来引导视线到中间的红包。

JD.COM分行现金活动页面

还可以使用带箭头的底图(下图)将视线导向下方的红包。

支付宝爆年兽弹出窗口

2.5使用技巧

使用提示来传达关键信息太常见了。我们常见的公告和各种标志都属于这一类，而软件界面通常包括各种吐司、弹出窗口、小红点、标签、状态变化和指示元素(如箭头)。使用提示时，请注意以下两点:

2.5.1反馈提示应位于中央可视区域

人眼浏览信息时，有两个区域:边界视区和中心视区。边界视觉区域的东西看不清，越是位于边界越不容易被注意到；中央视觉区(focus area)是人眼的焦点，里面的信息是清晰的，如下图。

视觉中心区示意图

所以，如果反馈提示位于边界视觉区域，基本上没有意义。比如一个购物应用在愿望单中添加商品时，“添加到愿望单”的提示位于顶部(如右图所示)，但是此时用户的中心视觉区域在“愿望单”图标附近，基本上不会被注意到。

小红书加入愿望清单流程

当然，在这种情况下，“愿望清单”状态的改变(线框变黄)已经起到了提示的作用，吐司就没必要了。但是光提示需求不能干扰用户当前的任务，但是要让用户知道这个看似矛盾的需求除了改变状态还可以使用动态效果。比如iPhone调节音量的提示，开始调节的时候会弹出一个比较大的图形(左图)，甚至在边界可视区域都能感知到。连续调整显示一个小竖条(右)，减少对用户的干扰。

IPhone音量调节小技巧

2.5.2避免干扰用户并对提示进行分类

即根据重要程度，将提示分为强提示(通常是弹出)、弱提示(弱吐司)等。

03如何验证重点是否突出

看到标题，兄弟们可能要吐槽了:“这个需要考证？我一眼就能看出来。”那么，在接下来的页面上，你能一眼看出哪些关键信息，并立即根据突出程度进行排名吗？

淘宝特别版《我的》

你是否觉得自己正在蓬勃发展，心烦意乱，需要花些时间思考，对吗？

我认为用这些方法来验证是相当有效的:

5s测试:

这么短的时间，只能形成对页面的整体印象，让测试人员观看和说话，记录阅读的顺序。如果这个顺序和你设定的优先级基本一致，那么你的目标就达到了；

首次点击测试:

如果用户第一次点击你想突出显示的内容，就成功了，否则大概率的操作是错误的；

甲乙测试:

你可以根据完成一个任务的时间来确定哪个方案更好。比如让测试人员完成“你觉得这篇文章太好了，就给作者一个赞，嘲讽他”的任务。测试人员接受任务，完成表扬。最短时间方案基本上就是你想要的；

眼球运动测试:

用户在5秒测试中说的顺序可能不是真实想法，但眼动测试可以直接查看用户关注的区域，真实性更好；

数据验证:

一般来说是考虑曝光量(比如曝光uv)和曝光点击率。至于转换等数据，受产品策略和业务投入影响更大，对于突出重要信息没有参考意义。

需要注意的是，如果曝光度上升，但是点击率下降，就要看这些曝光是否是有效曝光。比如左图A的曝光不如右图，但其曝光点击率比右图高；

案例描述

或者你想突出的关键信息根本不是用户关心的，所以可能要重新整理。

恐怕还得再写几篇文章来讲清楚这些测试方法怎么操作，而且都可以在网上找到，这里就不赘述了(其实我也不想写)。

04摘要

突出关键信息的关键是吸引注意力，通过对比、辐射和视线引导来达到目的。需要保证这个场景中你首先要显示的信息一定是用户最关心的。