擺脫新手階段看這篇!網頁該如何開始「設計」? (色彩篇)

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


先決定色調吧!

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

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

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

你們一定多多少少有看過在路上發傳單的餐廳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,用接近黑色的深灰色。

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

Facebook
Email

發佈留言

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

購物車
返回頂端