![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=1738824193-sXv26FyW0BIDwBzWrVapMAzKnAeJZg1n-0-e292a798ff22b409bc48c2101fa05aaa)
零碎的虚空间
尝试再次排版,整合这些“虚空间”,将整体的“几何离子集”的数量降低到适当的程度。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0049_0002.jpg?sign=1738824193-JMtauNnJJLpbj6pdwQVddhfr67v9sXtr-0-d8cac04cf8251b4715be02676253b727)
经过整理后的虚空间
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0050_0001.jpg?sign=1738824193-FLZwYuZVoJXYLQHeVyx3iWKRWQMtBbj1-0-465d8c21d1064cb0f0dec1117907cb57)
整理之后的排版方块
最后看看这样排版的文字效果,明显好于之前的排版。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0050_0002.jpg?sign=1738824193-xahHrHKs0RsoKIIAeqocrW8YRskjfM9W-0-1a80e7e30fde6b11b4a5f4fd9b2f13aa)
整理之后的文字效果
应用栅格系统的第一步是解决整齐问题,然而整齐的排版并没有解决所有问题,除了整齐还需要一种隐含的结构,本书称这种结构为排版元素构成的几何信息块,简称为几何信息块。
这种几何信息块的基本要求就是尽量减少“几何离子集”的数量,让排版形成的整体数量足够简洁。根据这个规则,构建几何信息块需要注意以下几点:
第一点,元素不能重叠,重叠会造成新的不规整的形态。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0001.jpg?sign=1738824193-tywTTTVDm5RmbRxdM5YcbhpSLB5q7tJo-0-ff852a50896758f34e159851d89c3e42)
重叠错误
第二点,元素的长度需要与横格吻合,不要超出基本边界。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0002.jpg?sign=1738824193-lkecwaQwgQw2VTzcK320XsoDRVCwOz7e-0-1e7e974b9c8248df9e9098c295483e89)
超出虚拟边界错误
第三点,构建虚拟边线,下图中的红色圆圈表示隐含的“方块”所构建的虚拟边线,这些边线是构成栅格系统最为重要的部分。
![](https://epubservercos.yuewen.com/15CB4C/15168413305896306/epubprivate/OEBPS/Images/figure_0051_0003.jpg?sign=1738824193-odPEQP9LEr3n4EJuflMgnfMnjz1xGFol-0-476ea70cd27c875bc1ec0bc7d30a5a24)
构建虚拟边界