題圖：Van Gogh
引子
排版很重要。
自從我寫公眾號(hào)以來(lái)，有很多朋友向我強(qiáng)調(diào)排版的重要性。
道理都明白，就是做不到。
上一篇文章的排版很糟糕。
沒(méi)有借口，說(shuō)明情況
上一篇文章在4月3日晚上發(fā)出。當(dāng)天我從下午開(kāi)始一直在準(zhǔn)備為「四大新鮮事」做一次線上直播。晚上8點(diǎn)開(kāi)始，到接近9點(diǎn)半完成；所以，晚上做完這件事的時(shí)候，心里的一塊石頭就落下了，懷著輕松愉快的心情，大手一揮就把之前素材庫(kù)里的一篇同主題素材發(fā)出來(lái)了。
發(fā)出來(lái)之后，我點(diǎn)開(kāi)鏈接一看就發(fā)現(xiàn)壞事了。排版有很明顯的錯(cuò)誤！整個(gè)過(guò)程很簡(jiǎn)單：
- 這篇文章寫于1周前，排版也是那時(shí)做的，并沒(méi)有更新；
- 發(fā)之前自己并沒(méi)有檢查，隱約心理覺(jué)得有點(diǎn)不對(duì)，但是沒(méi)有檢查；
一篇文章的排版，這件事可大可小。
但是，對(duì)一個(gè)懷著最大熱情，一心想要為學(xué)習(xí)者創(chuàng)造不一樣的互聯(lián)網(wǎng)產(chǎn)品的產(chǎn)品經(jīng)理來(lái)說(shuō)，這可是天大的事。
細(xì)節(jié)上出現(xiàn)如此的基本錯(cuò)誤。是能力不行？還是態(tài)度不對(duì)？
還好。痛定思痛。我覺(jué)得基本上是這樣的：態(tài)度有疏忽，流程上需改善。
有錯(cuò)就改，從善如流
第2天，我對(duì)文章排版的頁(yè)面CSS進(jìn)行了更新。動(dòng)刀的地方主要包括：
說(shuō)明：括號(hào)中的英文為css樣式中的代碼段
- 無(wú)序列表(ul, 即unordered list)：修正了左縮進(jìn)太多的問(wèn)題；
- 文字引用(blockquote)：加大了字重，解決了文字太細(xì)的問(wèn)題；加深了字色，避免讀起來(lái)費(fèi)眼；增加了底色，與正文部分進(jìn)一步區(qū)分；
- 修正了無(wú)序列表和文字引用同時(shí)出現(xiàn)時(shí)縮進(jìn)層次不一的問(wèn)題；
- 加粗文字(Strong)：減小字重，避免加粗問(wèn)題的效果突兀；增加了字體大小繼承代碼(font-size: inherit)，修正了文字加粗后大小顏色不一的問(wèn)題；
- 標(biāo)題層級(jí)(h1-h6)：修改了第1層級(jí)的顏色，所有層級(jí)標(biāo)題統(tǒng)一使用藍(lán)色；修改了第1、第2層級(jí)的字體大小；第2層級(jí)標(biāo)題字體大小與正文一致，以顏色及加粗效果與正文區(qū)分；
新舊排版對(duì)比
排版更新-001.jpg
排版更新-002.jpg
排版更新-003.jpg
新排版的思路
- 正文，17pt
- 一級(jí)標(biāo)題：「小能熊blue」，加大(1.2 em)加粗（字重700）
- 二級(jí)標(biāo)題：「小能熊blue」，加粗不加大
- 引用，0.9em，左邊的引用線采用「小能熊blue」，底色為灰色(HEX值：#666666)
- 加粗效果：顏色與字體均繼承所在段落
- 行間距、段間距已調(diào)整，目標(biāo)是有效體現(xiàn)文章內(nèi)容結(jié)構(gòu)；
小能熊排版風(fēng)格由CSS控制，這樣就能保證迭代更新。實(shí)現(xiàn)每次文章的排版基本全自動(dòng)。
錯(cuò)誤不可怕，前提是認(rèn)真總結(jié)
- 我的排版在Mac平臺(tái)上進(jìn)行；使用Day One 2 這個(gè)軟件，對(duì)markdown文件預(yù)覽后粘貼至微信公眾號(hào)后臺(tái)；
- 為了排版風(fēng)格一致，我利用修改CSS樣式的方法來(lái)「編寫」自己的排版風(fēng)格。
- 從Markdown文本到排版后的網(wǎng)頁(yè)，CSS渲染的結(jié)果可靠，不用任何手動(dòng)調(diào)整，真乃利器！
- 其實(shí)只需要懂一點(diǎn)點(diǎn)CSS代碼和HTML即可；
- CSS和HTML我之前完全不懂，我在CodeCademy網(wǎng)站參加了CSS和HTML代碼的免費(fèi)課程學(xué)習(xí)，耗時(shí)3個(gè)多小時(shí)；
- 對(duì)學(xué)到的任何知識(shí)(當(dāng)然也包括這次的CSS排版)，我通過(guò)Evernote進(jìn)行知識(shí)管理；
- 從構(gòu)思、到寫作、排版，一定要梳理自己的工作流(workflow)，而且要以書面形式落實(shí)下來(lái)。針對(duì)上篇文章的排版教訓(xùn)，我新建了一個(gè)公眾號(hào)發(fā)文的檢查清單(checklist)。以后，發(fā)文章之前，完全不依賴自己的記憶，按清單排除可能的問(wèn)題。
以上，就是一次排版失誤之后，我的錯(cuò)誤總結(jié)和改善措施。雖然又犯了一個(gè)錯(cuò)誤，但是我堅(jiān)定的相信：
錯(cuò)誤不可怕，只要從根本上找出原因，然后從根本上改正。
做事情發(fā)生的錯(cuò)誤，只要改正措施落實(shí)到流程層面，提升到思維層面，可以說(shuō)是好事。
