问题29：如何在页面中合理留白？
文档页面中没有任何标记的区域,字里行间的空格都属于“留白”(spacing)。从设计的角度看,留白指为合理安排信息而预留和腾挪空间的努力,它可指任何颜色的空白。在许多人眼里,留白可能是无足轻重的元素,他们创建文档时可能也很少会考虑页面上的自然留白状态合适与否。如果你是他们中的一员,请继续阅读该问题。
页面上的图文信息和留白的关系就像太极图的黑白阴阳极,互相映衬、互为释义。百度的首页是个充分留白的范例,页面除了正中央的“百度一下”,没有其他任何图文元素,这样留白的目的就是为了让用户聚焦在核心的搜索功能。留白还可以作为组织图文和引导用户注意某些细节的手段,表达某种优雅格调,如在境外出版物中常会发现前面几张的空白页(偶见到标注“该页是故意留白”的提示)就是为了获得此效果。
现在你来感受一下图29-1和图29-2的视觉体验,两图中均有一个黑色方块,但图29-1页面上有大片的留白来凸显中间的黑方块,使它更容易被感知到,可见越多的留白可使目标内容被感知的价值越大。而图29-2页面上拥挤聚集的信息弱化了黑方块的个体元素,使其显得不突出、不重要。可见,只有灵活地应用留白才可以发挥其潜在价值。
图29-1 页面充分留白
图29-2 页面充满内容
要合理留白,你需要做到以下几个事项:
避免混淆、混乱的排版:图29-3所示的排版对读者是不友好的,其留白的空间无法帮助读者进行阅读的分区,横纵双向的阅读似乎皆可的排版会使读者陡增茫然感和视觉疲劳。因此,清晰整洁的页面是合理留白的基础。
图29-3 排版混乱的页面
保持留白的合理比例:根据人因研究结果建议,硬拷贝文档的留白比例为25％～40％,网页文档的留白比例为40％～60％(以用户最小的使用屏幕为考虑情形)[1]。
确保有解释关系的图文紧邻:图29-4中左右两页面的插图与其上下方文字的间隔距离不等。在左页面中,读者大概率会认为插图是解释其上方文字的,而在右页面中,读者会认为插图是解释下方文字的。同理,如果插图与其上下方文字都等距,读者则会解读为插图与上下方的文字都相关。
图29-4 图文相邻的解释关系
注意图文搭配的观感期待:图29-5左页面是长条插图和分栏文字搭配,两侧留白;右页面是宽形插图和单栏文字搭配,中间留白。哪一个页面更符合大多数读者的观感期待呢?若在无特定用意的前提下,右边的横向布局可能更符合大多数人的预期。
虽然,留白可以出现在页面上任何位置,但留白都应该是有目的的,比如说是为了提高页面可读性、改进页面观感、提供思考的呼吸空间、聚焦核心问题等。因此,创建文档时,与其用尽心思把内容填满页面,还不如有目的地合理留白,只保留重要的信息,这样的排版更加直击人心。
图29-5 图文的横纵布局观感
参考文献
[1]WordPress技术博客,THEMEPARK WEB主题公园,留白对网页设计的重要性[EB/OL],https://www.themepark.com.cn/lbdwysjdzyx.html 2012-09-08/2021-02-26.
[2]Business Hosting Provider,How Much White Space Is Too Much?[EB/OL],http://www.businesshostingprovider.com/web-design/white-space.htm unknown date/2021-02-26.
[3]Muller,G.White space in Web Design:What It Is and Why You Should Use It.[EB/OL],https://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-shoulduse-it 2012-11-06/2021-02-26.
[4]White,Jan V.Editing By Design[M].New York:Allworth Press,1982:63-64.