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