设计师的魔法棒：格式塔原理

格式塔原理——图形与背景、接近、相似、闭合、连续、简单、均衡

——格式塔心理学科是认知心理学中的一个重要理论，在视觉设计中已经有较大的影响。若去深究格式塔原理，可能需要相当长的时间来学习理解，作为交互设计师和界面设计师，其实只要理解这几个原理的含义和使用方法，就可以对自己的设计做出指导和支撑了。

下面来谈谈我自己对这些原理的理解：

图形与背景原理

——知觉帮助我们把图形从背景中分离出来。图形与背景的对比越大，图形的轮廓越明显，则图形越容易被发觉。

图例：当白色方块越来越大，它就渐渐的退居为背景，而橙色方块从背景渐渐的变为了图形。通过面积、颜色、轮廓等等，我们可以较好的把握图形与背景的关系。

实例：将签名档文字灰化，降低与背景的对比，使得签名档文字比昵称和头像更接近背景，起到了弱化的作用。

接近原理

——距离（位置）相近的各部分趋于组成整体。这是最简单、也是最常用的原理。

图例，知觉上更倾向于意识到“3组圆”，而不是“6个圆”：

一个最简单的应用实例：6个一排的按钮看上去有点多，而且“过”也混在其中了，将6个按钮的距离分开一点点，就可以将按钮分为两组，从而解决了问题。

另一个案例，产品想要在奖状面板上加一个分享按钮，交互建议按钮放在奖状外，因为奖状上加大按钮容易破坏奖状原本的整体感（从而可能要修改奖状），而分享按钮可能在除奖状外的多个图形上用到，导致对按钮的适应度要求变高：

方案1——需求（请忽略按钮颜色和质感，这并不是视觉稿）

方案2——交互方案（策划担心此方案会导致在较花的游戏界面中，按钮和奖状看上去不是一个整体）（请忽略按钮颜色和质感，这并不是视觉稿）

实际效果——还是觉得“分享给好友”是针对奖状的，对吗？这正是“接近原理的力量”（如果再通过程序，给两块都加上一些阴影，就更整体了——相似原理）

 

相似原理

——在某一方面相似的各部分趋于组成整体。

图例，知觉上更倾向于意识到“3组圆（接近）”或“2种圆（相似）”，而不是“6个圆”：

实例：想想看，如果第二排按钮也是彩色…^_^

实例：利用相似的样式，使知觉自己将其编组。这个原理其实已经用的很多，就不多说啦。

 

闭合原理

——彼此相属、构成封闭实体的各部分趋于组成整体。

图例：知觉上更倾向于意识到“1个圈和1个点”，而不是“9个圆”：

实例：左右两个方案哪个看上去更简洁生动呢？

标签： 交互设计 界面设计 格式塔心理学 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。