如何設計「夜間模式」,有哪些值得注意的問題與經驗?

為了避免歧義,可以將「夜間模式」理解為任何「為弱環境光條件設計的UI界面」


知乎的夜間模式每次都要回到首頁我真是不開心


-

  設計「夜間模式」,實際上面對的問題是:如何使產品適應環境光的變化?
  理想的方案是通過環境光感測器根據周圍光線強度自動開啟和關閉,但也許是出於技術限制或實際應用的考慮,目前沒有看到產品這樣做。

當下對此最好的方案是全局控制,一般能夠進行系統級的亮度調節和通過懸浮窗添加抗藍光遮罩。這樣做有幾個優點:
  1、有些應用沒有夜間模式,全局控制可以一定程度上彌補;
  2、有時候系統間的應用切換會導致亮度的變化(如在應用中呼出輸入法),可能會忽然變得很刺眼,全局控制可以避免這樣的問題。

  全局控制在 Android 上比較容易實現,比如小米官方的「夜間模式」。iOS 上則沒有便捷的方法。

  具體到應用內「夜間模式」的設計,有幾個原則可以參考:

  1、通過降低對比度和亮度、將背景增加為深色減少光通量。此處應當考慮到 #000000 純黑色會影響到其他元素的發揮應有的效果。因此大部分應用的「夜間模式」不會用 #000000 純黑色,比如知乎的「夜間模式」只是在深灰色中摻入了藍色。

  2、不同類型的產品對於「夜間模式」的需求程度不同,比如閱讀類的產品一般把產品放在閱讀頁面,方便用戶閱讀時直接打開。
    值得指出的是,Apple Maps 和 iOS 版的 Google Maps 也有「夜間模式」,可能的原因是看過以白色為主的屏幕再看黑暗中的事物時,眼睛需要一段短暫的適應時間,對於在駕駛過程中使用 Google Maps 用戶而言,這段適應時間有著潛在危險。

  3、應當為「夜間模式」添加定時關閉的設置。
    環境光的變化常常和時間有關。用戶常常打開「夜間模式」後玩完手機便睡下,第二天在比較亮的地方打開仍停留在「夜間模式」中的應用,此時原來減少光通量的手段變成了關閉「夜間模式」的阻礙。
    用戶打開「夜間模式」的時間不確定,關閉「夜間模式」的時間卻可能是固定的,故而應當為「夜間模式」添加定時關閉的設置。

-


按題主的細節要求答:增加UI的可識別性,如適度減少過渡色、加大對比度、加大按鈕或字體……如UI會和屏顯休眠時間、觸摸動作結合,產生響應自動變化也不錯。
比如設計導航地圖軟體,30秒休眠,20秒開始醒目按鈕亮度開始降低,只突出主體顯示內容,只有觸摸屏幕任何地方,才再度激活功能性菜單的大對比顯示。

補充: 和安卓的虛擬鍵下滑隱藏一樣也不錯,需要藏匿騰出屏幕或淡出的按鈕,菜單少就下滑匿,內容多可以設計左右手的弧形菜單……
也可以借調音量鍵。

以前那種綠背光低解析度的液晶點陣字元屏幕上圖文設計好的識別率也挺高,看慣了也很省眼神

再補充:受答主程剛啟發,想起來我夜裡失眠還裝睡時的情況:偷偷摸摸捂著手機,老婆一點動靜立馬按電源鍵,然後還得輸入密碼,麻煩是一個,有時是按不及時屏幕還亮著……因此:是否夜間模式和距離感測器結合,翻轉或遮掩,立刻滅燈,和接電話自動滅燈一樣。一定時間內無遮掩再亮,長時間有遮掩那就繼續黑屏到休眠吧


不要設計什麼夜間模式!一切鼓勵用戶夜裡不開燈玩手機還自我安慰用了夜間模式就能少傷眼的行為都是耍流氓。


最值得注意的就是:
全部的按鈕和界面都要考慮到!
用過若干個閱讀軟體,無一例外的全都在閱讀的界面留在夜間,返回出來亮瞎眼;要麼就是調出輸入法,白花花一片,再瞎


千萬不要弄成新浪微博那樣的的變態下載包,動不動就要更新,動不動就要下載,真心煩!!!
然後就是不要純黑色,最好是灰黑色,不要把自己公司的logo弄成水印嵌在背景裡面,真的非常low。 嗯,我說完了~


夜間模式不能只考慮光線強弱。夜間模式更多的場景是床上,被窩,此時眼睛與屏幕的距離比日間短很多,視野聚焦,注意力不一樣。手握手機的姿勢可能也不同。


我們夜間模式就一天開發時間,我tm直接蓋一層85%透明度的黑色,不要問我為什麼,策劃要求的……


我現在還在愁著呢?總覺得夜間模式是一個偽需求啊


推薦閱讀:

你喜歡 Windows 的 Ribbon 界面嗎?
目前互聯網業界所設計的UI界面屬於哪類風格?
如何評價 Path 的新產品 Kong?
現在很多網站都增加了「返回頂部」的按鈕,你最喜歡哪個呢?

TAG:設計 | 用戶界面設計 | 人因工程學 | 夜間模式 |