1. 认识「对比」
「对比」是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。对比的核心在于表达焦点，帮助用户快速聚焦重要信息 。
「对比」背后的心理机制是：当人类看到不同的元素会本能地产生紧张的反应，这种本能帮助我们能迅速辨认出威胁，让我们快速反应出是否需要立刻回到安全的地方。
人们这种优秀的分辨异类的能力，使「对比」这种设计方法变得特别强大。对比之下，必定引发注意，留下深刻记忆，它就是吸引眼球的不二方法。
在设计中，我们想要让某个元素得到注意，那就只要让它在视觉外观区别于其他元素即可。如此一来，我们便能制造出视觉焦点。
我们觉得那些段子手有趣，写出的段子特幽默，其实只要稍加总结，你就会发现段子的本质其实就是弯曲思维走势，让段子陈述的事情与你的潜意识中的预期形成强烈对比，从而达到耳目一新，记忆深刻的效果。如关于「夜光表」的段子：
下次遇见你，我一定把你拉到卧室，锁上门，迅速把你推倒在床上，用被子蒙住头，伸出我的大手，让你看看我的手表是夜光的。
再来看看视觉上的一个案例：
如何用对比的手法，表现出如下文采飞扬背后的冲突？
有的人看起来平淡无奇，笑起来却春光灿烂；
有的人看起来貌似天仙，笑起来却一言难尽。
这个案例的上下文，是在知乎的某个回答中，答主为了表达出「笑得好看」的精髓是什么，先抛出了这个案例，成功吸引了其他用户的注意力，进而层层递进表达他的观点。
从这些案例中，我们已经能感受到，无论是思维逻辑上，还是视觉上，「对比手法」带来的冲突效果非常明显。使用得当，我们能在设计中建立效果突出的视觉焦点，引发人们的关注。
2. 对比原则在设计中的应用
「对比」是非常常见的设计手法。所谓「没有对比，就没有伤害」。什么事情都还没做，就简单做了个对比，「伤害」都产生了。可见「对比」这一手法的威力之大。下面通过几组案例来看其在设计中的应用。
案例1：简历设计
同一份简历，内容没有变化。对比左侧的简历，右侧做了如下几个优化：
- 个人信息区域，用红色背景做了强调，同时个人信息右对齐。（使用了对比原则、对齐原则）
- 个人信息经历，全部用「标题+线条」的方式重新组织，各段经历划分得比较清楚。（使用了亲密性原则）
- 个人经历信息，对于重要的信息全部做了标红加粗处理。（使用了对比原则）
这样一套组合化的优化做下来，右边简历的信息相对清晰不少。我们看右边的简历，视觉焦点会首先被个人信息区域吸引到，了解了基本信息以后，看个人经历信息，可以看下重点标红的条目，迅速就有个全貌了，这样面试官的信息提炼效率就极大提升了。
案例2：网页设计
信息元素之间的关系有很多种，适合用对比来表达的，我们可以简单整理一下，如：
- 主次关系，如「选中VS未选中」
- 总分关系，如「汇总VS子项」
- 并列关系，如「不同状态」
- ……
下面就这些关系表达，我们可以几个具体案例来进行体验。
案例2-1. 主次关系:
拆解：
- 主次关系的对比表达，在网页设计中随处可见。上面的案例中，总结下来就是——过关的设计（左侧）应该是：「选中高亮，未选中置灰」。这个在菜单选择、标签页切换、表单多按钮等场景中非常常见。
- 而右侧的设计，所有标签页都是高亮状态，用户从视觉上就很难判断当前他点击的到底是哪个标签页，给用户在操作上带来了很多困扰。
案例2-2. 总分关系:
拆解：
总分关系有主要表达出「汇总项」与「子项」明确区分。示例中有两种视觉表达：
- 横向总分的视觉表达。汇总数据用大图标、大字体；子项数据用小图标，小字体。
- 纵向总分的视觉表达。汇总数据高亮，作为标题呈现；子项作为正文呈现。
案例2-3. 并列关系（状态）:
拆解：
并列关系在「状态」等场景的表达上很常见，例如上图中的「选中VS未选中」状态，「高亮VS灰色」非常明显；而正常状态一般用绿色图标标识，异常状态一般用红色图标预警。
经过视觉对比后，用户的信息判断就非常清晰了，这样极大的提升了用户的信息消化效率。
案例2-4. 网页综合案例
拆解：在网页设计中，菜单、分页、进度条这些组件其实已经司空见惯。但凡涉及到「多状态表达」，「对比手法」几乎都有用武之地，而且一旦引入了对比，这些组件就有了灵气，信息呈现在视觉上就自然做好了分类，用户的使用体验，信息效率都能得到非常明显的提升。
案例3：PPT设计
案例3-1. 并列对比
上面的案例中，每一个设计原则的片子，我们都用了一组对比来表达，从而用户可以很直观的感受到，使用了对应设计原则后的对比效果。
案例3-2. 先后对比
在「先后对比」的案例中，这个片子在配色、内容等几个维度做了对比。如：
- 配色上，「以前」整体采用了灰色调，「现在」采用了亮色调，引导客户的主要视觉焦点关注「现在」。
- 内容上，「以前」选择了相对原始的排队打卡场景，版式篇幅较小；而「现在」采用了相对便捷的移动打卡场景，版式篇幅更大；
这样对比之下，「现在」场景下的先进性就凸显出来了，用户对这个场景更有接受度。
案例3-3. 方案对比
这个是一个架构升级的方案对比，实际上从视觉对比的角度来讲，其实对比并不明显。但是通过中间一些「过渡元素」，把两个方案的对比关系表达出来了。过渡元素包含两部分的内容：
- 描述文案及重点描红
- 箭头方向
通过这个过渡元素，也比较好的暗示用户，将两个方案进行比较，视觉上更多关注右边的新方案。
3. 对比原则小结
如果两个信息元素不完全相同，就应当使之截然不同。对比是增加视觉效果最有效的方法，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
还是那句重点：对比的核心在于表达焦点，帮助用户快速聚焦重要信息 。
对比这个动作，核心逻辑建立在关系上，很多场景都可以依托它进行表达上的呈现：
- 总分关系，如总分的视觉对比
- 并列关系，如各种状态对比
- 主次关系，如多级菜单
- 时间关系，如之前/之后场景、方案对比
- ……
理论上，对比无处不在。当我们要表达视觉焦点的时候，大胆的用起来。
若有收获，就点个赞吧
0 人点赞
