阅读页面的设计,常常是在做减法。但减法并不等于什么都不做:它要求更认真地安排每一段文字,以及文字之间的空白。
本文为排版示例,其中的参数只是起点,实际项目应结合字体和设备调整。
先照顾一行文字
行宽太长,视线在换行时容易失去位置;太短,阅读又会变得零碎。可以先为正文设置一个合适的最大宽度,再观察不同屏幕上的表现。
.prose {
max-width: 680px;
font-size: 17px;
line-height: 1.9;
overflow-wrap: anywhere;
}
代码可以作为一个起点,但实际阅读时的感受,比某个固定数字更重要。
用层级建立节奏
标题、正文和注释不需要争夺同样多的注意力。通过字号、颜色和间距,就能告诉读者哪里是新的段落,哪里是补充信息。
| 元素 | 主要作用 |
|---|---|
| 一级标题 | 说明整篇文章的主题 |
| 小节标题 | 帮助扫描和定位 |
| 正文 | 保持连续阅读 |
| 引用 | 留出思考的停顿 |
让交互保持清晰
一个链接应当能够被识别,一个按钮应当可以用键盘操作。深色主题也应该重新检查文字对比度,而不只是简单地反转颜色。
好的细节不一定会被注意到,但它们会让读者自然地读完下一段。