• 百圖網免費素材千人群

百圖網 > 設計教程 > 設計技巧 > 明亮的色彩如何應用在UI設計中?

明亮的色彩如何應用在UI設計中?

damaer
damaer

2017-08-03

評論 0

瀏覽

收藏

導讀:如今移動應用的發展愈發成熟,功能逐漸大同小異。此時,一個讓人有良好視覺享受的移動應用則備受青睞,而色彩正是營造美感的關鍵所在。本文通過介紹亮系色彩的使用法則來幫助開發者進行移動應用的設計。

在設計師的工具包中,色彩是最強有力的工具之一。色彩能吸引注意力,烘托氛圍,影響用戶的情緒、認知和行為。當進行網站或移動應用的程序設計時,毫無疑問是亮系色彩大展身手的時機。設計師們用亮系色彩讓用戶著眼于界面中的重要元素,并為之印象深刻。

下面是在設計中巧用亮系色彩的一些實用技巧:

單調

在使用亮系色彩時,單一調色板法則是目前最流行的方式之一。單一調色板包括單一色調和色彩混合方式。這樣的調色板能形成視覺刺激——驚艷的排版和單一的色彩進行配對能創造令人過目不忘的效果。

(上圖:Sydneystockhom 采用大膽的色彩來創建一個簡單卻讓人印象深刻的外觀)

 

小技巧:使用黑白這樣的單一顏色,是在小屏幕上創造視覺驚喜的好方法。

(上圖:Streaks 中顏色,圖標和簡單的樣式創造了一個易于閱讀和互動的組合)

 

雙色調

雙色調是圖像的半色調的復制,它帶來圖像的中間調和高光。這種曾經應用于印刷裝訂中的技術,在互聯網時代找到了新的生命。雙色調不僅能吸引人的注意力,而且它非常容易被創建。你可以在 Photoshop 中使用雙色梯度輕松做出這種效果。

(上圖:簡約雙色調營造了一種商務范。來源:Holm Marcher & Co)

雙色調效果不僅可以在大型桌面圖像中應用,它們同樣可以在移動設備上使用。

(上圖:來源:Ognjen Divljak

 

小技巧:

  • 使用雙色調創作主圖。選擇一張主題明確的高質量圖片,而不是有著太多元素的圖片,因為后者會有很多細節被忽略。

(上圖:一張極簡圖像勝過千言萬語。來源:Spotify)

  • 選擇一種能反映照片情緒的色彩。你要知道,不同的顏色能喚起不一樣的情緒。
  • 當你設計網站并想在你的圖像上創建雙色調的效果時,你可以不在現有圖像上做任何修改,只要在 Colofilter.css 上應用 CSS 代碼即可。

疊加

包含了顏色疊加的設計是用色彩進行聲明的一種方法。通過使用與材料設計相關的一種明亮而飽和的色彩,你可以在半透明的框架上簡單地應用圖像或者視頻,從而營造現代感。

(上圖:顏色疊加增強了圖像的作用,并允許設計師校準基調色彩。來源:Hype

 

請考慮在卡片樣式元素中使用圖層疊加,以用于視頻內容或者重點的強調。

(上圖:懸停動畫卡應用。來源:Column Five

 

小技巧:當使用單一顏色進行疊加時,需要考慮顏色的飽和度和透明度。

  • 較深的顏色組合(低透明高飽和)能讓人將注意力集中在色彩上;
  • 較淺的顏色組合能讓人將注意力集中在圖像上。

結語

沒什么設計技術能比與色彩打交道更有趣的了。色彩能營造戲劇感、深沉感甚至安詳感。作為一名設計師,當你使用色彩時,真應該去試驗一下不同的搭配組合。不論你鐘情于明亮、大膽的色彩,抑或黑白簡約感,你都要記住:

沒有不好看的色彩,只有不恰當的使用。

感謝閱讀!

 

原文地址:babich

作者:Christine Chun

譯者:Aceyclee 非科班設計(公眾號)

闪电之神怎么玩