不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧

你是完全不懂設計的部落格站長嗎?總是覺得自己的網站不好看嗎?還有常被人誤認是詐騙網站嗎?

雖然說內容為王,但是一個好的網站設計,可以幫助讀者更快的找到他們要的答案,這對於使用者體驗來說,絕對是大大加分的。

除此之外,更可以讓讀者在觀看你的內容前,就先對你產生一份好的信任感,進而降低他們的跳出網頁的意願。

總之,如果你也有上面提到的這些問題,那我相信這篇文章一定可以幫助到你,只要透過修正這 10 個設計細節,就能打造出一個媲美專業設計師製作的美觀網站來,讓他們在你的網站上流連忘返。

1. 為什麼你的網站不好看?

很醜的網頁設計

首先我必須先強調,關於「網站好不好看」這件事情,其實是非常主觀的。

也許你覺得你的網站很難看,但有些人覺得還好;或是你覺得你的網站很漂亮,但身邊的人卻都告訴你醜暴了。

不過,雖然說美感是一個很主觀的東西,但其實還是有一些邏輯跟脈絡可循,而遵循這些規則,將可以大大改善訪客在你網站的閱讀體驗。

總之,不管你是出於什麼原因,既然你會點進這篇文章,那就讓我假設現在你覺得你的網站外觀不夠好看,並且有想要修正的地方。

所以,以下我幫你整理出了 10 個可以優化你網站外觀的設計技巧,它們分別是:

  1. 字體
  2. 間距
  3. 對齊
  4. 對比
  5. 留白
  6. 顏色
  7. 圖片
  8. 陰影
  9. 比例
  10. 套版

只要你認真學習並應用了以上 10 個基本的設計原則,相信一定能讓你的網站煥然一新,那麼,接下來就讓我們開始這一趟設計之旅吧!

2. 模仿你喜歡的風格

在正式進入主題之前,我希望你一定要先做一件事,那就是找到自己喜歡的風格

當你找到自己喜歡的風格之後,才會知道接下來你的網站該如何重新設計,不然就只是像一隻無頭蒼蠅在亂改而已,可能還會越改越四不像。

那要如何找到自己喜歡的風格呢?

其實方法很簡單,你就直接去參考、模仿那些你曾經看過、並且覺得很好看的網站。

舉例來說,由於我的網站是屬於 WordPress 網站教學類型的,因此我自己喜歡的風格是像 MediumHackMDVue.jsStoryhub 這幾個風格屬於比較簡潔、現代的網站,如此一來,就可以呈現出讓人一目了然、卻又不失科技感的設計。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 3
Medium 是一款崇尚簡約設計的部落格平台,影響我的設計觀點非常多

除此之外,我在設計我的網站的時候,並不是一昧的照抄,而是去將它們一些我覺得不錯的元素添進我的網站,最終才形成屬於我自己的風格。

所以,建議你先去找幾個你看得順眼的網站,然後思考一下最終你的網站到底想要如何呈現,這樣在進行接下來的 10 個技巧時,你會比較有一個畫面。

3. 字體

字體是許多初架網站的人,最常忽略的地方。

我會把它擺在第一個,代表他超級重要,因為不管是什麼類型的網站,一個網站大部分的元素都是由文字所組成的。

所以你的網站好不好看,很大一部分的成敗都要歸因於你使用的字體是什麼。

舉例來說,這是 Uber 的台灣官網,裡面的大標題竟然是用預設中文字體 sans serif 所製作的,非常的不好看。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 4
這是用 Windows 系統的電腦下去看的,如果你是用 Mac 看,會不一樣

於是我透過修改瀏覽器稍稍做了變化,把原本的標題字體換成 Microsof JhengHei 這款中文字體,你就會發現,透過這樣簡單的修改,整個網站就好看許多了。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 5

但 Uber 所犯的這個錯誤,主要是因為 Uber 的決策高層是以英文語系的外國人為主,所以它們在製作多國語系網站的時候,並沒有考慮到其它語系的使用者,才導致了這個現象。

不過畢竟人家是外國網站,我個人覺得還算是可以被原諒的;但身為中文母語者的我們,應該要盡量避免在網站上使用預設的中文字體

