深色模式設(shè)計(jì)：創(chuàng)建深色主題網(wǎng)站和應(yīng)用的技巧

調(diào)暗燈光，放松眼睛并節(jié)省能量。深色模式是設(shè)計(jì)中的大趨勢(shì)之一，世界一流的品牌，如WhatsApp，Instagram，Google，F(xiàn)acebook和Apple，已經(jīng)上線了自己的暗黑風(fēng)格應(yīng)用。

讓我們看看這些頂級(jí)品牌在做什么，以及如何將深色模式UI加入自己的設(shè)計(jì)中。在設(shè)計(jì)深色模式時(shí)，您將學(xué)習(xí)深色模式的優(yōu)缺點(diǎn)和基本設(shè)計(jì)實(shí)踐，以確保您的Web和應(yīng)用程序設(shè)計(jì)外觀和功能完美。

什么是深色模式

深色模式是一種弱光用戶界面（UI設(shè)計(jì)），它使用深色（通常是黑色或灰色陰影）作為主要背景色。這是設(shè)計(jì)師幾十年來使用的默認(rèn)白色UI的逆轉(zhuǎn)。為響應(yīng)我們?cè)黾拥钠聊粫r(shí)間，開發(fā)人員發(fā)現(xiàn)深色主題界面有助于緩解眼睛疲勞，尤其是在光線不足或夜間的情況下。更少的眼睛疲勞意味著更少的頭痛和更好的工作和閱讀。

Instagram dark mode UI

WhatsApp on desktop dark mode UI via What’s App

但是黑暗模式實(shí)際上并不是什么新鮮事物。

還記得《黑客帝國(guó)》中黑色背景下的綠色計(jì)算機(jī)代碼嗎？那是對(duì)最初的黑暗模式的致敬：最初的計(jì)算機(jī)是那些老式的單色顯示器。

早期帶有黑色綠色文本的家用計(jì)算機(jī)是OG深色模式。

那種經(jīng)典的深色外觀在80年代已經(jīng)過時(shí)，取而代之的是在白色背景上使用黑色文本來模仿紙張上的墨水外觀。

在將近三十年的時(shí)間里，這一直是規(guī)范，直到暗模式在2020年在Windows Phone 7中首次卷土重來。Google確認(rèn)暗模式可以節(jié)省電池壽命，他們便在2018年將其功能添加到了Android OS中。一年后，蘋果隨后在iOS和iPadOS上采用深色模式。

Dark mode in iOS 13 via 9to5Mac

使用暗模式的優(yōu)點(diǎn)

深色模式可以緩解眼睛疲勞，而且這種樣式可以節(jié)省電池壽命，甚至可以更健康。讓我們看看暗模式與亮模式的實(shí)際優(yōu)勢(shì)。

減輕眼睛疲勞

增加低環(huán)境照明下的可見度

如果您睡著了并且有人打開了明亮的燈光，那么您會(huì)頭疼的。同樣的原理適用于深夜或清晨在計(jì)算機(jī)屏幕前工作的人員。暗模式減少了明亮的光線，使在弱光條件下更容易查看內(nèi)容。

節(jié)省電池壽命

某些帶有OLED屏幕的數(shù)字小工具在不使用時(shí)可以關(guān)閉黑色像素。暗模式使用更多數(shù)量的黑色像素，這迫使設(shè)備使用更少的能量。

防止注意力分散

白光和顏色往往會(huì)使您的注意力不集中，這使您在工作時(shí)候容易分神。深色模式UI設(shè)計(jì)可以通過將注意力集中到界面的內(nèi)容區(qū)域來增加焦點(diǎn)，讓該內(nèi)容顯而易見，背景淡化。

iOS Dark Mode

使用暗模式的缺點(diǎn)

像任何東西一樣，黑暗模式也有其缺點(diǎn)。讓我們了解深色主題可能對(duì)您的項(xiàng)目不利的原因。

缺少情感聯(lián)系

鮮艷的色彩可以營(yíng)造明亮的情感。如果您的觀眾正在尋找它，那么調(diào)暗顏色可能會(huì)給他們?cè)斐尚睦碚系K。他們將很難與黑暗主題建立情感聯(lián)系。如果您的品牌本質(zhì)上是激勵(lì)性，鼓舞性或精神性的，那么黑暗模式用戶界面可能是一場(chǎng)賭博。如果鮮艷的色彩可以營(yíng)造出明亮的情感，那么事實(shí)恰恰相反。

空間縮小

深色墻壁的房間可能會(huì)導(dǎo)致幽閉恐懼癥。在設(shè)備上，深色模式也是同樣如此。如果您要營(yíng)造一種空間感，深色的UI可以使空間變小。

低對(duì)比度的顏色可能很難看清

如果在設(shè)計(jì)深色主題的網(wǎng)站或應(yīng)用程序時(shí)顏色和對(duì)比度不大的情況下，則會(huì)使文本難以閱讀，因此在創(chuàng)建深色模式的電子郵件，應(yīng)用程序或網(wǎng)站設(shè)計(jì)時(shí)請(qǐng)記住這一點(diǎn)。

Nada Kiwan 作品

如何在設(shè)計(jì)中使用暗模式

