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

爱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

相关推荐

  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • 招聘 | 年薪百万不是梦,八爪鱼一大波高薪职位与伯乐奖在等你

    八爪鱼又开始招人啦如果你对大数据充满热情技术与才华兼并就赶快行动吧行业销售总监(政企)企)N15k-30k /深圳 / 经验3-5年 / 本科及以上 / 全职>>>岗位职责:基于公司的大数据产品、资源和技术,面向企业/政府等客户,提供数据采集软件、数据分析产品,数据服务,大数据解决方案等产品或服务;销售团队的人员招聘,管理及考核淘汰工作;完成客户需求的挖掘,商务谈判,项目回款工作;负责外部销售渠道和资源的对接,开发与维护;配合市场运营部...

    2018-03-15
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 交互设计| 谁说只有APP这一亩三分地儿?上天入地都有它!

    ▽什么是交互设计?APP呗!NONONO,太狭隘!人家已经上天啦!大到航天科技,小到手机APP,都会涉及到交互设计,真可谓是“上天入地”,无所不及。小编通过“四个了解、一个目的、一个原则、一个步骤、一个标准、一个区别”告诉你到底什么是交互设计。▽【交互设计专业概述】“四个了解”交互设计又称互动设计,英文Interaction Design, 缩写 IxD 或者 IaD。它是定义、设计人造系统行为的设计领域。交互设计是一种如何让产品易用、...

    2018-02-08
  • Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • 前Apple员工谈交互设计的未来

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing本文长度2731字,建议阅读5分钟现在,有很多流行的有关未来交互设计的想象。机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏和After Effects合成的特效。我对视频中的一些交互表示怀疑,因为我尝试过实现它们,而制作视频的动画师显然没有。但是,这不是这个视频真正存在的问题。我觉得这个视频真正出了问题的地...

    2018-01-30
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

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

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

    2018-04-27