激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

深色模式設計:創(chuàng)建深色主題網站和應用的技巧

發(fā)布時間：2024-02-27 17:52:37 瀏覽量：224次

調暗燈光，放松眼睛并節(jié)省能量。深色模式是設計中的最大趨勢之一，世界一流的品牌，如WhatsApp，Instagram，Google，Facebook和Apple，已經上線了自己的暗黑風格應用。

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

Vladanland的黑暗模式插圖

什么是深色模式

深色模式是一種弱光用戶界面（UI設計），它使用深色（通常是黑色或灰色陰影）作為主要背景色。這是設計師幾十年來使用的默認白色UI的逆轉。為響應我們增加的屏幕時間，開發(fā)人員發(fā)現深色主題界面有助于緩解眼睛疲勞，尤其是在光線不足或夜間的情況下。更少的眼睛疲勞意味著更少的頭痛和更好的工作和閱讀。


Instagram dark mode UI

WhatsApp on desktop dark mode UI via What’s App

Google Fit dark mode UI via The Verge

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

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


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

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

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

Dark mode in iOS 13 via 9to5Mac

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

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


減輕眼睛疲勞

短時間工作你可以感覺不到眼睛的疲勞。但是，任何長時間在屏幕上分析數據的人都知道，一段時間之后計算機視覺綜合癥（CVS）及表現的非常明顯，包括眼痛，視力模糊，復視，頭痛，頸背疼痛等。當涉及到圖表時，暗模式可以真正減輕痛苦。


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

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


節(jié)省電池壽命

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


防止注意力分散

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

iOS Dark Mode

使用暗模式的缺點

像任何東西一樣，黑暗模式也有其缺點。讓我們了解深色主題可能對您的項目不利的原因。


缺少情感聯系

鮮艷的色彩可以營造明亮的情感。如果您的觀眾正在尋找它，那么調暗顏色可能會給他們造成心理障礙。他們將很難與黑暗主題建立情感聯系。如果您的品牌本質上是激勵性，鼓舞性或精神性的，那么黑暗模式用戶界面可能是一場賭博。如果鮮艷的色彩可以營造出明亮的情感，那么事實恰恰相反。


空間縮小

深色墻壁的房間可能會導致幽閉恐懼癥。在設備上，深色模式也是同樣如此。如果您要營造一種空間感，深色的UI可以使空間變小。


低對比度的顏色可能很難看清

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


Nada Kiwan 作品

如何在設計中使用暗模式

深色模式設計可以在任何UI界面體現。從移動應用程序到智能手表再到電視界面，但是設計深色主題網站或應用程序界面時一定注意以下幾種技巧：

何時使用深色模式

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

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

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

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

3.極簡主義

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

4.產生情感

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


暗色主題網頁設計by Novidraft


5.奢侈高貴

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

由Aneley設計的優(yōu)雅，高端的深色主題網站。

深色模式設計的最佳做法


1.不要太暗

圖書出版商不使用純白色紙張，因為與黑色墨水的對比度太過鮮明。它會使您斜視，并可能導致頭痛。數字設備也是如此。避開純黑色。很難看清高對比度的屏幕。良好的深色模式顏色是灰色陰影和不飽和的顏色。

2.有適當的色彩對比

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

根據谷歌設計原則，建議文字和背景的對比比例至少保持在15.8:1。

你也可以通過色彩對比工具來測試有關對比比例。


3.降低色彩飽和度

在淺色背景下，飽和色彩看起來會非常生動形象。然而，如果在“深色模式”下采用飽和色彩，則會讓人難以識別有關元素或內容。

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

Neolist的深色主題應用程序設計

4. 使用正確的顏色模式


via Sergey Zolotnikov

當你計劃在現有產品中新增“深色模式”時，你肯定希望能通過這種模式傳達出原有的產品情感，對吧？但我建議最好不要有這種想法。

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


5.用戶自由切換

最好不要自動開啟產品的“深色模式”。你可以通過界面功能設置，讓用戶自由地打開或關閉這項功能。用戶也可以根據其體驗產品時的需求和想法，自主選用這項功能。


6.體現層次

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

頂部的淺色創(chuàng)建視覺層次。來源Sublime Text

7.在不同模式下進行測試

測試深色模式和淺色模式。嘗試每種樣式，并根據用戶反饋進行適當的調整。歸根結底，人們的喜好可能是無法預測的，所以請不要讓用戶陷入困境。讓他們將顯示從亮模式切換到暗模式。這使用戶來決定自己的使用習慣，最后做出相應調整。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯系，請保持電話暢通！
確定