網(wǎng)站建設(shè)中為暗模式設(shè)計(jì)發(fā)布者：本站     時(shí)間：2022-04-02 09:04:01

黑暗模式越來越受歡迎。大多數(shù)手機(jī)和平板電腦界面都可以選擇讓用戶切換到深色，而不是標(biāo)準(zhǔn)的淺色默認(rèn)配色方案。

 

素馬設(shè)計(jì)認(rèn)為大多數(shù)用戶對(duì)于是否使用深色或淺色用戶界面都有明顯的偏好。

 

這就是為什么越來越多的設(shè)計(jì)師在他們的項(xiàng)目中添加暗模式選項(xiàng)的原因。雖然它可能需要更多的工作和很多思考，但它可以幫助為用戶創(chuàng)建更強(qiáng)大的聯(lián)系和個(gè)性化元素。這里有更多關(guān)于這種設(shè)計(jì)趨勢(shì)的信息。

 

什么是暗模式？

 



 



 

深色模式是一種在設(shè)計(jì)中使用深色背景和淺色文本元素的配色方案。很長(zhǎng)一段時(shí)間以來，我們一直在創(chuàng)建黑暗的網(wǎng)站和項(xiàng)目，但“黑暗模式”已經(jīng)變得更加重要，因?yàn)樵诖蠖鄶?shù)用戶界面中都調(diào)用了切換選項(xiàng)。

 

您可以在沒有光的替代方案的情況下在暗模式下設(shè)計(jì)一些東西。

 

這種趨勢(shì)更側(cè)重于同時(shí)包含兩者的項(xiàng)目。雖然主要設(shè)計(jì)有一個(gè)淺色界面-淺色背景和深色文本元素-翻轉(zhuǎn)是深色模式。用戶可以在他們的設(shè)備上切換明暗模式。

 

該選項(xiàng)完全植根于用戶偏好。一些用戶只是更喜歡暗模式。其他人說，黑暗模式可以減少眼睛疲勞，并且在晚上試圖避開盡可能多的光線時(shí)使用的破壞性更小。

 

從設(shè)計(jì)的角度來看，黑暗模式似乎更喜怒無常，更時(shí)尚。每個(gè)網(wǎng)站都是光明的，但只有一些是黑暗的。這種關(guān)聯(lián)甚至可以與一些生活在黑暗模式領(lǐng)域的行業(yè)和品牌聯(lián)系起來，例如視頻游戲服務(wù)、流媒體視頻和音頻。

 

歸根結(jié)底，有些用戶更喜歡深色模式，為他們?cè)O(shè)計(jì)可以增加用戶和與設(shè)計(jì)的交互。雖然暗模式不是必需品，但它是一種趨勢(shì)設(shè)計(jì)技術(shù)。您不僅可以在移動(dòng)設(shè)備上找到它，而且一些桌面網(wǎng)站也提供了一個(gè)選項(xiàng)。

 

為什么你應(yīng)該考慮暗模式

 



 

暗模式為用戶和您帶來了一些好處。雖然主要好處是用戶偏好和創(chuàng)建用戶想要的東西，并將以他們想要的交互方式工作，但剩余的好處可能是更多的用戶和更多的交互。

 

考慮添加暗模式設(shè)計(jì)的其他原因包括：

 

在黑暗中，用戶的眼睛會(huì)更容易。人們?cè)絹碓搅?xí)慣于根據(jù)環(huán)境條件在暗模式和亮模式之間切換。

深色背景可以提供對(duì)視覺效果的關(guān)注，可以引起對(duì)文本元素的關(guān)注。

對(duì)于有一些視力障礙的人來說，深色模式可能更可取，如果您有該選項(xiàng)，則可以使設(shè)計(jì)更易于使用。

暗模式可以延長(zhǎng)電池壽命。

它看起來很酷，你想嘗試一下。

 

暗模式設(shè)計(jì)的11個(gè)設(shè)計(jì)技巧

 



 

如果要實(shí)現(xiàn)暗模式，請(qǐng)記住以下提示：

 

1.暗模式和亮模式不僅僅是黑底白字或白底黑字。這實(shí)際上可能是太多的對(duì)比?？紤]一個(gè)不是純黑色的黑色或深色選項(xiàng)。材料設(shè)計(jì)建議是#121212。深藍(lán)色和紫色也可以很好地作為暗模式的背景選擇。

 

2.對(duì)深色背景上的顏色使用相同的概念。在某些情況下，純白色可能太亮并導(dǎo)致眼睛疲勞。使用明亮的，不是很白的色調(diào)。

 

3.對(duì)于白色以外的顏色，請(qǐng)避免使用高度飽和的顏色。它們可能沒有與深色背景形成足夠的對(duì)比。堅(jiān)持使用調(diào)色板中較淺的顏色變體。大多數(shù)設(shè)計(jì)師為此創(chuàng)建了第二個(gè)“深色”調(diào)色板。

 

4.為文本創(chuàng)建顏色層次結(jié)構(gòu)。（即使在淺色背景下，這也是一個(gè)好主意。）這個(gè)概念也源于MaterialDesign，它使用淺色文本的層次進(jìn)行注釋。高強(qiáng)調(diào)級(jí)別（87%白色的透明度）適用于最大、最重要的文本；中等強(qiáng)調(diào)白色(60%)用于大部分正文，包括正文；和禁用的文本（38%白色）是輕微可見的。

 

5.想想元素在黑暗中的實(shí)際外觀，并在不同的光線下測(cè)試設(shè)計(jì)。請(qǐng)記住，用戶經(jīng)常在黑暗環(huán)境中使用黑暗模式，這會(huì)影響屏幕上的顯示方式。

 

6.暗模式應(yīng)該帶有一個(gè)關(guān)閉/打開開關(guān)。這是一些用戶會(huì)喜歡而其他用戶不會(huì)喜歡的東西。相應(yīng)地計(jì)劃并使用常用圖標(biāo)來表示此功能。

 

7.如果您沒有白色版本或顏色不包含足夠的對(duì)比度，則徽標(biāo)可以在深色模式下呈現(xiàn)獨(dú)特的情況。在深色模式下將徽標(biāo)放在白色容器中以解決此問題。確保創(chuàng)建一種看起來有意的樣式，并為徽標(biāo)在盒裝元素內(nèi)留出一點(diǎn)呼吸空間。

 

8.在深色模式下，小而緊湊的調(diào)色板更容易管理。

 

9.在為深色模式創(chuàng)建調(diào)色板時(shí)考慮情緒。這并不像改變背景顏色并留下其余部分那么簡(jiǎn)單。黑暗模式天生會(huì)吸引人們不同的情緒狀態(tài)。這可能會(huì)影響您在網(wǎng)站或應(yīng)用程序主題的深色版本中規(guī)劃顏色的方式。

 

10.注意主要參與者制定的指導(dǎo)方針。蘋果和谷歌都有一套暗模式原則。您可以在此處找到Apple的人機(jī)界面指南，并在此處找到Google的MaterialDesign文檔。

 

11.不要忘記可訪問性規(guī)則，并根據(jù)通用標(biāo)準(zhǔn)測(cè)試您的深色模式調(diào)色板。你可以在這里測(cè)試你的顏色。