格式塔与设计

格式塔作为心理学上一个著名理论，强调的是整体性大于局部作用的重要性，灵活的利用格式塔理论我们将使我们的设计更加的易于用户解读。

现将使用频率最多的原则总结如下：

• 相似性原则
• 封闭性原则
• 连续性原则
• 闭合性原则
• 邻近性原则
• 图形与背景关系原则

我讲通过一些例子来描述每项原则，愿你能更好的理解。

相似性原则

人的潜意识会将视线内一些相似的元素自动整合成整体。

 

在众所周知的梵高名画《繁星》中，由于强烈的对比我们能轻易的识出夜空中的繁星：

•代表星星的圆球都是相同的黄色。

•绘制星星边缘的笔刷都是围绕着圆球中心的分布，且方向一致。

这两种相同的特性让我们轻而易举的将繁星从夜空中区分出来，并突出了繁星。

接下来我们观察Tumblr是如何应用相似性原则的。如下图所示，不同图标代表了发布博客的不同方式。

相似性体现在哪儿呢？

•每个图标下都有文字说明。

•图标的大小，文字说明的字体以及大小都是相同的。

•每个图标都被均匀的分布在了空间内。

从发布博客的过程中我们了解到什么？

•作为用户，我们知道这些图标都可以发布博客。

•我们也清楚的知道每个图标代表的不同意义，能满足我们不同的需要。

封闭性原则

当对象周围有环绕闭合的边界，视觉上会将此类目进行归纳分组。

我们将用Facebook页面的三个板块来讲解封闭性原则在交互中的应用。

第一，整体页面（截图中边框强调所示）。Facebook界面中有内容的页面都是白色背景，此外，通过浅灰色边框线将其与淡灰色背景相分离，形成封闭区域。

 

 

第二，正文页面。图片以及其所附加的标题，描述，成组展示，清楚的强调了页面所包含的主要信息。

 

第三，评论部分。社交板块所有的信息都是淡蓝色背景，以此形成一个封闭空间，用户可轻易的找到评论区。

 

 

 

这些封闭提供的功能可见性，将各个功能区分类，准确有效的显示了信息。

连续性原则

如果一个图形的某些部分可以被看作是连接在一起的，这些部分会被我们知觉为一个整体。

如图是Google Maps的路线截图，通常我们会把那一连串的小蓝点看作是一条路线。

在现实生活中我们的路线必定是一条线，但没有什么比虚线所展示的路线方向更为直观。通过GPS定位，地图中代表用户的小图标将根据用户的前进而在地图上移动，我们全然依靠蓝点组成的虚线为指引。

另一个应用了连续性原则是媒体播放器。

这条线所代表的是歌曲所播放的进程，当音乐播放时，颜色会发生改变。我们将第二个颜色的进程线作为第二线，随着音乐播放他会变长。当然，他不能超过初始线的长度。在此给我们的提示是当第二线与初始线完全重合，这段音乐即完成播放。

这种视觉效果的信息传达，我们不常用“名词”（箭头），而是“动词”（动效，播放进程中的交互）来阐述它。要知道这样会更直接的让用户了解播放进度。

闭合性原则

当图形是一个残缺图形，但主体有一种使其闭合的倾向，即主体能自行填补缺口而把其知觉为一个整体。

在Twitter的界面中，当你收到通知，一个显示了数字的方块会覆着在图标上。

直到阅读通知消息，这个提示消息都一直在。

仔细观察在The Urban Outfitters在线商店的网页，当你添加商品到购物车中会发生的一切。

 

• “添加到购物车”转换为“已添加”

•  添加数次会出现在导航栏中购物车的旁边

•  一个模块会从右上角向下滑，以再次确认你将添加商品。

一系列的提示都可知我们已经成功将商品添加到购物车，省去了再次打开购物车界面去确认的麻烦。

邻近性原则

空间中距离相近的元素会被看作一体。

如下是Twitter的个人信息界面：

头像，背景图，显示名称，用户名作为用户的基本信息成组显示。在用户基本信息之下则是用户在Twitter的使用情况。

截图中的粉色线覆盖在用户基本信息和Twitter使用情况之间，为这两区形成了分界，以避免由于位置的邻近而造成的信息混乱。

试看Twitter对临近性原则应用的另一个例子：

转发，收藏，还有评论推文等功能成组显示，且处在明显低于图文的位置。

粉色线条强调的部分显示了功能的分区，你能够根据数字与图标距离之间的远近来得知他们之间的关系。

留白

你可能一次次的听设计师说：我们需要更多的留白！而这种空白空间也就是负空间。

在很多情况下（并非所有），空白空间被用于形成封闭（在上文已经提到），是一种无形的边界。通过空白，我们能够清楚的区分各项临近的功能，使得整个页面看起来不那么复杂。

不用添加任何的线条，颜色或者其他元素就能够实现功能作用化。意味着没有任何元素的空白空间（负空间）在功能上等同于正空间。

这个想法也被应用在电话号码上。比起一连串的数字，我们更容易记住分段显示的号码。

E.g. 555-555-5555 vs 5555555555

图片与背景关系原则

在视觉传达中，有些对象突现出来形成图形，有些对象作为衬托成为背景。

 

在纽约时代的页面中，图片与背景关系原则体现如下：

•          白色，透明的背景减弱了你对原文内容的注意力

•          窗口四周还有着边界和轻微的阴影

在此你会自然的将登录窗口视作前景，而纽约时代主页作为背景。透明背景之下我们仍能够看清也看内容，可以知道我们并没有离开页面。当登陆之后，页面随即会发生改变，前景和背景的内容也将改变。

 

最小样式

登录窗口的边界大约是1像素宽，阴影度也是相当微弱的，以保证视觉上的舒适。

当我们考虑最小样式时（与极简风格不同），我们必须知道：多少数值是我们尽可能做到能减少影响的。

Deiter Rams的终极原则曾说：尽可能的小，通俗点说就是在设计的过程中我们要避免过度设计，繁杂风格还有过多的步骤。

 

简化

一个界面的设计势必是融合了很多种不同的交互动作，在此我们希望的是尽可能用最少的动作来实现更多的操作。

如果我们不能做到这样，无关联的空白空间只能让用户烦扰。人们需要了解各项操作是如何实现整合来实现更优的交互体验。

 

希望你能应用上述的一系列原则，建立一个更直观的界面，为页面设计中所存在的问题找出合适的解决办法。

 码字很辛苦，转载请注明来自蓝色早晨-UED的《格式塔与设计》