本文轉載： 關於APP黑暗模式的設計探索
前不久蘋果發佈會IOS13系統和大家見面了，其中的黑暗模式是一項比較大功能性更新，黑暗模式倒也並不是什麼新奇的功能，國內的很多APP早就進行了開發，包括一些國產手機廠商也做了類似了夜間模式或是護眼模式。
目前公司產品要適配IOS13,計劃把黑暗模式加入到產品中，故現在簡單瞭解一下app的黑暗模式設計與實現。
一、黑暗模式的由來和作用
最早應該是智能手機的普及大大延遲了人們的睡眠時間，大家都習慣晚上躺在被窩裏看一會手機才能睡着，但是關了燈之後手機屏幕的亮度就會特別刺眼，由於絕大多數APP頁面背景色都是淺色系，與周圍環境的亮度對比比較大，導致手機屏幕和白天一樣的亮度就會感覺十分刺眼，所以一些產品開始開發了黑暗模式。
黑暗模式的主要作用就是爲了讓用戶在環境亮度比較暗的時候能夠舒適的使用產品，避免由於刺眼、視覺疲勞等問題暫時放棄使用產品，在一定程度上是爲了延長用戶使用的時間。這裏有一點要注意的是刺眼程度並不是由手機屏幕的亮度決定的，而是由手機屏幕亮度和周圍環境亮度的差值大小決定的。
二、黑暗模式的切換方式
在夜間通常情況下，我們面對屏幕的距離會比白天更近，在長時間近距離的注視，對眼睛傷害比白天更大。所以睡前使用頻率較高的app，會開發夜間模式，如閱讀類、資訊類、音樂類及瀏覽器等。
1.列表切換方式；例如：簡書列表切換、QQ音樂主題選擇。
2.按鈕切換方式；例如：導航按鈕、側邊欄底部標籤按鈕、內容詳情標籤按鈕。
3.宮格切換方式；例如：我的頁宮格按鈕、下拉彈窗宮格按鈕。
4.自動切換方式；例如：UC瀏覽器、微博；
自動切換模式是更加人性化的一種體驗方式，APP會設置一個默認時間段（多爲夜間十點到次日早晨六點），在固定時間段內，也可以根據APP的使用場景自定義夜間模式的時間段；開啓後會自動進入夜間模式；
三、常見的兩種黑暗模式設計方式
總結了手機上的一些有夜間模式的APP後我發現黑暗模式的設計從簡單到複雜大致有下面幾種：
1）在所有頁面上加一層黑色半透明的蒙版，例如今日頭條、微博、百度、虎嗅、等等；
這種方式的體驗實在談不上優秀，感覺有一些偷懶的嫌疑。但是這種方式的好處同樣存在，就是實現起來比較簡單，不知道是不是由於產品內容數量太大，圖片展示多的原因導致頭條不得不採用這種方式;
2）改變背景色色值和文字色值，例如夸克瀏覽器、網易新聞、網易雲音樂、糗事百科、QQ等等；
這種方式一般是把頁面中最大的光源調整成爲和環境接近的顏色，通過降低亮度差值的方式降低刺眼度。這種方式的設計成本比第一種要大，需要針對夜間模式的頁面進行顏色、字體、icon等方面的定義，當用戶開啓夜間模式時，調用夜間模式的UI界面；開發和適配的難度增大，實現成本高，並且後期版本迭代的時候都需要進行研發和維護，小型研發團隊負擔很重。
QQ對於黑暗模式的設計就更加細緻一些，除了背景色、文字顏色、圖片之外對底部的標籤欄也有黑暗化設計，並且這種設計也不是簡簡單單的修改顏色，而是做了更加細節的場景化設計。
四、黑暗模式是如何實現的？
原理我們都懂了，那麼在具體場景下黑暗模式是如果實現的呢？這裏不同的元素實現方式有些區別。
1）文字和背景色只需要設置好兩個不同的色值，通過打開和關閉夜間模式的按鈕進行觸發修改就能實現；
2）複雜一些的按鈕和圖標需要預先設計好兩個場景所需的文件，同樣在打開和關閉夜間模式的按鈕時進行替換按鈕圖片即可；
3）如果使用的是一些特殊格式的圖片(文字圖片)可以通過代碼來控制圖片的顏色達到實現的目的；
4）對正常格式的圖片進行處理是最麻煩的，圖片在黑暗模式下會變暗，這種變暗有兩種實現方法，第一種和今日頭條的實現方法類似，就是在圖片上增加一層黑色半透明的蒙層來實現變暗，第二種是把圖片置於頂層在底部放一個黑色色塊，通過調整圖片的透明度來實現變暗，兩種方法效果差別大。
五、對黑暗模式設計要點的總結
最後總結一下設計黑暗模式時的步驟：確定背景色、確定文字色、確定圖標、確定圖片。