08.08 UI 如何做好排版?格式塔原理你得学起来(下)

上周我们聊了格式塔的基本概念以及格式塔的一些常用方法,那么本期我结合理念以及一些实际案例告诉大家,在UI设计排版设计中,我们如何利用格式塔去排版。

UI 如何做好排版?格式塔原理你得学起来(下)

一. 相近原理

UI 如何做好排版?格式塔原理你得学起来(下)

相近原理:我们潜意识会把更紧密的事物被视为属于一起为一组。

相近原则,界面设计中我们比较在意间距,间距混乱会导致界面混乱不清。

UI 如何做好排版?格式塔原理你得学起来(下)
  • 左边:左边A和B之间的间距是50 ,明显大于每组之间30的间距,使用的相近原则,我们视觉上归于一组。
  • 右边:所有间距都是50固定的,但是可以看到,组的概念比较模糊。
UI 如何做好排版?格式塔原理你得学起来(下)UI 如何做好排版?格式塔原理你得学起来(下)

Pinterest里面没有任何分割线,但是运用了相似原则组和组之间的距离间距比较大,所以不会觉得没有层级。

二. 相似原则

UI 如何做好排版?格式塔原理你得学起来(下)

相似性,相似原则在界面中具有相同含义或者同功能的元素。

UI 如何做好排版?格式塔原理你得学起来(下)
  • 左边:我们肯定会认为这3个功能是类似的因为都是圆圈表达。
  • 右边:如果我们都换成方形,可能会让用户迷糊,因为其他都是方形,相似原则有一点就是形状相同为一组。
UI 如何做好排版?格式塔原理你得学起来(下)
  • A页面:1.6k、2LIKES、7MAGAZINES以及26FOLLOWING,它们有类似的设计模式,具有相同的含义,运用的相似原则。
  • B页面:在列表页面中,圆形虽然都不在一行,但是视觉表达含义是相同的。
  • C页面:所有蓝色的都可以点击,无论是按钮,还是文字都是可以链接的。
UI 如何做好排版?格式塔原理你得学起来(下)

这个页面就是反例,没有使用相近原则,列表里面大多数都跳转到一个新页面,也有一个是编辑的页面,但是混为一起用户不好分辨。

三. 对称原理

UI 如何做好排版?格式塔原理你得学起来(下)

对称原理:我们的思维倾向于将对象视为在中心点对称,并且去均匀分割这些元素找到平衡。

UI 如何做好排版?格式塔原理你得学起来(下)

四. 焦点原理

UI 如何做好排版?格式塔原理你得学起来(下)

焦点原理:我们用这个原理吸引用户注意,一个页面只有这一个眼睛,引导到用户完成我们预定好的功能路径,这种在APP中运用比较多。

UI 如何做好排版?格式塔原理你得学起来(下)

焦点原理运用:少即是多,焦点原理使用最佳案例苹果。

UI 如何做好排版?格式塔原理你得学起来(下)

焦点原理运用:在最早期的ins中,为了鼓励用户去分享照片,在底部bar设计时候,会对相机icon进行视觉突出,让用户主动去出发去分享。

UI 如何做好排版?格式塔原理你得学起来(下)

焦点原理运用:淘宝登录,按钮为视觉焦点去引导用户,闲鱼页面同样原理制造焦点,吸引用户去发布产品,微博也是制造焦点引导用户去产生内容。

UI 如何做好排版?格式塔原理你得学起来(下)UI 如何做好排版?格式塔原理你得学起来(下)

焦点原理运用:通过视觉引导,一到用户去录音去摄像。

五. 主体背景原理

UI 如何做好排版?格式塔原理你得学起来(下)

主体背景原理:也有人叫地面原理,我们的大脑将视觉区域分为主体和背景,主体包括一个场景中占据我们主要注意力的所有元素,其余的则是背景。

UI 如何做好排版?格式塔原理你得学起来(下)

主体背景原理:这2个页面,就是运用了主体背景原理,左边的数字运用了地面原理,优先级明显高于右边背景上的。

UI 如何做好排版?格式塔原理你得学起来(下)

主体背景原理:运用了主体背景原理,头部卡片内容在地面上,所以更加聚焦。

UI 如何做好排版?格式塔原理你得学起来(下)

主体背景原理:左边运用了主体背景原理,列表内容优先级最高,右边日历周视图处于地面,内容处于背景,所以日历周视图优先级大于背景内容。

六. 连续性原理

UI 如何做好排版?格式塔原理你得学起来(下)

连续性原理:我们视觉系统倾向于连续性,视觉系统倾向于感知连续的形式而不是离散的碎片。 连续性原理与其他远离(如对称性和相似性)相关。通过创建相适合对称平衡的元素。

UI 如何做好排版?格式塔原理你得学起来(下)

连续性原理:Pintrest虽然卡片被屏幕下面截断了,但是我们还是会认为它和下面是一组的,instagram也是同理,随便被屏幕右侧阶段但是不妨碍我们补全它是一个完整的卡片。

UI 如何做好排版?格式塔原理你得学起来(下)
UI 如何做好排版?格式塔原理你得学起来(下)

连续性原理:这2个页面同样采用连续性原理,被截断,但是我们视觉系统会自觉补齐缺失部分。

七. 封闭原理

UI 如何做好排版?格式塔原理你得学起来(下)

封闭原理:视觉系统会自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

UI 如何做好排版?格式塔原理你得学起来(下)

封闭性原理:我们会自动的把这些不完整图形在脑海中封闭起来形成一个整体图形,视觉系统的已知连续形造成的封闭认知。

八. 过去经验原理

过去经验原理:我们会自动将之前形成的经验当做现有经验去运用,这也是我们在做一些产品时候,为什么不要盲目创新而应该做微创新,不要去挑战用户已有的操作习惯。

UI 如何做好排版?格式塔原理你得学起来(下)

过去经验原理:假设我们把ins的发布照片按钮从中间挪动到最右侧,把淘宝立即购买和加入购物车换一个位置,我想一定会被用户吐槽,这就是用户过去经验原理,原因很简单,用户不习惯,所以设计时候一定要考虑用户的习惯原理。

UI 如何做好排版?格式塔原理你得学起来(下)

最后请感谢我们这些伟大的设计师艺术家前辈们,是他们发明格式塔这种百年设计原理。


分享到:


相關文章: