網站設計

如何有舒服的網站設計?

讓讀者無壓力閱讀的幾種方式


前言

歡迎回到《SEO急診室》,這次要為大家帶來的是關於網站設計與文章排版的內容。

很多新手部落客都會想知道:

  • 如何讓讀者閱讀時不會有壓力?
  • 如何讓讀者願意多在網站停留?

很多教 SEO 的老師,或是網路上很多 SEO 資訊,都沒有特別提到關於網站排版設計這一塊,但其實這一塊才是很多部落格創作者的盲點。

我看過很多創作者的內容都很優質,但就是因為網站外觀實在太糟,讓人不會想花時間看下去,所以間接影響到了文章排名。

我本身雖然不是很厲害的網頁設計師,但我從一些實戰經驗中,有找出幾個一般部落客就可以做到的提升網站可用性方法,在這篇中分享給大家。

如果你對 SEO 有興趣,想要了解更多 SEO 知識,那麼我未來有計劃籌備一堂 SEO 的課程《SEO終極處方箋》,會站在部落格經營者的角度,帶領大家做好部落格的 SEO 及內容行銷。你可以立即加入課程等候名單,將會接收到關於課程的第一手資訊。

間接影響網站排名的UI/UX

UI是什麼?

UI

UI 全名是 User Interface,中文意思是「使用者介面」。所以由此可知,UI 講求的是【視覺感受】

UI 會比較吃個人的美感,要去思考讓整個網站以及文章頁面的外觀設計,讓使用者看起來會覺得是舒服的。

其中像是:

  • 顏色
  • 字型
  • 字體
  • 排版

可以說,UI 是讓搜尋者決定要不要看你文章的第一道防線。如果你的頁面讓人看一眼就不想繼續往下閱讀,那就是你的 UI 出現了很大的問題。

UX是什麼?

UX

UX 全名是 User Experience,中文就是我們很常提到的「使用者體驗」,講求的是整體網站的【使用感受】,所以會影響的層面不單單只有網站的外觀。

UX 比較像是我們常講到的「網站直覺性」,這部分沒辦法像是 UI 可以立即有實際的感受,可能要經過多次測試調整後才能知道怎樣子比較符合「邏輯」。

其中像是:

  • 網頁的載入時間長短
  • 彈窗廣告出現的時間與長度
  • 整個網站的操作流程 (文章跟文章間的串連)
  • 文章中的 CTA (call to action) 按鈕大小與出現位置

UX 有些部分能夠靠使用者感受並直接說出來,但有些卻是連使用者自己的感受不出來,需要靠數據的量化才會知道哪邊出了問題。

UI/UX兩者能夠怎麼分辨?

UI 跟 UX 兩者很像,甚至兩者也是會有重疊的地方,這也是為什麼很多人會搞錯。

如果看到這邊你還是分不清楚,那我用一句話解釋給你聽:「UX 是個抽象的感受,而 UI 則是將這抽象感受具體化的產物。

所以如果你是要做出一個能夠讓搜尋者喜歡的網站,UX 與 UI 必須都要去留意,兩者是緊緊相連不可分的。

UI/UX
Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

UI/UX是如何間接影響網站排名呢?

根據一些統計,網站的「停留時間」以及「跳出率」跟網站文章的排名是有些關係的,而 UI/UX 正是會影響這兩者的最大因素。

以下敘述一個搜尋者進入網站的流程,並簡易分析:

  1. 搜尋者進入你的網站看到你的文章,假如你網站外觀的第一直覺讓使用者可以接受,那麼他們就會願意留下來。(UI)
  2. 接著他們在查看你文章的時候,如果你的文章內容編排很好,循序漸進,那麼他們就會一直想要看下去。(UX)
  3. 但如果他們在看你文章時覺得你的文章字都擠在一起,段落不分明,他們可能就不會想看下去,於是決定離開。(UI)
  4. 或是當使用者讀到一半時,想要回去確認前面的資訊,但你的頁面操作讓他不好操作,很難快速找到資訊,那也可能會離開。(UX)
  5. 也有可能你閱讀文章閱讀到一半,但突然彈出大量的廣告,妨礙他們閱讀,那麼他們也會選擇跳出。(UX)
網頁設計

以上都是簡單舉例,但會造成一個使用者願不願意在你網站中多停留,是有很多因素的,所以我們要做的就是盡可能做到友善使用者使用。

給你一個最好的建議:「如果你今天看自己的網站都不會想看下去,那你也不用期望其他使用者願意多停留。」

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

一般部落客,你可以做這些優化

#1 確保字體大小適合閱讀

很多佈景主題的內文預設字體很小,不適合閱讀,建議要去將字體調整成適合的大小。

這是 14px 的字,是不是看了很辛苦?

這是 18px 的字,是不是看起來較舒服?

會建議把至少設定成 18px 以上,小於這個字體大小都太小,不利於閱讀。