3.1 英文字體選擇

可以運用在網頁上的英文字體選擇,其實高達數百種,比較熱門的英文字體如:Poppins, Helvetica, Roboto, Raleway…等。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 6
這個字體是 Poppins,算是近年來歐美網站很愛的英文字體

以英文字體來說,我習慣使用 Poppins 或是 Helvetica,這兩款字體都具有非常現代化的特性,不過純粹是出於個人喜好,所以你不一定要學我。

如果你沒有特別的喜好的話,我個人是蠻推薦你可以使用 Helvetica,這是一個被稱為「國際字體風格」的經典英文字體,算是非常百搭的一個英文字體,基本上不會有用在哪都相當合適。

除此之外,這套字體是內建在所有人的系統之中,所以你不需要另外下載或安裝,就可以立即使用,因此非常推薦。

3.2 中文字體選擇

相較於英文字體只有 26 個字母,中文字體一般往往高達數萬個中文字。

因此檔案大小上面,中文字體就比英文字體大了數百倍,而如果我們是上傳自己喜歡的字體到網站中,將會導致網站載入速度過慢,導致使用者體驗不佳,這也導致了我們是沒有辦法上傳中文字體到網站上的。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 7
HandsUP 使用的字體是 Google 的思源黑體 ( Noto Sans TC )

所以一般來說,我們都會使用訪客系統內建的字體,或是雲端字體幫助我們解決中文字體不好看的這個問題。

  • 訪客系統內建的字體:指的是使用者電腦系統中,如 Windows, IOS 等系統預設的字體。
  • 雲端字體:指的是像 Google FontJust Font 提供線上網頁字體的網站。

不得不說在中文字體這一塊,iOS 系統的使用者非常的具有優勢,因為幾乎所有的網站在 iPhone 或是 Mac 上面看到字體都是非常漂亮、而且和諧的。

這是因為蘋果自行開發的中文字體蘋方,只提供給 IOS 系統上的使用者,所以如果你是 Windows 系統的電腦,就得多花點心思好好地為網站寫字體的 CSS 囉!

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 8
Uber 網站在 Mac 上面的字體,完全沒修改過就非常好看。

一般在網頁上,免費且可以商用的中文字體有 6 個選擇,分別是:

  1. 微軟正黑體"Microsoft JhengHei",Microsoft 推出的系統字體,Windows 系統適用。
  2. 微軟雅黑"Microsoft Yahei",Microsoft 推出的系統字體,Windows 系統適用。
  3. 蘋方"PingFang TC",Apple 推出的系統字體,MacOX, iPhone 等 iOS 系統適用。
  4. 思源黑體"Noto Sans TC",Google 推出的雲端字體,可以用在所有系統上面。
  5. Open Sans"Open Sans",Google 推出的雲端字體,可以用在所有系統上面,通常只應用在內文。
  6. Sans Serif:所有系統預設的中文字體。

中文字體差不多就上面 6 種了,如果你想要網站在 iOS 跟 Windows 系統中看起來一致的話,就請你選用 Google 的思源黑體。

3.3 利用 CSS 修改網站字體

下面這段程式碼,是我常用來設定網站字體的 CSS 語法,搭配的組合是 Helvetica 以及 微軟正黑體,你可以將它們直接複製貼上到 WordPress 的自訂 CSS 區域,進行修改。

h1,h2,h3,h4,h5,h6,body,p,a,blackquote,code{
    font-family: Helvetica, "PingFang TC", "Microsoft JhengHei","Microsoft Yahei", sans-serif !important;
}

由於篇幅的關係,詳細的作法,請參考下面的這篇文章。

延伸閱讀:如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

4. 間距

文字的間距也是常常被人忽略的環節,如果間距太小、文字靠得太近的話,你就不容易閱讀。

除此之外,間距在設計四大原則之中,也被稱為「親密性」,指的就是靠得近的會被視為同一組;靠得遠的則會被視為不同組,是一樣的概念。

一般來說,文字的間距主要分成 2 種不同的類型,分別為:

  1. 行距
  2. 段距
不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 9

