格式塔原理——图形与背景、接近、相似、闭合、连续、简单、均衡
——格式塔心理学科是认知心理学中的一个重要理论,在视觉设计中已经有较大的影响。若去深究格式塔原理,可能需要相当长的时间来学习理解,作为交互设计师和界面设计师,其实只要理解这几个原理的含义和使用方法,就可以对自己的设计做出指导和支撑了。下面来谈谈我自己对这些原理的理解:
图形与背景原理——知觉帮助我们把图形从背景中分离出来。图形与背景的对比越大,图形的轮廓越明显,则图形越容易被发觉。
图例:当白色方块越来越大,它就渐渐的退居为背景,而橙色方块从背景渐渐的变为了图形。通过面积、颜色、轮廓等等,我们可以较好的把握图形与背景的关系。
文章插图
实例:将签名档文字灰化,降低与背景的对比,使得签名档文字比昵称和头像更接近背景,起到了弱化的作用。
文章插图
接近原理——距离(位置)相近的各部分趋于组成整体。这是最简单、也是最常用的原理。
图例,知觉上更倾向于意识到“3组圆”,而不是“6个圆”:
文章插图
一个最简单的应用实例:6个一排的按钮看上去有点多,而且“过”也混在其中了,将6个按钮的距离分开一点点,就可以将按钮分为两组,从而解决了问题。
文章插图
另一个案例,产品想要在奖状面板上加一个分享按钮,交互建议按钮放在奖状外,因为奖状上加大按钮容易破坏奖状原本的整体感(从而可能要修改奖状),而分享按钮可能在除奖状外的多个图形上用到,导致对按钮的适应度要求变高:方案1——需求(请忽略按钮颜色和质感,这并不是视觉稿)
文章插图
方案2——交互方案(策划担心此方案会导致在较花的游戏界面中,按钮和奖状看上去不是一个整体)(请忽略按钮颜色和质感,这并不是视觉稿)
文章插图
实际效果——还是觉得“分享给好友”是针对奖状的,对吗?这正是“接近原理的力量”(如果再通过程序,给两块都加上一些阴影,就更整体了——相似原理)
文章插图
相似原理——在某一方面相似的各部分趋于组成整体。
图例,知觉上更倾向于意识到“3组圆(接近)”或“2种圆(相似)”,而不是“6个圆”:
文章插图
实例:想想看,如果第二排按钮也是彩色…^_^
文章插图
实例:利用相似的样式,使知觉自己将其编组。这个原理其实已经用的很多,就不多说啦。
文章插图
闭合原理——彼此相属、构成封闭实体的各部分趋于组成整体。
图例:知觉上更倾向于意识到“1个圈和1个点”,而不是“9个圆”:
- 设计师重用外卖保温袋寒冬为爱犬制作科幻保暖衣
- 看看这10位世界级服装设计师,他们是如何塑造全球时装史的!
- 《清风朗月花正开》横店开机 THE9-许佳琪黄圣池古代家装设计师
- 童心“说”近视防控,太带劲了
- 不会玩C4D的设计师,看到他的作品都哭了!
- 韩国设计师把废弃口罩做成板凳
- 设计师王大仁发声否认性骚扰,品牌命运将会怎样?
- 设计师的学历究竟重要吗?
- 90后小伙把爱好当事业,曾从设计师变舞者,如今拥有600平米场地用于街舞教学!
- 《哈利·波特与魔法石》在改编成电影时,在细节上有一些不同处理