只是自己记录学习
深度解析交互设计原则（一）— 格式塔原理
在做UI界面的时候不知道该怎么去跟领导和客户说出自己这么做的原因？来了解下说服他们的方法吧！
人类视觉是整体的，我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。
目录：
原则一：接近性原理；
原则二：相似性原理；
原则三：连续性原理；
原则四：封闭性原理；
原则五：对称性原理；
原则六：主体/背景原理；
原则七：共同命运原理。
原则一：接近性原理
物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近（相对于其它物体）的物体看起来属于一组，而那些距离较远的则自动划为组外。
下图A组看起来是成行的，而B组看起来就是成列的。
接近性原理与软件、网页的布局明显相关。我们会经常使用分割线和色块来分隔空间和数据显示。
另一方面，可以通过缩短相关内容的距离，并加大与其他内容的距离，使它们在视觉上成为一组，这样就可以不用加划分区域的边界线条。这一方式可以减少用户界面上的视觉凌乱感，前段时间流行起来的无边框设计便是如此，如下图的Airbnb界面。
相反的，如果同一组控件的摆放距离太远、横纵接近方式不对或没有使用任何区域分割线的话，人们就很难感知到它们是相关的。软件就会变得难以学习和使用。
原则二：相似性原理
如果其它因素相同，那么相似的物体看起来归属于一组。
下图中，红色渐变圆圈看起来更像是一组，同时受它们的影响，使我们将排列感知为横向排列。
如美团中的分类区，用户会按照颜色把周边游/旅游，机票/火车票和景点/门票划为一种类别。
原则三：连续性原理
视觉倾向于感知连续的形式而不是离散的碎片。
如下图，左边的图中我们也能够感知到是一个圆圈将两条线遮住了，而不是四条线和圆圈
右边的图形中我们会认为是圆形被三条线截断了而不是四个图形。
滑动条和进度条就是使用了连续性感知的一个用户界面实例。虽然滑动条的中间被一个滑块截断，但是仍然不影响我们将它感知为一个连续的整体。
原则四：封闭性原理
与连续性原理相关的是格式塔封闭性原理：视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
这一原则其实很多地方都用到，不过我们一般不叫其为封闭性原理，而是叫截断式设计。为了让用户感知到还有内容，一般我们会使用截断式设计。
像下面截图中的左右滑动交互，因为屏幕大小的关系被截掉了部分内容，但是用户可以通过残留的部分，“脑补”出右边还有内容：
原则五：对称性原理
我们倾向于将复杂的视觉信息降低为更为简单的，更有对称性，更容易理解，更有意义的东西。对于同一种信息，我们的大脑视觉区域会对它有很多种可能的解析，但是我们的视觉和感知会选择更加简单和更对称的视觉景象。
对于A图形，你更倾向于感知为B图形，而不是右边的其他的几种形式。
同样的，当你看到下图的时候，你并不会将它看做一些明暗不同的线和面组成的没有任何意义平面图形，而会解析为一个更具有对称性的，更为简单的，更易于理解的建筑。
原则六：主体/背景原理
我们在感知事物的时候，总是自动的将视觉区域分为主体和背景。一旦图像中的某个部分符合作为背景的特征的话，我们的视觉感知就不会把它们作为主体焦点。
根据这样的原理在用户界面设计当中，我们就可以通过一些处理将图像中的某些部分变成背景，这样可以显示更多的信息或者将用户的焦点转移。
比如，在图片上加一个渐变或透明遮罩，让用户区分主体和背景。下图中加渐变这张以后用户就能准确的区分文字是主体。
又比如，手机应用中常常使用的弹窗，通过将当前的内容变暗，将之转换成为背景，之后弹出窗口，使用户的视觉焦点转移。
原则七：共同命运原理
前面的几个原理都是针对静态的图形图像，最后一个共同命运原理针对的是运动的物体。共同命运和前面的相似性原理和接近性原理相关，都影响着我们感知的物体是否成组。共同命运指出具有共同运动形式的物体被感知为彼此相关的一组。
比如，下面的数十个五边形中，如果其中的7个同步的前后摆动，那么虽然它们的距离较远，还是会被感知为一组。
又比如，当我们同时选中多个文件夹，之后拖动的时候，它们会一起移动，这就是共同命运原理的利用。
格式塔原理的综合利用
当然，界面设计场景中，各种格式塔原理并不是孤立存在的，而是相互影响，共同起作用。这是因为格式塔原理之间的相互作用，但我们同时使用某几个格式塔原理进行设计的时候，常常导致无意的副作用，产生违反预期的副作用。为了消除这种影响，一个方法是，当设计好之后，逐一的用各个原理来考量各个设计元素之间的关系是否符合设计的初衷。
以上就是我对格式塔原理的理解，如有觉得不对的地方欢迎斧正，谢谢阅读。
网友评论