4.1 行距 ( line-height )

所謂行距,是指一段文字裡面,上下行之間的距離。

行距如果太大的話,行與行之間就會越分離,看起來就會是不相關的兩句話;而如果行距太小的話,行與行之間會太靠近,看起來就會很壅擠。

因此,行距不可以過大,也不可以太小,它是有一定比例的。

行距的話其實有很多種比例可以使用,不過以下我整理了幾個最常見的數值,提供你做為參考。

  • Twitter ( Bootstrap ) 使用的行距為 1.42857
  • Medium 使用的行距為 1.5。( 最多人使用的數值 )。
  • 也有一些人使用數學上的黃金比例 1.618
  • 不過我自己是使用 1.8,因為我覺得這樣看起來比較舒服。

行距的 CSS 語法是 line-height,例如:

p{
    line-height: 1.5;
}

結論就是,行距落在 1.4 ~ 2 之間都算是合理,不過通常低於 1.4,以及超過 2 就有點讓人難閱讀了。

4.2 段距 ( margin-bottom )

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 9

一段文字與一段文字之間的距離,被稱之為段距。

段距顧名思義,就是段落與段落之間的距離,主要是用來區分各個段落 ( section )。

如果段距太少,2 個段落靠得太近,就會讓人分不清楚重點,或是導致文字過多、難以閱讀。

一般而言,如果你的文字是 16px 的大小,那麼段距至少要抓 32px 以上,也就是 2 個字的大小,才不至於讓使用者有擁擠的感覺。

我通常會使用 margin-bottom 這個 CSS 的屬性作為我控制段距的方法,但是如果你不懂 CSS 的話,你可以使用 WordPress 內建編輯器中的「空白間隔」作為段距使用。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 11

5. 對齊

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 12

對齊就是想像這些網頁都有一條條隱形的線,然後將網頁中的各個元素想辦法對上去,如此一來,就會自然產生一種均衡的美感,並給人一種整潔、乾淨的閱讀體驗。

如果是用 WordPress 內建的編輯器寫文章的話,只要你不要亂空格,基本上一定是保持對齊的狀態,我個人是覺得不需要特別注意,只要知道就好。

一般來說對齊主要分成 3 種方式,分別是:

  1. 靠左對齊
  2. 置中對齊
  3. 靠右對齊
不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 13
以 Trello 首頁的編排來說,會是先看到大標題,再看到圖片,接著才看到內文以及電子郵件按鈕。

而在橫式書寫的網頁設計中,人的視覺動線是「由左至右,由上至下」呈現 Z 字型的方式,因此在對齊時,一般會是以靠左對齊、置中對齊為主。

除此之外,因為現在以手機瀏覽為主,靠右對齊在手機上面會較難閱讀,因此應該盡量避免。

6. 對比

對比是網頁設計上最慣用的手法之一,它可以快速地在視覺上將 2 個不同的元素做出區別來。

它可以是大小的對比粗細的對比顏色的對比,或甚至是以上 3 種加在一起的對比。

舉例來說,以 Slack 官網首頁為例,你可以看到它的標題按鈕,相較於內文是非常明顯的且突出的,而這就是一種對比的呈現方式。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 14

使用對比,可以幫助你的讀者更快的找到網站上的重點,例如:標題按鈕,這些相較於內文更為重要的資訊。

因此,你應該要在你的網站中,使用對比的方式來幫讀者劃上重點,進而提升網站整體的使用者體驗。

7. 留白

留白是設計中的一個重要概念,也就是透過去除旁邊不必要的資訊,讓讀者能夠更聚焦在內容上面。

歷史上最有名的例子就是,當米開朗基羅 ( Michelangelo ) 被問到如何創造大衛像時,他回答:「這很簡單,我只是將不屬於大衛的都去除掉而已。」

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 15

所以,同樣的概念一樣可以應用到網頁設計之中,我目前看到留白最好的例子,就是歐美火紅的新創部落格平台 Medium

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 16
在 Medium 之中,你不會看到側邊欄跟廣告這種令人分心的事物出現。

