突出重点，原来还有这些设计方法

苏宁设计 2023-07-29 11:23:39

提到突出重点，笔者脑海中立马浮现各种对比方式、各种放大操作，但是仅仅运用对比就能到达目的吗？这其中又有哪些需要注意的东西呢？于是笔者决定根据平时看到的一些案例，从突出重点的目的、方法和如何验证这三个方面来聊一聊，有错误之处还请指正。

01 突出重点的目的

突出重点，我将其归纳成4个方面：引导用户操作、提高阅读效率、提醒重要信息和有效曝光。

突出重点的4个目的

1.1 引导用户操作

用户进行某项任务时，即使页面内容和排版一模一样，但突出不同的内容带来的结果却是完全不同的。以知乎收藏回答为例，图1突出的是“创建收藏夹”（下方蓝色按钮），如果用户不仔细看的话很容易直接点击，但此时用户最可能想得到的结果是：将该回答添加到已创建的“插画”收藏夹。

知乎（web端）添加收藏弹窗

而图2突出的是“收藏”按钮，如果有合适的直接收藏就行，没有的话就需要创建新的，此时用户视线也已经移动到弹窗底部，然后看到“创建收藏夹”并点击。这样的流程完全相反。

1.2 提高阅读效率

提高阅读效率主要表现在两个方面：一是层次分明的页面便于用户快速抓住关键信息；二是给用户设定高效的阅读路线（动线），减少次要信息的干扰。例如下方这张海报，标题“莫奈&印象派大师展”这个关键信息最为突出，即使旁边有各种小字和颜色。其次是时间，再到地址等信息，信息层次明显，阅读路线按照由上至下、从关键信息到次要信息，这样阅读效率就比较高。

莫奈&印象派大师展海报

1.3 提醒重要信息

对用户影响较大的信息，比如错误提示（例如下图使用红色文字来提示，比较明显）、用户的预约提醒等等，都得使用更容易让用户察觉的方式提醒，这里不再赘述。

百度app登录错误提示

1.4 有效曝光

主要是实现业务目标、提升点击等等，比如下图中的新人红包很容易成为视觉焦点，因此其曝光是非常有效的。

寺库app首页

而下方这张图由于业务线多、页面内容复杂，就出现了一个问题：什么都想突出导致什么都不突出，比如你能一眼找到新会员入口吗？这样的曝光效果就打了折扣了，需要各产品线协调改善。

每日优鲜首页

02 突出重点的方法

视觉信息只有被人眼接受才有可能发挥作用，因此我先啰嗦两句把人眼在阅读时的2个特点再提一提。

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

这反映了第一个特点：越是与众不同的东西越能引发关注，即平面设计里提到的“特异”。此外，在信息没有做差异化处理时，人眼的阅读习惯是从左至右、从上至下，即尼尔森总结的“F”型视觉模型。基于这两个特点，我整理了5种方法：

突出重点的5种方法

2.1 合理布局

关于信息布局可以看看罗宾·威廉姆斯总结的版式设计四原则，这里我仅从突出重点出发，谈谈需要注意的内容：

设定视觉层级（优先级），越重要的越突出；

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

同一个页面，不同状态下要突出的内容是不一样的，例如用户从未下单时，盒马优先展示的是新人楼层，而普通用户优先展示广告banner，在增加新内容时需考虑所有场景。

盒马首页

省略不必要的信息；

如果页面信息过多，非核心内容能省略则省略，或者隐藏起来，例如购物应用的订单信息常隐藏起来。

拼多多订单详情

优先展示用户心理预期的内容；

用户从入口到达某页面之前，对该页面的内容基本就有一个简单的预期，例如购物应用在入口露出的商品图（下方左图），在承接页（右图）会展示在靠前的位置。

小红书商城页面

