恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
常用UI设计法则之格式塔原理
0.0°
2021-05-12 原创文章 经验/观点 举报 4638 35 20 2

我对格式塔原理的了解来源于《认知与设计》,由此发现所有的设计都是有依据的。最近开始尝试结合案例总结一些自己目前所了解到的设计法则,以便温故及后期查阅。


格式塔原理的由来

20世纪早期,德国心理学研究小组发现人类的视觉是在神经系统层面上感知形状和图形。“形状”和“图形”在德语中是Gestalt,因此这些理论被称为视觉感知的格式塔原理。

格式塔原理中最重要的有:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理、共同命运原理,其为图形和用户界面设计提供了有用的基础。


一、接近性原理

物体之间的相对距离会影响我们感知它们是否以及如何组合在一起。互相靠近(相对于其他)的看起来属于一组,而距离较远的就不是。左侧第2、3两行为一组,第1行单独一组;右侧第1、2两行为一组,第3行单独一组。


运用实例:

利用间距代替边框或分割线一定程度上能减少用户界面上的视觉凌乱感和代码数量。


二、相似性原理

如果其他因素相同,那么相似的物体看起来归属于一组。在视觉上第1、3列为一组,第2、4列为一组。


运用实例:相似性原理很好的解释了“为什么同模块内容要用相同的布局”。接近性和相似性原理都与对象分组有关,很多时候是共同作用的,以上列举的页面中都运用了不止一种原理。


三、连续性原理

视觉倾向于追随一个方向把元素连接起来,从而将其感知为连续的形式而不是离散的碎片。


运用实例:

连续性原理广泛应用于有类似“进度条”的页面设计中,除上述示例中包含的四类页面还有加载进度、身份认证、视频播放类等。


四、封闭性原理

视觉自动将敞开的图形关闭起来,从而将其感知为完整的物体。


运用实例:某些字体设计即使去掉部分偏旁依然能被识别,一定程度上也运用了封闭性原理,正负形海报或LOGO也它的是一种表现手法。


五、对称性原理

视觉系统会自动将复杂的场景解析为简单和对称形状的组合。

视觉将左边的形状感知为两个叠加对称的圆,而不是右边两种复杂的形状组合。


运用实例:

绝大多数以图片为主流的产品都用的瀑布流布局,因完全对称往往会稍显单调和沉闷,加入不对称元素能减轻用户视觉负担。


六、主体/背景原理

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


运用实例:

弹窗是主题/背景原理最常用的表现手法,利用空间感引导用户快速获取重要信息。


七、共同命运原理

针对动态的对象,一起运动的物体被感知为属于一组或是彼此相关的。第2、4、6列的圆同步上下摆动,则会被感知为是一组。


运用实例:在电脑桌面中,用户一次选取多个文件拖拽到新位置的场景也是典型的共同命运原理。


总结

以上7条格式塔原理在用户界面设计中不是孤立存在的,无论是PC还是手机端,都能为其提供一定的理论支撑。

但不是所有页面都能同时满足7条原理,我们可以在设计完成之后,使用每个原理去考量各个元素之间是否符合设计的初衷。

第一次尝试写文章会有许多不足,欢迎大家指正。

文章很长,谢谢观看~

Powered by Froala Editor

更新:2021-05-12

收藏

35人已收藏

  • 6

    作品

  • 56

    粉丝

  • 9

    关注

  • 常用UI设计法则(3):四项事物法则
  • 一个用4WH需求分析法做的首页改版
  • 常用UI设计法则(2):系列位置效应
  • 熊猫看书—V9.0复盘
相关标签
设计分享ui

    猜你喜欢

      2021-05-12 原创文章 经验/观点 举报 4638 35 20 2

      常用UI设计法则之格式塔原理

      0.0°

      你确定要举报常用UI设计法则之格式塔原理

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年05月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      20
      35
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录