讓網站更有層次感｜如何在網頁設計中運用60：30：10配色法｜日本RWD網站資源分享

前言

在「理財金三角」的理論中，主張可用「60％、30％、10％」的方式做資產配置。

這樣的比例配置不只能運用在理財，其實也是黃金比例配色法則之一。

和專案經理開版訪談的過程中，為了確認客戶所想要的「簡潔感」，我會找一些不同配色比例的網站，確認客戶對於顏色占比的想法。也是在這個時候，才知道雙方對於淺色網站、深色網站的概念是否有落差。

有些專案因為企業LOGO色彩過多，會希望整體網站是以淺灰、白底為主，在一些滑過的區塊、重要標題再出現企業代表色。

有些客戶則是希望企業代表色可以占網站的大區塊，分別代表不同的內容，也因此，在網頁設計的版面配置裡「確認色彩比例」這件事情很重要。

若想直接看看日本RWD網站的資源分享，您可利用目錄功能直接前往結尾喔~

什麼是60：30：10配色法則？

簡單來說就是60% 作為主色調、30% 作為次要色調(輔助色)、10% 作為強調色(點綴色)，這種顏色比例分配能讓整體具有協調感，幫助視覺平衡，讓資訊能清楚傳達。

延伸閱讀 ◆ 認識黃金比例60：30：10

網頁設計時的一些應用建議

• 確認主色調與整體氛圍：主要操作畫面要是淺色、深色，還是要用品牌色彩延伸？
• 運用輔助色協助營造層次：帶有品牌色彩的淺灰、將圖片色調整理一致。
• 引導視覺的點綴色：區塊標題、按鈕。

這些，都算是60:30:10

60:30:10 示意圖

並非單純用三種顏色去做配置，依照不同設計師的習慣，很有可能在不同的比例內又有區別，在某些顏色比較豐富的品牌企劃裡面，會有更詳細的顏色應用規範。

而在運用品牌標準色去做網站設計時，就更需要留意想要傳達的「主色系」是什麼？

客戶只有提供一個綠色的LOGO來做網站，那「60」要分配給白色還是綠色？

客戶說他希望能讓自己的產業與環保相關，希望出現和自然有關的元素。

客戶說他的LOGO綠色太亮了，希望網站的綠可以不要太刺眼，別出現太多。

這些問題需要透過討論，才能有更明確的網站訴求——淺色系網站？深色系？區塊分明的淺色系？

以上面的示意圖比例來說，若網站中會運用到「草地、山景、森林景」這類的自然景觀，也必須要計入顏色(綠色)配置的「比例」之中。

有時候影響整體的，就是那個「10」

有了事前溝通，也找了不少參考，為何客戶還是覺得「太綠了」呢？

這個時候，需要確認雙方對於「點綴」的定義。

請檢查自己的設計品：

標題是否為綠色的文字？

滑過時的效果是否帶有綠色？(比如圖片滑過被綠色整塊蓋住、文字整個變色)

按鈕的顏色是否為綠色？

圖片本身是否是綠色？

是否有大範圍的滿版綠色區塊？(比如文字還要反白的那種)

區塊中是否有綠色的配件在飄動？(比如各種灑落的葉子、抽象幾何元素)

六個裡面中三個，其實就算很多了。

有些客戶的「點綴」很有可能只想要一到兩個。

若再加上其他的企業輔助色，那比例又更刁鑽了XDDD

拿銀行來舉例的話，不妨試著觀察看看以下各家銀行網站截圖。

你覺得他們的「綠色比例」是否都算是「10」的比例呢？

顏色很多時，要把「30」拿來當「10」用

做淺色網站的情況下，要有一個認知——「60」是給白色與淺灰色用的。

那原本的60和30就會有不同的應用情況了。

先不討論美感，以綠色系的銀行當作觀察舉例的話，我個人覺得中國信託的應用挺值得拿來討論的。

大部分銀行大多以綠色、藍色去做形象色，當然也有像台新銀行用紅色為主色系(但台新網站也是用白色、灰色去配紅色，比較沒有其他顏色能出來跟主色系搶)

中國信託的LOGO同時具有紅色與綠色，這兩個顏色的搭配如果一個弄不好，其實會挺可怕的，可能直接變成聖誕節。 但因為另外配了一個讓眼睛比較舒適的藍綠色，這樣的色彩設定好像就合理了不少，甚至具有60:30:10的明顯比例。

在這樣的情況下，網站設計師要將色彩合理配置到網站上。

這段過程中，就會出現像下圖的轉變，將標誌的配色依照客戶需求配置到網站上，且必須符合配色的比例。

中國信託銀行用色分析

在網站中增加了少量的黃色當作點綴，用深灰色作為頁尾背景色，網站整體中規中矩，甚至我覺得有些無聊但那個「藍綠色」的顏色比例，卻能讓人清楚知道這是中國信託。

中國信託銀行網站截圖

試想看看，若設計師照原本的顏色配置，「紅色」的比例是不是會變得很重？

在客戶的標誌具有多種顏色的情況下，需要特別確認「30」與「10」。

調整比例後的變化應用

60:30:10黃金比例配色雖是設計的基礎法則，但規則就是要拿來打破的XDDD

有些設計師會運用百分比規劃要使用的顏色，比如變成50:40:10、80:10:10的配置，這樣的習慣能讓網站保持色彩的平衡感，營造舒適的閱讀體驗。

其實只要能想到「顏色需要有計劃地做配置」這件事，就不太會做出荒謬的樣子。

能讓使用者停留網站時間的變長，那就是好的配色比例。

碰到一堆顏色的客戶要怎麼辦？

今天不管是遇到標誌一堆顏色，還是客戶打算賣一堆顏色的商品。

最好的做法就是讓網站變成一個更稱職的配角。

賣流行服飾、顏料、各種繽紛商品、餐飲食品，使用更簡約的配色，利用乾淨的區塊背景去凸顯圖片。(當然圖片本身條件也要夠好才能撐住)

一堆顏色的Google，搜尋首頁就非常簡約，把一切都集中在他們的LOGO上。

Google首頁截圖

結尾

配色一直是一門學問，有時候想要更舒適的顏色，有時又需要更吸睛的配色，為了營造出腦中所期待的氛圍，設計師們會不斷追求更好的配色。

希望這篇文章能稍稍為您的配色思考幫上忙 : )

當卡住的時候，觀察分析別人的配色也是個挖掘靈感的方法。

提供一個我個人很喜歡的網站→ https://responsive-jp.com/

有很多類似這個網站的平台，但我特別喜歡這個平台的畫面。

可以利用右側的分類選單篩選自己所需要的，由上而下依序是「產業類別、顏色、版面配置、技術工具、網站屬性」

(點了之後看不懂日文也沒關係，按右鍵即可讓瀏覽器幫忙翻譯成中文，還算堪用XD )

以這篇文章所講的綠色網站、金融業網站來說，就能在產業類別和顏色中找到非常多的配色比例靈感。

這個平台可以讓人同時查看各種不同裝置的畫面，我個人覺得非常好用！

雖然大多都是日本網站，但我覺得「顏色比例」這件事情是世界共通的美 XDDDD

感謝看到這邊的您，這篇文寫了特別久，若能給我一個讚或戳一下追蹤，讓我有些成就感就太好了~😆😆😆

若您有什麼配色小訣竅，或有什麼地方覺得我能寫得更好、發現了錯字之類

歡迎留言跟我分享喔！

※本文所使用的截圖僅為設計分析和示意用途，無商業使用意圖，若您不希望出現在本文截圖，請與我聯繫，我會立即移除相關內容，謝謝。