網(wǎng)頁設(shè)計師自學手冊之色彩搭配簡易指南

這篇文章比較系統(tǒng)的介紹了尋找配色方案靈感的一些思路，輔以大量案例來解釋配色方法，通俗易懂，最適合新手了。色彩是設(shè)計師手中強大的武器。它吸引著用戶的視線，喚起情感，傳達內(nèi)涵。在一項關(guān)于色彩的調(diào)研中，研究人員發(fā)現(xiàn)，用戶對于產(chǎn)品的快速決策 90% 是基于色彩的。所以色彩的運用對于設(shè)計來說至關(guān)重要，每種顏色都有自己的意義，而多種顏色的組合也需要理論指導。

選擇配色方案

有時候色彩搭配是一時的靈光乍現(xiàn)，但更多時候，它有更系統(tǒng)的方式來搭配。

確定目的

在開始設(shè)計之前，先確定設(shè)計目的。在開始前問自己這些問題：

• 你想用你的設(shè)計傳達什么信息?
• 你的設(shè)計的目的是什么?要提供信息?說服?
• 你想讓你的設(shè)計喚起什么情緒?
• 您的設(shè)計的目的應(yīng)該為您選擇您的調(diào)色板時作為指南。

確定你的受眾群體

人們對顏色的感覺是不同的。顏色是觀察者內(nèi)部出現(xiàn)的心理現(xiàn)象。顏色根據(jù)個人偏好，文化培養(yǎng)和經(jīng)驗對人們有不同的影響。因此，為了了解人們?nèi)绾螌δ脑O(shè)計做出反應(yīng)，您需要確定您的受眾。

當然了，也有一些普遍適用的色彩的含義。綠色普遍代表大自然，因為它是植被的顏色。然而，像紅色這樣的顏色在不同文化中的解釋不同。在西方世界，紅色與火，暴力和戰(zhàn)爭有關(guān)。它也與愛和激情有關(guān)。然而，像中國這樣的國家將紅色與繁榮和幸福聯(lián)系在一起。

因為顏色有很多不同的含義，所以將你作為設(shè)計師的心理顏色模型與你的觀眾相匹配是非常重要的。要了解更多關(guān)于不同國家和人口統(tǒng)計的顏色意味著什么，請查看顏色在市場營銷和品牌的顏色心理學和顏色的意義。

回顧色彩理論

色彩理論是混合顏色的邏輯結(jié)構(gòu)和實踐指南。它包含從色輪到各種顏色的意義的一切。你可以通過研讀而明白為什么Facebook 是藍色?

尋找靈感

很多時候我們可能沒有靈感，沒關(guān)系，就算是再偉大的藝術(shù)家也會如此，我們可以借鑒他人的作品，獲得啟發(fā)。

搜尋靈感的好文章是：

• 《網(wǎng)站建設(shè)顏色設(shè)計N+1張配色圖》
• 《網(wǎng)站設(shè)計頁面色彩搭配技巧：橙色在網(wǎng)站設(shè)計中的應(yīng)用》
• 《網(wǎng)站設(shè)計頁面色彩搭配技巧：黃色在網(wǎng)站設(shè)計的應(yīng)用》

這些文章是有用的，但嘗試看看從您正在設(shè)計的特定媒體之外的設(shè)計。這樣做將幫助你想出出乎意料的獨特和令人愉快的色彩方案。例如，你可以看看室內(nèi)設(shè)計。

如果你想要不同的東西，尋找顏色靈感在其他文化的設(shè)計。例如，韓國音樂視頻集設(shè)計以其豐富多彩和眼睛捕捉的調(diào)色板而聞名。每個框架都可以作為靈感來源。

色彩方案無處不在，包括你的日常生活。下一次出去，停下來欣賞你周圍的顏色。

構(gòu)建設(shè)計系統(tǒng)

一個設(shè)計系統(tǒng)，有時被稱為樣式指南，是一個框架，封裝所有的元素到你的設(shè)計內(nèi)。這包括從按鈕到排版的一切。你需要考慮，什么樣的按鈕和你的導航欄看起來像什么。

