一次糟糕的排版，一次性改善排版工作流

梵高作品

题图：Van Gogh

引子

排版很重要。

自从我写公众号以来，有很多朋友向我强调排版的重要性。

道理都明白，就是做不到。

上一篇文章的排版很糟糕。

没有借口，说明情况

上一篇文章在4月3日晚上发出。当天我从下午开始一直在准备为「四大新鲜事」做一次线上直播。晚上8点开始，到接近9点半完成；所以，晚上做完这件事的时候，心里的一块石头就落下了，怀着轻松愉快的心情，大手一挥就把之前素材库里的一篇同主题素材发出来了。

发出来之后，我点开链接一看就发现坏事了。排版有很明显的错误！整个过程很简单：

1. 这篇文章写于1周前，排版也是那时做的，并没有更新；
2. 发之前自己并没有检查，隐约心理觉得有点不对，但是没有检查；

一篇文章的排版，这件事可大可小。
但是，对一个怀着最大热情，一心想要为学习者创造不一样的互联网产品的产品经理来说，这可是天大的事。

细节上出现如此的基本错误。是能力不行？还是态度不对？

还好。痛定思痛。我觉得基本上是这样的：态度有疏忽，流程上需改善。

有错就改，从善如流

第2天，我对文章排版的页面CSS进行了更新。动刀的地方主要包括：

说明：括号中的英文为css样式中的代码段

• 无序列表(ul, 即unordered list)：修正了左缩进太多的问题；
• 文字引用(blockquote)：加大了字重，解决了文字太细的问题；加深了字色，避免读起来费眼；增加了底色，与正文部分进一步区分；
• 修正了无序列表和文字引用同时出现时缩进层次不一的问题；
• 加粗文字(Strong)：减小字重，避免加粗问题的效果突兀；增加了字体大小继承代码(font-size: inherit)，修正了文字加粗后大小颜色不一的问题；
• 标题层级(h1-h6)：修改了第1层级的颜色，所有层级标题统一使用蓝色；修改了第1、第2层级的字体大小；第2层级标题字体大小与正文一致，以颜色及加粗效果与正文区分；

新旧排版对比

排版更新-001.jpg
排版更新-002.jpg
排版更新-003.jpg

新排版的思路

• 正文，17pt
• 一级标题：「小能熊blue」，加大(1.2 em)加粗（字重700）
• 二级标题：「小能熊blue」，加粗不加大
• 引用，0.9em，左边的引用线采用「小能熊blue」，底色为灰色(HEX值：#666666)
• 加粗效果：颜色与字体均继承所在段落
• 行间距、段间距已调整，目标是有效体现文章内容结构；

小能熊排版风格由CSS控制，这样就能保证迭代更新。实现每次文章的排版基本全自动。

错误不可怕，前提是认真总结

• 我的排版在Mac平台上进行；使用Day One 2 这个软件，对markdown文件预览后粘贴至微信公众号后台；
• 为了排版风格一致，我利用修改CSS样式的方法来「编写」自己的排版风格。
• 从Markdown文本到排版后的网页，CSS渲染的结果可靠，不用任何手动调整，真乃利器！
• 其实只需要懂一点点CSS代码和HTML即可；
• CSS和HTML我之前完全不懂，我在CodeCademy网站参加了CSS和HTML代码的免费课程学习，耗时3个多小时；
• 对学到的任何知识(当然也包括这次的CSS排版)，我通过Evernote进行知识管理；
• 从构思、到写作、排版，一定要梳理自己的工作流(workflow)，而且要以书面形式落实下来。针对上篇文章的排版教训，我新建了一个公众号发文的检查清单(checklist)。以后，发文章之前，完全不依赖自己的记忆，按清单排除可能的问题。

以上，就是一次排版失误之后，我的错误总结和改善措施。虽然又犯了一个错误，但是我坚定的相信：

错误不可怕，只要从根本上找出原因，然后从根本上改正。

做事情发生的错误，只要改正措施落实到流程层面，提升到思维层面，可以说是好事。