回首頁-企業、品牌網站設計與形象的深耕者
contact詢價信箱service@showbigs.idv.tw

Think big

Do big

Show big

網頁配色設計法則

網頁設計的成敗與配色、用色對於於一個網站有很大的主關聯。網站上鮮明的色彩具有引人注目打動人心的力量,當色彩吸引了流灠者的視線,色彩所表現的形象和內容等一切訊息,也同時進入了人的記憶當中,也就能先聲奪人,快速傳遞訊息的作用。

如果選擇以易記憶、易辨認的色相為主色調,或選擇單純明亮的色彩組合,則更容易引人注目,快速構成深刻的印象。 色彩是視覺設計的一大門類,其囊括的內容一本書都放不下,但是在學習配色方面的技巧時,我們必須先瞭解色彩他既有的獨特性,才能讓它在網站的設計上更是事半功倍:

(一)網頁顏色的涵義與給人各種豐富的感覺和聯想:

紅色:熱情、奔放、喜悅、莊嚴
黃色:高貴、富有、燦爛、活潑
黑色:嚴肅、夜晚、沉著
白色:純潔、簡單、潔淨
藍色:天空、清爽、科技
綠色:植物、生命、生機
灰色:莊重、沉穩
紫色:浪漫、富貴
棕色:大地、厚樸

(二)網頁主色設計:

在網頁平面上,面積最大的色彩為畫面的主色調,貫穿網站中所有的頁面,出現次數最多的就是主色調。例如以紅色為主色的作品,多數給人感覺熱情積極和溫暖;而以藍色為主色的作品,卻讓人感覺智慧、誠信和高科技。

(三)網頁輔色設計:

主色調是掌握整個畫面色彩氣氛的主要元素,而輔色面積小,負責發揮強調或緩衝調合的作用,強調的輔色,是空間中動感和活力的來源,還可以因其色彩「點」的作用,使主色協調整個畫面得以連貫,這種一般為醒目突出的色彩。

例如:HP印表機網站上的用色,儘管紅色和灰色的面積不大,卻由於他們搶眼的色相,使人過目不忘,而在訊息區內鋪墊淡淡的灰色,起了很好的輔助作用。

淡灰的分佈使頁面看起來豐富,緩和了紅色和深灰所造成的生硬感,這就是輔助色應用最大的功能。

(四)網頁背景色設計:

不得不提的概念還有網頁的背景色。背景色彩或底色的設計,是突出主體的重要手段。如客戶常常要求把網頁作的「亮」一些、「鮮明」一些,這絕不是說要求得淺一些。白色雖然是明亮的色彩,但是白紙本身並不具有「亮」的作用,而黑底上的白色則非常醒目。

所以,要使畫面「亮」一些,應該使底色與主體色調在色相、明度、飽合度的對比大一些,如果主體色調的鮮豔明快,底色通常用中低明度和飽合度較沉靜的色彩,以利於襯托主體。

此外,底色設計也是增加空間感的重要方法,鮮而明的主體色與灰而暗的底色,呈並置對比狀態,灰而暗的色彩能產生後退感,鮮而明的色彩則產生前進感,形成深襯淺,灰托鮮的清晰的前後空間關係,也是使用背景色相當良好的運用。

(五)傳達訊息為主的用色:

要讓網頁配色為傳達訊息、配合閱讀而服務,要知道好的訊息交流是簡單而直接的。但是如果此刻增加色彩設計不一定能提升藝術效果,反而簡化色彩語言而加大色彩的表現力,這才是色彩傳達高層次的追求。

(六)網頁色彩的使用技巧與指針:

給您的訪客一個好理由繼續回訪,讓他們把您的網站加入他們的書籤,如果您只作好這件事,其它甚麼都不作,就算沒有進行甚麼特別的最佳化活動,你的網站還是可能會有好的排名的。
  • 瞭解你的網站所要傳達的訊息和品牌。選擇可以加強這些訊息的顏色。例如,如果在設計一個強調穩健的金融機構,那麼就要選擇冷色系、柔和的顏色,像是藍、灰或綠。在這樣的狀況下,如果使用暖色系或活潑的顏色,可能會破壞了該網站品牌。
  • 瞭解你的讀者群。文化差異可能會使色彩產生非預期的反應。同時,不同地區與不同年齡層對顏色的反應亦會有所不同。年輕族群一般比較喜歡飽和色,但這樣的顏色卻引不起高年齡層的興趣。
  • 不要使用過多的顏色。除了黑色和白色以外,約選擇四到五個顏色就夠了。太多的顏色會導致混淆,也會拉走讀者的注意力。
  • 在閱讀的部分使用對比色。顏色太接近無法產生足夠的對比效果,也會妨礙觀眾閱讀。白底黑字的閱讀效果最好。
  • 選擇色盤時請考慮功能性的顏色。別忘了將關鍵資訊部分建立功能性的顏色,例如標題和超連結等。
  • 注意網站色差問題。每一個網站開發人員都知道,即使是網路通用顏色在跨平臺顯示的時候都會有些不同。記得要校正你的gamma值,並在不同的作業平臺上測試你的色盤。

(七)網頁配色推薦工具:

這樣一來給各大搜尋引擎的第一印象分數也比較好,打下堅實的基礎,並且要記得把網站交給穩定的主機代管商,網站最怕遇到搜尋引擎在拜訪時遇到網站進不去或維護中,狀況次數一多,搜尋引擎間接也會考慮放棄網站。同時要架設均衡的網站結構並使用有意義的網域名稱,目錄結構和檔名都要先思考一下要如何命名。
#網頁設計精選案例:More
網頁設計精選作品

晶麗科技.極光電通

網頁設計精選作品

深耕30年.建明印刷

網頁設計精選作品

藏在台灣巷弄裡的風雅小世界

網頁設計精選作品

ALV國際美國村

網頁設計精選作品

Green World 綠世界環保

網頁設計精選作品

將財吊扇

網頁設計精選作品

白金歲月-咱ㄟ台灣.咱ㄟ鹽

網頁設計精選作品

漢服文化推廣協會

網頁設計精選作品

犯罪被害人保護協會

網頁設計精選作品

BLTV佛教人間衛視電視平台

網頁設計精選作品

南投鹿谷鄉茶業文化館

網頁設計精選作品

道濟製藥-專業環境檢測

網頁設計精選作品

百世科研PesiBike

網頁設計精選作品

arin醫美藥妝

網頁設計精選作品

八十餘年歷史-台中追分火車站

網頁設計精選作品

樂學教育網