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

爱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

相关推荐

  • 每个用户体验设计师都要懂的UX移情图

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cnEmpathy,同理心,或者说移情,是UX设计师在为产品进行用户体验设计的时候,最强的能力和工具之一。移情是人类情绪和心智中最重要的功能之一,在很多时候,它是产生情感共鸣和理解的基石,它也是改善用户体验的重要途径。通常我们所说的换位思考,就是移情。借助移情,设计师站在用户的角度来看待问题,了解用户的需求,理解用户的心态,这是改善用户体验的第一步。在...

    2018-02-01
  • 瑞昌2018年3.31-4.6一周企业招聘信息及待遇......

    【招聘信息】客服招聘企业:精彩网络科技详细地址:江西省瑞昌市摩恩大厦8楼801岗位要求:女性/中专/技校/1-3年工作经验 /30岁以下职位要求:会办公软件,联系人:范联系电话:18079284619【招聘信息】美容师,学徒招聘企业:汉娜尚妃美容中心详细地址:阳光国际,大唐岗位要求:女性/学历不限/经验不限 /35岁以下职位要求:汉娜尚妃美容中心高薪招聘一、店长2名,底薪2000+提成+业绩+奖金,总工资5000一7000左右二、美容师...

    2018-04-08
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • 一些交互设计原则 | 蓝鲸

    从用户角度来说,交互设计是一种如何让产品更易用,让用户更愉悦的产品设计。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点。以下就介绍一下在交互设计中一些通用的原则。1、前馈/反馈:前馈就是操作之前要给的信息,提示用户点击之后会出现什么、点击之后结果是什么。前馈适用于新产品(还不知道怎么用的产品)。反馈就是用户操作结束后给的信息提示。如:您的操作过于频繁,请稍后再试。2、状态可见原则:比如进度条,...

    2018-04-24
  • Axure小白,快速做出冲顶大会高保真原型,全靠它(附源文件下载)

    Hi,大家好我是Axure实战班萌萌哒的班主任Sara(*^▽^*)这是一篇很有内容的Axure班介绍文章如果你被Axure困扰想快速玩转Axure,做出标准的原型图想写出规范的原型说明,掌握产品交互那么花3-5分钟了解下这个实战班吧,2000多位同学报名学习了,不会错的~先给大家看看我们班liwen同学,做的冲顶大会gif图喔,真的很棒棒耶(*╹▽╹*)(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文...

    2018-03-26
  • 交互设计:谈谈那些极具争议的设计方法

    作者:中大yzh全文共 2556 字,阅读需要 6 分钟———— / BEGIN / ————交互设计是一门有关设计学、用户心理学、图形学和计算机理论的综合型新兴领域,由于其及其复杂的学科交叉性,以及在不同的情景下,对同一类组件的要求经常会有所不同,导致目前在该领域内有时会出现一些看似正确其实极富争议的设计方法。在这里,我们就讨论一下这些具有争议的设计方法。争议方法1:在线填表时应该标注“可选填”的填表项在线填表时,需要在表格上面注明“...

    2018-02-01
  • 我们招人啦:高级UX/UI设计师

    For EN version, clickhere生活在笔驰!想不想为前卫的客户创造出杰出的作品?加入我们紧密团结,具有才华,能吃苦耐劳的大家庭,你将会为不同行业构建最具深刻印象的品牌形象。你将迎接带有刺激和创造性的挑战。你会和一个带有创新思维的团队一起工作,不断地推动自己,让自己继续迈向未知的步伐。有时混乱,但永远是具有想象力的一个过程,我们能够专注于做出一个非凡的设计并将它和乐趣结合到一起。我们需要的高级UX/UI设计师!我们正在寻...

    微信热点 2018-04-05
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31