文章摘要： 這些 icon 就只能重新設計夜間模式的樣子一、如何設計出舒適的夜間模式 1. 背景
大家都知道，設計一定沒有單純的「感性的設計」與「理性的設計」。
多年以前，我在一本書中讀到過這麼一段對於繪畫和設計異同的描述：「繪畫是主觀的，設計是客觀的。繪畫是繪畫者對自身情感的表達與宣洩，為的是取悅自己。而設計是設計師最大限度摒除自我見識所帶來的障礙，為的是取悅大眾。」
雖然這個分類方法還是顯得簡單粗暴了些，但是大體上我深以為然。
下面會講到的是我以前接手過的一個專案——設計 app 的「夜間模式」。在這個專案中，爲了能夠達到使用者觀看的最佳舒適度，不斷的除錯試驗，其中也融入了一些方法，算是在感性設計基礎上，多了一些理性的考量。
下文我會從兩大塊進行說明：設計+實現。
一、如何設計出舒適的夜間模式
1. 背景：為何要做夜間模式
我們的 app 受眾以低齡學生為主，工作日內，低齡學生使用者需要早起上學，受此影響，他們習慣在早上的吃飯或上學途中、課間或午休，利用碎片化時間閱讀漫畫。
他們也習慣在睡前和熄燈後，把白天沒看完的漫畫讀完，此時是使用較為集中的時間段，因此他們對夜間閱讀功能有一定需求，目前的白天版本在夜晚看來實在太過閃耀了。
2.設計目標
提高夜間使用 app 的舒適度。
3. 設計思考
確定設計目標以後，接下來就要先捋一捋可能會面臨的各種問題。介面中，包含了圖片、文字、圖示、背景色、分割線等，我們首要確定的是背景色值，因為它決定了夜晚模式的基調。那麼背景色值又與什麼相關聯呢？我會按照下圖順序一個個的來解答。
4. 背景色之亮度思考
先說說亮度，亮度其實可以被測量，也有相對應的單位。（此處有參考 qq 夜間模式）
我們常用來描述光的物理量有4個：發光強度/光通量/光照度/亮度。
這最後一項「亮度」正是我們想要的。亮度是指物體明暗的程度，定義是單位面積的發光強度，它的單位是 nit（尼特）；1nit=1 cd/m²。
上圖是人眼細胞的一些特性，劃橫線處可以看出，主要負責夜晚視覺的桿狀細胞，作用範圍是0.034cd/m²。
結論：夜晚，我們最終的螢幕亮度應該保證在0.034cd/m²左右是較為合適的。
（題外話：有種東西叫亮度測試儀，可以測量亮度。）
5. 背景色之彩度思考
夜晚中，我們對圖片中顏色的判斷會有誤差，如下圖，單看右邊圖中的色彩，很難猜到其真實的色彩；因為在夜晚，主要是我們人眼的桿狀細胞起作用。
官方解釋：桿狀細胞主要負責夜晚及周邊視覺。相較於錐狀細胞，桿狀細胞對光更為敏感，較容易看到微弱的亮光，因此在極低的照度下，人眼僅依賴桿狀細胞，稱為暗視覺，其無法分辨顏色，故所有表面看起來僅有灰階明暗的差異；人眼約有一億兩千萬個桿狀細胞，僅存在於視網膜的周邊，因該處缺乏錐狀細胞，以致我們對視野的周邊部份有辨色上的困難。桿狀細胞的損傷則導致夜盲。
通俗一點解釋：人眼在夜間可辨識出的顏色種類較少，所以不用和白天一樣使用繽紛的色彩表現；還有一點需要注意，晚上長時間注視著高飽和度的色彩，會覺得刺眼，舒適度不夠。
結論：夜晚，應使用低彩度的色彩、且儘量減少顏色的種類。
除了低彩度，還有另一個問題也值得注意：不同色相下的暗色系需要保持相對的視覺亮度均衡。
下圖中的暗色系，通過亮度公式，換算成灰色系之後，亮度上還是會稍有差異，在實際取色中要注意均衡這一點，保證視覺舒適度。（亮度公式：0.299*R + 0.587*G + 0.114*B=y）
6. 背景色之護眼模式
在夜間，通常情況下，我們面對螢幕的距離會比白天更近，在長時間近距離的注視下，對眼睛傷害比白天更大。使得我們眼睛造成傷害的就是 HEV 藍光，當然，藍光對人眼造成的傷害程度取決於很多原因，包括螢幕的技術、螢幕大小、螢幕亮度、色溫和使用者臉部的距離和持續的時間。
下圖中可以看出，各大手機廠商的護眼模式，通過降低亮度，藍光得到有效控制；而藍黃是一對互補色，如果想從色溫上降低藍色，黃色自然會增強。
題外話：如果我們將「藍光下降比-亮度下降比」的值近似看成在亮度條件一樣的情況下藍光的減少量，那麼除了蘋果（超過60%）之外其餘7款手機的藍光量只下降了25%左右，給蘋果鼓掌。
結論：在硬體與時間不能更改的情況下，通過前面提到的降低亮度和調整螢幕色溫也能降低 hev 藍光對眼睛的傷害。
小結：夜晚，背景色應該選擇低彩度、色相偏黃、亮度值在0.034-34之間。
根據以上結論，選出了夜間模式的背景色#1A1714。
7. 對比色的處理
背景色確立之後，需要注意的有兩點：
背景色/文字/圖片的區分處理
如下圖，在夜晚長時間觀看的情況下，左邊一組「圖片/文字/輔助文字」的組合比右邊來的舒適；由此可得出，在夜間，對比度不需要太過明顯，需要柔和一些，視覺舒適度會更高；否則對比會太明顯，文字或過亮或過暗。
多機型驗證
有了上述的大致思路以後，就是進行海量的機型測試了；經過一段時間真實晚上場景的測試，以及對熱門且夜晚模式舒適度較高的 app 做了研究，我得出：
- 文字與背景對比度—3:1～5:1
- 圖片色與背景對比度—4:1～6.5:1
下圖是夜間模式的部分設計稿：
（對比度可通過軟體 Colour Contrast Analyser 測出）
下面是我挑選了幾個肉眼看上去舒適度高的 app，對它們的夜間模式做了些研究，看看是否符合我以上的研究，結果如下：基本也與我擬訂的範圍貼合度很高。（y 表示的是總亮度）
二、如何把設計稿實現出來
思考實現這部分的時候，有很多的疑問。整個 app 的頁面太多，我要全部做出來，再給開發標註嗎？icon 如何處理，我需要重新制作一份夜間模式的 icon 嗎？夜間模式和換膚其實很像，可不可以複用呢？如何做到把設計和開發投入產出比最大化呢？
下面就一一來講解，我將這部分分為三塊來說明：文字+圖片+icon。
1. 文字
面對的問題：頁面太多，無法針對每個頁面做視覺稿。
解決方案：找出共性，歸納白天文字色，針對每個色值給出對應的夜間色值；根據前面的分析，夜間模式的對比度是不需要做明顯區分的，所以我把以下5種文字色，縮減成2種帶透明度的白色：45%、30%。輔助文字色的選取注意上面說的視覺平衡，可以用亮度公式來判斷。
方案延展：我為什麼選用了帶透明度的白色呢？因為夜間模式其實也是一種換膚，那這個方案是否可以為以後的換膚做準備呢？最後我把分割線與文字色由純色變成帶透明度的色值，這麼做能適配任意色值背景（除淺色背景下），為後續換膚打基礎（全域性背景&彈框背景除外）。
按照以上的規律，把白天的文字色做減法，歸納為以下的表格；只要把這個表格給到開發，讓他們按照表格去實施，就能夠完美的實現夜間模式的文字替換了。
2. 圖片
圖片變暗的方式有兩種，各有優缺點，但可以解決大部分的圖片變暗問題。
方法一：圖片處於頂層，背景設定為黑色，改變圖片透明度，達到圖片視覺變暗的效果。
存在的問題：圖片變透明以後，可能會露出底層的某些隱藏控制元件。
結論：可以小面積使用
方法二：圖片處於底層，上面覆蓋一層黑色透明層，達到圖片視覺變暗的效果。
存在的問題：開發的實現方法在這裏就不細說了，但這兩種實現方法會稍有記憶體開銷，且對 gif 圖不適用。
結論：目前來說比較合適的方案，可以使用。
3. icon
Icon 的表現形式比較的多樣化，但還是有規律可循，我把 icon 分為三種：單色、非單色、特殊位置。
單色icon
問題：這麼多 icon？難道我要重新畫一遍，切圖給開發嗎？
答案：肯定不用。我先統一收攏了 icon 的顏色種類，只留下品牌色、正常裝飾色、不可點選色，分別對這三種給出相應的色值，再配合一段程式碼即可；這樣為以後的換膚做準備，不同的面板顏色，只需要瀟灑的給開發一個顏色值即可得到以下的效果。
非單色icon
非單色的 icon 是指包含兩種及兩種以上的顏色值的 icon，此類 icon 可以參考圖片的實現方式即可。
特殊位置的icon
有些部分的 icon 是不能用程式碼實現變暗的，比如下圖中的頭像旁邊的「VIP身份標識」，這些 icon 就只能重新設計夜間模式的樣子，切圖給開發。
總結
我們來回顧一下上面說的夜間模式整體過程是什麼？
希望每一個設計的背後，都有可以支援的理論依據，不純是主觀臆想，我們也正在這條道路上慢慢摸索，以上有不正確的地方，歡迎指正。
歡迎關注「TCD設計中心」公眾號：
「值得學習的實戰案例」
http://www.buzzfunnews.com/20180827263.html
每日頭條即時更新，請上：http://www.buzzfunnews.com
沒有留言:
張貼留言