暗色模式的基本概念和發(fā)展歷程

2024-3-21    博博

一、定義及其在UI設(shè)計(jì)中的表現(xiàn)形式
1.暗色模式的定義
暗色模式是一種低光用戶界面（UI）設(shè)計(jì)，也稱(chēng)為深色模式，是一種用戶界面設(shè)計(jì)選項(xiàng)，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺(jué)體驗(yàn)。
iOS 13 亮色模式（左）與暗色模式（右）的對(duì)比
iOS 13 亮色模式（左）與暗色模式（右）的對(duì)比
 
2.暗色模式的定義
(1).暗色模式在UI設(shè)計(jì)中的表現(xiàn)形式
設(shè)計(jì)師需要為暗色模式創(chuàng)建一個(gè)新的調(diào)色板，這通常意味著降低顏色的飽和度，以適應(yīng)深色背景。同時(shí)，避免使用純黑作為主色調(diào)背景，而是選擇接近純黑的深灰色，以確保閱讀體驗(yàn)的舒適性和可讀性。
亮色/暗色模式下主色需要進(jìn)行調(diào)整
亮色/暗色模式下主色需要進(jìn)行調(diào)整
 
(2).對(duì)比度控制
暗色背景與文本顏色之間的對(duì)比度應(yīng)該控制在WCAG2.0AA級(jí)標(biāo)準(zhǔn)以上，以保證內(nèi)容的清晰度和易讀性。對(duì)于彩色元素，也需要適當(dāng)調(diào)整飽和度，確保整體色彩之間的對(duì)比度符合無(wú)障礙標(biāo)準(zhǔn)。
達(dá)到/未達(dá)到WCAG2.0AA標(biāo)準(zhǔn)的視覺(jué)效果對(duì)比
達(dá)到/未達(dá)到WCAG2.0AA標(biāo)準(zhǔn)的視覺(jué)效果對(duì)比
 
(3).視覺(jué)元素區(qū)分
在暗色模式下，設(shè)計(jì)師需要特別注意視覺(jué)元素的區(qū)分，通過(guò)足夠的對(duì)比度來(lái)保證文字和圖形的清晰可見(jiàn)。這不僅僅是簡(jiǎn)單的顏色反轉(zhuǎn)，而是一種“弱光”主題的設(shè)計(jì)思考，旨在優(yōu)化用戶在低光環(huán)境下的視覺(jué)體驗(yàn)。
亮色模式中的按鈕在暗色模式中顯得太跳躍
亮色模式中的按鈕在暗色模式中顯得太跳躍
 
二、歷史回顧及發(fā)展脈絡(luò)
1.命令行界面時(shí)代
在早期的計(jì)算機(jī)系統(tǒng)中，如DOS和Linux，終端通常使用暗色模式，這是因?yàn)樵缙诘腃RT顯示器存在閃爍問(wèn)題，暗色背景能夠減少視覺(jué)疲勞，并提供較高的對(duì)比度。
Linux的終端界面
Linux的終端界面
 
2.個(gè)人電腦時(shí)代
隨著個(gè)人電腦的普及，圖形用戶界面（GUI）逐漸成為標(biāo)準(zhǔn)，此時(shí)大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移動(dòng)設(shè)備時(shí)代
智能手機(jī)和平板電腦的興起帶來(lái)了OLED等先進(jìn)顯示技術(shù)，這些設(shè)備的小屏幕和高分辨率使得暗色模式再次變得實(shí)用和流行，特別是在節(jié)省電量和減少眼睛疲勞方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系統(tǒng)時(shí)代
近年來(lái)，各大操作系統(tǒng)開(kāi)始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色應(yīng)用模式，macOS和iOS隨后也推出了可以根據(jù)時(shí)間或環(huán)境自動(dòng)切換的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、設(shè)計(jì)趨勢(shì)中暗色模式的地位
暗色模式在當(dāng)前設(shè)計(jì)趨勢(shì)中占據(jù)重要地位，以其減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容的優(yōu)勢(shì)受到青睞。它不僅適應(yīng)低光環(huán)境，還提供美學(xué)上的新探索，響應(yīng)了用戶對(duì)舒適性和個(gè)性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計(jì)創(chuàng)新，暗色模式已成為現(xiàn)代界面設(shè)計(jì)不可或缺的一部分。許多頂級(jí)品牌和應(yīng)用程序，如WhatsApp、Instagram、Google、Facebook等，都已經(jīng)引入暗色模式設(shè)計(jì)，這表明暗色模式已經(jīng)成為了一種廣泛接受的設(shè)計(jì)趨勢(shì)。
從左往右依次為：WhatsApp、Instagram、Google、Facebook
從左往右依次為：WhatsApp、Instagram、Google、Facebook


作者：阿琳01
來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