#2 確保段落文字的易讀性

每一段文字中,也需要確保要是容易閱讀的。

以下有幾點可以參考:

  • 行高:每一行之間的高度不要太擠,但也不要太寬,看起來至少要是舒服順暢的。
  • 字距:字跟字之間的距離不要太擠或太寬,尤其太寬的話很容易中斷資訊連貫性。
  • 對齊:很多人會喜歡亂對齊文字,尤其是置中,以普遍來看,會建議置左比較好。

我 們 不 禁 哄 堂 大 笑,同 樣 的 一 件 衣 料,每 個 人 卻 有 不 同 的 感 覺。
那 位 朋 友 連 忙 把 衣 料 用 紙 包 好,她 覺 得 衣 料 就 是 衣 料,不 是 棋 盤,也 不 是稿 紙,更 不 是 綠 豆 糕。
人 人 的 欣 賞 觀 點 不 盡 相 同,那 是 和 個 人 的 性 格 與 生 活 環 境 有 關。

我們不禁哄堂大笑,同樣的一件衣料,每個人卻有不同的感覺。

那位朋友連忙把衣料用紙包好,她覺得衣料就是衣料,不是棋盤,也不是稿紙,更不是綠豆糕。

人人的欣賞觀點不盡相同,那是和個人的性格與生活環境有關。

由以上的對比舉例可以看得出來,很明顯右邊的文字閱讀起來比較舒服對吧?

#3 確保段與段之間的間格

大部分佈景主題預設段與段的間隔都會太近,會建議多空一些,讓閱讀者在閱讀到一個段落時能夠有個喘息空間。

可以利用「圖片」或是「空格」,來讓視覺達到短暫的休息,整體感受就不會有那麼大的壓力。

另外,會建議一個段落的行數也不要太多,如果不得已,一定要記得用一些元素隔開大量密密麻麻的文字,不然讀者會不太舒服。

#4 確保字型的選擇與使用

字型也是個影響閱讀的重點,但字型那麼多,怎麼知道哪個好?

以下我可以給你一些建議,但我們必須先釐清一下這兩個名詞:

  • 襯字:有襯線的字,字體本身會粗細不一,可能頭尾都會有特殊樣式,整體字與字間會有「連結」的感覺。像是:新細明體。
  • 非襯字:無襯線的字,字體本身粗細一樣,且通常字體會比較粗,整體感覺會有「清楚」的感覺。像是:微軟正黑體。
襯字與非襯字比較

在使用上,會建議:

  • 內文的部分用襯線字體
  • 標題/副標題/子標題 使用非襯線字體

另外補充,在字體的部分,絕對不要選擇使用一些「特殊字體」來撰文,那種字體一般是用在設計,而非文章內容。

#5 確保層級之間的可辨性

有些網站新手在做網站分層時,也就是我們說的副標題、子標題,並沒有把它明顯區分開來,就會造成讀者無法辨識,會降低整體的使用者觀感。

在層級與層級之間,會建議要做到:

  • 字體大小要有明顯差異
  • 字型盡量選擇不一樣的
  • 用一些特殊記號來區分
  • 用間格稍微做一下區分
文章層級關係比較

#6 確保畫面顏色保持和諧

畫面顏色也是個很重要的地方,很多新手都喜歡把自己的文章頁面用得五彩繽紛,覺得這樣比較吸睛。

但事實上,這樣反而會讓讀者視覺產生疲乏,而且也更難找到文章中的重點。

所以會建議一個頁面的顏色不要超過三種,且色系不要太衝突,有時候顏色越單純整體感覺越舒服。

這邊有一篇文章有整體出一些配色網站,可以去搭配一下自己的網站色系:8個設計師收藏配色表技巧網站

#7 確保整體畫面乾淨舒服

如果你想讓讀者閱讀起來是舒服的,那麼你一定要將你的文章頁面保持「乾淨」。

乾淨有很多種方式,最直覺的方式你可以嘗試:

  • 不要在文章中插入一堆廣告
  • 不要在側邊欄放置太多資訊
  • 不要有一堆彈出視窗或按鈕

總之,整體來說就是不要把畫面塞滿,有時候「留白」反而會讓讀者感受起來更舒服。

#8 確保使用者使用流暢度

使用者會搜尋文章一定是為了查詢某個想知道的東西,所以我們的文章需要讓他們能夠快速找到他們要的資訊

一樣會有很多種做法,而我認為最快的方法就是為文章加入「目錄」,並搭配一些返回按鈕,能夠讓使用者在這兩者間快速切換。

當然,有些人會直接安裝那種回到頁面頂端的按鈕外掛,或是設定讓目錄跟著使用者移動,這部份沒有標準答案,可以自己去嘗試看看哪樣子會更提升使用者的使用流暢度。

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

額外補充:響應式網頁設計RWD

