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