騰訊ISUX-花咯：你有沒有在夜間使用移動設(shè)備的習(xí)慣？你覺得QQ現(xiàn)有的夜間模式亮度在使用時是否舒適？為了能夠更科學(xué)的驗(yàn)證我們的設(shè)計，我們通過對比度分析、尼特值測試、色彩亮度和色彩通用性等維度去設(shè)計界面，并總結(jié)出一套優(yōu)化方法來分享給大家，相互啟發(fā)。

我們?yōu)槭裁匆鲆归g模式？

1. 用戶調(diào)研顯示：57%的用戶想要使用夜間模式，71.1%的用戶習(xí)慣在夜間不開燈看手機(jī)

在ISUX北京調(diào)研小組的幫助下，我們針對移動端QQ界面夜間模式進(jìn)行了調(diào)研。從2000多份問卷數(shù)據(jù)中分析發(fā)現(xiàn)，用戶對夜間模式有明確需求，且多數(shù)人在無照明下使用軟件。

2. 用戶反饋現(xiàn)有界面夜間使用時刺眼，低亮度時界面文字不清晰

調(diào)研發(fā)現(xiàn)，現(xiàn)有界面用戶在夜間使用時感覺刺眼，長時間使用會感覺眼睛疼痛。部分用戶認(rèn)為文字看不清，辨識比較費(fèi)眼。

3. 用戶期望更暗色 、更能保護(hù)眼睛的夜間模式設(shè)計

從用戶對夜間模式的期望來看，他們希望主體界面的顏色更暗，能夠更加持久地使用軟件。希望我們設(shè)計師，能夠設(shè)計出更加保護(hù)眼睛的夜間模式。

我們?nèi)绾卧O(shè)計夜間模式？

1. 亮度、色彩對比度、通用性色彩是關(guān)鍵，行業(yè)趨勢傾向低飽和無彩色

1）關(guān)注健康人眼特性——亮度的需求

首先引入尼特值(nit)，它是用于量化亮度強(qiáng)度的專業(yè)術(shù)語，其意思每平方米燭光的強(qiáng)度：1nit=1坎德拉／平方米；

白天，人的眼睛能適應(yīng)亮度的值高于3.4尼特；

夜晚，主體顏色接近0.034 尼特，最亮元素低于3.4尼特的亮度眼睛會比較舒適。

2）關(guān)注弱視、色盲色弱人群——對比度、色彩通用性的需求

老人或視力弱的人群對于對比度的要求較高，容易看不清文字，應(yīng)該選擇更為合理的對比度。色弱人群和我們看到的顏色存在區(qū)別。 所以后續(xù)選擇色彩度時，應(yīng)該選擇更具通用性色彩設(shè)計的方案。

3）行業(yè)趨勢——減少極端色，無彩色居多

從行業(yè)趨勢來看，2016年，Google Material Design 和 iOS 相繼推出了夜間模式和深色主題設(shè)計及護(hù)眼模式。從其他權(quán)威網(wǎng)站中也發(fā)現(xiàn)許多深色界面的設(shè)計。最終整理得出，界面主體傾向無色彩，黑色居多。柔和、低飽和度色彩可以增加用戶長時間觀看界面的舒適度。

2. 五項(xiàng)夜間模式設(shè)計原則

通過文獻(xiàn)查找結(jié)合多次測試對比，我們提出5項(xiàng)評價原則，幫助設(shè)計師去判斷亮度，對比度，色彩通用性是否滿足人眼需求。

原則1：保證色彩通用性：關(guān)注特殊人群

所選色彩需要考慮色盲人群的特性，盡量保證他們所看到的顏色和我們接近一致，減少該類人群的識色的 差異性，增強(qiáng)設(shè)計的統(tǒng)一性。從軟件角度來看，無色彩更能減少正常人和色盲等特殊人群的識色差別。（可利用Sim ? Daltonsim for Mac軟件檢測）。

原則2：選擇低亮度、低飽和非極端的色彩（避免純黑）

對亮度控制，首先需要確定顏色本身的亮度，從一開始對界面的主體顏色的選擇就應(yīng)該選擇亮度較低的色彩，從設(shè)計用色上就控制界面的亮度。因此，方法就是直接降低色彩本身亮度，但是要避免選用極端顏色（避免純黑色）。為了方便大家對比所選顏色的亮度，可通過色彩亮度公式計算（Y-范圍0-255，Y值約接近0亮度越低）：

原則3：保證界面在屏幕中呈現(xiàn)出低尼特值（低亮度）

對于屏幕呈現(xiàn)的亮度的控制，需要通過前面提到的尼特值確定。尼特值能夠反饋設(shè)計方案在設(shè)備上呈現(xiàn)亮度，它直接影響了人眼的亮度舒適程度。所以結(jié)合前期人眼視覺特性來看，無光照時，屏幕自動調(diào)至最低亮度，主體背景顏色在屏幕上呈現(xiàn)的亮度應(yīng)該接近0.034尼特，界面中最亮元素應(yīng)該盡量低于3.4尼特，才能讓用戶更加持久舒適地使用 (獲取尼特值需要通過屏幕亮度儀測試儀測得）。

原則4：保證文字、元素、背景的對比度在能看清的范圍內(nèi)

對比度規(guī)范是由Web 無障礙指南（WCAG）提出，現(xiàn)已經(jīng)逐步被大公司采納，蘋果公司的設(shè)計規(guī)范中引用了此對比度規(guī)范。結(jié)合夜間模式的需求，我們提出保證文字與背景色對比度在3:1-4.5:1范圍,保證元素（頭像，圖片）與背景色的對比度在3:1-7:1的范圍內(nèi)。以此保證文字的清晰度，減少其他元素過亮的情況。（對比度可通過軟件Colour Contrast Analyser測出）。

原則5：必要時為過亮元素添加黑色透明度遮罩

由于界面元素的多樣性，例如頭像、歌曲、新聞。該類元素如果不能滿足亮度和對比度（3:1-7:1）的要求，需要在其上方添加黑色透明遮罩（不透明度40%-50%），從而降低對比度和亮度，使界面元素的亮度盡力滿足對比度（3:1-7:1）的要求。

3. 設(shè)計方法步驟

為了讓大家更簡單地理解，我們把整個設(shè)計過程繪制出來，見下圖：

確定通用性色彩→選擇色彩亮度→確定文字對比度→為元素添加遮罩降低元素亮度對比度→設(shè)備檢測界面尼特值。

實(shí)際案例應(yīng)用 —— QQ iPad版夜間模式設(shè)計

1. 檢測現(xiàn)有界面——不能滿足夜間模式要求

依據(jù)5項(xiàng)原則去評價現(xiàn)有QQ? iPad版界面——白色版與黑色版，每個版本都有各自不能滿足原則要求的地方。如下圖所示：

2. 依據(jù)方法步驟逐步完成

1）選擇通用性色彩作為主色系

利用軟件Sim? Daltonsim for Mac可以觀察到，無色彩系列對色盲人群來說，和普通人群的識色差異不大。因此，我們選擇無彩色系列作為背景和文字的顏色，減輕色盲等特殊人群的負(fù)擔(dān)：

2）選擇低亮度色彩（避免純黑）

依據(jù)QQ 品牌色推薦的無彩色透明度色階，我們通過色彩亮度公式進(jìn)行逐個計算，最終符合底色標(biāo)準(zhǔn)的顏色定在#191919-#333333之間。

3）選擇并微調(diào)顏色使文字與背景對比度滿足3:1-4.5:1范圍之間

確定底色后，挑選色階上的其他顏色作為文字的顏色，利用軟件Colour Contrast Analyser進(jìn)行測試，盡量滿足文字對比度的比值在3:1-4.5:1的范圍。通過微調(diào)，文字方案如下：

4）添加遮罩，保證其他元素達(dá)到滿足在3:1-7:1之內(nèi)

由于界面元素的多樣性，例如頭像、歌曲、新聞。由于色彩的多樣性，不能滿足對比度要求。我們在其上方添加黑色透明遮罩（不透明度50%）之后，對比度全部低于7:1，滿足了規(guī)則的要求:

5）整體尼特值檢測，選擇尼特值更接近0.034的方案

我們將兩個方案在實(shí)際夜晚場景中測試，兩個方案尼特值呈現(xiàn)如下，方案1的主體顏色的尼特值更低接近0.034尼特。方案2雖然也是低飽和柔和色彩，但是主體亮度接近0.21尼特，整體還是比較偏亮。因此，我們將方案1作為最終設(shè)計方向。

最終方案數(shù)據(jù)

設(shè)計方案場景應(yīng)用

將方案1的設(shè)計擴(kuò)展應(yīng)用到 QQ iPad版、QQ Android 版和QQ iPhone版中，如下圖所示：

其他建議?

針對夜間模式的設(shè)計，我們還有些小小的建議：

（1）夜間模式與官方白色界面的設(shè)計除顏色之外，不要對圖形、結(jié)構(gòu)、交互等有其他改變，減少用戶學(xué)習(xí)成本。

（2）自動調(diào)節(jié)界面的功能，可以通過感受環(huán)境光來切換夜間模式，也減少了用戶的操作步驟。

（3）夜間模式與官方白切換時，可以更平滑的過度動畫呈現(xiàn)，讓用戶能夠適應(yīng)場景轉(zhuǎn)換。

最后感謝共同撰寫此文的多多同學(xué)，也感謝參與研究的每一位小伙伴。

「騰訊ISUX 作為國內(nèi)的頂尖設(shè)計團(tuán)隊(duì)，每一個實(shí)戰(zhàn)都值得學(xué)習(xí)」

1. QQ會員付費(fèi)界面改版丨《通過優(yōu)化，我們將QQ會員付費(fèi)用戶數(shù)提高了5倍！》
2. QQ 新版表情改版丨《揭秘QQ 新版表情背后的設(shè)計故事》
3. 企鵝FM丨《用企鵝FM的實(shí)戰(zhàn)案例，帶你認(rèn)識從0到1的設(shè)計過程》

參考文獻(xiàn)

• [1]CIE組織
• https://en.wikipedia.org/wiki/CIE_1931_color_space
• [2]對比度參考文獻(xiàn)? ? web無障礙視覺
• https://www.w3.org/
• [3]對比度參考文獻(xiàn)? ? iOS 設(shè)計規(guī)范
• https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
• [4]對比度參考文獻(xiàn)
• http://www.writer2001.com/colwebcontrast.htm
• [5]對比度軟件下載地址
• https://www.paciellogroup.com/resources/contrastanalyser/
• [6]手機(jī)護(hù)眼文獻(xiàn)（尼特值）
• http://news.cnfol.com/it/20160428/22666779.shtml
• [7]人眼視覺特性（尼特值）
• http://www.iali.com.tw/publications/fundamentals/CH3.htm
• [8]亮度計算公式
• http://wenku.baidu.com/link?url=W_L8soZ4T-Zp48AXo5N4obybC_9iOxBMXSsOLDFFPOf_yly4AT0xaY0lMnIrJh2ZSaspSxGdDP4VZeWHMVqBNsi-WgtN6Ps_zp_9A9DsoBW

原文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com