理解UI设计准则——格式塔原理


目录

  • 格式塔原理:接近性
  • 格式塔原理:相似性
  • 格式塔原理:连续性
  • 格式塔原理:封闭性
  • 格式塔原理:对称性
  • 格式塔原理:主体 / 背景
  • 格式塔原理:共同命运
  • 将格式塔原理综合起来

 


 

格式塔原理:接近性

    接近性是指,物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近的(相对于其他的物体)物体看起来属于一组,

  而那些距离较远的就不是。下图(A)中的星星看起来是成行的,而(B)看起来就是成列的

    

    接近性原理与软件、网站和电器设备中的控制面板和数据表单的布局明显相关。设计者们经常使用分组框和分割线将屏幕上的空间和数据

  显示分隔开。另一方面,根据接近性原理可以通过拉进某些对象之间的距离,拉开与其他对象之间的距离是它们在视觉上成为一组,这样的话

  就可以不需要那些用来划分区域的边界线条。许多的设计专家推荐使用这一方式来减少用户界面上的视觉凌乱感和代码数量。

  

    相反的,如果同一组的控件的摆放距离相隔太远或者横纵接近的方式不对或者没有使用任何的区域分割线的话,人们就很难感知到它们是

  你预期的那样的相关性。软件就会变得难以学习和使用

                                

格式塔原理:相似性

    格式塔原理相似性原理指出了影响我们感知分组的另一个因素:如果其他的因素相同,那么相似的物体看起来归属于同一组。下图中,

  空心的星星看起来更像是一组,同时受它们的影响,使我们将星星的排列感知为横向排列

                                                         

    类似的,向下面的表单,给人的感觉就像是有分组一样,相同形式的输入框并排的放置在一起,同时选择器又做了适当分隔作用;

  右图PhotoShop中的工具选区也是利用了相似性原理。

                                      

 

格式塔原理:连续性

    上述的两个格式塔原理都与我们试图给对象分组的倾向有关,另外几个格式塔原理则与我们的视觉系统视图解析模糊或者填补遗漏

  来感知整个物体的倾向有关。

    连续性原理,即是说我们的视觉倾向于感知连续的形式而不是离散的碎片。如下图,我们看到的是一个潜伏在海中的海怪,虽然它

  的身体的一部分被遮住了而并不是三段毫不相干的东西;同样对于右图,我们也能够感知到是一个圆圈将两条线遮住了,而不是四条线

  和圆圈

                               

    滑动条就是使用了连续性感知的一个用户界面实例。虽然滑动条的中间被一个滑块截断,但是仍然不影响我们将它感知为一个连

  续的整体

                            

 

格式塔原理:封闭性

    与连续性原理相关的是格式塔封闭性原理:我们的视觉系统自动的尝试将敞开的图形封闭起来,从而将其感知为完整的物体而不是分

  散的碎片。

                           

格式塔原理:对称性原理

    格式塔对称性原理则抓住了我们观察事物的第三种倾向:我们倾向于将复杂的视觉信息降低为更为简单的,更有对称性,更容易理解

  ,更有意义的东西。对于同一种信息,我们的大脑视觉区域会对它有很多种可能的解析,但是我们的视觉和感知会选择更加简单和更对称

  的视觉景象。

    当你看到下图的时候,你并不会将它看做一些明暗不同的线条和平面组成的没有任何意义和对称性的平面图形,相反你会解析为一个

  更加具有对称性的,更加简单的,更加易于理解的三维建筑物图形

                      

    同样的,对于下面的图形,你更倾向于感知为两个菱形,而不是右边的其他的几种形式

       

 

格式塔原理:主体 / 背景

    这个原理指出,我们在感知事物的时候,总是自动的将视觉区域分为主体和背景。一旦图像中的某个部分符合作为背景的特征的话,

  我们的视觉感知就不会把它们作为主体焦点。根据这样的原理在用户界面设计当中,我们就可以通过一些处理将图像中的某些部分变成

  背景,这样可以显示更多的信息或者将用户的焦点转移

    比如,在网站中常常在主题内容和纯色背景的中间层中放置印象诱导图形(当然,实际上这个诱导图形和纯色背景实际上往往是一

  张图,只是看起来像夹了一层),这样可以传递更多的主题信息,因为用户能够区分什么是主体,什么是背景,而不会将它们搞混。

    

    又比如,手机应用中常常使用的灯箱,通过将当前的内容变暗,将之转换成为背景,之后弹出灯箱,使用户的视觉焦点转移

        

格式塔原理:共同命运

     前面的几个格式塔与那里都是针对静态的图形图像,最后一个格式塔原理共同命运针对的是运动的物体。共同命运和前面的

  相似性原理和接近性原理相关,都影响着我们感知的物体是否成组。共同命运指出具有共同运动形式的物体被感知为彼此相关的一

  组。比如,下面的数十个五边形中,如果其中的7个同步的前后摆动,那么虽然它们的距离较远,还是会被感知为一组

                              

    又比如,当我们同时选中多个文件夹,之后拖动的时候,它们会一起移动,这就是共同命运原理的利用

                  

格式塔原理的综合利用

    当然,界面设计场景中,各种格式塔原理不是孤立的,而是相互影响,共同起作用。比如,Photoshop中的一个界面就可以

  涉及到6个原理:接近性、相似性、连续性、封闭性、对称性、主体/背景

                                  

    这是因为格式塔原理之间的相互作用,但我们同时使用某几个格式塔原理进行设计的时候,常常导致无意的副作用,产生

  违反预期的副作用。为了消除这种影响,一个方法是,当设计好之后,逐一的用各个原理来考量各个设计元素之间的关系是否

  符合当初设计的初衷。

 

   本文摘自ISBN 978-7-115-36410-4,其中做了一些变动,如需转载请著名这个书号,谢谢!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM