格式塔与我的设计

       格式塔？格式塔是什么？格式塔与设计有什么关系？这样的问题一直困扰着曾经的我，设计理论由心理学与视觉原理的支撑使得感到设计的分量感和充实。

       格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知整体和统一的形状、图形和物体，而不是只看到互不相连的边、线和区域。「形状」和「图形」在德语中是 Gestalt，因此这些理论也称做视觉感知的格式塔原理。

       百度搜索格式塔，可以得到以下关键词：格式塔理论、格式塔心理治疗方法、格式塔学派......听起来很陌生？那么我们从心理学角度看看如何定义：“一种说法是指事物的一般属性，即形式；另一种说法是事物的个别实体，即分离的整体，形式仅为其属性之一”看到这里可能有的小伙伴就在抱怨说到底能不能说人话，说我听的懂得？

       那我翻译下，格式塔简单的来说就是通过经验产生的认知和知觉。回过头来看心理学中定义的第一种说法：“一种说法是指事物的一般属性，即形式”。举个栗子，在数学课上老师教我们认识几何图形，黑板上有三角形、四边形、五边形、圆形、椭圆形、梯形…，老师问道这些几何图形中有夹角的，有角度的形状是哪些，你肯定会说除了圆行和椭圆的那些形状。三角形、四边形、梯形、五边形等这类图形有着不同的名字和特征，那么你为什么能够从中筛选出来呢？其实这里的角就是事物的一般属性，通过“有角的”这一形式来区分了具有有角的特征的几何形体。

       第二种说法事物的个别实体，即分离的整体，形式仅为其属性之一。试想下，假如黑板上又增加了一个形状——扇形。此时此刻，面临老师的提问作为你又该如何回答？第二种说法表达的意思就是通过格式塔建立的的属性特征具有不唯一性，它涉及物体本身，而不是物体的特殊形式，形式只是物体的属性之一。

       格式塔心理学研究学派断言：人们在观察时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。此外，他们坚持认为，在一个格式塔（即一个单一视场，或单一的参照系）内，眼睛的能力只能接受少数几个不相关联的整体单位。这种能力的强弱取决于这些整体单位的不同与相似，以及它们之间的相关位置。如果一个格式塔中包含了太多的互不相关的单位，眼脑就会试图将其简化，把各个单位加以组合，使之成为一个知觉上易于处理的整体。如果办不到这一点，整体形象将继续呈现为无序状态或混乱，从而无法被正确认知，简单地说，就是看不懂或无法接受。格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。

       简单来说就是你的大脑有把信息化繁为简的能力，当然化繁为简不是目的，人脑会先通过简化筛选信息，找到感兴趣的信息了再了解具体内容。

       格式塔研究者衍生出的理论若干，与设计相关的常用有七种：

接近性：

      物体之间的相对距离回影响我们感制他们是否以及如何组织在一起。相互靠近的物体看起来属于一组。

        两个图形都是由点构成三角形的轮廓，我将用此实例从两个角度去讨论接近性。整体观察来看，A、B之间的距离较远是两个形状。从细节来看与A形状之间构成轮廓的元素间隙较小，经过视觉加工后能清楚的感知到此形状是三角形的轮廓，而B元素临近所有点的元素之间的距离几乎相等，通过视觉加工后有错觉这是一个三角形的面，而不能第一时间去精准认知到这是一个三角形的轮廓。

        而把A、B两形状之间的距离缩小，挨在一起时。此时视觉会精准的处理信息，这是一个四边形。

       对平面设计有基本功底的不难发现，格式塔中接近性原则也就是我们平面设计四大原则中的亲密关系，即将相关的项组织在一起，使其存在关联。如果多个项相互之间存在很近的亲密性，他们就会成为一个视觉单元，而不是独立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。整个过程应当是一个合理的过程，有确定的开始，而且有确定的结束。

在我的设计中它这样应用：

       针对全部分类这样的分类选择页面，首先对信息层级进行筛选，初步可以分为三类信息，A类为二级分类列表，B类为一级分类列表，C类为全部分类列表。从最下级列表来看，在同类级别列表中亲密关系保持一致，且保持最亲密的状态，B级中既要与A级保持相对亲密的关系，且要与上个类似层级保持关系。

       而做到这些，最好的方式就是利用八点栅格做设计，这样的设计规范程度高，美观简洁，最重要的是易于程序员小盆友前端界面实现。图为八点栅格，如有机会继续写文章，我也会对八点栅格做详细说明。

