图解 | 从格式塔原理解读UI版式设计原则

今天，我们从一张图开始

熟悉的同学通过上图一眼便能看出，康石石今天专栏文章的切入点正是著名的格式塔原理。借此，康石石希望能以平实易懂的文字，深入浅出地带大家从人类视觉的感知经验出发，了解UI设计的深层原理，并在文章最后给出最棒的UI设计灵感网站，供大家结合今日内容，课后消化理解。

以下，康石石列举6项与UI设计最为紧密的格式塔原理：

一、亲密性（亦称“接近性”）

物体之间的相对距离会影响观察者，判断物体之间的组织形式。

简言之：

• 行间距<列间距，视觉呈“列”排布，纵向关系密切形成整体
  
• 行间距>列间距，视觉呈“行”排布，横向关系密切形成整体
  

图像的亲密性影响了用户的视觉认知体验，也影响了用户的阅读体验，设计师可以借此引导用户的阅览以及操作行为。

二、相似性

相似性是影响用户感知图像组织形式的另一个原理。

简言之：

相似（形状、颜色等）的物体，视觉将自动将其归为一组，尽管他们并不亲近。

通过相似性，我们不仅可以从中借鉴经验梳理界面内容，使其更加具备条理；我们还可以将相似性进行引申，对重点展示内容进行强调。

三、主体与背景

简言之：

主体指的是在界面当中占据我们主要注意力的所有元素，其余的元素在此时，均成为背景。

当主体与背景重叠时，人的视觉更加倾向于将小的物体视为主体，大的物体视为背景，所以我们可以通过大小与图底关系，将我们希望传递的内容进行展示。

当然，主客体也可以随着注意力的转换而交替呈现不同的视觉符号。如将此原理应用出色，将呈现非常亮眼的UI视觉效果。

四、封闭性

人的视觉会自动将敞开未封闭的图形依照图形趋势封闭起来。

简言之：

我们可以利用不完整的图形创造趋势，并借助格式塔的封闭性原理，引导视觉促使大脑按照设计师的意图自动思考。

五、连续性

人的视觉倾向于感知连续的整体，而不是分散的个体。

简言之：

即使我们设计的界面被一些元素分隔，用户依旧能够依照连续的视觉思维经验进行整体阅读。

尽管直线被滑动指针分割为若干段，但并不影响App中直线的连续性，并且用户可以通过直线的方向性，了解相应的时间信息。

六、共同命运

共同命运针对运动的物体，指出一同运动的物体倍感值为属于同一组或彼此之间相互关联。

简言之：

共同运动的物体会被用户视为一组内容或相似内容的信息流。

瀑布流便是如此

我们手机里的闹钟

当然还有某宝、某东，某外卖就不展示了，此原则一直在被应用，却很少为人所知。

经过以上讲解，康石石相信大家再看UI设计，会以不一样的角度进行观察，而非简单的排字画框。如果大家了解了格式塔原理，咱们再看UI版式，便是轻而易举。

———————————————————分割线———————————————————

UI版式，按内容总结，可分三类：一栏式、两栏式、三栏式。栏中内容可以通过网格形式进行设计，也可以自由编排，但设计原则全部紧紧围绕格式塔原理。

一栏式

一栏式版式，没有对版面进行分割，设计师在一栏之内可以尽情驰骋。

通过格式塔原理，我们还可以对一栏式界面进行变化

• 一栏式+“主体与背景”原理
  

• 一栏式+“共同命运”原理

两栏式

两栏式设计是在主要内容区域的旁边增加一个辅助栏，主要功能是辅助主要功能的展现。

三栏式

三栏式在Pad界面中较为常用，通过两侧区域辅助主要内容展现。

UI设计的大体思路如上所述，一切的版式变化，全部需要结合设计项目的主题、内容进行具体编排。但万变不离其宗，只要掌握格式塔原理，便能以不变应万变，应对全部情况。

下面是揭晓彩蛋的时间，康石石为大家推荐UI界的Pinterest，刷灵感，学习设计思路，堪称神器↓

UI Movement

功能之强大，唯有亲身体验

如对艺术留学或作品集创作仍有更多疑问，可私信康石石。