1. 總覽
在 2019 年 Google I/O 大會上，Material Design 推出深色主題設計指南，協助您打造與現有產品 Material Design 主題相輔相成的深色主題。淺色主題很適合長時間閱讀，且對比度較高，方便閱讀；深色主題的亮度較低，在黑暗環境中較安全，且可減輕眼睛疲勞。
在 Material Design 中，深色主題是預設淺色主題的補充模式，透過細緻且適合夜間的呈現方式，維持應用程式的獨特風格 (包括顏色、形狀、類型和高度的樣式)。
在本設計實驗室中，我們將逐步說明如何使用其中一項 Material Studies，根據現有的 Material 主題建立深色主題。
我們將與 Reply 合作，這款電子郵件應用程式的設計宗旨是清楚、易讀、直覺且易於使用。我們會瞭解 Reply 的身分，並謹慎做出決策，在應用程式中保留品牌元素，同時設計出在深色模式下仍舒適的主題。
我們也會進一步推動主題，並使用基本深色主題以外的自訂介面顏色，重新強調 Reply 的獨特風格。
所需教材：
2. 收集必要檔案
開始前，請先下載 Figma 範本檔案。這個檔案包含設計實驗室所需的所有內容。
- 下載 DarkTheme DesignLab Kit.fig (7.6MB)
3. 設定環境
接下來，您需要設定設計環境。
首先，登入 Figma 或建立帳戶。
登入後，請匯入您在先前步驟中下載的檔案。如要匯入檔案，請在 Figma 檔案畫面左上角找到「匯入檔案」圖示，然後在「下載」資料夾中找出檔案。
請花點時間瀏覽這個檔案。其中包含淺色主題、根據應用程式品牌預先建構的色調調色盤，以及我們將建立的最終深色主題副本。
- 在另一個分頁中，開啟「深色主題的 Material Design 指南」。我們會在設計實驗室中參照這些準則。
4. 瞭解產品的 ID
開始為 Reply 製作深色主題前，請先瞭解 Reply 的一些品牌特徵。這有助於我們根據主題做出明智選擇，確保淺色和深色主題都能一致呈現 Reply 的身分和品牌。
Reply 的品牌強調溝通。應用程式優先考量功能品質，相較於沒有功能用途的設計元素，更重視易用性。
在本設計實驗室中，Reply 最重要的品牌表現元素是顏色、字體和形狀。
顏色
Reply 的色彩主題採用深藍灰色主色，搭配橘黃色次要顏色。
由於很少使用次要顏色，Reply 的 UI 通常是單色，使用主要顏色的變化版本。這個細緻的色彩主題可讓使用者輕鬆閱讀內容，不會受到干擾，也能清楚看到相片大頭貼。
因此，Reply 的次要顏色在應用程式中會發揮極大的影響力，強調重要動作，並清楚標示品牌時刻。
類型
Reply 應用程式著重於文字內容和效率，因此字體和排版是呈現品牌形象的關鍵。應用程式的完整字體比例採用 Work Sans，並使用各種樣式，包含六種粗細的 Work Sans：Light、Regular、Medium、SemiBold 和 Bold。
以 Work Sans 建立完整型別比例，可讓 Reply 的排版保持一致、可預測，同時自然易讀。
根據 Work Sans 設計師 Wei Huang 的說法，這個字型系列已針對螢幕使用進行最佳化調整。因此非常適合用來有效率地朗讀電子郵件或其他內容中的文字段落。由於早期 Grotesque 字體形式的基礎較為寬鬆，因此這款字體的美感更友善、更貼近人性，而較寬的字距則能讓閱讀體驗更流暢。
圖案
回覆的形狀故事十分細膩，將圓潤和銳利的元件配對，不僅強化電子郵件清單的效率和功能性，也為重要動作和較大的元件帶來柔和感。
- 小型元件
- 中型元件
- 大型元件
按鈕和懸浮動作按鈕等小型元件會完全呈現圓角，而電子郵件卡片和底部應用程式列等中型元件則會完全呈現方角。帳戶切換器和底部功能表等大型元件的邊角略微圓弧。
這些形狀組合可加深使用者對應用程式中所在位置的瞭解，以及每個元件的設計方式，以及與介面其餘部分的關係。
5. 使用色彩
瞭解顏色與 Reply 預設淺色主題的品牌表現之間的關係後，我們就能根據這些資訊調整調色盤，打造實用且富有表現力的深色主題。
在 Material Design 中，色彩系統是以色調調色盤為基礎。這些調色盤會使用品牌顏色建立一組和諧的變體，並整合至應用程式的完整色彩系統，確保樣式和可讀性。
在 Figma 檔案中，您可以看到 Reply 的主要和次要色調調色盤。每個調色盤上方的淺色箭頭表示 Reply 淺色主題中使用的值，深色箭頭則表示深色主題中使用的變體。
使用 Material 製作深色主題時，系統會選擇較淺的變體，讓色彩系統維持表現力，並保持適當對比度，避免眼睛疲勞。飽和度較高的顏色搭配深色背景時，往往會產生視覺上的「震動」效果，導致難以閱讀。淺色調也提供更多彈性，可變化高架表面的顏色，我們稍後會介紹這點。
6. 調整表面顏色
我們已掌握 Reply 的色調調色盤，以及要在深色主題中使用的顏色，現在可以開始調整模擬中的顏色值。
在 Material 深色主題中，介面的最底層通常是十六進位值為 #121212 的深灰色。
- 在 Figma 檔案中，找出名為「Reply Starter」的工作區域，然後選取名為「Background」的圖層。
- 在畫面右側的檢查器面板中，找出「填滿」下方的顏色值，將其設為 121212，然後按下 Return 鍵。
- 畫布應如下所示：
在 Reply 的單色收件匣檢視畫面中，電子郵件資訊卡的顏色比背景稍淺，因此我們應對深色主題中的資訊卡採用相同處理方式，以維持收件匣的視覺階層。
- 在同一個畫板上，展開名為「Email cards」的群組，然後選取所有名為「Email card.」的圖層。
- 與先前一樣，在檢查器面板中選取「填滿」值。將值設為 121212，然後按下 Return 鍵。
- 現在，請只選取名為「Email card overlay」的圖層。這些圖層可讓我們建立疊加層，區分電子郵件資訊卡和背景。
- 為圖層提供「填滿」，並將不透明度設為 2%，顏色則設為 FFFFFF。
現在電子郵件卡片已變暗，文字變得難以辨識。接下來，我們將處理文字顏色。
7. 調整文字顏色
如要瞭解深色主題中的文字顏色，請務必先瞭解如何在更廣泛的 Material Design 系統中將顏色套用至文字。
Material Design 元件定義了「上方」顏色，之所以稱為「上方」顏色，是因為這些顏色會顯示在元件和主要表面「上方」，而這些元件和表面會使用主要、次要、表面、背景或錯誤顏色。「上層」顏色主要用於文字，確保文字在這些介面上仍清晰可讀。
Material 的預設「on」顏色為白色 (#FFFFFF) 和黑色 (#000000)。由於黑色或深色的「上方」顏色不適合用於變暗的表面，因此我們會使用白色。
使用這個「on」顏色建立文字階層的系統很簡單。高強調文字的不透明度為 87%，中強調文字的不透明度為 60%，已停用文字的不透明度則為 38%。
高優先順序文字並非純白色，因為如步驟 5 所述，#FFFFFF 這個亮色在深色背景上會產生視覺「震動」效果。此外，在深色背景上使用純 #FFFFFF 文字可能會影響可讀性，因為文字的光線在深色背景上會出現溢色或模糊現象。
瞭解上述所有內容後，我們來修正深色主題中的文字顏色。
- 範本版面配置中的所有文字都已分組，方便存取。找出名為「收件匣文字」的群組，然後展開該群組，查看所有組成圖層。
- 選取所有以「Hi -」開頭的圖層。這些都是版面配置中強調的文字。
- 在檢查器面板中，將「填滿」設為「FFFFFF」，並將不透明度設為 87%。
- 返回「Inbox text」群組，選取所有以「Med -」為首的圖層。
- 在檢查器面板中，將「填滿」設為「FFFFFF」，並將不透明度設為「60%」。
8. 調整元件顏色
在以 Material Design 建構的深色主題中，高架表面和元件會使用疊加效果著色。表面越高，疊加效果就越強烈明亮。如果背景太暗而無法呈現深色陰影，這就是傳達高度和階層的方式。
底部應用程式列
對於「回覆」的底部應用程式列 (高於其餘收件匣 UI)，我們會套用細微的重疊效果。
- 在圖層清單中找到「Bottom app bar」群組，然後展開，即可查看組成該群組的圖層。
- 在該群組中找出名為「Surface」的圖層，並將「Fill」值設為「121212」。
- 找出上方名為「Surface overlay」的圖層，並將「Fill」值設為「FFFFFF」，不透明度則設為「12%」。
懸浮動作按鈕
接著，我們要將新顏色套用至 FAB。如要這麼做，請返回先前查看的色調調色盤，並取得 Reply 次要顏色的 700 值。
如果應用程式中有小型但影響重大的元件，只要與底色維持適當對比度，您也可以選擇飽和度稍高的顏色。我們會在後續步驟中探討這個選項。
- 在圖層清單中找到名為「FAB」的群組，然後展開該群組，查看其組成部分。
- 找到並選取「Surface」圖層。將填滿顏色設為 FCC13B。
已選取的卡片
您可能會發現，在「回覆」收件匣中，所選電子郵件資訊卡的角落也會顯示相同的醒目橘黃色。這是另一個強烈的品牌時刻，但無法清楚地融入元件、介面或文字。
在這種情況下，最好從次要變體顏色 (在本例中為 #FFFBE6) 開始，然後往回尋找適當的表達方式，同時不會干擾回覆的實用美學。「回覆」按鈕可以沿用一般的次要變體。
- 選取名為「Earmark」的圖層，並將「Fill」設為「FFF5A0」。
9. 進階功能：自訂介面
如先前所述，Reply 中的懸浮動作按鈕 (或 FAB) 是高度強調的元件，也代表應用程式中強烈的品牌時刻。因此，我們可能會決定使用 Reply 的原始次要顏色，在 Reply 的深色主題中維持其顏色表達方式。
- 在圖層清單中找到名為「FAB」的群組，然後展開該群組，查看其組成部分。
- 找到並選取「Surface」圖層。將填滿顏色設回 F9AA33。
我們可能也想將「Reply」的原色設為底部應用程式列和電子郵件資訊卡的自訂途徑顏色。如要達成這個目標，我們只需要變更疊加層，使用我們參考的色調調色盤中指出的深色主要顏色即可。
- 在圖層清單中找到「Bottom app bar」群組，然後展開，即可查看組成該群組的圖層。
- 找出名為「Surface overlay」的圖層，並將新的「Fill」值設為「344955」，不透明度則設為「48%」。這樣一來，品牌色彩會更鮮明，同時維持足夠的對比度。
- 在圖層清單中找出名為「Email card overlay」的圖層，然後選取所有這類圖層。
- 將「填滿」設為「ADC0CB」，不透明度為 4%。
10. 總結
在 Material 中，深色主題是經過深思熟慮的設計，可做為淺色主題中產品獨特特徵的延伸。您剛才簡單調整了顏色和傳達高度的方式，就成功建立第一個 Material Design 深色主題。恭喜！
請將本設計實驗室中的步驟視為架構，瞭解及定義自家產品的深色主題，並隨時將品牌和產品的屬性和目標銘記在心。
如需更多深色主題指南，請參閱深色主題的 Material Design 規格。
如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。
更多設計內容和教學課程即將在 Google Design YouTube 頻道上線，敬請期待！