2017 Material design 第三章第一節《顏色》

時間 2019-11-29

標籤 material design 第三一節顏色简体版

原文原文鏈接

第三章節《樣式》

1、顏色（Color）

Material Design的色彩受大膽活潑的色調啓發，並配合柔和的環境，陰影和高光組成。css

顏色工具（Color Tool）

顏色工具能夠幫助你在UI中建立、分享和使用調色板，以及測試不一樣顏色組合的可訪問（accessibility）級別。html

建立配色方案
建立配色方案，其中包括主、次色較暗和較亮的配色版本。java

測試可訪問性
檢查在不一樣顏色背景下文本的易讀程度，以 web內容可訪問性指南的易讀性標準來評定。android

在顏色中預覽UI
經過Codepen中的可編輯 html、css 或 javas cript，並結合Material Design中的組件佈局來預覽配色方案。web

Color Tool（Create color palettes for your UI and test color accessibility）express

調色板（Color palette）

調色板包括主色（Primary color）、強調色（Accent color）。調色板能夠用於插畫或品牌顏色。它可以幫助你配合其餘人的工做。調色板以主色爲基準，經過填充spectrum（光譜）造成一套完整可用的顏色。Google建議用「500」做爲主色，其它的顏色做爲強調色。api

經過統一色調、陰影和透明度可以讓應用看起來更統一。ide

下載色板 0.02MB（.zip）工具

顏色系統（Color system）

選擇一個配色方案
你的應用能夠根據相應的品牌特性去自定義一個合適的配色方案。或者，你也可使用material design的調色板建立整個新的配色方案。佈局

建立配色方案時：

使用顏色工具建立的色板應用到你的應用中去
確保應用中的元素之間有足夠的對比區分（應用需符合可訪問性標準）

Expressing Brand in Material（A step-by-step guide to staying on-brand with Material Design）

Material Design的顏色系統
在Material Design中，主色是應用中最經常使用的顏色。輔助色則是爲了凸顯應用中的部分UI。

能夠選擇或能夠不選擇使用Material Design調色板中的顏色。

主色（Primary color）
主色是應用中界面和組件使用最頻繁的顏色。若是頁面中沒有輔助色存在，那麼主色也可用於強調元素。

若是須要建立元素之間的對比，可使用主色的更淺或更深的色調版本。更淺和更深色調間的對比有助於區分面與面之間的關係，例如狀態欄和工具欄之間的區分。

輔助色（Secondary color）
輔助色通常用於突出UI中的某些元素。輔助色能夠是你主色的互補色或與主色相近的顏色，但不能夠是你主色的更淺或更深的顏色。輔助色與周邊元素顏色必須造成對比，它做爲強調元素之用必須謹慎使用。

輔助色最好用於：

按鈕，浮動按鈕和文本按鈕
文本字段，光標和文本選擇
進度條
選擇控件，按鈕和滑塊
連接
標題（Headlines）

若是你使用主色的「變種」顏色（如比主色更淺或更深的色調）做爲強調元素之用，那麼能夠不使用輔助色去突出元素。也就是說，是否使用輔助色關鍵看你本身的須要。

輔助色不是說必定要是顏色很是鮮豔的。只要那個顏色能與周邊元素顏色造成對比，那麼它就能夠成爲輔助色。注意：須要謹慎使用輔助色來突出UI元素

在你的應用中使用顏色
主色用於大面積的UI及元素。輔助色可用於突顯小面積的UI。若是沒有輔助色的話，你可使用主色代替。

使用主色突顯元素，例如突顯按鈕或複選框。

不多出現的元素（例如警告）不要使用主色，應與其餘元素區分開。

輔助色和用於突顯UI元素的任何東西都須要謹慎對待和使用。

可行

不可行

關於顏色在字體排版易讀性方面的指導請看顏色工具。

可行

可行

可行

不可行

可行

可行

可行

備用的輔助色
若是你的輔助色相對於背景色太深或者太淺，與背景顏色造成了太過於強烈的對比，默認的作法是選擇一個相對這個顏色更淺或者更深的顏色做爲備用色。

可行

不可行

可用性

層級
層次結構指的是根據不一樣層級的重要性對內容進行組織。合理利用顏色能夠向用戶表達哪些內容是重要的，哪些內容相對沒那麼重要。

例如，在無色的背景上（黑或白），一個顏色鮮豔的按鈕會顯得很是突出。

