題圖：Van Gogh
引子
排版很重要如捅。
自從我寫(xiě)公眾號(hào)以來(lái)棍现，有很多朋友向我強(qiáng)調(diào)排版的重要性。
道理都明白镜遣，就是做不到己肮。
上一篇文章的排版很糟糕。
沒(méi)有借口悲关，說(shuō)明情況
上一篇文章在4月3日晚上發(fā)出谎僻。當(dāng)天我從下午開(kāi)始一直在準(zhǔn)備為「四大新鮮事」做一次線(xià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)單：
- 這篇文章寫(xiě)于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泽西，左邊的引用線(xiàn)采用「小能熊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)「編寫(xiě)」自己的排版風(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)思蚂会、到寫(xiě)作淋样、排版，一定要梳理自己的工作流(workflow)胁住，而且要以書(shū)面形式落實(shí)下來(lái)趁猴。針對(duì)上篇文章的排版教訓(xùn)，我新建了一個(gè)公眾號(hào)發(fā)文的檢查清單(checklist)。以后，發(fā)文章之前睦柴，完全不依賴(lài)自己的記憶，按清單排除可能的問(wèn)題捕犬。
以上，就是一次排版失誤之后，我的錯(cuò)誤總結(jié)和改善措施碉碉。雖然又犯了一個(gè)錯(cuò)誤柴钻，但是我堅(jiān)定的相信：
錯(cuò)誤不可怕，只要從根本上找出原因垢粮，然后從根本上改正顿颅。
做事情發(fā)生的錯(cuò)誤，只要改正措施落實(shí)到流程層面足丢，提升到思維層面，可以說(shuō)是好事庇配。
