網站視覺效果中最為突出的元素,相信「色彩方案」必須佔有一席之位。顏色不僅是網站設計的補充元素,同時也代表了公司的風格與品牌形象。但是網站設計的配色方案原則有那麼多,如何才能找到合適的?
想設計出好看又符合品牌形象的網站,不如試試60:30:10法則。
那麼,
什麼是60:30:10法則?
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
其實60:30:10法則的概念很簡單,就是在網頁設計的顏色呈現上,要符合60:30:10的比例,即:
主色:佔整個網頁設計約60%的顏色,通常用於背景,也因為該色彩的使用面積較大,因此建議使用中性色為主,避免使用鮮艷色彩。
輔助色:佔整個網頁設計約30%的顏色,主要起到烘托主色調、支持主色、融合主色的作用,多以品牌色取色,常用於標題等位置。
強調色:與主色和輔助色形成強烈對比,主要起到吸引訪客注意力的作用,用於按鈕、圖標、小標題,以及行動召喚等元素。
60:30:10法則適用於哪些場景?
除了網頁設計,60:30:10比例還可適用於室內設計、APP設計、服裝搭配、相片構圖等絕大部分設計上。
簡單舉幾個例子:
① 網站設計
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
知名網站MailChimp使用淺黃色為主色調,以黑色為輔助色調,按鈕等元素則使用與黃色呈現強烈對比的藍綠色,使整個畫面非常協調且清晰。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
線上醫療保健公司HeadSpace以淺灰色為背景顏色,黃色作為輔助色調,藍色作為強調色,使整個畫面的視覺效果非常強烈。另外,網站大banner雖然使用不一樣的橙色,但其實也是黃色色調的延伸,所以不會使界面顯得突兀,反而讓整個品牌設計風格非常一致。
② APP設計應用
設計好看又符合品牌形象的網站 試試60:30:10配色法則
APP設計配色方案
Starbucks星巴克APP的整體設計非常簡約,顏色搭配方面:白色為APP的背景顏色,以灰色為輔助色,對於重要的行動呼喚元素如「加入星禮程」等訊息則是使用非常醒目的綠色(品牌色)。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
APP設計配色方案
美國購物平台Amazon APP設計使用簡單而乾淨的白色為背景主色調、藍綠色為輔助色,以與藍綠色產生強烈對比的橘黃色作為強調色調。Banner設計上與HeadSpace相似,使用橘黃色與藍綠色所延伸出來的顏色,使整個畫面顯得非常協調。
③ 室內設計應用
此外,60:30:10法則在室內設計也非常常見,使用方案如下:
主色調(60%):用於牆面、大型傢俱、地毯、沙發等。
輔助色調(30%):用於窗簾、邊張椅子、小型傢俱。
強調色調(10%):用於藝術作品、點綴裝飾、小枕頭。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
室內設計配色方案
整體空間以藍色為主色調,應用於墻面上;地面、邊桌以米色為主,點綴的畫作、擺設則是以灰色為主,從而起到平衡主色衝擊,減輕視覺疲勞的效果。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
室內設計配色方案
整體空間設計以白色為主要墻面色彩,搭配米咖色地板、衣櫃,並以綠色盆栽為點綴,使整體效果非常簡約且舒適。
除了60:30:10法則,
還有哪些色彩運用小技巧可以應用?
1. 網頁設計先以黑白灰呈現
很多設計師經常會犯了「太早為網頁設計上色」的錯誤,這樣會讓整個設計失焦,並浪費非常多的而時間在選擇合適顏色上。
先用簡單的黑白灰去做設計網站,確定整個結構和視覺效果後,再上色。這會讓整個網站設計色彩方案顯得更加和諧。
2. 網頁設計色彩運用不要超過3種顏色
不知道大家有沒有看過呢?有部台灣偶像劇,女主角因為穿衣搭配色彩過於豐富,經常被男主角笑是「聖誕樹」。的確,色彩過多不僅會讓整體效果顯得凌亂,還會重點無法突出。
同樣道理,網頁設計必須使用超過3種色彩時,建議使用調整色盤中顏色的深淺去做區隔,否則會讓整個界面顯得毫無重點,不知所云。
3. 了解顏色搭配技巧
常見的配色技巧主要有補色、相似色、三分色、補色分割與矩形。這些配色技巧所呈現的網頁設計效果也各不相同:
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
補色(Complementary Color Scheme):指色環上正對面(180°)的兩種色彩,如紅色與綠色、黃色與藍色、橙色與紫色。這種色彩搭配會產生強烈的對比,運用恰當還能呈現出一種生動活潑的效果。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
相似色(Analogous Color Scheme):指色環上相鄰的顏色,搭配起來非常協調,能營造出寧靜而舒適的感覺。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
三等分(Triad Color Scheme):即色環上相隔120度的三色,如紅、藍、黃,這種顏色搭配手法能使畫面顯得非常豐富,尤其是在使用不飽和色相時,效果特別顯著。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
補色分割(Split Complementary Scheme):是由「補色」延伸出來的一種形式,在選用補色的同時,運用補色兩旁的相鄰色搭配使用。這種配色手法效果與補色相似,但又不會那麼緊繃,因此非常適合初學者使用。
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
矩形(Tetradic Color Scheme):由兩組互補色組合而成,使用上能產生非常多的變化。使用時,記得要選用一種顏色為主色調,也要注意到冷色系與暖色系中的協調。
4. 平衡元素的視覺重量
視覺重量是物品吸引人注意的自然特性,通常視覺重量大的物品,更容易被人注意到。
視覺重量的常見特性:
● 物件越大,視覺重量越大
● 負空間(留白)越多,視覺重量越大
● 對比色越高,視覺重量越大
設計好看又符合品牌形象的網站 試試60:30:10配色法則
網頁設計配色方案
所以進行網頁設計時,要盡量針對視覺上想重點呈現的物體,可針對上述三點營造出理想的視覺重量。
香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。
聯絡電話: 37499734
電郵地址:
[email protected]網址: www.hkweb.com.hk