如何選擇網站的顏色定調? (下)

04/07/2020 ・ 設計

接續上篇:如何選擇網站的顏色定調? (上)

STEP 3 │主色、輔助色?我該如何配色?

當你確立好你想要的顏色,接下來就是配色! 配色在色彩學當中是相當重要的一環,生活上也經常會使用到,像是衣服的配色、室內裝潢的配色等。
首先決定主色!
主色顧名思義就是「主要的顏色」它是代表品牌的顏色。可能是單一個顏色、雙主色或漸層色,如果你沒有品牌色彩的話,翻翻前一步你蒐集到最多的顏色是什麼?這個顏色符合你所想要表現的感覺嗎? 有的話將它找出來吧!決定他是主色。
還有輔色!
輔色又作「輔助色」,輔助色的存在是為在讓主色與品牌更完整的顏色,是屬於次要的、一般性的。單色、多色、灰階色、彩色都有可能。
輔助色可以引導使用者區分出主要和次要的資訊,除了讓品牌形象完整外,也讓使用者瀏覽時具有層級性。

 

關於品牌色彩應用,可以參考 Starbucks 提供的品牌視覺規範 ,這邊可以看到 Starbucks 如何將品牌色運用在網站、店面、產品上。
更詳盡的色彩意象、色彩專有術語,可以參考:設計配色完整攻略:色彩意義、色彩理論、色彩心理學讓您一次擁有!

STEP 4│ 先別急著上色!使用灰階稿引導你。

當你已經決定了主色和輔色時,這時你可能會有超過 3 個以上的顏色,那麼你該怎麼決定哪些顏色應該大量使用?哪些顏色又應該減量使用?

1. 使用灰階稿區分資訊、視覺重心。

你可以先將網站或 App的其中一頁,先製作灰階稿,依據資料的重要性,重要到一般資訊,區分出三至五個層級,分別用不同深淺的灰色排版。

2. 加入顏色與圖片

這時你可能會意識到,有些區塊加上主色可能反而不好閱讀,抑或是太多主色導致無法區分主要或次要性;接著我們再適時的拿掉主色換成深灰色或黑色試試看。

3. 重複試驗到完成

經由這樣一步一步的嘗試、修改,你將會多種的配色可能;盡可能的想像這樣的配色主要和次要的資訊是可以區分出來的嗎?是否符合這個品牌、是否符合你想要營造的氛圍?

會不會有例外的規範顏色?

屬於例外的規範,可能是需要考慮像是 狀態性 的顏色,像是表示警告、禁用等狀態顏色呢?
這邊可以參考 Bootstrap / Tailwind 的按鈕或狀態顏色設定,再依據你的品牌做調整,讓這些顏色出現在你的網站或 APP 時不至於突兀。

仔細想想我們常見的 狀態結果顯示 代表顏色,是不是也在生活中也有相同象徵?

STEP 5 │多練習、嘗試,配色沒有絕對的公式和規範

在你嘗試第一次配色,可能會花很多時間都覺得哪邊怪怪的,這是很正常的;因為配色沒有一套絕對的公式、答案。 你可以先從一個畫面或是一張卡片進行小範圍的配色,再嘗試多個畫面;過程中你可能會想要所有顏色都使用,也有可能使用太少顏色導致畫面留白太多或過於呆板,但只要多嘗試、多蒐集靈感、多看,就能對配色越來越上手。
這邊分享我常用的選色或配色工具:

  1. Color Hunt:很多美麗的配色。
  2. WebGradients : 將漸層色建立成色票,可複製 CSS 並有 Sketch / Photoshop 外掛。
  3. Gradient Backgrounds : 漸層色工具集。
  4. Nippon Colors — 日本の伝統色 : 日本傳統色。
  5. HTML color codes : 可線上選色產生色碼。
  6. Adobe Color : 可在探索連結內看到網友建立的配色外,也可以在趨勢看到色彩的流行趨勢。
  7. Awsmcolor(IG) :配色分享。
  8. colours.cafe(IG) :配色分享。

 


閱讀上篇:
如何選擇網站的顏色定調?(上)