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

爱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

相关推荐

  • 微信小程序设计指南 · 小程序

    概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同…

    2016-09-24
  • 【交互设计】北京中技华软科技服务有限公司内部主题分享会第七期

    北京中技华软科技服务有限公司内部主题分享会第七期主题:交互设计时间:2018年4月23日主讲人:高旭2018年4月23日上午,北京中技华软科技服务有限公司进行了第七期内部主题分享会——交互设计。交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。主讲人高旭分别从交互设计的起源、原则...

    2018-04-24
  • UNStudio:健康城市,基于未来的设计

    📌 编辑 |Cassi.W编者按:城市公共环境作为人们共同的“家”,需要群策群力共同营造。城市公共基础设施作为“城市家居”是人们日常生活舒适感、安全感的主要保证。第二届“衲田杯”可持续设计国际竞赛正在火热报名中,你的脑洞是否还够用?“新技术引领下的智慧城市家居”有很多可能性,需要大家去探索、去研究、去发现。本期我们将走近UNStudio事务所的智慧城市实践,为你的方案增添一点灵感!- UNStudio -Ben van Berkel本·...

    2018-03-17
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • Sketchelp | 画笔是设计师的思考工具

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

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

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

    2018-03-26
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15
  • SKD独家 | 英国交互设计排名

    同学们自从上次🇺🇸美国交互设计的排名一出打算去英国🇬🇧的小伙伴纷纷表示出英国版的排名👌先以交互的分类来划分一下英国的院校:以HCI为主,偏技术研发的院校有:伦敦大学学院(UCL)Human Computer Interaction(Msc)巴斯大学(Bath)Human Computer Interaction(Msc)以UX为主,偏交互装置、技术应用院校有:伦敦传媒学院(LCC)Interaction Design Communica...

    2018-04-17