額外補充一下,響應式網頁設計 (RWD) 也會是 UI/UX 中的一個很大的重點,就是你的網站能不能隨著不同的裝置來改變畫面的大小比例。

有些網站在電腦上看會很舒服,會想讓人多停留;然而用手機看時,可能就會變得很醜,大家看到只想要跳出。

所以這時候就必須去進行優化,確保在不同裝置上的使用者都能流暢使用網站。

RWD

不過如果是用 WordPress 架設網站的人,這套系統本身就符合響應式設計,所以可以不用擔心。

只要在發佈完文章後,利用不同的裝置看一下整體的外觀排版有沒有亂掉?適不適合使用者使用?這樣就行了。

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

對於網站設計很沒有直覺怎麼辦?

我相信大部分的網站創作者,都沒有網頁設計或是美術設計相關的背景,所以對於網站設計會沒有「直覺」。

可能會是這幾種狀況:

  • 完全不知道自己的網站外觀有很大的問題
  • 知道自己網站不好看,但不知道怎麼改變
  • 有試著去改變,但怎麼改就是改不到點上
網站設計

對於這樣的狀況,我可以給一些建議:

  • 去找相關課程上:你可以去找一些相關的課程,有些課程很厲害,能夠把這種抽象的東西量化,培養你對於美感的直覺。
  • 多看喜歡的網站:多去看看一些你覺得閱讀起來很舒服的網站,並思考為什麼這網站會那麼吸引你,多想想你就會了解到差異點在哪了。
  • 訪問你身旁的人:也許你可以問問你的粉絲,或是你身旁的親朋好友,他們就能站在第三方的角度給予你一些建議與回饋。

其實設計這種東西本身就沒有一個標準答案,就算很厲害的設計師也很難一次就做到定位,也是需要靠經驗的累積,以及不斷試錯、不斷改進,才能培養出這樣子的「直覺」。

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

結論:學一些前端語法對你有幫助

想要做出一個讓讀者喜歡、願意停留的網站,其實有非常多方法,它也沒有所謂的標準答案,這篇提供的也只是我自己覺得需要注意的基本點。

雖然我們不是網頁設計師,但如果想要有自己追求的網站樣貌,我會建議還是要了解一些前端的語法,才不會被限於某個佈景主題的預設。

前端語法像是 HTMLCSS,網路上都有很多基礎的教學文章或影片,花點時間了解一下不會有壞處,至少要懂得怎麼修改自己網站外觀。

更多《SEO急診室》文章

SEO 急診室 #1你真的有思考過SEO是什麼嗎?這些觀念將顛覆你的思維
SEO 急診室 #2文章如何選擇關鍵字?先問問自己,你了解你的客戶嗎
SEO 急診室 #3網站文章如何規劃?把搜尋者困住,你就成功了
SEO 急診室 #4如何下吸睛的標題與描述?掌握人性,就能增加點擊率
SEO 急診室 #5網址URL如何優化?永久連結絕對不可以犯的錯誤
SEO 急診室 #6網站連結該如何優化?你的目標就是讓資訊更完整
SEO 急診室 #7圖片SEO怎麼做?額外曝光機會,不做你會後悔
SEO 急診室 #8如何有舒服的網站設計?讓讀者無壓力閱讀的幾種方式
SEO 急診室 #9如何做好網站速度優化?不懂程式的部落客,你可以這樣做
SEO 急診室 #10淺談 Google Search Console,窺視網站未來的最佳利器
SEO 急診室 #11Social Signal 社群訊號是什麼?它對SEO的影響沒那麼簡單
SEO 急診室 #12網站權重是什麼?重要嗎?破解 Domain Authority 常見迷思

如果你對 SEO 有興趣,想要了解更多 SEO 知識,那麼我未來有計劃籌備一堂 SEO 的課程《SEO終極處方箋》,會站在部落格經營者的角度,帶領大家做好部落格的 SEO 及內容行銷。你可以立即加入課程等候名單,將會接收到關於課程的第一手資訊。

你是部落客嗎?是否有流量或收益上的困難?還是遲遲找不到網站方向?那也許我能幫助你,我目前已經幫助過上百位部落客優化網站,點這邊了解更多!

如果你想要更密切追蹤我的動態,歡迎加入 Dean 的 Telegram 秘密基地。我會把我撰寫的文章,以及平常看到不錯的資訊在第一時間分享給大家。

如果這篇文章有幫助到你,可以不限金額斗內我,或花 30 秒登入 LikeCoin 帳戶,並點擊下方拍手按鈕,免費支持我。(也能加入讚賞公民點此了解更多)

2 thoughts on “如何有舒服的網站設計?讓讀者無壓力閱讀的幾種方式《SEO急診室#8》”

  1. MonkeyWalker 在匈牙利走跳生活

    請問Dean神
    目錄和大標題的字體是靠CSS 嗎?
    我想知道怎麼改?最近網站也在微調中(累….)

Leave a Comment

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