交互设计中的视觉基础-格式塔理论

爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

爱UI小课堂今天从交互设计开始

Interaction design

交互设计中的视觉基础-格式塔理论

     交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。

      20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础理论与原理支撑。格式塔原理主要有五大原则即:接近、相似、封闭、连续、简单,下面我们就来一一介绍吧。

交互设计中的视觉基础-格式塔理论

01   接近原则

交互设计中的视觉基础-格式塔理论

接近原则指的是人们在视觉上会自动将靠得近的物象归为一组或一类。 

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

     例如上图,你会将左图的16个圆作为一个整体,而右图中则会将他们分为左右两组,这正是由于圆之间的间距不同所形成的视觉分组。

     在实际的界面设计中我们可以合理利用信息之间的间距差异来达到信息分组归类的作用,有利于用户更好的理解和分辨页面信息。再者可以合理利用留白,使信息组之间被留白区分开来,页面会更加整洁有序。

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

交互设计中的视觉基础-格式塔理论

02   相似原则

交互设计中的视觉基础-格式塔理论

相似原则指的是人们在视觉上会把具有明显共同特征(形状、大小、共同运动、方向、颜色等)的物象作为一个整体归为一类。

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

      例如上图,你会将左图中的圆形和方形分为两组,而右图中你会把黄色和灰色分为两组。左图中你是根据形状的相似而自动将元素进行分组,右图中由于颜色在相似原则上比重更大,而自然的以颜色上的相似进行分组。

      由此可见,在页面设计及排布的时候应该注意同等级的元素应该在大小、风格、颜色上保持一致,从而有利于用户对于信息的理解。

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

交互设计中的视觉基础-格式塔理论

03   封闭原则

交互设计中的视觉基础-格式塔理论

封闭原则指的是指的是人们在视觉上会把不完全封闭的物象当成一个统一的整体。

交互设计中的视觉基础-格式塔理论

      例如上图,你会不自觉地认为这是一个三角形,实际上是几根线条而已。因为我们会有意识的去填补缺失的部分而看成一个完整的整体,这正是封闭原则。

      在页面设计上封闭原则也应用广泛,例如下图中你会觉得左图的下半部分还有被隐藏的部分,而右图中你会很难意识到接下来还有内容。在做页面设计的时候一定要注意哦~

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

交互设计中的视觉基础-格式塔理论

04   连续原则

交互设计中的视觉基础-格式塔理论

连续原则指的是人们在视觉上会把非连续的物象将其完整化,成为连续的形式。

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

      上图可以看出连续原则与封闭原则有类似之处,但是连续原则强调的是信息的方向性(如上左图),封闭原则强调的是信息的完整性(如上右图)。

     在页面的设计上连续原则经常在数据可视化上与封闭原则一同运用。

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

05   简单原则

交互设计中的视觉基础-格式塔理论

简单原则指的是人们在视觉上会把复杂的物象分解并解析为较为简单的(倾向于对称的)物象来理解

交互设计中的视觉基础-格式塔理论

     例如上图中你会把上方的图形解析为两个叠加的圆形,而不会解析成形状复杂的形状组合,因为这种解析方式更加简单且具有对称性。

     在做页面设计时,简单原则暗合了排版规则。由于人们更容易理解简单对称的事务,所以在页面排版上常见的三角形构图,均衡构图,对阵构图,向心式构图(圆形)、对角线,X型,构图等,其目的都是为了在复杂的信息环境中,构建更易懂的整体。

       在了解了格式塔五大原则后是不是对视觉设计理解又更深了一步呢,在做交互demo的时候是不是页面更符合视觉原理了呢。虽然只是简单的五原则,但是深化理解以后会让你在页面设计受益匪浅。下一次爱UI小课堂将介绍更为实用的知识,不要错过哦~

交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论
交互设计中的视觉基础-格式塔理论

爱UI那伙人de干货大全

交互设计中的视觉基础-格式塔理论

交互设计中的视觉基础-格式塔理论

这里有软萌可爱的设计大牛们, 快来找我们玩呀...

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36731/

(0)
交互精选交互精选
上一篇 2018-04-26
下一篇 2018-04-26

相关推荐

  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • Axure从入门到精通-第0课,课程介绍

    紫豆子开始新的教程编写,讲解Axure的使用。还是希望5次课程可以把这个软件讲通。这是一款很容易上手的产品,可能有的人已经会了。我们先看看下面由Axure做的网页是不是有点跟我们见过的Axure不太一样了为什么学这个软件?入门简单,它就像一个大的画布,你可以简单的通过拖拽组建在页面中添加你要放置的内容;不像PS那么难学。可以做一些简单的动画效果;可以让一个组建旋转、移动、缩放、消失、出现等等;可以做一些简单的交互效果;例如点击一个画布中...

    2018-04-29
  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 2017用户体验行业调查报告

    更多精彩内容:IPO新机制 催生市场四大变化最全关于企业上市流程知识汇总!(强烈建议收藏)由IXDC主办的2017国际体验设计大会于2017年7月12-16日在国家会议中心举行,作为全球极具影响力的体验设计交流平台,吸引了3000多名从业者参加,大会通过主题演讲、工作坊等形式充分交流经验,共享体验设计盛宴。而作为一年一度的用户体验行业报告发布也是大会重要的组成部分,备受从业者们关注,报告每年通过全面详尽的调查分析,系统梳理整个行业脉络,...

    2018-02-14
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07
  • NO.14 下一站用户体验

    今天要为大家推荐的书是杨艾祥的《下一站用户体验》,用户体验这个词大家并不陌生,但用户体验的定义以及所包含的具体内容有哪些,这个问题,可能并不是很多人都特别清楚的了解,用户体验这个被用“烂”了的词到底具备哪些威力,作为一个设计师又如何去提升产品的用户体验,在《下一站用户体验》这本书中都可以找到答案。目录(简版):一、那些让人讨厌的流氓行为1、这是个烦躁的世界2、这个世界没有新物种3、美丽的错误二、用户究竟在体验些什么1、腾讯为什么那样牛2...

    微信热点 2018-02-25
  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • Axure RP入门第五篇——全局变量实现不同窗口加载

    产品经理入门:Axure RP入门第五篇——全局变量实现不同窗口加载

    2018-03-04
  • 交互设计第一步 了解完整的知识体系架构

    交互设计师犹如一名“翻译官”,主要的使命就是让人与产品之间更容易沟通、更具有人性化,让用户的操作更加有效,这也是交互设计师的价值之所在。今天推荐的这门课程,带你全面了解交互设计的知识体系架构和工作流程,了解交互设计师应具备的能力、应掌握的工具、如何完成进阶,并掌握让你更加专业、更具逻辑性的设计思维与交互设计面试技巧。点击“阅读原文”,开启你的学习之旅~丨我将从这门课中学到什么?了解形成完整的知识体系架构的重要性了解交互体系架构包括哪些部...

    2018-03-12