近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域，那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門：畫出有程式邏輯的設計稿 中關於近幾年相當流行的「深色模式」。
課程相關資訊
[連結]：https://courses.hexschool.com/courses/724307/lectures/13039066
本篇範圍：Chapter 8 ( 原子設計第五階段：頁面 ) ，一共有 13 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 近年來受歡迎的原因在於：能減輕眼睛的疲勞、在 OLED 螢幕上能減緩電力的消耗
2. 雖說是深色模式，但會使用「深灰色」背景。除了能減輕眼睛負擔外，還能表現如「元件陰影」的狀態
3. Elevation 平面高度，在深色模式下，是以「越靠近使用者的 Z 軸」越亮。這個效果是以「透明度疊加」的方式來呈現
4. 深色模式的客製背景色：主要色調整為 8%，再進行疊加。客製後的顏色和文字間的對比度，要大於 15.8:1
5. 深色模式要選擇較為不飽和的
6. 亮色模式主要色調飽和度會落在 900 ~ 500；深色模式則會在 400 以下
7. 關於「錯誤色彩」 – 建議可以亮色模式的錯誤色，疊加 40% 的白色
8. 文字強調，可以用白色的透明度調整來區別
