免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網頁設計師自學手冊之色彩搭配簡易指南

2022-06-19    分類: 網站建設

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

選擇配色方案

色彩搭配手冊,網頁設計色彩搭配指南手冊,網站色彩搭配簡易指南,

有時候色彩搭配是一時的靈光乍現,但更多時候,它有更系統的方式來搭配。

確定目的

在開始設計之前,先確定設計目的。在開始前問自己這些問題:

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

確定你的受眾群體

網頁設計師自學手冊之色彩搭配簡易指南

人們對顏色的感覺是不同的。顏色是觀察者內部出現的心理現象。顏色根據個人偏好,文化培養和經驗對人們有不同的影響。因此,為了了解人們如何對您的設計做出反應,您需要確定您的受眾。

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

網頁設計師自學手冊之色彩搭配簡易指南

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

回顧色彩理論

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

尋找靈感

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

搜尋靈感的好文章是:

  • 網站建設顏色設計N+1張配色圖》
  • 網站設計頁面色彩搭配技巧:橙色在網站設計中的應用》
  • 網站設計頁面色彩搭配技巧:黃色在網站設計的應用》

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

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

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

構建設計系統

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

有關設計系統的示例,請查看網易的設計規范:《內部教程!超實用6步透視網易設計規范(附完整PDF下載)》,每個初學者在開始設計前都應該好好看看。

網頁設計師自學手冊之色彩搭配簡易指南

構建設計系統對配色有極大的幫助,即使是個草圖,也會給你提供思路,什么樣的顏色,元素適合整體方案。

保持 Kiss 原則(盡量簡單),顏色越少越好,對于大多數設計系統,一下結構是一個好的開端:

  • 背景
  • 主要強調
  • 次要強調
  • 錯誤顏色
  • 成功顏色

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

網頁設計師自學手冊之色彩搭配簡易指南

輔助顏色是用于區分次要操作和主要操作的顏色。例如,主按鈕和輔助按鈕。錯誤和成功顏色,通常是紅色和綠色,傳達設計狀態。例如,成功或錯誤通知。

網頁設計師自學手冊之色彩搭配簡易指南

選擇配色方案

網頁設計師自學手冊之色彩搭配簡易指南

現在你擁有靈感和設計系統的粗略草圖,現在是選擇一個配色方案的時候了。對于一個基本的調色板,我喜歡把我的顏色并排,就像是大家整齊地等待開會。

基礎顏色可以多一些,不要害怕嘗試大膽的顏色

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


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

正如我在上一節中提到的,顏色將在您的設計系統中有不同的角色。這也意味著每種顏色在你的系統中都有不同的權重。例如,您的背景顏色將比主要提示更頻繁地使用。

網頁設計師自學手冊之色彩搭配簡易指南

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

舉個例子,這有個 Invision 的配色方案:

你可以把基礎色變根據權重,換成不同大小來預覽配色方案。

應用配色方案

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

色彩搭配手冊,網頁設計色彩搭配指南手冊,網站色彩搭配簡易指南,

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

色彩搭配手冊,網頁設計色彩搭配指南手冊,網站色彩搭配簡易指南,

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

色彩搭配手冊,網頁設計色彩搭配指南手冊,網站色彩搭配簡易指南,

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

色彩搭配手冊,網頁設計色彩搭配指南手冊,網站色彩搭配簡易指南,

想想你的設計中的視覺層次結構。考慮什么設計組件要突出顯示和分配適當的顏色。此外,請考慮對懸停和點擊狀態等內容使用不同顏色的陰影。試著把配色應用到你的產品上。

最后

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

網頁標題:網頁設計師自學手冊之色彩搭配簡易指南
本文來源:http://m.newbst.com/news48/169048.html

成都網站建設公司_創新互聯,為您提供動態網站用戶體驗虛擬主機網站內鏈微信公眾號網站改版

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

微信小程序開發