网页排版清单

译自:http://www.merttol.com/articles/web/checklist-for-better-web-typography.html

找到一个简单可行的网页排版清单,个人感觉可以当入门级参考来使用。这个网站同时还有一个完整的设计清单,不只是排版相关的。


排版可以影响到读者是否阅读这里的内容,也潜移默化的让他们注意到你的网站。选择适当的字体并控制它们的展现形式是你传递信息的关键。

下面的清单用来归纳出一些要点,帮助你在网站上线之前确认一下是不是所有该做的事情都做到了。

  • 布局
  • 字体和格式
  • 内容
  • 艺术字

关于布局,你是否:

  1. 把内容通过大标题、小段落、列表符号、侧边栏、缩紧或引用将其分开?
  2. 通过分栏将较宽的页面将行宽限制在 350~550 像素内?
  3. 加重加大显示首字母/首行以改进较长文本的可读性并让整个页面的配色更明亮?
  4. 增加字母或单词直接的空隙以示强调?
  5. 首行缩紧或双倍段落间距,但不要两者兼有?
  6. 避免把紧跟在标题后面的段落缩进?
  7. 在标题之前使用双倍段落间距但是在标题和其引出的内容之间使用单倍段落间距?

关于字体和格式,你是否:

  1. 为正文文案使用无修饰的、针对屏幕优化过的字体且使用清晰易读的大小?
  2. 为长文本适度使用更松散的首字母/首行,或减轻页面的密度,以示强调?
  3. 使用更宽的字符或单词空隙,以示强调?
  4. 将正文左端对齐,右端参差不齐
  5. 通过对比性的元素,比如不同的字体、字号、字重、颜色、格式、结构、加粗、斜体、相反的文本颜色和背景色、全大写、纹理、方向、节奏、距离和修饰来强调特殊的文本区域?
  6. 克制的使用这些列出的元素?
  7. 通过 CSS 自动设置特殊的大小写规则 (全大写、全小写、标题情形)?
  8. 在正文中避免使用全大写?
  9. 只在链接上使用下划线?
  10. 灰度模式下测试你的网站以确保前景色和背景色有足够的对比度?
  11. 如果在暗色背景中使用亮色文字,则考虑将文本加粗或选择一款本身字形较粗的字体?
  12. 避免删除线,除非你想展示的是该文档之前编辑过的版本?
  13. 考虑使用 CSS 来设置首字符或首行文本的样式?

关于内容,你是否:

  1. 检查拼写、语法和句式?
  2. 少用一些感叹号
  3. 指定合适的排版字符,包括短破折号长破折号成对的引号、真正的省略号以及大小写数字 (upper and lowercase numerals 应该指的是罗马数字 I II III IV V VI VII VIII IX X……)?

关于艺术字,你是否:

  1. 确保只在绝对必要的时候使用艺术字,避免过高的下载量?
  2. 选择合适的修饰抗锯齿字间距
  3. 为较小的文字选择有针对性设计的字体并关掉抗锯齿

最后这里还有另外一份 “设计清单”,记得看看。

已有 3 条评论 »

  1. 差不多有一半的内容对中文网站没什么意义啊……

  2. 差不多有一半的内容对中文网站没什么意义啊

  3. Wos Wos

    感觉像教前端工程师如何转型UI设计师

添加新评论 »

(请至少包含一个汉字,且汉字不能比日本字少)