有關(guān)設(shè)計系統(tǒng)的示例，請查看網(wǎng)易的設(shè)計規(guī)范：《內(nèi)部教程!超實用6步透視網(wǎng)易設(shè)計規(guī)范(附完整PDF下載)》，每個初學者在開始設(shè)計前都應(yīng)該好好看看。

構(gòu)建設(shè)計系統(tǒng)對配色有極大的幫助，即使是個草圖，也會給你提供思路，什么樣的顏色，元素適合整體方案。

保持 Kiss 原則(盡量簡單)，顏色越少越好，對于大多數(shù)設(shè)計系統(tǒng)，一下結(jié)構(gòu)是一個好的開端：

• 背景
• 主要強調(diào)
• 次要強調(diào)
• 錯誤顏色
• 成功顏色

原色是最常用于重要按鈕和重音的顏色。對于許多公司，這也是他們的標志的顏色。

輔助顏色是用于區(qū)分次要操作和主要操作的顏色。例如，主按鈕和輔助按鈕。錯誤和成功顏色，通常是紅色和綠色，傳達設(shè)計狀態(tài)。例如，成功或錯誤通知。

選擇配色方案

現(xiàn)在你擁有靈感和設(shè)計系統(tǒng)的粗略草圖，現(xiàn)在是選擇一個配色方案的時候了。對于一個基本的調(diào)色板，我喜歡把我的顏色并排，就像是大家整齊地等待開會。

基礎(chǔ)顏色可以多一些，不要害怕嘗試大膽的顏色

在進一步確認選擇顏色的時候，再問自己：

• 設(shè)計目的和受眾都清楚了么?
• 什么顏色可以容易理解?
• 什么顏色有視覺沖擊力和吸引你的眼睛?
• 你需要一個明亮或深色配色方案嗎?
• 一天的什么時候人們會使用你的產(chǎn)品?
• 你想讓你的設(shè)計傳達什么樣的心情?
• 你的配色方案比同類型別人做的更好么?

正如我在上一節(jié)中提到的，顏色將在您的設(shè)計系統(tǒng)中有不同的角色。這也意味著每種顏色在你的系統(tǒng)中都有不同的權(quán)重。例如，您的背景顏色將比主要提示更頻繁地使用。

因此，有時創(chuàng)建一個由不同尺寸的形狀組成的一次性設(shè)計是有好處的，每個尺寸大致等于給定頁面上的顏色的出現(xiàn)頻率和平均表面積。(園長：顏色權(quán)重越高，面積越大，比如背景色尺寸 > 主要提示色尺寸)

舉個例子，這有個 Invision 的配色方案：

你可以把基礎(chǔ)色變根據(jù)權(quán)重，換成不同大小來預覽配色方案。

應(yīng)用配色方案

為了讓大家了解如何將顏色應(yīng)用于設(shè)計系統(tǒng)，讓我們來看看 Airbnb。Airbnb 的原色是Rausch(下圖右二)，以公司起源的街道命名。Kazan(下圖右一) 用作次要顏色，兩個灰色用作背景顏色。

對于大多數(shù)頁面，Airbnb 使用霧灰色作為背景。您可以看到，他們使用 Rausch 作為他們的主要顏色強調(diào)重要的行動，如要求預訂列表。

Kazan 用于捕捉和吸引你的眼睛。注意它如何補充原色。

對于錯誤消息，Airbnb 使用淺紅色，可以說是一種陰影。紅色，連同感嘆號，立即吸引你的眼睛，并通知你系統(tǒng)的狀態(tài)。

想想你的設(shè)計中的視覺層次結(jié)構(gòu)?？紤]什么設(shè)計組件要突出顯示和分配適當?shù)念伾?。此外，請考慮對懸停和點擊狀態(tài)等內(nèi)容使用不同顏色的陰影。試著把配色應(yīng)用到你的產(chǎn)品上。

最后

學習如何用顏色設(shè)計對于設(shè)計師來說是無價的，配色方案都是需要不斷嘗試和迭代的。如果你想更游刃有余地處理顏色，唯一的方法是做更多的工作和嘗試。

網(wǎng)頁標題：網(wǎng)頁設(shè)計師自學手冊之色彩搭配簡易指南
本文來源：http://www.muchs.cn/news48/169048.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、用戶體驗、虛擬主機、網(wǎng)站內(nèi)鏈、微信公眾號、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)