![UI设计与认知心理学(全彩)](https://wfqqreader-1252317822.image.myqcloud.com/cover/224/26687224/b_26687224.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.4 几何化的信息块
1 基本的信息块
现在我们不仅拥有栅格带来的整齐,还明白了视觉记忆与识别是从整体到细节的原理,那么如何有效地应用原理呢?我们可以参考金伯利·伊拉姆(Kimberly Elam)的“虚空间”概念。“虚空间”指的是栅格系统中没有被排版内容填充的区块,“就是那些没有被构成要素占据的空间”。先依照金伯利的理论把之前放下来的图形进行“虚空间”的分析,如下图中红色方框内的区域。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0049_0001.jpg?sign=1738887060-xNRo4ejHJ4QZ7yaYJ4ZwD43RE52ZMsWB-0-a98c626bd473268c6a5cf3de285b3d7d)
零碎的虚空间
尝试再次排版,整合这些“虚空间”,将整体的“几何离子集”的数量降低到适当的程度。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0049_0002.jpg?sign=1738887060-IRCOAdL631ZIhLRytVXi9eFg9eaaIgDI-0-2820251faf9622e67a8a475cb135c8e4)
经过整理后的虚空间
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0050_0001.jpg?sign=1738887060-TQDHzYAmW54syY9hxSo8N3k3vNUtnjMh-0-9193fae99b18fbf8be383c1be58fc9ac)
整理之后的排版方块
最后看看这样排版的文字效果,明显好于之前的排版。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0050_0002.jpg?sign=1738887060-pwXbt06J1UG9wLo8XSr2r4AsAMJ22XyX-0-de9f9cf03a996d9b598daabebb25a760)
整理之后的文字效果
应用栅格系统的第一步是解决整齐问题,然而整齐的排版并没有解决所有问题,除了整齐还需要一种隐含的结构,本书称这种结构为排版元素构成的几何信息块,简称为几何信息块。
这种几何信息块的基本要求就是尽量减少“几何离子集”的数量,让排版形成的整体数量足够简洁。根据这个规则,构建几何信息块需要注意以下几点:
第一点,元素不能重叠,重叠会造成新的不规整的形态。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0001.jpg?sign=1738887060-mU6yOuRwFAlIPUYRN2ay64AKSox1Eelj-0-031cb20c22b1615c17c3535e3261e0c7)
重叠错误
第二点,元素的长度需要与横格吻合,不要超出基本边界。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0002.jpg?sign=1738887060-ZV9Z8pTtbRW6JyktI7xCR0ezX4EcXfmS-0-878c1451bc741359dca270ebd95dc978)
超出虚拟边界错误
第三点,构建虚拟边线,下图中的红色圆圈表示隐含的“方块”所构建的虚拟边线,这些边线是构成栅格系统最为重要的部分。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0003.jpg?sign=1738887060-wW9g7U0ZGzI2BECzuVBs9XyJsV8zjxuc-0-d60ac7020b15835e99cd7f59a2f145f7)
构建虚拟边界