Medium 的設計核心在於,先把所有可能讓讀者分心的事物 ( 側邊欄、廣告 ) 通通移除,並且大幅度的將內文左、右邊進行留白,如此一來,便可以使讀者的視角只聚焦在內文上面,讓人們可以更加專心地閱讀。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 17

例如像是這個推薦書籍的網站閱讀前哨站,它也沒有使用任何的側邊欄與廣告,因此讀者整體的閱讀體驗也是相當不錯的,提供給你做為參考。

所以,下次在你煩惱網站的側邊欄要放什麼的時候,不妨先去思考:「我真的需要一個側邊欄嗎?」,說不定你會有新的想法。

在設計領域中,有句行話叫做「少即是多 ( Less is more )」,意思是說有時候透過少量的元素,反而能夠傳遞更多的資訊給讀者,指的就是留白。

8. 顏色

一般來說,一個網站的顏色除了百搭的黑、白、灰之外,剩下應該就是要再另外找一個顏色擔任主色,以及另一個顏色當任輔助色

而通常,這個主色以及輔助色就是你的網站 LOGO 的顏色,如此一來才能創造網站整體的協調與一致感。

舉例來說,台灣線上課程募資平台 Hahow 它們 LOGO 的主色是藍綠色,而副色則是橘色。

因此,你可以看到在 Hahow 的網站中,它們的各種元素,例如:按鈕、圖案、icon、線段…等等,都會是以這兩個顏色交錯搭配使用。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 18

以募資完成的課程來說,它們所使用的顏色主要是主色藍綠色為主。

而作為對比的是,還在募資階段的課程,則是以橘色作為募資的進度表示。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 19

總之,你的網站應該要以「你的 LOGO 顏色」作為主副色系,並進行搭配使用,而不是憑感覺亂用顏色。

如此一來,才能給人呈現網站與品牌一致的和諧感,加深網站訪客對於品牌的印象。

如果你還沒有想好網站的色系搭配,你可以使用 Coolors 這個網站來進行尋找。

8.1 百搭常用的色號

以下是一些網站設計常用到的色號,它們的特點就是百搭、好記,如果你不知道要用什麼顏色的話,建議你可以先用以下的顏色,保證不會出錯。

  • #ffffff:白色
  • #000000:黑色
  • #cccccc:深灰色
  • #f7f7f7:淺灰色
  • rgba(0,0,0,0.1):半透明,通常做為分隔線使用

9. 圖片

有時候情況是網站的設計本身並沒有出問題,但你還是覺得網站很醜,這時候,原因可能出現在網站的圖片上。

舉例來說,我們將 2 個不同風格的購物網站 蝦皮 與 Pinkoi,擺在一起做比較看看:

9.1 範例一:蝦皮首頁

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 20

9.2 範例二:Pinkoi 首頁

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 21

你可以很明顯地發現,其實這兩個網站都設計都是差不多的,都是簡簡單單的商品欄位,但是 Pinkoi 卻比蝦皮好看很多,這是為什麼呢?

原因很簡單,就是出在「圖片」上面。

讓你覺得這個網站漂亮的部分,其實往往是網頁上的照片,由於 Pinkoi 網站上的照片都很漂亮,所以讓你覺得它們整個網站也很漂亮。

所以,無論你的網站設計的有多好,如果你使用不好看的圖片,那麼你的網站也永遠不會好看。

9.3 免費圖庫網站

通過剛剛的簡單例子,你應該很清楚,在網頁中使用高畫質、好看的照片,對於整體設計產生多大的影響了。

因此,在這邊我提供你 3 個我常用來抓圖片的圖庫,裡面有很多漂亮的照片可供免費商用:

  1. Unsplash
  2. Pexels
  3. Stories by Freepik
不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 22

使用方法也很簡單,就是進去之後用搜尋你想要的照片類型,並下載就好了,非常方便。

如此一來,你就有免費而且高畫質的專業照片可以使用了,馬上為你的網站提升了 1 個檔次的質感。

10. 陰影

為網站中的元素加上陰影,可以產生立體感,並會有一種讓人產生一種可以點擊的感覺