如果进入该页面找不到预期的内容，那么就会造成疑惑，用户大概率会退出。例如你在抖音中刷到某电影解说的上部分，此时你想继续看下部分（如下图）。于是你左滑（因为下滑到新的内容了，只能左滑），但出现的却是该up主的主页，没有定位到你看的那部分。而且该号已更新上千部电影，又不能搜索，那你只好乖乖退出。页面的布局确实主次分明，但此时的展示状态对用户来说却毫无重点。

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

2.2 应用对比

这是对信息进行差异化展示最核心的做法，下图展示的是常见的一些对比方式，这里不再赘述。

部分对比方法

2.3 辐射效应

举个例子，你正在公园跑步，碰巧特朗普也跟在你后面跑，此时不但他是大众的焦点，你也会备受关注，虽然和你没半毛钱关系。一句话总结就是：在最为突出的内容旁边，放置任何内容都会比原来的位置突出，即辐射效应（由于笔者读书少，在平面设计中没找到对应的理论名称，于是暂且也称为“辐射效应”吧）。

那怎么把这种现象应用在实际设计中呢？简单的做法就是把非核心但用户最好能了解的信息，放在很突出的内容旁边，例如下方这个图最突出的内容就是那个红色按钮了。“自动”帮用户同意协议，但又要在不打扰用户的前提下告诉用户，此时将该行文案放在红色按钮旁边就很好地达到了目的。

小红书登录页

再比如夕夕这个活动要通过限时来营造紧迫感，这个信息不是很重要但又必须刻到用户脑子里，于是给它安排在了最为明显的金额下方（如下图）。该行文字可以说是整个页面中最小的，但它依然不容易被忽略，这就是辐射效应带来的效果。

拼多多“天天领现金”页面

2.4 视线引导

产品经理，产品经理网站

《Framed ink》书中插图

上面那张图你最后是不是把目光停留在右上角的那几个小人？他们没出现在左上角（“F”视觉模型最突出的位置）、面积非常小、也没有使用颜色突出，那你为什么还要盯着他们看？因为狙击手在看他们、枪口也对准了他们。这就是使用特定的指示性元素来引导视线的效果。

常见的有眼睛看的方向、手指向的方向、箭头、线条引导（如下图，虽然云占的面积挺大，但你关注的却是山顶的位置）等，其目的在于引导视线落脚点。

《Framed ink》书中插图

那么这种方式怎么应用在页面设计中呢？先依葫芦画瓢呗，比如这种活动页（下图）也用一些透视线条把视线往中间的红包引导。

产品经理，产品经理网站

京东城城分现金活动页

还有这种使用带箭头的底图（下图），将视线引导至下方红包等。

支付宝炸年兽弹窗

2.5 使用提示

使用提示来传达重点信息，这种方式太普遍了，我们常见的通告、各种指示牌都属于这类，而软件界面中常见的有各种toast、弹窗、小红点、标签、状态改变、指示性元素（如箭头）等等。在使用提示时要注意以下两点：

2.5.1 反馈提示应当位于中央视觉区

人眼在浏览信息时会存在两个区域：边界视觉区和中央视觉区。边界视觉区内的东西是看不清的，而且越位于边界的位置越不容易注意到；而中央视觉区（焦点区域）是人眼关注的重点，里面的信息是清楚的，如下图。

视觉中央区示意

因此反馈提示如果位于边界视觉区，基本就失去意义了。例如某购物应用将商品加入心愿单的操作， “已加入心愿单”的提示位于顶部（如右图），而用户此时的中央视觉区却在“心愿单”icon附近，基本就注意不到了。

小红书加入心愿单流程

当然这个案例中“心愿单”状态的改变（线框变黄色面状）就已经起到提示作用了，toast不是很有必要。但是轻提示要求不能干扰用户当前任务，但是又要让用户知道，这样看似矛盾的要求除了使用改变状态的方式，还可以使用动效。例如iPhone调节音量的提示，刚开始调节的时候弹出较大图形（左图），即使位于边界视觉区也能感知到。连续调节则展示一根小竖条（右图），减少对用户干扰。