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

我們?yōu)槭裁匆�做夜間模式？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原則5：必要時(shí)為過(guò)亮元素添加黑色透明度遮罩

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

標(biāo)簽： 產(chǎn)品優(yōu)化 閱讀體驗(yàn) 設(shè)計(jì)模式 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。