交互设计之吸引用户注意
缘起
前天给大家介绍了交互设计的底层模型——最新版福格行为模型。模型告诉我们想让用户进行某个行为有3个步骤，第一个步骤是检查有没有(合理的)行为提示，我把它翻译成能否吸引用户注意。能够引起我们注意的东西，才可以成为提示。没有提示，就没有注意，也就不会有任何行为发生。无论你的动机和能力有多么强烈都没用。所以我们今天重点来看看，作为交互设计师，我们有哪些吸引用户注意的秘笈。
一、运动
运动，可以说是最有效的吸引用户注意的方式。
从生物学的角度来讲，人的视网膜中有两类细胞：视锥细胞和视杆细胞，视杆细胞有一个非常重要的作用，就是觉察运动。
一个个视杆细胞，就像一个个眼观八方的侦察兵，时刻侦查着周围环境的变化，一有风吹草动，就及时报告并引导视锥细胞看过去。
从进化论的角度来讲，关注运动元素，是我们祖先赖以生存最重要的技能，毕竟在严酷的生存条件下，任何运动的动物，不是以我们为食，就是被我们所食，错失哪一个都不利于我们的生存。
在这样的生存环境下，我们的潜意识学会了灵活控制我们的眼球，看向运动的物体，它比我们的意识快上60~110毫秒，这关乎生命的时间差，有利于我们在猎物竞争中生存下来。
正因为对运动物体的关注，是一个不由自主的潜意识过程，且有充足的视杆细胞支持，所以运动，是最有效，也被使用得最为泛滥的注意力引导方式。
适用场景：
在界面设计之外，想要吸引用户注意，手机系统提供的主要有三种形式：通知、声音和振动。我们可以通过这三种形式，把用户注意力吸引到一个具体的界面上，然后把这个界面上，最想让用户注意并操作的元素添加合适的动效，从而提升该元素的点击转化率。
比如以下这个案例：
缩放动效包含着从小到大的变化过程，我们的视杆细胞对这种动效尤其敏感，因为一个物体从小变大，相比其他形式，会更具威胁性。（对应在自然界中，代表着事物由远及近地向我们靠近，对我们的威胁系数最大）
手势引导则会刺激我们的镜像神经元，让我们产生无意识的模仿行为，从而促进行为的转化。
除了这种额外添加运动因素，我们还可以挖掘元素本身的运动属性，并将其展示出来，这样的运动方式，会更加贴合场景。
比如对于很多视频类的产品，在提供封面让用户选择时，都会提供预览动图，让用户更好的注意并理解其内容，进而促进内容本身的转化。
相对而言，这种利用元素本身的运动属性比附加的动效更容易让用户接受（而不是将其视为干扰）。
所以添加运动效果，对设计师的挑战就是：要尽可能结合元素本身及场景的特性，让其运动看起来自然而有趣，推荐大家可以看看11月底腾讯发布的《2021-2022设计趋势报告：动态篇》，里面提供了很多有趣、奇妙、吸引人的动态设计案例。
二、人脸
人脸，也是一个被验证的有效引导用户注意的方式。
在人的大脑中，有专门针对人脸的识别视觉区域——梭状回脑区。这个脑区可以让人脸绕过通常的视觉解析渠道，快速被人注意和识别。
人是社会性动物，除了自闭症患者，喜欢看脸是人的天性。实验表明：出生不到一小时的新生儿也喜欢看有明显面部特征的东西。
面对人脸，尤其是直视用户的脸，社会人几乎毫无防御之力，总是会忍不住与之对视。
适用场景：
在一些展示人物图片的场景，尽可能展示人物的脸，特别是能看到眼睛的脸，可以明显提升该人物图片的视觉吸引力。
▲图4 人脸及眼睛对观众的视觉吸引力
比如天猫双十一的养猫活动，就很好的运用了人脸及眼睛对用户的视觉吸引力。
▲图6 主播封面建议
三、对比
对比是咱们设计师用得最多的设计手法，作为版式设计的四大基本原则（亲密、对齐、重复、对比）之一。强烈的对比可以帮助用户快速聚焦。心理学上有个形象的比喻叫做跳出效应，指的就是被凸显的元素就像香槟塞一样跃入眼帘。
▲图7 跳出效应
色彩是界面设计的第一语言，明快突出的色彩总是会在第一时间抓住用户的注意力。
除了让元素自带特别的色彩之外，设计上也常常采用附加元素色彩的方式来短期增强元素的视觉注意力，比如我们常见的小红点和运营标签，都是通过额外的元素色彩点缀，增强原信息的视觉醒目度。
▲图9 微信及vivo视频截图
3.2 形状
一个差异性的形状会具有跳出效应，同时，根据格式塔原理，人的视觉天生偏好简洁的形状，越是简单的形状，越是能够吸引用户的注意力。
▲图10 跳出效应及简单原则
多个复杂图形对比，图形边缘越是光滑简洁，聚焦效果越好，圆形是所有形状中聚焦效果最好的形状，所以很多logo设计和海报的设计，都喜欢使用圆形来吸引用户注意力。
▲图11 图片来自网络
3.3 大小
大小对视觉的吸引力跟相对位置有关。
当两个元素并列（分开）时，一般来说，越大的元素，视觉重量感越强，越容易吸引用户注意力。
但是当两个元素重叠时，因为主体与背景的原理，大的图形会被看作是背景，小的图形会被看作是为主体，则相对小的图形更容易吸引用户注意力。
▲图12 主体与背景
所以当我们进行设计时，对于并列的元素，可以采用不同的大小，来强化大的主体。
▲图13 QQ音乐截图
也可以通过主体和背景的运用，用大的背景来聚焦小的主体。
▲图14 无印良品海报（图片来自网络）
3.4 虚实
虚实模拟的是日常视觉世界中的远近关系，近处的物体清晰，远处的物体模糊。越清晰的物品，越容易吸引用户注意力。
在手机上常用的毛玻璃效果，就是通过虚实的效果，让用户聚焦在当前的主体上。
▲图15 ios手机截图
3.5 投影
在Material Design中，在屏幕的X轴和Y轴构成的平面之上，还引入了Z轴的概念。Z轴表示平面上各图层元素的高度关系，这种高度关系，主要是通过投影来体现。投影越大，代表图层在Z轴上的位置越高。
在Material design中，对所有组件的海拔高度做了明确的定义，以避免不同图层的元素在布局时出现高度冲突。
▲图19 vivo i视频中视觉层级与投影的关系
头部运营位，海拔最高，投影最重，希望借此强化用户视觉焦点；其次是你正在追，用户需求度最高，投影其次；最后是长尾的推荐楼层，无投影。
3.6 情绪
人是社会性的动物，对于他人的情感变化非常敏感，越是强烈的情绪，越容易唤起用户的注意力，如果要增强人物的表现力，可以用更饱满的情绪来吸引用户。
▲图20 饱满的情绪更有视觉吸引力
四、本能
人有三个大脑：本能脑、情绪脑和理智脑，它们是逐渐演化而来的。
本能脑最先演化，它的工作就是持续不断的观察环境并提出问题：他会害死我吗？能吃吗？能发生性关系吗？这些生存要素就是本能脑所关心的所有事情（危险、食物、性）。
本能脑一刻不停的在运转，是不受我们理智脑所掌控的，所以我们无法对危险、食物、和性视而不见。无论你如何自控，你都无法抗拒危险、食物、和性的注意力，因为这是本能脑的本质工作。
▲图21 图片来自网络
如果场景中可以使用有吸引力的人物或危险情况的图片，可以选取一部分这样的素材，因为它们确实是用户注意力的磁石。
小结
设计师吸引用户注意的四大秘笈分别是：
▲图22 吸引用户注意的秘笈小结
1、运动（包括自身运动+附加运动元素）
2、人脸（尤其是带有和用户互动眼睛的人脸）
3、对比（包括色彩、形状、大小、虚实、投影、情绪等）
4、本能（包括危险、食物、性）
日常设计中我们可以先从这四个大的维度考虑是否有运用的可行性，然后再考虑其维度下的具体吸引点。值得一提的是，这四个维度是可以组合运用的，这样能够将视觉注意力效果发挥到极致。
好了，交互设计之吸引用户注意，就介绍完毕了，我将在明天为大家更新《交互设计之降低用户成本》，咱们分4篇文章，将福格行为模型的行为设计讲透彻，欢迎持续关注~
参考文献
② 规范：《Material design》