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

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

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

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

調(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ì)外觀和功能完美。

Vladanland的黑暗模式插圖

什么是深色模式

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


Instagram dark mode UI

WhatsApp on desktop dark mode UI via What’s App

Google Fit dark mode UI via The Verge

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

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


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

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

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

Dark mode in iOS 13 via 9to5Mac

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

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


減輕眼睛疲勞

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


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

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


節(jié)省電池壽命

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


防止注意力分散

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

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è)色譜無(wú)法令人滿意的閱讀體驗(yàn)。

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

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

3.極簡(jiǎn)主義

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

4.產(chǎn)生情感

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


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


5.奢侈高貴

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

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

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


1.不要太暗

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

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

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

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

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


3.降低色彩飽和度

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

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

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

4. 使用正確的顏色模式


via Sergey Zolotnikov

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

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


5.用戶自由切換

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


6.體現(xiàn)層次

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

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

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

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

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定