產品設計 深色模式的製作指南 Product Design: A Guide to Creating Dark Mode
隨著科技的進步和使用者對於視覺體驗的追求，深色模式（Dark Mode）已經成為現代產品設計中不可或缺的一部分！因此在新公司任職以來，一年多的時間已為公司的不同產品定義了兩套深色模式系統：B端類型產品、公司內部企業級 APP。而在經歷兩套產品的深色模式制定，對於製作上有一些心得及想法，將這些歷經的過程整理為幾個步驟，可以供其他也正在面臨製作深色模式的產品設計師一些參考！
With the advancements in technology and users’ pursuit of better visual experiences, Dark Mode has become an essential component in modern product design. Since joining my new company, I have spent over a year defining two sets of Dark Mode systems for different products, I have gained insights and ideas that I would like to share. I have organized the experiences into several steps that can serve as a reference for other product designers who are also facing the challenge of creating Dark Mode for their products.
第一步：認識產品 Understanding the Product
1–1. 認識這個產品的元件 Understanding the components of the product
你要改人家之前，應該要先知道對方長什麼樣子對吧？首先，你必須先對要製作的產品及頁面有一些基本的認識，了解這個產品提供哪些功能、用了什麼元件、應用色與品牌色為何、基本模板長什麼樣子…等等。因為當你越了解這個產品，越有助於接下來幾個步驟。
1–2. 選擇重要的畫面進行測試 Selecting key screens for testing
一個產品的畫面這麼多不可能每個畫面都做！因此你需要從這一堆畫面當中選幾個相對重要的內容來處理。基於你對這個產品的認識，可選擇約5–10個左右的畫面來進行測試。
1-3. 選擇依據：顏色數量、重點功能、元件應用、互動模式等 Choosing criteria: number of colors, key features, component application, interaction modes, etc.
因爲我們要處理的是深色模式，有幾個選擇依據可優先納入參考：像是多彩的狀態，當顏色一多時深色模式該如何處理？選擇的這幾張頁面有什麼重點功能？對這個產品有什麼影響？有沒有哪些常用的元件？另外我也會特別選一些彈窗、抽屜等元件進行測試。
第二步：資料蒐集 Refrence Collection
2-1. 找尋其他相關產品頁面，參考他們的顏色計畫 Seek out other relevant product pages and reference their color schemes.
認識完這個產品、選了幾個畫面後，接下來我會開始找資料閱讀。通常我會找這個產品相關的設計系統、相似的產品，參考他們的顏色計畫：在深色模式下，主色顏色的數值怎麼調整？
如我會閱讀Material Design的深色模式，參考他們的色票應用：像是他們顏色的選擇依據，主色（Primary Color）在深色模式中選擇原色數值200的色調（他的主色在淺色模式為700），並建議底色及文字用色需通過WCAG（網頁無障礙原則）的AA標準。
Material Design有提供一項選色數值的工具 Color Picker，輸入產品在淺色模式的主色數值，他會提供如下圖50–900的色號數值，也可以新增次要色（Secondary）測試：
當然工具只是一個輔佐，提供參考的選項協助完成產品的色彩計畫，最終還是需要依照產品本身的需求及受眾對顏色進行調整！
2–2. 分析什麼類型的元件會換色？顏色間的差異？層次層級？ Analyze which components will undergo color changes, the differences between colors, and the hierarchy of elements.
為了更了解深淺色模式可以如何定義，有沒有其他的使用規範，我會蒐集其他相關產品的深淺模式做比較。
如下圖，我截了iOS系統的深淺色畫面，以及其他相關產品如釘釘、飛書、微信等，將深淺色模式放在一起，使用吸管工具吸元件的使用色進行左右比對，了解這些產品中哪些元件在不同的模式下是否會換顏色？顏色間的差異是多少？
在截圖比較後，發現飛書的TabBar在深色模式下仍保有毛玻璃效果、微信和釘釘的文字是使用透明度、有些主要按鈕在身淺色模式下都不會改變….等，然後再思考自己的產品，可以怎麼處理。
2-3. 參考其他設計系統的深色模式、顏色使用說明 Refer to dark mode implementations and color usage guidelines from other design systems.
在蒐集資料的過程中，有些設計系統會特別標明這個顏色的使用規範：如命名、色號、使用場景等，這些說明有助於不論是設計師、工程師在深淺色模式的應用，覺得是一個非常貼心的功能！
第三步：實際應用 Actual Implementation
在了解這個產品、同時對深色模式有一些概念後，接下來就要用第一步時選擇的那幾個畫面開始做測試！在做深色模式的元件，我也有整理一些步驟可以和大家分享，或許可以減少實驗和測試的時間🤣
3–1. 從最底層的顏色往上做 Start from the bottom-level colors and work your way up.
底色（Background）👉表層（Surface）👉元件（Component）👉彈窗（Modal、Drawer）
在製作深色模式時，建議可從最底的層次先開始處理！因爲在深色模式中，越往上的圖層顏色會越淺，而比起顏色加深、將顏色變淺是相對容易的，如果一開始先做淺色的元件，可能會出現深色模式不夠深、或是顏色已經不能再深的囧境。
陰影在深色模式下起不了太大作用，因此在深色模式時我們將陰影移除、取而代之的是使用顏色將它們區分。而元件的製作也建議從最底層的部分開始做起，如按鈕就從底色開始選、表單也從底色開始製作。
另外，顏色變淺也有幾種方式可以試試：
- 純粹使用比上個層級還要再淺的顏色
- 使用透明度
3–2. 使用顏色輔助工具：符合最基礎的無障礙閱讀（AA） Use color accessibility tools to ensure compliance with basic readability standards (AA).
在做深色模式時彩度明度都會降低，而易讀性就是一個很常被考驗的地方。為確保產品在使用上仍能舒適閱讀，我會將使用的顏色做無障礙測試，其應用色須符合WCAG（網頁無障礙原則）的AA標準，其對比至少要有4.5:1的對比值。
網路上有很多無障礙顏色的檢測工具，你可以看見網站會顯示比對數值，以及在不同文字層級下是否有符合AA或AAA的級別標準。
我自己比較常用的：
3–3. 介面整體性：視覺和諧、重點呈現、品牌色 Consider the overall interface design: visual harmony, emphasis on key elements, and brand colors.
在進行顏色測試時，要時時留意整個介面和諧。像是有時候我在測試顏色時可能某些元件顏色會特別偏藍或紫，導致在瀏覽畫面時這些元件顯得突兀；或是有時候元件色彩處理的不好，可能就會看起來像Disable😅，因此不斷檢視畫面的和諧、元件合理性、是否有容易讓人誤會的用色等都有助於使用者更專注於流程，順利完成眼前任務。
當然也可以拉拉身邊的同事做簡單的測試或訪談，這對一直處在泥淖中的設計師會有很大的幫助！（人們總說旁觀者清嘛～～）
品牌色通常為這個產品的主色，也是整個畫面中最重要的功能。但如果品牌色與其他顏色都很搶眼的話，就需要留意其他用色的彩度或明度是否需要調整。
3–4. 製作的過程需要不斷與其他元件用色進行比較 Throughout the process, constantly compare the colors used with other components.
這個階段是整個過程最辛苦的，因為你不希望做出來的元件當他們組合在一起的時候混淆不清吧？所以當做出一些元件後，我會很常將它們組合再一起進行比較，發現問題時即時調整！
第四步：元件套用 Applying the Components
處理完挑選後的畫面後，確認顏色套用與元件沒有問題，就可以開始將深色模式使用在元件庫中！可以看到下圖iOS的元件庫，將淺色與深色版本的元件全部展示於畫面中，這樣的方式可以讓使用這份元件庫的設計師或工程師有一些概念做對照，我們也參照這樣的呈現方式於元件庫中。
產品會不斷產生新的問題與需求，當其他團隊夥伴需要使用這份元件庫時，需確保產品一致性原則，而不會在使用這份元件庫後延伸出另一種風格的產品。
好了！以上是製作兩套深色模式系統後整理出來的心得💦 但我想這樣的執行方法或許適合用在每個地方？在學習新的工具或流程都需要先對他有一定的認識、蒐集資料後開始測試製作，一步一步慢慢整理起來，或許這是做設計其中一種讓人沈浸的方式吧！不斷地創造、產出新的服務和新的產品！（雖然有時候要解決很多的問題XD）但哪個工作不是這樣呢～～
最後很謝謝看到這邊的你們，如果有什麼可以調整或做的更好的建議，或是從文章中獲得什麼幫助或想法，歡迎留言或是寄信給我！也希望這樣小小的整理可以協助更多設計師完成專案😆 一起加油吧！