舉例來說,你可以看到下面圖片中的這些元素利用了陰影,創造出一種類似卡片的效果,並且它也告訴使用者,它們是可以被拖曳以及點擊的。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 23

因此,一般我們在使用具有連結功能的元素時,我們通常都會給它們加上陰影,便可以在不用特別說明的情況下,告訴使用者這是可以點擊的,這是一種稱之為「視覺線索」的設計手法。

以下是一些常常會被加上陰影的元素:

  • 按鈕
  • 相片
  • 輪轉盤
  • 常見問題
不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 24
相片加上陰影算是一種最常用的方式,如此一來便可以與旁邊的元素區分開來

11. 比例

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 25

在網頁設計中,其實各項數值的比例是有一定規範的,例如:

  • 像是內文字體大小我們常常會使用 16px,而標題會使用 40px, 36px, 32px, 24px 等。
  • 前面提到的間距也是使用 32 px。

這是因為,電腦的螢幕寬度比例是 16:9,所以如果你使用 8 或是 9 的倍數作為數值,在整體上會給人比較和諧的感覺。

由於偶數可以隨時除以 2,在使用上比奇數更方便,因此在大部分的情況下,我們都會採用 8 的倍數,如 16px, 24px, 32px 等,來調整自己網頁上的各項數值。

這點算是一個有趣的小撇步,如果你對於數值的比例比較抓不準,可以嘗試用這個法則抓個大概看看,不過最終建議還是依照你眼睛看起來舒不舒服為主。

12. 套版

如果使用了以上 9 種技巧,結果你的網站還是很醜,那可能就是你的美感還需要再多培養。

但美感的養成是很需要時間的,並且也是很因人而異的,就像你不能要求習慣中華民國美學的公務員,馬上習慣現代的扁平化設計。

所以這種時候,我會建議你直接去套用 WordPress 佈景主題所提供的模板,這部分應該各大佈景主題都有提供。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 26

要注意的是,在套完版之後,只一些做小幅度,例如:修改文字、替換顏色、新增圖片,儘量避免破壞網站原本的設計外觀,失去了套版的意義。

13. 適時地打破規則

當然,我上面說的每一個規則,都是可以打破的,而這也才是設計好玩的地方,否則每個人的網站都長一樣了。

例如說,下面這個網站中,左下角突出的圖片並不遵守「對齊」法則,這種技法被稱為破水平,就一種打破規則的展現。

不是設計師如何做出好看的網站?10 個優化你網站外觀的技巧 | 27

不過我必須要先說,打破規則是建立在「你已經確實瞭解了這些規則」的情況下,你才能去做嘗試。

你不可能在什麼規則都不了解的情況下,就說我要去打破規則,那樣的話是亂用,而非設計中所謂的打破規則。

你要做出上面提到的破水平技法,那麼你也要先知道如何對齊,是吧?

要先有框架,才能打破框架。

14. 結語

其實一個好的網站設計,除了關乎訪客的使用者體驗以及好不好看,它其實還有一層更深的心理學因素:信任。

首先,你要先認知到,基本上架設網站的目的就是為了銷售東西,而這邊說的銷售,不單單只是像電商一樣販賣實體商品,也包括了形象網站提供服務、部落格進行聯盟行銷,也都算是賣東西的一種形式。

由於銷售的本質就是信任,所以如果你的自己的網站像國小生的班網作品、或甚至像是詐騙網站,訪客是很難去相信你的,你也會因此降低了許多轉換率,沒賺到原本你可以賺到的錢。

雖然說內容為王,但我還是建議大家花一點時間去了解基本的設計法則,把自己的網站弄得好看一點,這樣不僅讀者讀起來舒服,你自己也看得順眼。

總之,以上就是 10 個能幫助你將網站變得更好看的設計技巧,希望你看完回去之後,能夠應用在自己的網站上面,提升網站的使用者體驗。

 

Q: 請問H2標題下面的淡灰線要如何用呢?

A: 要用 CSS 寫,例如我的是:
h2{
padding-bottom: 1rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

Q: 請問版主,想在每個H2上方空白,也就是空白間格,用CSS該如何辦到呢?

A:

h2{
margin-top: 20px !important;
}

數值可以自己替換一下