部落格設計的目的是為了建立一個瀏覽者易於閱讀的網站,舒適簡潔的網頁畫面可以降低跳出率並延長讀者的停留時間,避免過多裝飾讓讀者眼花撩亂,找不到需要的資訊,本篇將討落部落格設計的技巧與應避免的使用方式。
易於閱讀的文字設定要點
設定合適的字體大小
在編輯時避免另外將文字設定為 10pt/13px 含以下的大小,避免被 Search Console 判斷行動裝置可用性為「文字太小,不易閱讀」。一般來說主題預設 <p> 都不會低於 10pt,如果覺得文章字體不夠大的站長,可以另外用 CSS 設定字體大小,如:
.entry-content p { font-size: 18px; }
不同的字體(例如為微軟正黑體與新細明體)在相同的字體大小設定下,實際看到的大小也會有所不同喔!
pt |
px |
12pt |
16px |
13pt |
17px |
13.5pt |
18px |
pt |
px |
12pt |
12px |
14pt |
14px |
16pt |
16px |
18pt |
18px |
調整間距與行高
透過調整文字之間的距離,讓閱讀更放鬆,以下分別為預設值、0.5 px、1 px
- 文字間的距離
- 文字間的距離
- 文字間的距離
使用的 CSS 代碼為:
.entry-content p { letter-spacing: 填入數字 px; }
行高的差異,會影響同一個段落內,行與行的距離,以下分別為預設值、35 px
- 文字間的距離
文字間的距離
文字間的距離 - 文字間的距離
文字間的距離
文字間的距離
使用的 CSS 代碼為:
.entry-content p { line-height: 填入數字 px; }
易於閱讀的文章排版要點
使用段落標題(產生章節)
將一篇文章依據描述方向不同,劃分成不同章節,這樣一來,讀者就可以更輕鬆地閱讀內容,而不必擔心錯過需要的資訊。需要注意的是,段落標題並非是將文字放大並設定為粗體,而是使用諸如 h2~h4 的標題標籤。
這使得搜索引擎爬網站時,可以知道標題在哪裡並正確識別文章的結構。這些段落標題的設計,可以搭配外掛於文章中產生相對應的文章目錄,操作詳見:用 Easy Table of Contents 為WordPress文章添加目錄
段落標題上方留出一塊空間
根據下圖,可以更清楚明瞭的知道段落間的區隔與空間感
分段與分行的不同
從大家耳熟能詳的 Microsoft Word 開始,到我們目前在 WordPress 架構使用的 Classic Editor (傳統編輯器),分行與分段的意義是不同的!
- 分行使用「Shift+Enter」
- 分段使用「Enter」
※ 使用分行如果覺得單行間距太密集,請調整文字的行高~
注意分行的位置
除了章節之外,段落的分行也是進一步劃分信息的重點。現在的讀者耐心有限,不喜歡看密密麻麻的文字,建議排版時要同時比對行動坂與電腦版的畫面進行調整。根據控制的字數不同,畫面也會大不同喔!
- 電腦版 25~50 字,行動版則為 1~2行
- 電腦版 40~80 字,行動版則為 2~3行
- 電腦版 80~110 字,行動版則為 3~4行
這是沒有經過妥善分行的段落…
木須炒麵,這道菜從照片上看起來平凡無奇,不過實際吃起來味道特別帶感,師傅炒麵的功夫了得。我認為木須炒麵最功夫的地方莫過於炒蛋,因為它會帶著醬料穿插於青菜、肉絲、麵條間,擔任所有配料的中介者,太大塊的炒蛋會直接讓整道菜很生硬,尺寸質地很重要,小南門的木須炒麵的蛋就非常剛好!!唯獨吃起來有些微小的焦味,不過麵本身沒有炒焦地方,這也是一道必點的菜。 花素蒸餃,這道比較失望,菜味很足、口味很清單,比較吃不出亮點。營養的小米粥,適合消化不好的人吃,也是必點,因為小米粥也是家裡很少會做的料理,一般都是白飯、稀飯居多。然而,小米粥是非常不錯的主食,因為它好消化、清爽不膩,我們都是直接把它當稀飯配菜吃。韭黃牛肉,韭黃口感軟嫩醬汁佳,這道菜非常好吃,小南門這間餐館擅長掌握料理的醬汁與火侯,這道菜尤其是!韭黃口感軟嫩,可以吃到一條條纖維,少了韭菜的刺鼻與堅硬,味道像溫和版的蔥爆牛。 |
進行分行~
木須炒麵,這道菜從照片上看起來平凡無奇,不過實際吃起來味道特別帶感,師傅炒麵的功夫了得。 我認為木須炒麵最功夫的地方莫過於炒蛋,因為它會帶著醬料穿插於青菜、肉絲、麵條間,擔任所有配料的中介者,太大塊的炒蛋會直接讓整道菜很生硬,尺寸質地很重要,小南門的木須炒麵的蛋就非常剛好!! 唯獨吃起來有些微小的焦味,不過麵本身沒有炒焦地方,這也是一道必點的菜。花素蒸餃,這道比較失望,菜味很足、口味很清單,比較吃不出亮點。 營養的小米粥,適合消化不好的人吃,也是必點,因為小米粥也是家裡很少會做的料理,一般都是白飯、稀飯居多。 韭黃牛肉,韭黃口感軟嫩醬汁佳,這道菜非常好吃,小南門這間餐館擅長掌握料理的醬汁與火侯,這道菜尤其是!韭黃口感軟嫩,可以吃到一條條纖維,少了韭菜的刺鼻與堅硬,味道像溫和版的蔥爆牛。 |
使用 BOX 或 項目符號
在文章中,BOX 很容易轉換氣氛,對於增加空間區隔非常方便,我們可以適時地為一些額外資訊添加一個框
原理可以參考這篇:用 Advanced Ads 管理文章中的推薦內容!
為文中資訊添加適合的 BOX ,例如…
項目符號可以搭配 BOX 一起使用,清單可以條列出整齊的資訊,操作可以參考這篇:清單的自訂與設計
易於閱讀的顏色使用要點
避免同時使用太多種顏色
如果因為想強調關鍵字,同時使用各種文字顏色並且具有不同粗細和尺寸在段落,會看不到重點…
各位人客呀,這家餐館最厲害、讓人回味無窮的絕對是一盤40元,卻每道都讓人驚喜又ㄕㄨㄚˋ嘴的小菜,便宜又好吃。觀察店內疑似熟客的朋友,都會拿好幾盤小菜搭配小米粥、煎餃一起食用的老饕吃法。同時,如果只有2至4人的朋友,點大盤菜頂多兩道就飽了實在太可惜了,不如點小菜搭配其他麵點吃得比較多元化,因此這家店算是非常適合人數少也能吃的中國合菜餐館。 |
為文章重點標示不同的顏色很好,但同時使用了很多顏色,就會讓畫面變得雜亂而沒有重點。我們先來清點在文章中那些項目會用到顏色標記呢?
- 段落標題:
段落標題建議保持相同風格,可以因介紹的用途不同,而有微小的差距,如標題前方的圖案不同或顏色有些許差異 - 重點強調 (mark 標記):
重點強調因正面、優點、消息、重點、積極,或者是負面、缺點、警訊、警告、否定,有些站長會習慣使用兩個不同顏色來做標記,仍需要注意的是風格要保持一致。 - 網址連結:
網址連結建議只有一種顏色,讓讀者習慣看到這個顏色就知道是網址 - 文字顏色變化:
黑色+粗體、紅色+粗體
這些突出的設計,可以告訴讀者「應該注意哪裡」,但仍需要注意:
- 不要過度裝飾
- 不要經常使用
- 不要連續使用相同的東西
選擇一種網站強調色
多數主題會提供顏色修改的選項,網站顏色的過於繁雜是不建議的,確定您網站的主要顏色並使用該顏色,讓畫面保持一致,其作用在 選單、邊欄或文內的 清單、引言。
不懂強調色的站長,可以參考 色見本と配色サイト 這個網站,其中收錄了各種主色調的網站範例。在一致的色調下,對讀瀏覽者展現出網站的代表色。
鏈接顏色不是藍色,讓讀者感到十分困惑?
為什麼藍色是網址鏈接顏色的主流?
因為瀏覽器預設的連結顏色是藍色,讀者習慣藍色代表網址連結。但有趣的是,很少有主流平台使用默認顏色 #0000ff。
2010 |
2013 |
2014 |
2016 |
2018 |
2019 |
2020 |
|
Google |
#1111cc |
#1122cc |
#1a0dab |
#1a0dab |
#1a0dab |
#1a0dab |
#1a0dab |
Yahoo |
#0000de |
#0e1bbb |
#0f0ad1 |
#0e1bbb |
#000d99 |
#330099 |
#324fe1 |
手機版向右滑動以觀看完整表格
其他連結顏色如:
- YouTube:#0033cc
- 百度:#0000cc
- 維基百科:#0645ad
總之,我們發現了以下關聯:
- 藍色是網址鏈接的主流
- 默認顏色#0000ff 很少被使用
- 首要目標是可以一目了然地識別為網址鏈接
此外,因手機瀏覽已經成為市場主流,對於滑鼠事件可以引起的外觀變化(經過出現:變色、底線)陸續在消失,站長如果需要網址連結有底線,建議可以讓他一開始就出現!
不喜歡非黑即白內文配色該怎麼選擇?
一般使用的配色為背景(#ffffff)、文字(#00000),如果站長覺得過於銳利,可以嘗試調整顏色
改變背景顏色:
背景顏色 |
#f2f2f2 |
#f4f5f7 |
#ffffff |
文字顏色 |
#000000 |
#000000 |
#000000 |
一段內文 |
一段內文 |
一段內文 |
改變文字顏色:
背景 |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
文字 |
#333333 |
#3e3d41 |
#413e3d |
#3d4140 |
#3d4041 |
#000000 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
手機版向右滑動以觀看完整表格
可以觀察文字深到淺的變化及差異:
背景 |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
#ffffff |
文字 |
#000000 |
#333333 |
#444444 |
#555555 |
#666666 |
#777777 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
一段內文 |
手機版向右滑動以觀看完整表格