這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

顏色有助于表達層級、建立品牌形象、賦予意義以及表明元素狀態等。

 

目錄

層級
品牌
意義
狀態

 

層級

在材料設計中,顏色可將注意力吸引到界面中的特定元素上。當元素的顏色與周圍環境形成對比時會顯得格外突出,用戶也就會明白它的重要性。由于顏色主題各異——從醒目和明亮,到樸素與柔和——有很多不同的方法都能表現顏色的重要性。

例如,黑色圖標放在白色背景中時會非常顯眼,多色卡片置于單色卡片附近時往往能引入注目。

 

表面對比

為了突出重要事件,元素間應使用相對強烈的對比顏色。

 

顏色和形狀

顏色和形狀的同時改變可加強元素的視覺表現。使用這種強調來表明某些事件已被選中或需要立刻引起關注。

 

 

限制顏色

通過限制app中顏色的使用,使運用顏色的區域受到更多的關注,例如文本、圖像、和類似按鈕的獨立元素。

由于這個產品內容色彩豐富,黑色浮動操作按鈕與鮮明的顏色形成強烈的對比,使其更加醒目。

 

灰色調面板最適合突出圖片和文字。

 

 

品牌

品牌可以使用顏色來增強其表現力??稍谥匾獣r刻使用品牌色,通過多種方式使之與特定操作或信息相關聯。

品牌色的應用可以大膽強烈,也可以細微復雜,或介于兩者間。品牌對色彩獨特的運用方式應反映在app中。

 

顏色的大膽用法

那些希望傳達能量和興奮感的品牌通常會大膽地使用顏色。它們的app在保證內容可讀性和可用性的同時,也應反映出同樣的效果。

 

即使是色彩樸素的品牌,也能以大膽、歡快的方式使用顏色。

 

啟動頁

啟動頁是大膽用色的好時機。

 

新手上路

在引導新用戶期間使用顏色,可以將內容與品牌關聯起來。

 

功能發現

通過使用顏色來引導用戶的關注焦點可以突出新功能,確保用戶能夠注意到。

 

顏色的含蓄用法

品牌可以用含蓄的方式使用顏色,不管那是否意味著傳達復雜性,突出內容,或者以其他方式匹配內容。當含蓄地使用顏色時,也應確保交互區域和狀態變化保持清晰可見。

 

通過將品牌色植入到占位符加載、進度條顯示或者狀態改變表達等時刻中,可巧妙地維持品牌的展示。

 

占位符UI

占位符UI在內容載入時出現。在這兒加入品牌色可讓用戶意識到,即使在加載時他們也仍處于這個應用程序中。

 

進度條

進度條是融合品牌色的一個不明顯但很有效的地方,它們將應用程序的功能與品牌緊緊地聯系在了一起。

 

狀態變化

狀態變化可微妙地加強品牌展示。

 

意義

顏色可以表達出不同UI元素的意義。例如,天氣app可以通過不同的顏色來表明當前天氣狀況,導航app可以通過將道路顯示為紅色或者綠色來表明交通狀況。

 

一致性和場景

顏色在一個產品中應該被一致地使用,即使場景發生變化,同樣的顏色也應代表類似的事件。同時也應當注意顏色在當地文化中的意義。例如,警告在一些風俗中通常用紅色表示,但有些地方并不一樣。

 

 

狀態

顏色可以提供應用程序及其組件和元素相關的狀態信息。包括:

  1. 元素和組件的當前狀態,例如按鈕是否可用
  2. 應用程序、組件以及元素的狀態變化

由于細微的顏色變化可能會被忽視,所以指示狀態改變的顏色應該是明顯的。最好用多種方式來表示狀態的改變,例如顯示一個圖標或者移動一個元素。

 

表明交互

為突出一個特定的交互,可在用戶已經完成的交互內容上使用強烈的對比顏色,而相對未操作的內容則無變化。

 

表明選擇

要突出已選的元素,請在這些元素上使用對比強烈的顏色。

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Color usage 顏色用法

登錄收藏
 
你可能喜歡的:
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
設計驅動案例-如何優化金融產品購買體驗?設計驅動案例-如何優化金融產品購買體驗?
Material Design Gestures 手勢Material Design Gestures 手勢
設計沉思錄丨如何利用場景化設計提升用戶決策效率設計沉思錄丨如何利用場景化設計提升用戶決策效率
用灰色文本字段來拯救你的注冊表單設計用灰色文本字段來拯救你的注冊表單設計
1套流程,帶你看遍1000萬個產品設計的從0到11套流程,帶你看遍1000萬個產品設計的從0到1
聊聊加載等待的那些事之“進度指示器“(落地篇)聊聊加載等待的那些事之“進度指示器“(落地篇)
?
街机捕鱼城金库券