如何利用交互设计的接近法则与格式塔理论

标签: 学堂 雅虎UED 封闭原则 格式塔 接近法则 | 发表时间:2013-02-16 11:42 | 作者:pank
出处:http://www.leiphone.com

未标题-9_副本【编者按】本文来源 中国雅虎UED   早在20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并编订了目录。 格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。

我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图形和物体,而不是只看到互不相连的边,线和区域。“形状”和“图形”在德语是“Gestalt”,因此这些理论也被称为视觉感知的格式塔(Gestalt)原理。

接近法则是格式塔理论中最为我们所熟知的,也是我们最常用到的一项法则。说的是物体之间的相对距离会影响我们感知它们是否以及如何在一起。相对于其它物体来说,彼此之间靠近的物体看起来属于一组。越接近,组合在一起的可能性就越大,强调的是位置。如下图,我们在意识中会将其分为两组。

1

 

接近原则被广泛应用于页面内容的组织,以及分组设计中。对于引导用户的视觉流及方便用户对界面的解读起到非常重要的作用,通过接近原则对同类内容进行分组,同时留下间距,会给用户的视觉以秩序和合理的休憩。 设计者们经常使用分组框或分割线将屏幕上的控件和数据显示分隔开,如下图。

2

3

除了接近法则之外,还有很多重要的原则你知道吗?接下来我将逐一向大家介绍。

相似原则:

相似,听起来跟接近非常类似,但是他们确实是不同的两个概念。接近强调位置,而相似则强调内容。人们通常把那些明显具有共同特性(如形状、大小、颜色等)的事物组合在一起,即相似的部分在知觉中会形成若干组。在下图中,我们会将黑帽子蛋和红帽子蛋自然的分成两组。

4

在页面设计中分类使用文本、颜色、图像等,可以更好的区分各个模块和内容。如下图中雅虎读书导航,通过相似原则我们很容易的将一级导航和二级导航区分开来。

5

换一个角度来思考,颜色的变化很清楚的区分了不同的内容,相似中的逆向思维是获取焦点的好方法。这种方法在 导航强调部分信息的设计上有着广泛地应用,如下图。

6

封闭原则:

当元素不完整或者不存在的时候,依然可以被人们所识别。根据过去以往的经验和视知觉的整体意愿驱使,我们习惯性的将图形作为一个整体去观看,于是我们在脑袋里将缺少的形状补充进去之后,便形成最终我们识别出来的图形效果。如下图,没有三角形和圆,但是在我们心理模型中填充缺失的信息,创建我们熟知的形状和图形。

7

封闭原则常被应用于图形界面和页面设计中,例如:在页面中经常会用堆叠的形式表示对象的集合,只要显示一个完整的对象和其“背后”对象的一角就足以让用户感知到这是由一叠对象构成的整体,如下图所示。

8

连续原则:

与封闭性相关的是连续原则,连续原则说的是我们的视觉倾向于感知连续的形式而不是零散的碎片。在图形设计中,使用了连续原则的一个最广为人知的例子就是IBM的标志。它由非连续性的蓝色块组成,但一点也不含糊,我们很容易就能识别出三个粗体字母,就像透过百叶窗看到的效果一样,见图9。

9

关于格式塔的原则还有很多,而且可以复合使用。在我们设计了一个东西之后,可以试着使用格式塔原理来考量一下自己各个设计元素之间的关系是否复合设计的初衷。希望通过对格式塔原始理论的介绍可以给大家带来一些启发

10

(若无特别注明, 雷锋网文章皆为原创,转载请注明出处)
原文链接: http://www.leiphone.com/pank-6.html

您可能也喜欢:

专场设计所需要的5个基本功

如何做好产品运营设计的积累

Sean Mitchell推荐的40个A+字体设计

提升Android应用视觉效果的10个UI设计技巧

浅谈UI设计中的包容性设计
无觅

相关 [利用 交互设计 法则] 推荐:

如何利用交互设计的接近法则与格式塔理论

- - 雷锋网
【编者按】本文来源 中国雅虎UED   早在20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理. 他们观察了许多重要的视觉现象并编订了目录. 格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体. 我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图形和物体,而不是只看到互不相连的边,线和区域.

那些工作教会我的事情(2)——交互设计师的工作法则

- 河小山 - 优涩控
很多人都会问起我这么一个问题:你为什么要写博客. 因为这看起来是一件极度不讨好,高投入,低产出的活动. 除了浪费时间与精力之外,还有可能冒被人骂说不会写博文的风险. “因为白鸦的这句话:持续关注互联网产业发展,思考电子商务新发展. 立志:终身爱恋互联网,终身爱恋设计,终身Blogging …”——这是两年前我的回答.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

交互设计初体验

- - 微博UDC
9月初,我来到新浪微博UDC部门交互设计岗位实习. 在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责. 鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计.

交互设计入门–了解交互设计

- - 互联网的那点事...
为什么会有交互设计,交互设计能够做什么?. ▎1.成功的互联网产品具备哪些要素. ①当你的Boss需要做个产品时,它首先必须是可实现的,这也是为什么核心程序员架构师的待遇普遍较高的原因,因为他们是生产力. 那么成功的产品首先要具备– 可实现模型. ”当然不是,产品的终极目标是盈利,你的领导也只关心这个.

交互设计师如何做交互?

- Jerry - UED TEAM,用户体验设计,web前端开发
尽管很多谈及交互的书上都已经回答过了:. 发现用户需要,建立明确需求. 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步.

web交互设计原则和模式

- shallwelin - 译言-
原文作者:Bill Scott. 原文链接:Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计(丰富交互设计的原则和模式). (本书英文版大家可以到我blog下载:http://blog.youmila.com/?p=325).

好的交互设计就是简单

- 小宇 - 互联网的那点事...
交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

浅析手机语音交互设计

- Elic - 所有文章 - UCD大社区
语音识别技术,也被称为自动语音识别,其目标是将人类的语音中的词汇内容转换为计算机可读的输入,例如按键、二进制编码或者字符序列. 语音识别技术作为输入方式,比按键输入和手势输入更为快捷,学习成本很低,对于非特定人连续语音识别系统的识别率达到98.73%,已经达到实用要求,具有广阔的应用前景,在手机端的应用有语音拨号、语音输入、语音命令、语音搜索和语音翻译等.