相似性

       如果元素彼此相似，则元素倾向于被感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。即相似的物体看起来回归为一组。相似性可以帮助我们组织和分类页面里的元素对象，并将它们与特定的含义或功能相关联。有不同的方法可以使元素被认为是相似的，这些方法包括颜色，大小，形状，纹理，尺寸和方向的相似性。

       相似性与平面设计四大原则中的重复原则也有异曲同工之妙，在我们UI设计中我们即要做到同类元素的表现样式一致且统一，具体表现在icon的统一性、字体的统一性、文字大小的统一性、颜色的统一性、卡片样式的统一性等众多方面。

连续性

       我们的视觉倾向于感知连续的形式而不是离散的碎片。

        用这样的一张图来解释连续性再好不过，构成这个图形的是一些不规则的点状图形，但由于我们视觉加工信息时候会化繁为简，把复杂的无序排列的点状信息进行整合形成了狗的造型轮廓。

       在商品列表页面，相关操作都在右侧，自上而下依次排列，且保持右端对其的状态。不仅在视觉上保持了连续性，也是在点击操作上保持了高度的连续性质。

       在这一点上和平面设计四大原则中的对齐也有相通之处。

封闭性

       我们的视觉系统会自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

       封闭性在我们UI设计中应用广泛，试想下，我们平时怎样判断我们当前页面有多长，以便于我们顺利完成上下交互，我们什么时候知道这种状态下页面是能够左右交互的，以此来判断当前页面信息并未展示完。这些也都是封闭性原则的应用实例，经常用在大平移动式和判断页面是否还能向下加载。

       我们的视觉系统会自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

对称性

       我们的视觉会自动组织并解析数据，从而简画这些数据并赋予他们对称性。

       针对于列表页面既要有商品的图片信息，又要有商品的价格等信息。而这其中最重要的是给用户展示商品是什么样子商品是什么，商品多少钱。即图片信息和数字信息这两类，从人的视觉和人的接受能力来看这两类信息也是最引起注意和最容易被接受的。故在此处则利用对称性原则来进行设计。让重要的商品图片信息位于左侧，商品的价格信息位于右侧，在保持连续性的基础上对信息进行对成型处理，让交互界面在使用的过程中更便于操作和观察。

主题/背景

        场景的特点会影响视觉系统对场景中的主体和背景的解析

        这一点在我们的UI设计中可以从两个方面来理解。第一是营销型活动的氛围感，即电商中双11，双12，618等活动时出现的各种活动页面和推广广告。会营造出浓厚的氛围感，以对引起消费者的购买欲望，从而提高转化率。

        第二也就是我们在交互设计中经常提到的费茨法则，简而言之就是在页面中优化主要像素区域，让用户即将要进行的操作显眼且易于操作。如在我在活动页面的设计中，将用户即将要进行的按钮操作突出化，一方面方便用户点击操作，另一方面也是从视觉上引起用户的注意。

        在这一点上与平面设计中的四大原则中的对比也有异曲同工之妙。

共同命运

        一起运动的物体被感知为属于一个组或者彼此相关的。在现实世界中的视觉场景中，各种格式塔原理不是孤立的。

        这个听起来是一个很玄的概念，但其实也很好理解，针对设计其实就是调性和风格的问题。每一个产品都有自己的整体风格和调性，是由配色规范、字体规范、字号规范、icon规范、列表组件规范、消息组件规范等一系列规范和其产品的特有设计理念组成，通过界面间的元素去传递给用户信息，使得达成用户在操作产品时易用且实用的目的。

       更重要的是格式塔应用到UI设计中的七大原则，最关键的是前面五大原则，但是其完整的七大原则要相互配合，相互协调，吃透理论将自己的设计与理论完美的相结合，这也是本文的目的所在。

文中大量佐证于我的最近作品，其UI设计部分在站酷也有整理发布：

https://www.zcool.com.cn/work/ZMzUwNTE0NDA=.html

微信扫码查看小程序获得更多体验