问题31：如何把握页面设计中的版面率？
和问题30介绍的图版率类似,版面率也不属于常识类的概念,许多人不知道其含义。版面率主要指页面元素和页面空白(留白)的面积占比,页面元素包含页面中的图片、文字、图形等。图31-1示意了页面结构的组成,其中,版心就是页面各元素的集合。在一个页面中,版心所占面积大,留白少,版面率就高;反之,版心所占面积小,留白多,版面率就低,二者成反比。关于页面留白的技巧可以参看本书的“问题29:如何在页面中合理留白?”。
图31-1 页面结构的组成
与图版率一样,版面率对读者的阅读感受影响很大。业界通常认为,高版面率能够带来丰富的视觉感,更亲切、更喧闹;低版面率则给人品质感和高级感。图31-2可以让你体会一下满版和空版之间的关系。
图31-2 满版和空版的关系
在页面设计中,把握版面率和图版率一样都具有较大主观性,文档创建者需要根据文档受众及他们的阅读目的来调整页面元素彼此的照应。
页面元素中的主体大小不同会带给文档受众不同的体验,如图31-3左图的主体(language)比较大,页面元素多,显得拥挤热闹,而右图的主体(language)较小,页面元素少,会显得严肃庄重。这就是说,如果页面使用场景需要喧闹亲和的氛围,则可以添加页面元素,让页面饱满,提高版面率;如果页面使用场景需要冷静且有质感的印象,则可以精简页面元素,增加留白,降低版面率,就像图31-3左右页面版面率高低差异带来的视觉感受。当然,页面背景颜色的差异也会进一步增强这种视觉冲击。
图31-3 高版面率和低版面率对比
版面率和图版率的概念容易让人混淆。注意,图版率只与图片所占页面面积有关,与图片数量无关,计算时不包含文字元素;而版面率不仅与图片数量有关,还计算文字元素。你可以借助图31-4来理解,四个图文象限说明版面率和图版率的关系,在第一到第三象限,二者具有相似的逻辑,但在第四象限就明显体现了二者的区别,即一个只有文字没有图片的页面图版率为零,版面率却非零。
图版率、版面率概念的科普或许可以带给你页面设计上的思考和提示,让你在设计中不再随意、无目的地布局信息。如果你还有兴趣继续探索页面设计的小知识,请继续阅读下一个问题:“问题32:如何把握页面设计中的跳跃率?”。
图31-4 版面率VS.图版率的关系
参考文献
[1]Yuki Yuen.页面排版中版面率和留白率是什么?[DB/OL]https://zhuanlan.zhihu.com/p/73153107 2019-07-11/2021-07-12.
[2]大猫设计.排版设计之版面率&留白![DB/OL]https://www.sohu.com/a/437378561_161378 2020-12-10/2021-7-15.