![UI设计与认知心理学(全彩)](https://wfqqreader-1252317822.image.myqcloud.com/cover/224/26687224/b_26687224.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.5 几何信息块——构图与黄金分割
1 三分法
前面讨论了黄金分割比产生的效应:趋近黄金分割比的图形更容易被认可。在构图中,这种喜好的倾向就演变成人们常用的三分法。三分法就是将画面在水平和垂直方向都分为3份,那么画面中就会出现4个新的矩形,这4个矩形与原有构图的比例是2/3≈0.667,非常接近黄金分割比的0.618。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0052_0001.jpg?sign=1739272391-d52l8VV8tcGU86tnP0OEzeb6MRe2Wr5j-0-7adc54cf3f492608342586d5a1bcbed9)
三分法原理图
在照相软件或图片处理软件中,都带有三分网格的结构。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0052_0002.jpg?sign=1739272391-SNJFuM4lDhGpXSvl5EkWP8HCAvYvF7X2-0-c0d043e6f8ca27669a559160aacd5729)
使用三分法的软件
那么,在构图中如何使用三分法呢?
(1)用三分法修剪构图中的元素
用三分法修剪构图中的元素与几何信息块的需求不谋而合,或者说三分法就是天然几何信息块的应用。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0053_0001.jpg?sign=1739272391-LsJ4TVg8F2iwsUTvWM4F3ZJv3CKOrbza-0-194d7e73a282470eb613688131476276)
以三分法修剪多余的元素
(2)调整构图元素位置使几何信息块更加简化
如下图所示是调整页面元素的过程。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0053_0002.jpg?sign=1739272391-X8r4gAbg4lIqdyowprnCm2suWAQFYKw3-0-8fdb233a174575c0ee0b29d32b7e9032)
通过三分法调整页面元素位置
在起始阶段的页面中,元素没有贴合栅格,经过调整的页面效果如第二幅图所示。将元素居中后,第二幅图中的圆点会使页面的重量感失调,将其放置在应用三分法形成的交点上后,页面变得最为协调,页面呈现最简化的信息块,图中的“0.667”代表白色透明方块。
三分法为几何信息块提供了比例上的美感,这是黄金分割比带来的结果。也就是说,如果条件允许,直接使用黄金分割比将更好地使栅格系统变得美观。
2 常用构成方向
金伯利教授在《栅格系统与版式设计》中归类了几种典型的构成方向,下面在这本书中抽取几例,并且标记使其产生作用的几何信息块,方便大家理解这些构图的奥妙,如下图所示。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0054_0001.jpg?sign=1739272391-3vfOYOLH57HyMPwG9hZh36LTH45brYyI-0-88f935408de6b30be8fa2cef3585b3c5)
水平方向
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0054_0002.jpg?sign=1739272391-cwoLz50bDei9pmIgFWTBwRwI7hmNX9GJ-0-5eaab0514432768f3d1d5c9d2ba9f918)
垂直方向
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0054_0003.jpg?sign=1739272391-2RjuC93FrZvoTp7PCEjyV17ubJaqp8PF-0-1c5c50f6c079438477973ca0eac8bb0c)
倾斜