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

爱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

相关推荐

  • Sketchelp | 画笔是设计师的思考工具

    作为公众平台的第一篇推送~这不是一则成立宣言,而是一篇老友记。五年ACCD手绘教学实战+三年工业设计考研方法传授,期间无数沉淀,我们想用一种更纯粹的方式去记录。于是,Sketchelp这个名字诞生了。Sketchelp,顾名思义,秉持着助人的心态,提供国外知名设计学院ACCD扎实的手绘观念,结合设计师多年在造型上的实战经验,用浅显易懂、循序渐进的方式带给大众关于设计与手绘的知识。在此基础上,我们将根据行业需求及未来趋势,持续不断地更新及...

    2018-05-04
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 2018年交互设计趋势

    想必你还在对昨天HJUX视觉伙伴们给出的视觉设计趋势啧啧称赞,那么赞别停!今天团队的交互伙伴们将带来2018年交互设计趋势。选择在农历新年来临之际奉上这道历时一个月烹制的“交互趋势年夜饭”,只愿给力求打造极致用户体验的你以启发和帮助。干货阅读时间预计5分钟设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官...

    2018-02-02
  • 2017年设计师该如何转型?来看阿里UED掌门人的演讲!

    温馨提示,扫文章底部二维码可看相关视频。UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。汪方进:阿里巴巴BBC UED...

    2018-03-20
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • Facebook的用户体验评判规则

    Facebook的产品设计五维情感精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。分享——承载对Facebook连接、自由、生活的文化认同。留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。易用反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。方位清晰——清晰的知道自己在那里,退路在那里,...

    2018-03-25
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07