排版设计

利用设计思维写出一篇排版好看的文章。


📑 用大纲还是标题?

  • 为了更好的移动端阅读体验,建议优先选择标题加正文(无序列表或段落文本)的排版方式,且无序列表层级控制在二级无序列表,不要出现三级无序列表,否则移动端排版会很难看。标题层级控制在 h2-h4, 不要使用 h5-h6,改用粗体代替 h5-h6。操作手册类的尽量不使用大纲笔记来排版,因为这类型的文章要求内容详细。
  • 对于层级较多的文章可考虑使用大纲笔记进行排版,使用大纲笔记排版可使内容紧凑、层级明显且减少留白,节省文章篇幅,但会损失移动端阅读体验,可在每个系列的文章汇总页面就可用大纲笔记来整理。

🎉 文章规范

主要介绍正文与标题的规范

✨ 标题

  • 每个小节的标题使用二级或者三级标题(h2|h3)
  • 小节中进一步分层组织时使用四级标题(h4)
  • 尽量少用五级标题和六级标题,考虑用有序列表和无序列表或者加粗普通文本代替
  • 标题不加注数字章节,如:1,1.1,2.2 等
  • 标题请不要随意使用颜色,只使用黑色
  • 每个标题前面添加「分割线」(可选)

✨ 正文

  • 正文尽量以普通文本为主,着重强调时可使用粗体,英文姓名 Isacc Newton 或某些专有名词可使用斜体。英文、数字与中文之间需要空格,例如:还有 30 天,一个 HTML 页面,使用 Webpack 打包
  • 中文文档使用全角标点符号
  • 英文文档使用半角标点符号
  • 段落之间空一行加深层次感,也可不加空行
  • 不要随意在正文中使用标题类的文字
  • 标记颜色强调的时候,前后空格并使用 蓝色,例如 这里是标记颜色强调 的文字。
  • 正文中合理使用 无序列表 和 数字列表。注意多级列表使用 tab 缩进
  • 无序列表主要用于枚举或者无顺序关系的含义可以并列的句子
  • 数字列表主要用于有顺序关系的动作序列或者计划事项
  • 辅助性的提示文字和备注,请使用灰色普通文本
  • 用代码块来显示一段代码,请注意选择对应的代码语言,以正确高亮;如果代码过长,记得换行
  • 正文中嵌入图片,调整图片宽度以便更好地显示,可将图片并列显示
  • 文本样式主要服务于要表达的内容,所以样式尽量规范、统一。在不需要使用样式的情况下则不宜滥用样式,只在必要的时候使用样式。比如这样的颜色标记,就是一个坏例子。
  • 一定要牢记“分层”思想,比较长的文章可以分割成一个个小的片段(类似卡片笔记法中的卡片),然后将这些卡片进行组合。
  • 可以使用 vuepress 自带的容器(如:tab 栏、提示块、detail 容器)等对内容进行封装美化。
  • 使用 svg 图标,从 iconpark icon 复制 svg 代码(图标大小设定为 16px ),删除开头的 <?xml version="1.0" encoding="UTF-8"?>

🎊 模板

上次更新:
贡献者: iEchoxu