部落格設定的基本原則

部落格設計的目的是為了建立一個瀏覽者易於閱讀的網站,舒適簡潔的網頁畫面可以降低跳出率並延長讀者的停留時間,避免過多裝飾讓讀者眼花撩亂,找不到需要的資訊,本篇將討落部落格設計的技巧與應避免的使用方式。

 

易於閱讀的文字設定要點

設定合適的字體大小

在編輯時避免另外將文字設定為 10pt/13px  含以下的大小,避免被 Search Console 判斷行動裝置可用性為「文字太小,不易閱讀」。一般來說主題預設 <p> 都不會低於 10pt,如果覺得文章字體不夠大的站長,可以另外用 CSS 設定字體大小,如:

.entry-content p {
font-size: 18px;
}

 

不同的字體(例如為微軟正黑體與新細明體)在相同的字體大小設定下,實際看到的大小也會有所不同喔!

pt px
12pt 16px
13pt 17px
13.5pt 18px

 

調整間距與行高

透過調整文字之間的距離,讓閱讀更放鬆,以下分別為預設值、0.5 px、1 px

  1. 文字間的距離
  2. 文字間的距離
  3. 文字間的距離

使用的 CSS 代碼為:

.entry-content p {
letter-spacing: 填入數字 px;
}

 

行高的差異,會影響同一個段落內,行與行的距離,以下分別為預設值、35 px

  1. 文字間的距離
    文字間的距離
    文字間的距離
  2. 文字間的距離
    文字間的距離
    文字間的距離

使用的 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 ,例如…

富盈數據專精大數據技術與工具應用,以「字媒體計畫」展現流量變現的價值。我們重視「當下實現」的數據商用價值,亦是唯一具備從內容渠道連結用戶的平台服務商;通過獨家的Zi.Power Ads AI與閱讀基因DMP,我們能夠為廣告主、發布商、代理商找到最佳化媒體投資、程序化購買以及客製化的變現方案,實現數據商用的最終目標!

項目符號可以搭配 BOX 一起使用,清單可以條列出整齊的資訊,操作可以參考這篇:清單的自訂與設計

 

易於閱讀的顏色使用要點

避免同時使用太多種顏色

如果因為想強調關鍵字,同時使用各種文字顏色並且具有不同粗細和尺寸在段落,會看不到重點…

位人客呀,這家餐館最厲害、讓人回味無窮的絕對是一盤40元,卻每道都讓人驚喜又ㄕㄨㄚˋ嘴的小菜,便宜好吃。觀察店內疑似熟客的朋友,都會拿好幾盤小菜搭配小米粥煎餃一起食用的老饕吃法。同時,如果只有2至4人的朋友,點大盤菜頂多兩道就飽了實在太可惜了,不如點小菜搭配其他麵點吃得比較多元化,因此這家店算是非常適合人數少也能吃的中國合菜餐館

為文章重點標示不同的顏色很好,但同時使用了很多顏色,就會讓畫面變得雜亂而沒有重點。我們先來清點在文章中那些項目會用到顏色標記呢?

  • 段落標題:
    段落標題建議保持相同風格,可以因介紹的用途不同,而有微小的差距,如標題前方的圖案不同或顏色有些許差異
  • 重點強調 (mark 標記):
    重點強調因正面、優點、消息、重點、積極,或者是負面、缺點、警訊、警告、否定,有些站長會習慣使用兩個不同顏色來做標記,仍需要注意的是風格要保持一致。
  • 網址連結:
    網址連結建議只有一種顏色,讓讀者習慣看到這個顏色就知道是網址
  • 文字顏色變化:
    黑色+粗體、紅色+粗體

這些突出的設計,可以告訴讀者「應該注意哪裡」,但仍需要注意:

  • 不要過度裝飾
  • 不要經常使用
  • 不要連續使用相同的東西

 

選擇一種網站強調色

多數主題會提供顏色修改的選項,網站顏色的過於繁雜是不建議的,確定您網站的主要顏色並使用該顏色,讓畫面保持一致,其作用在 選單、邊欄或文內的 清單、引言。

不懂強調色的站長,可以參考  色見本と配色サイト   這個網站,其中收錄了各種主色調的網站範例。在一致的色調下,對讀瀏覽者展現出網站的代表色。

 

鏈接顏色不是藍色,讓讀者感到十分困惑?

為什麼藍色是網址鏈接顏色的主流?

因為瀏覽器預設的連結顏色是藍色,讀者習慣藍色代表網址連結。但有趣的是,很少有主流平台使用默認顏色 #0000ff

  2010 2013 2014 2016 2018 2019
Google #1111cc #1122cc #1a0dab #1a0dab #1a0dab #1a0dab
Yahoo #0000de #0e1bbb #0f0ad1 #0e1bbb #000d99 #330099

手機版向右滑動以觀看完整表格

其他連結顏色如:

  • 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
  一段內文 一段內文 一段內文 一段內文 一段內文 一段內文

手機版向右滑動以觀看完整表格

2 thoughts on “部落格設定的基本原則”

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top