擺脫新手階段看這篇！網頁該如何開始「設計」? （色彩篇）

談到網頁設計，只要把握幾個關鍵因素，就可以做出一個相當有質感的網站！
但是呢！
今天哩賀桑提供幾個平常把持網頁設計的幾個要點，供大家參考！
一樣都是透過網頁設計做出來的網站，但是為什麼網站會給人不一樣的感覺呢？
舉個例子，一樣都是去超市買東西，你要購買的是明天晚餐的食材，及明天要跟朋友烤肉的食材或用具。
這時候你的購物籃裡面裝的商品肯定也會不一樣吧？
然而..必須先瞭解你的「目標」是什麼！
先瞭解要做的這個網站，是什麼樣的產業（你要做晚餐還是去烤肉）
然後來決定元素上如何做調整！

---

先決定色調吧！

哩賀桑做網頁設計之前，會先決定這個網站要用什麼樣的色調來做。
顏色是視覺給人第一直覺的印象，而色彩學也會間接影響到「感覺」上的心理效應喔！
先來學一點基本的色彩學吧！

這是十二色相環，右上是暖色系，左下是冷色系
暖色系與冷色系的差別在於..

暖色系的感覺：生動、活潑、陽光
冷色系的感覺：冷酷、平靜、謹慎

你們一定多多少少有看過在路上發傳單的餐廳DM吧？
下次不訪多注意看看
這些餐廳的DM上是不是都是運用暖色系居多？而鮮少使用冷色系呢？
因為暖色系的顏色，是會讓人開胃有食慾的顏色喔！
像麥當勞、必勝客等等之名連鎖餐廳的網頁設計都是運用這種鮮紅的暖色系。

而冷色系的顏色，比較適合科技感、專業度強的產業，因為冷色系會有穩重、謹慎的既定印象。
比如網頁設計的典範蘋果公司、知名進口車賓士的官網，或是台灣的本土品牌Gogoro…等等，都是運用冷色系作為網頁設計的色調喔！

所以說針對網站的產業，分門別類的歸納出適合的顏色，就可以決定色調來設計網頁了！！

---

六三一法則

好了，我們現在知道做網頁設計之前色調很重要！
但…只要把同色系ALL IN全部擺上去就好了嗎？
母湯啊！為了避免你做出來的網站看起來像長輩圖…
而如果你是新手的話，顏色不多也不少，只要三個恰恰好！
有把握的話，最多最多不要超過五個！若沒把握的話，只要把持一個原則，三個顏色就好！

顏色配置比例可以運用六三一法則，就不會讓你的網站看起來五花八門，色調不平衡喔！
《六三一法則》其實就是一個平均分佈顏色的原則
60%分佈為主色
30%分佈成次要色
10%分佈為輔助強調色

就拿蘋果官網的iPhone銷售頁面來當範例來看好了
https://www.apple.com/tw/iphone/

整個網頁從頭看到尾它的背景大部分是米白色，分佈範圍差不多為60%
而商品頁的背景幾乎都是純白色，分佈範圍差不多30%
再來看看它的有關於連結(link)的文字都是選用藍色，分佈範圍差不多10%
其他除了頂端的Top Bar選單是純黑色之外，其他頁面幾乎都符合《六三一法則》
這樣的顏色配置，不僅網頁看起來乾淨、舒服，甚至可以有一定程度的降低到訪者的跳出率的喔！（因為在你的網頁瀏覽起來感覺是舒服的）

---

為什麼文字顏色不要用預設的#000000？

既不好看，也不典雅。
對於字體的顏色，有一個大忌，就是絕對不要用純黑色！
除了看起來像新手（不用心）、沒質感之外，最重要的是會影響到視覺疲勞！
對於人類雙眼的視網膜來說，飽和度最高的純黑色是會造成嚴重視覺負擔的。
而這反而會因為在你的網站上瀏覽上造成視覺負擔，反而增加網站到訪者的跳出率，這就非常可惜了。

而且純黑色的顏色過重，會很容易壓倒你精心配製的其他顏色及網站的佈局。
純黑色的阻礙有多嚴重？
想像一下，你是一個在超市賣點心試吃的銷售員，即將成功兜售給ㄧ位女客人時
而這時她該死的男朋友突然蹦出一句「欸 你不是說要減肥嗎？」
然後女客人突然被拉回現實之後，就放棄購買的念頭了。
而女客人就是你的網站到訪者，網站就是你鋪成即將成功兜售的銷售技巧，純黑字就好比那該死的男朋友，然後…然後就沒有然後了。

我們來看看這兩張圖的文字，你覺得哪一個看起來會比較舒服呢？

我們先來看看文字版，純黑字跟深灰字

同樣的，背景如果是純黑色及深灰色的話，那一個閱覽起來比較舒服？

有沒有發覺純黑色的無論是文字或是背景，這麼一比較，視覺上看起來都會格外的強烈呢？
所以對於文字顏色的使用上，盡可能不要使用純黑色，如果可以，選擇用接近黑色的深灰色會更好！
既看起來比較有質感之外，也會降低視覺疲勞，降低網站到訪者的跳出率喔！

---

本篇重點整理

一、依照企業的領域來決定色調！
暖色系的感覺：生動、活潑、陽光
冷色系的感覺：冷酷、平靜、謹慎

二、配色佈局運用《六三一法則》
60%分佈為主色
30%分佈成次要色
10%分佈為輔助強調色

三、文字不要用預設的純黑色#000000，用接近黑色的深灰色。

好了，這篇是關於網頁設計的基礎色彩，運用好的話，會是個有質感的網頁喔！
下次來聊聊其他關於網頁設計的間距、字體等等的細節吧！