Logo
深色模式

好看的深色模式?

深色模式是一種在深色背景上使用淺色文本、圖標和圖形用戶界面元素的配色方案。 它經常在計算機用戶界面設計和網頁設計方面進行討論,深色不一定非得是黑色的,大多數是指深灰色的。

網頁暗色模式的流行度近年來不斷上升。根據 W3Techs 的數據,截至 2023 年 12 月,全球有 23.8% 的網站使用了暗色模式。在台灣,這一比例為 21.5%。

深色模式好處

  • 降低發光:網頁設計深色模式,在瀏覽網站時比較不會照成眼睛疲勞(實際上不一定),尤其是在夜間或弱光環境中。這正是因為它確實減少了屏幕上發出的亮光量,但是建議不要在黑暗處看著屏幕。
    緩解眩光以改善視覺質量,但這主要歸功於目前螢幕技術。 2019 年,發表在《Nature》雜誌上的一項研究表明,在暗色模式下閱讀文字,瞳孔會擴大,讓更多的光線進入眼睛,從而提高視敏度。 2020 年,發表在《Optometry and Vision Science》雜誌上的一項研究表明,在暗色模式下閱讀 30 分鐘,眼睛疲勞的程度會降低 20%。
    然而,也有一些研究表明,暗色模式並不能保護視力,甚至可能造成視力損害 2021 年,發表在《Scientific Reports》雜誌上的一項研究表明,在暗色模式下閱讀,瞳孔會擴大,但這會導致光學像差增加,降低視覺質量。 2022 年,發表在《Journal of the Optical Society of America A》雜誌上的一項研究表明,在暗色模式下閱讀,會增加眼部肌肉的疲勞,從而導致視力下降。
  • 電池壽命:深色模式有助於延長 OLED 屏幕設備的電池壽命。 這是因為 OLED 屏幕只需要點亮正在顯示內容的像素,降低功耗,因此使用深色背景有助於節省電量。
  • 個人喜好: 有些人只是喜歡黑暗模式的外觀和感覺。 他們發現它更加平靜和輕鬆,而且似乎比較可以集中注意力,可以更加聚焦呈現圖片色彩、氣氛。
    如果您的使用者多數為高齡長輩,深色模式對長輩來說是比較陌生的,不太適合,幾乎沒有深色介面的醫院、照護頁面。
  • 色彩心理:實體包裝印製黑底會浪費油墨,通常表達高檔、科技的感覺居多,延伸到網路也是相同心理作用。
總體而言,目前關於暗色模式是否能保護視力的研究尚無定論。 這個需要等更多研究資料與科學性的定論,才能進行式推薦使用暗色模式的舉措,現階段,對網頁設計來說,它是一種視覺、氛圍考量而已,無法提供更多優勢,因此,是否用暗色模式取決於個人喜好和使用環境。

哪些網站使用深色模式最適合?

長時間觀看型 Youtube、Netflix

深色模式

表達尖端黑科技 Chatgpt、Midjourney

設計工具、高解析影像處理 搭配OLED螢幕,會呈現極致乾淨的深色背景與更生動的色彩,精準地保留更多細節。

夜間氛圍品牌 燒烤店、露營、音樂、高級精品..等有視覺氛圍延伸感的行業

大量使用者 : 按使用者習慣調整 例如 : 地圖、瀏覽器(可以讓使用者選暗色/淺色模式)

手機設定 : 夜間模式/深色模式

  • Android:打開“設置”應用程序並轉到“顯示”。 點擊“主題”並選擇“深色”。
  • iPhone:打開“設置”應用程序並轉到“顯示和亮度”。 點擊“外觀”並選擇“深色”。
  • Windows:打開“設置”應用程序並轉到“個性化”。 單擊“顏色”,然後在“選擇默認應用程序模式”下選擇“深色”。
  • macOS:打開系統偏好設置並單擊“常規”。 單擊“外觀”下拉菜單並選擇“深色”。

色彩影響力

社群媒體、瀏覽器的深色模式來符合使用者"過度使用的新需求"。

  • 情緒上:深色系通常深邃、神秘、個性、非常規、特立獨行。
  • 實際上:降低發光、聚焦圖片、延長電池壽命。

然而,深色與淺色各有優劣,淺色比較偏向大眾化、中性、賦予安全感。以一個深色茶壺品牌為例,如果設計上使用深色模式加上細緻清晰的圖像,來表達高級感、匠藝感以及其中意境,這樣的呈現反而吸引長輩,這時,色彩保留一些獨特韻味並且符合您的品牌意境。

如果是以腳踏車、賽車或電動車為例,有一些視覺感受,例如 : 速度、引擎、音質、耗能數據、深色模式對年輕人感官感受更為強烈,但反觀如果是在購物"結帳"頁面,深色模式在心理層面通常會猶豫與懷疑。

由於我們從小都是訓練白紙黑字的閱讀,因此對大多數人來說,深色背景需要較長的閱讀時間,對於主流新聞即時性與"快速閱讀"來說,更偏向傳統的白底,但如果是個性化的獨立媒體來說,深色是不錯的嘗試。

最後,品牌的視覺展示不一定侷限在在電腦、平板、手機,當然也有可能是投影、印刷、舞台,這可能就會有一套視覺指南CIS-VI去歸納正確的色彩使用方式與情境,並且在標誌使用上,黑底與白底會同時考量進去。