《众妙之门——网页排版设计制胜秘诀》——3.2 利用信息层级

简介:

本节书摘来自异步社区《众妙之门——网页排版设计制胜秘诀》一书中的第3章,第3.2节,作者: 【德】Smashing Magazine 译者: 侯景艳 , 范辰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

3.2 利用信息层级

通过排版来定义内容的优先级不止一种方法。首先,字体的尺寸、颜色、粗细、展示方式,以及字体是标准体或斜体,都会加强或减弱字体的重要性。同时,我们也不能忽视文字在网页版面上的位置这一影响因素。

Mark Boulton发表过系列文章“Five Simple Steps to Better Typography(五个简单步骤,让你的版式变得更好)”,这些文章分为五个部分,其中在第五部分,他讨论了字体的粗细。对于字体的粗细如何影响层级秩序的创建,他从历史的角度剖析了各种观点。

这篇文章阐述了在网页的不同部分,用户期望看到什么样的字体。

下页展示了一个表格—关于人如何基于传统观点来分层级地选择字体样式。

针对网页上不同位置的字体,用户会做出不同的反应。在所有其他条件都对等的情况下,放在网页主体部分的文字比放在侧边栏上的文字更重要。但如果侧边栏上的字较大,还是会吸引用户的注意,提升自身的层级。要想让用户以你的方式来理解你展示的内容,就需要好好处理正文和侧边栏文字的关系。


7ed4664ad0ca2f7b0620076af93eac9e186fdee9

如下是来自文章“A Guide to Web Typography”(网页版式的设计指南)的截图。截图展示了字体特性如何影响层级。同时,注意侧边栏是如何脱颖而出的。虽然展示在黑色背景上的文字与主体部分的文字界限分明,看上去似乎不那么重要,但却让人难以忽视它们。如果你想让用户点击这些文字,这样的排版方式就很有效。

f2929e796610b0dbd8739b4a8d938cb0947320ec

尽管黑色背景上的文字比版式主体部分的文字更大,却不会让我们混淆它们各自的功能。前者是作为广告出现,当我们想阅读文章正文时,就会尝试忽略它们。再者,侧边栏虽然注目,却并不抢眼,因此我们阅读时尽管潜意识里无法忽视侧边栏的存在,却不会受到它们的干扰。

文字在版面上的分布将会极大地影响我们对它们的反应。根据惯例,版面上重要级别不高的内容比如侧边栏,会通过在页面上建立的视觉层级,引导我们关注主要

内容。类似的惯例也会帮助我们区别对待页面上不同区域的内容。

相关文章
|
1月前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
58 2
|
传感器 XML 定位技术
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
109 0
|
数据可视化 JavaScript 物联网
ThingJS之3D开发:如何做颜值高的设计?
不要把关于设计的这些内容看得太过严肃。
ThingJS之3D开发:如何做颜值高的设计?
|
iOS开发
《伟大的小细节:互联网产品设计中的微创新思维》——3.3 位置环境因素
本节书摘来自华章计算机《伟大的小细节:互联网产品设计中的微创新思维》一书中的第3章,第3.3节,作者:文哲著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1198 0
|
UED iOS开发
《伟大的小细节:互联网产品设计中的微创新思维》——3.5 交互界面因素
本节书摘来自华章计算机《伟大的小细节:互联网产品设计中的微创新思维》一书中的第3章,第3.5节,作者:文哲著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1211 0
|
前端开发
《众妙之门——网页排版设计制胜秘诀》——导读
本书是Smashing Magazine网站的精选文章合辑,旨在帮助读者提升网页版式设计水平。本书囊括了字体抗锯齿技术,网页排版的原则,网页字体的设置技巧,CSS字体堆栈指南,CSS3的新特性,网页字体服务推荐以及排版工具介绍,等等。
1622 0