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