好內容放在爛設計裡，就是暴殄天物
你花了兩天寫出一篇 3,000 字的深度文章，內容紮實、觀點獨特、數據充分。然後你把它放到一個字體太小、行距太擠、兩側被廣告擠到只剩一條窄窄的閱讀區域的頁面上。
猜猜看讀者會怎麼做？他們會在 15 秒內離開。不是因為你的內容不好，而是因為他們連讀都讀不下去。
根據 Nielsen Norman Group 的研究，使用者在一個網頁上的平均停留時間大約是 54 秒。在這 54 秒裡，排版和設計決定了他們能吸收多少你的內容。一個好的閱讀體驗可以讓停留時間從 54 秒延長到 3-5 分鐘——這就是設計的力量。
反過來，如果你的網站設計得很漂亮但沒有什麼實質內容，訪客也不會留下來。設計和內容是一體兩面的關係，缺一不可。這篇就來聊聊怎麼讓這兩者發揮 1+1 大於 2 的效果。
文章排版：讀者不讀你的文章，他們掃描
大部分人閱讀網頁文章的方式不是一行一行讀，而是快速掃描。他們的眼睛會跳到標題、粗體字、清單和圖片上，判斷這篇文章值不值得讀。如果掃描的結果覺得有料，他們才會開始認真讀。
適合掃描的排版原則
段落要短 每段不超過 3-4 行（手機上可能是 5-6 行）。長段落在螢幕上看起來像一面牆，光是看到就覺得累。
善用小標題 每 200-300 字就應該有一個 H2 或 H3 小標題。小標題的功能是讓掃描者知道接下來這段在講什麼。如果他對這段有興趣，就會停下來仔細讀。
粗體標記重點 把每段裡最關鍵的一句話加粗。掃描者的眼睛會自然被粗體字吸引。但不要加太多——如果整段都是粗體，等於什麼都沒有強調。
使用清單 能用清單呈現的資訊，不要用段落。清單比段落更容易掃描，也更容易記住。
行距和字距 行距至少 1.6，最好到 1.8。字距適當放寬一點。這些看起來是小細節，但對閱讀的舒適度影響非常大。
視覺層級：引導讀者的注意力
視覺層級是設計的基本功，但在內容行銷的場景中特別重要。你的頁面上有標題、副標題、內文、圖片、CTA、側邊欄——這些元素的視覺權重分配，決定了讀者看到頁面時的注意力流動方向。
標題是入口
文章標題應該是頁面上最大、最醒目的文字。不需要用花俏的字體，但字體大小至少要比內文大 2-3 倍。桌面版的文章標題用 32-40px，手機版用 24-28px。
圖片打斷文字的牆
連續閱讀 500 字以上的純文字，大部分人的注意力就開始飄了。在長文中適當插入圖片——說明圖、資料圖表、相關照片——可以讓讀者「重新開機」。
圖片的位置也有講究。不要把所有圖片都集中在文章開頭或結尾。每隔 300-500 字插一張圖，讓閱讀節奏有變化。這些設計細節同樣適用於 Landing Page 的設計。
CTA 不要搶戲
文章裡的 CTA（「訂閱電子報」「下載指南」）是重要的，但不能喧賓奪主。它應該融入閱讀流程，而不是突然跳出來打斷讀者。最好的做法是把 CTA 放在文章的自然斷點——某個段落結束、某個論點講完之後。
閱讀體驗的技術細節
有些影響閱讀體驗的設計細節，肉眼看起來不明顯，但對閱讀的流暢度有很大的影響。
每行字數的控制
中文的最佳每行字數是 25-35 字。太短的行（少於 20 字），讀者的眼睛要不斷換行，很累。太長的行（超過 40 字），讀到行尾時容易找不到下一行的開頭。
在桌面版上，把文章區域的最大寬度限制在 680-720px，自然就能控制在理想的每行字數範圍內。
文字和背景的對比度
純黑文字（#000000）配純白背景（#FFFFFF）對比度最高，但長時間閱讀會覺得刺眼。很多閱讀體驗好的網站會用深灰色文字（#1a1a1a 或 #333333）配上微微偏暖或偏灰的白色背景（#FAFAFA 或 #F8F9FA）。
根據 Web Content Accessibility Guidelines（WCAG），文字和背景的對比度至少要 4.5:1。太低的對比度（比如淺灰文字配白色背景）會讓很多人看不清楚。
字體選擇
中文內容建議使用系統字體或 Google Fonts 的 Noto Sans TC。不要在內文裡用裝飾性字體或手寫字體——這些字體少量使用在標題或 Logo 上可以，但拿來當內文會讓長篇閱讀變成一種折磨。
內容 SEO 的結構設計
好的網站設計不只是讓人讀得舒服，還要讓 Google 讀得懂。內容的 SEO 結構是設計師在規劃頁面版面的時候就應該考慮的。
H 標籤的層級
H1 是頁面標題，整個頁面只能有一個。H2 是主要段落標題。H3 是 H2 下面的子標題。不要跳級——不要 H1 之後直接用 H3。
設計師在設計文章模板的時候，要為 H1 到 H4 各定義一套清楚的樣式（字體大小、粗細、顏色、上下間距），讓內容編輯人員在寫文章時不需要煩惱格式問題。
圖片的 alt 標籤
每張圖片都需要描述性的 alt 文字。設計師在規劃 CMS 的文章編輯介面時，應該讓 alt 標籤的填寫欄位夠明顯，而不是藏在某個進階選項裡面。
目錄功能（Table of Contents）
長文章（超過 1500 字）建議加上自動生成的目錄。讀者可以快速了解文章的結構，直接跳到感興趣的段落。目錄對 SEO 也有幫助——Google 有時候會把目錄裡的連結顯示在搜尋結果中，增加你的搜尋結果面積。
麵包屑導航
在文章頁面的頂部加上麵包屑導航（首頁 > 部落格 > 分類 > 文章標題），幫助讀者和 Google 了解這篇文章在網站架構中的位置。
社群分享設計：讓好內容被傳出去
好的內容值得被分享。但如果分享的入口設計得不好，再好的內容也很難被傳播開來。
分享按鈕的位置
分享按鈕放在文章開頭和結尾各一組。有些網站會做側邊固定式的分享按鈕列，這在桌面版效果不錯，但手機版要注意不能遮擋內容。
Open Graph 標籤
當讀者分享你的文章到 Facebook 或 LINE 時，顯示的標題、描述和縮圖是由 Open Graph 標籤決定的。設計師要確保每篇文章都有設定好 og:title、og:description 和 og:image。
og:image 特別重要——一張好看的分享縮圖可以讓分享的點擊率翻倍。建議的尺寸是 1200x630px，圖片上包含文章標題和品牌 Logo。
可引用的金句設計
在文章中挑出 2-3 個特別有力的句子，用特殊的排版樣式（比如大字體、加上背景色、或放在一個框框裡）呈現。這些「金句」特別適合被截圖分享到社群。
一個案例：部落格改版帶來流量翻倍
一家做有機食品的品牌，部落格上有超過 200 篇食譜和健康飲食的文章。內容品質很好，但每月有機流量只有 8,000 左右，平均停留時間 1 分 20 秒。
改版前的問題
- 文章區域只佔頁面寬度的 55%，兩側被側邊欄和廣告擠壓
- 字體是 14px 的宋體，行距只有 1.4
- 圖片品質參差不齊，有些食譜照片暗沉模糊
- 沒有目錄功能，沒有社群分享按鈕
- H 標籤使用不規範，很多文章只有 H1 沒有 H2
改版做了什麼
- 文章頁面改為單欄式設計，最大寬度 700px，去掉側邊欄
- 字體改為 Noto Sans TC 17px，行距 1.8
- 所有食譜重新拍攝照片，統一明亮的拍攝風格
- 加入自動生成的目錄，根據 H2 標題生成
- 每篇文章重新整理 H 標籤層級
- 設計統一的 og:image 模板，每篇文章都有品牌化的分享縮圖
四個月後的成果
- 有機流量從 8,000 提升到 18,500（成長 131%）
- 平均停留時間從 1 分 20 秒提升到 3 分 45 秒
- 社群分享數從每月 50 次提升到每月 340 次
- 電子報訂閱轉換率從 0.3% 提升到 1.8%
他們沒有多寫一篇新文章，只是把既有的 200 篇文章用更好的設計呈現出來。
設計師和內容團隊該怎麼合作
設計師和內容團隊常常是各做各的——內容團隊寫文章，設計師做頁面。但更好的做法是讓兩者在早期就互相溝通。
設計師應該了解的內容需求
- 文章通常多長？需要什麼樣的圖片？
- 有沒有特殊的內容格式（比較表、步驟教學、FAQ）？
- 內容更新的頻率如何？需要多容易編輯？
內容團隊應該了解的設計限制
- 圖片的最佳尺寸和格式是什麼？
- 標題和段落有沒有長度建議？
- 哪些設計元素（引用框、提示框、數據圖表）可以使用？
最好的做法是設計師建立一套「內容設計系統」——定義好文章模板裡所有可用的元素和樣式，讓內容團隊在寫文章時就能按照設計規範來組織內容。
結語：設計是內容的放大器
好的設計不會改變你內容的品質，但它會改變你內容被看到、被讀完、被分享的機率。
如果你已經在投入內容行銷，花一些時間檢視你的網站閱讀體驗——字體夠不夠大、行距夠不夠寬、段落夠不夠短、圖片品質夠不夠好。這些改善不需要重寫任何一篇文章，但可以讓你既有內容的價值發揮到最大。
如果你需要一個兼顧設計與 SEO 的網站，可以找專業的網頁設計團隊協助規劃。設計和內容，是最好的搭檔。