意義
顏色可用於傳遞頁面中各類元素的含義。天氣應用可使用顏色來表示當前天氣的情況，而地圖應用可使用顏色來表示交通狀況（路況顏色爲紅色或綠色）。

狀態
顏色能夠提供如下信息：

元素的當前狀態, 如開啓或禁用按鈕
一個應用或元素的狀態變化

表示狀態變化的顏色應該是引人注目的，由於差別細微的顏色用戶可能注意不到。爲了確保用戶可以注意到狀態的變化，最好使用多種方式來表示狀態變化，例如使用icon或移動元素的位置。

對比
應用的主色和輔助色應確保元素之間的顏色擁有足夠的對比度，進而使全部用戶都能看到和能使用你的應用。

要了解有關顏色、對比度和可訪問性（無障礙）設計的詳細信息，請閱讀 Material Design的可訪問性/無障礙。

色盲用戶（紅綠色盲）也許只能看到左側UI。但他們可能看不出文本和其餘元素之間的區別。

考慮顏色的功能可見性（affordances）。站在更高層次來看待顏色，你須要使用顏色去向用戶傳遞信息。

http://otsjo7lsj.bkt.clouddn.com/42style_color_usability_cataracts_161116.png

對於患有白內障的個體來講，小文本閱讀起來很是困難，在他們眼中你的UI是模糊不清的。

爲適用於全部用戶，提供放大文本的設置。

背景中的文本
文本須要在其背景中突顯出來，所以建議：

暗灰色文本應用在淺色背景上
淺灰色文本應用在深色背景上

若是你的應用有淺色和深色主題，那麼文本的顏色就須要對應主題的顏色。

易讀性
文本在有色背景上需知足可訪問性標準保證文字的易於辨別。背景和文本必須使用顏色和不透明度，並遵循可訪問性標準。網站內容可訪問性指南（AA）要求普通文本要有4.5:1的對比度，大文本須要有3:1的對比度。

使用不透明度替代改變顏色可以建立更好的對比度和相對亮度。舉個例子，若是背景顏色是變爲洋紅色，那灰色（#727272）文本就會變得很難看清

可行

將顏色變爲灰色而不是下降黑色的對比度，這樣作會下降相對亮度並使用戶閱讀起來很是困難

不可行

深色文本在淺色背景上
文本背景是深色仍是淺色決定了文本自身的不透明度。對於淺色背景上的深色文本，使用以下不透明度：

最重要的文本使用87%不透明度
次級文本的可視等級較低，因此使用54%不透明度
文本提示（如文本字段和標籤）和禁用文本的可視等級更低，因此使用38%不透明度

深色文本（#000000）	不透明度
主色	87%
輔助色	54%
禁用文本，提示文本	38%
分隔線	12%

淺色文本在深色背景上
白色文本在有色背景上的不透明度須要是100%。

淺色文本（#FFFFFF）	不透明度
主色	100%
輔助色	70%
禁用文本，提示文本	50%
分隔線	12%

Icons和其餘元素
像icons這樣的元素得益於它在38%的不透明度上有一個黑色或白色的十六進制值(而不是一個特定的顏色)，因此它能夠運用在任何顏色的背景之上。

深色icons（#000000）	不透明度
被觸發icons	54%
未被觸發icons	38%

淺色icons（#FFFFFF）	不透明度
被觸發icons	100%
未被觸發icons	50%

有色的文本和背景
在有色背景上使用有色文本須要限制使用重要的文本元素。有色文本通常用於表示重要性和突出選擇。

請參考顏色工具肯定用於排版的某些前景色是否符合在不一樣顏色背景上的可訪問性標準。

可行

不可行

你可使用同一顏色的深或淺色色調去建立一個單色並用於其餘元素中。這個單色須要在視覺上看起來仍然很突出。

可行

應用了同一顏色不一樣色調的元素，若是元素之間對比不明顯就不要放在一塊兒，由於這樣很是難看清

不可行

主題

主題可以讓你的應用有一個統一的基調。主題規定了明暗，陰影和透明度，爲了提升應用間的一致性，提供兩種主題選擇：淺色和深色。

下載主題（1.23 MB(.ai)）

淺色主題
1.狀態欄
2.應用欄
3.背景
4.卡片/對話框

http://otsjo7lsj.bkt.clouddn.com/51style_color_themes_light1.png

淺色主題調色板

深色主題
1.狀態欄
2.應用欄
3.背景
4.卡片/對話框

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。