深色模式設(shè)計(jì)可以在任何UI界面體現(xiàn)。從移動(dòng)應(yīng)用程序到智能手表再到電視界面，但是設(shè)計(jì)深色主題網(wǎng)站或應(yīng)用程序界面時(shí)一定注意以下幾種技巧：

何時(shí)使用深色模式

1.匹配企業(yè)品牌顏色

如果您的品牌需要使用多種顏色，請(qǐng)考慮使用更淺的UI。在深色背景上，整個(gè)色譜無法令人滿意的閱讀體驗(yàn)。

2.突出你的行業(yè)

深色模式用戶界面還有助于增強(qiáng)特定行業(yè)。例如，專注于夜生活和娛樂的品牌非常適合黑暗模式

3.極簡(jiǎn)主義

如果您的UI設(shè)計(jì)師是文字內(nèi)容偏少的情況下，那么您的條件適合暗模式。在文本是主要內(nèi)容的情況下，深色UI可能會(huì)使可讀性成為問題。通常，黑暗模式會(huì)放大視覺混亂，使混亂的屏幕更加混亂。

4.產(chǎn)生情感

試圖產(chǎn)生某種情感反應(yīng)？像是神秘的氣氛還是一點(diǎn)戲??？由于低可見度會(huì)產(chǎn)生好奇心并加劇情緒緊張，因此深色模式可能是您品牌的理想工具。

暗色主題網(wǎng)頁設(shè)計(jì)by Novidraft

5.奢侈高貴

較深的顏色喚起與奢華和富裕相關(guān)的情緒，會(huì)有穩(wěn)重可靠的感覺。

由Aneley設(shè)計(jì)的優(yōu)雅，高端的深色主題網(wǎng)站。

深色模式設(shè)計(jì)的最佳做法

1.不要太暗

圖書出版商不使用純白色紙張，因?yàn)榕c黑色墨水的對(duì)比度太過鮮明。它會(huì)使您斜視，并可能導(dǎo)致頭痛。數(shù)字設(shè)備也是如此。避開純黑色。很難看清高對(duì)比度的屏幕。良好的深色模式顏色是灰色陰影和不飽和的顏色。

2.有適當(dāng)?shù)纳蕦?duì)比

此外，還要確保在深色模式下，頁面內(nèi)容也要保持舒適和清晰度。背景顏色必須要足夠深，從而反襯出頁面淺色文字。

根據(jù)谷歌設(shè)計(jì)原則，建議文字和背景的對(duì)比比例至少保持在15.8:1。

你也可以通過色彩對(duì)比工具來測(cè)試有關(guān)對(duì)比比例。

3.降低色彩飽和度

在淺色背景下，飽和色彩看起來會(huì)非常生動(dòng)形象。然而，如果在深色模式下采用飽和色彩，則會(huì)讓人難以識(shí)別有關(guān)元素或內(nèi)容。

因此，在深色模式中，主色調(diào)一定不要采用飽和色彩。建議使用淺色調(diào)（色調(diào)控制在50至200范圍內(nèi)），從而讓頁面內(nèi)容在深色模式下體現(xiàn)更佳的可讀性。

Neolist的深色主題應(yīng)用程序設(shè)計(jì)

4. 使用正確的顏色模式

via Sergey Zolotnikov

當(dāng)你計(jì)劃在現(xiàn)有產(chǎn)品中新增深色模式時(shí)，你肯定希望能通過這種模式傳達(dá)出原有的產(chǎn)品情感，對(duì)吧？但我建議最好不要有這種想法。

至于這背后的原因，我認(rèn)為在不同背景顏色背景下，色彩本來就是獨(dú)立存在的，同時(shí)也代表著特殊的意義。

5.用戶自由切換

最好不要自動(dòng)開啟產(chǎn)品的深色模式。你可以通過界面功能設(shè)置，讓用戶自由地打開或關(guān)閉這項(xiàng)功能。用戶也可以根據(jù)其體驗(yàn)產(chǎn)品時(shí)的需求和想法，自主選用這項(xiàng)功能。

6.體現(xiàn)層次

頁面的海拔越高，內(nèi)容或元素就會(huì)更亮。這將在黑暗模式下創(chuàng)建一個(gè)視覺層次結(jié)構(gòu)，該層次結(jié)構(gòu)從顯示器中使用最多的元素到最少的元素。

7.在不同模式下進(jìn)行測(cè)試

測(cè)試深色模式和淺色模式。嘗試每種樣式，并根據(jù)用戶反饋進(jìn)行適當(dāng)?shù)恼{(diào)整。歸根結(jié)底，人們的喜好可能是無法預(yù)測(cè)的，所以請(qǐng)不要讓用戶陷入困境。讓他們將顯示從亮模式切換到暗模式。這使用戶來決定自己的使用習(xí)慣，最后做出相應(yīng)調(diào)整。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："深色模式設(shè)計(jì)：創(chuàng)建深色主題網(wǎng)站和應(yīng)用的技巧"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

當(dāng)前標(biāo)題：深色模式設(shè)計(jì)：創(chuàng)建深色主題網(wǎng)站和應(yīng)用的技巧
網(wǎng)址分享：http://muchs.cn/news28/325078.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、做網(wǎng)站、App開發(fā)、云服務(wù)器、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)