视觉结构化的设计原理-格式塔

“回顾做设计的两年，在这里梳理一些在工作中常用的设计理论，分享给大家。这里没有华丽的语言、没有精彩的人生故事，只有实实在在的干货。”

很多时候我们都是无意识的在使用一些技巧、理论方法做设计，殊不知为什么要这样做。常常被老板或产品经理质问的无话可说，“我感觉这样好”“我认为这样用户更易懂”不专业的话语脱口而出，最终还是选择妥协，导致慢慢沦落为一个只会接需求作图的“工人”。

今天以手机上常用的App做案例，来分析如何将视觉中的信息结构化，信息层级更加清晰。

格式塔背景

20世纪早期，由德国心理学家组成的研究小组试图解释人类视觉的工作原理，研究发现，人的视觉系统自动对视觉输入构建结构，并且在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此就叫做视觉感知的格式塔原理。

1.接近性

接近性指的是物体之间的相对距离会影响我们的视觉感知，它们如何组织在一起并切互相靠近的物体，我们会认为它们属于一组。

（Iphone 设置截图）

我们的视觉会将设置页面中的信息，根据距离的远近，将距离近的信息看做一个整体。这样的例子还有很多，App的个人中心页面。相同属性的信息放在一起，会更加方便用户找到想要的信息。

2.相似性

相似性指的是相似的物体在我们的感知中属于一组。

（贝壳找房App）

页面中的多色图标和线性图标，从颜色、形式上都有很大的差别。同类型的图标，人们的视觉会将相似的图形看做是同一组的。

3.连续性

连续性指的是我们的视觉系统在解析模糊或者填补遗漏感知整个物体的倾向,而不是零散，离合的碎片。

（爱彼迎 App）

未展示全的图片，视觉会将缺失的卡片形状补全

（网易云音乐 App）

图中的滑动条被分为一段红色和一段灰色。但是人们的视觉上会看作是完整的一段。

4.封闭性

封闭性指的是我们的视觉感知会将断断续续的图形闭合起来，形成一个认知中完整的图形。部分可见的对象被感知背后还有一个整体。

（网易云音乐 App）

图中的被切断的圆形，视觉会将缺失的部分弥补，形成一个完整的圆。

5.对称性

对称性指的是我们的视觉感知更倾向与将复杂的图形分解开来，以降低图形的复杂度，当视觉区域中有不止一种解析的可能时，我们的视觉会自动组织并解析数据，从而简化它们并赋予对称性。

图中App的图标都是由复杂的几何图形构成，以“唯物App”的图形为例，人们的视觉会将图形拆分成两个完整的正方形（标红），对称性原理也可以理解为简单性原理，人们的视觉习惯将复杂的图形简单化。

6.主体/背景

主体/背景指的是我们的大脑会将视觉区域分为主体和背景，主体包括的是占据我们视觉主要注意力的元素，其余的则是背景。

（贝壳找房App）

第一张图中，人们的视觉主体物是列表信息，背景是白色。第二张图，视觉焦点转移到弹出的卡片上，此时列表信息变成了背景。

7.共同命运

共同命运指的是一起运动的物体被感知属于一组或者是相关的。

（IPhone截图）

运动的图标，吸引视觉的注意力，人们的视觉将运动的物体归为一类

将格式塔原理综合起来，我们的界面设计中使用的不止其中某一条原理会根据页面想呈现的视觉效果使用多个原理的组合。当所有的原理组合在一起就需要我们格外的注意，页面中的视觉想要传达出来的讯息是否正确，表意是否清晰。需要在设计的过程中不断的考量各个设计元素之间的关系是否符合设计的初衷。

看完这篇文章，是不是有一种终于可以让身后的老板闭嘴的痛快，不用再戳花你的屏幕，不用再听“放大、放大、这里再放大！！！”

关注公众号“W的设计小站”

在公众号平台留言“本周推荐”可获取每周推荐的电子设计书籍喔~