色彩樣式 - Material design 設計指南

色彩

設計師從當代建筑、路標、人行橫道以及運動場館中獲取靈感，由此引發出大膽的顏色表達激活了色彩，與單調乏味的周邊環境形成鮮明的對比，強調大膽的陰影和高光，引出意想不到且充滿活力的顏色。

  • 調色板
  • 配色方案
  • 文字和背景顏色
  • 主題

調色板

描述顏色常見有四種種方式：RGB、CMYK、HSB、HEX（16進制值）。

  • RGB：由紅-Red、綠-Green、藍-Blue三基色共同描述一個顏色。將三基色各劃分為256階，共計可以描述256256256=約1680萬種顏色。

    • 用途：常用于描述電子顯示其中的顏色。
    • 示例：如 rgb(0,0,225) 標示藍色

  • HSB：H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示亮度。 HSB模式對應的媒介是人眼。。飽和度為500的紅色值等于#F44336

  • CMYK：印刷四色模式是彩色印刷時采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂“全彩印刷”。

    • C：Cyan = 青色，又稱為天藍色或湛藍
    • M：Magenta = 品紅色，又稱為洋紅色
    • Y：Yellow = 黃色
    • K：Key Plate(blacK) = 定位套版色（黑色）

  • HEX（16進制值）：將RGB的10進制顏色數值轉換為16進制數值，常常被用在界面設計和程序開發上。

以下是谷歌官方提供的調色板，由以下圖可見，供選取了紅色、粉色、紫色、深紫色、靛藍色、藍色、淺藍色、青色、水鴨色、綠色、淺綠色、綠黃色、黃色、琥珀色、橙色、深橙色、棕色、灰色、藍灰色、黑白兩色，共計20類基礎色和16類強調色。

  • 基礎色：按照飽和度劃分為10個等級，谷歌建議將飽和度500的基礎色作為主調顏色。

  • 強調色：按照飽和度劃分為4個等級，以A開頭，如A100。

    Red & Pink & Purple Colors
    Deep Purple & Indigo & Blue Colors
    Light Blue & Cyan & Teal Colors
    Green & Light Green & Lime Colors
    Yellow & Amber & Orange Colors
    Deep Orange & Brwon & Grey Colors
    Blue Grey & Black & White Colors

下載調色板

配色方案

選擇一個調色板

這些調色板可以根據您的品牌來定義自己的調色板，例如單色，黑白，全色或中性，再或者您可以直接使用Material Design調色板。

注意：所有調色板應在不同UI元素之間包含足夠的對比度。

選取材料顏色
首先從選好的調色板中選擇三個不同飽和度的顏色作為基礎色，其中飽和度500的作為主調顏色。然后在其他調色板中選取一個飽和度A開頭的強調色，如A200 #68EFAD

基礎色-紫色 & 強調色-綠色
應用程序示例

基礎色和強調色該如何使用呢？

  • 基礎色（或主調色）：該顏色應該盡可能的應用在所有界面或組件中。
  • 合成色：該顏色被用來指示相關動作或信息。合成色可以是基礎色更暗或更淺的變體顏色。
（基礎色）合成色100 #C5CAE9
（強調色）合成色A100 #FF80AB

  • 強調色：該顏色被應用于浮動操作按鈕和交互式元素，例如：

    • 文本字段和游標
    • 文本選擇
    • 進度條
    • 選擇控件，按鈕和滑塊

    • 鏈接


      浮動操作按鈕 & 切換按鈕

以下是一些使用示例：

文本中的超鏈接
應用欄上的按鈕
狀態欄 & 應用欄 & 按鈕
聚焦狀態或選擇狀態的控件
  • 備選強調色：分為深色調和淺色調。如果您的強調色太淺或太暗，與背景顏色對比不夠明顯的話，改如何解決呢？

    • 使用更深或更淺的強調色。


      備選強調色示例

    • 使用基礎色的變體色
      使用基礎色在白色背景下的飽和度為500的顏色值作為備選強調顏色。
      但是，如果您的背景顏色已經是飽和度為500的基礎色顏色值，請將顏色設置為100％的白色或54％的黑色。

文本和背景顏色

文本可以用不同的不透明度顯示，以表達某些信息相對于其他信息的重要性。文本的不透明度級別取決于您的背景是更暗還是更淺。

淺色背景上的黑色文本

對于淺色背景上的黑色文本，應用以下不透明度級別：

  • 最重要的文本的不透明度為87％。
  • 次要文本（在視覺層次結構中較低）具有54％的不透明度。
  • 文本提示（如文本字段和標簽中的文本提示）和禁用文本的視覺突出性甚至更低，透明度為38％。
淺色背景上的黑色文本示例

黑色背景上的白色文本
表格中的值取決于黑色背景上的白色文本重要性的相對水平。出現在彩色背景上的白色文字應該以100％的不透明度顯示。

黑色背景上的白色文本示例

用不透明度替代灰色
透明的黑色或白色文本相對于背景顏色的變化保持清晰，活潑。這使得它比同樣上下文中的灰色文本更靈活。

不透明度替代灰色示例

圖標和其他元素
像白色或黑色圖標（而不是一個特定顏色）的元素可以在不透明度為38%的十六進制值上使用，使得它們在任何顏色的背景上表現良好。

圖標和其他元素不透明度參數

主題

主題可以讓您的應用程序擁有一致的意境。主題指定表面的暗度，陰影的水平和墨水元素適當的不透明度。為了提高應用程序之間的一致性，可以選擇淺色和深色主題。

淺色調主題

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

暗色調主題

  1. 狀態欄
  2. 應用欄
  3. 背景
  4. 卡片/對話框
暗色調主題配色
暗色調主題示例
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容