细节是魔鬼,设计在于细节
 首页> 读。设计

格式塔与设计

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

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

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

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

相似性原则

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

 

107377

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

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

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

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

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

相似性体现在哪儿呢?

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

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

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

107391

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

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

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

封闭性原则

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

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

107395

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

 

107396

 

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

 

107397

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

 

107398

 

 

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

连续性原则

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

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

107400

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

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

107401

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

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

闭合性原则

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

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

107402

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

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

107403

 

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

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

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

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

邻近性原则

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

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

107404

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

107405

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

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

107407

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

107408

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

留白

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

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

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

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

E.g. 555-555-5555 vs 5555555555

图片与背景关系原则

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

 

107410

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

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

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

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

 

最小样式

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

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

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

 

简化

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

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

 

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

发表评论

还可以输入 1994 个字符

全部评论 (2)
  1. 小易分享网    2016-08-22 : #1

    谢谢博主分享,很实用!

    回复
  2. Mr.HU    2014-09-19 : #2

    回复
切换登录

注册

切换注册

登录

忘记密码 ?