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

黑暗模式越來(lái)越受歡迎。大多數手機和平板電腦界面都可以選擇讓用戶(hù)切換到深色，而不是標準的淺色默認配色方案。

 

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

 

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

 

什么是暗模式？

 



 



 

深色模式是一種在設計中使用深色背景和淺色文本元素的配色方案。很長(cháng)一段時(shí)間以來(lái)，我們一直在創(chuàng )建黑暗的網(wǎng)站和項目，但“黑暗模式”已經(jīng)變得更加重要，因為在大多數用戶(hù)界面中都調用了切換選項。

 

您可以在沒(méi)有光的替代方案的情況下在暗模式下設計一些東西。

 

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

 

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

 

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

 

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

 

為什么你應該考慮暗模式

 



 

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

 

考慮添加暗模式設計的其他原因包括：

 

在黑暗中，用戶(hù)的眼睛會(huì )更容易。人們越來(lái)越習慣于根據環(huán)境條件在暗模式和亮模式之間切換。

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

對于有一些視力障礙的人來(lái)說(shuō)，深色模式可能更可取，如果您有該選項，則可以使設計更易于使用。

暗模式可以延長(cháng)電池壽命。

它看起來(lái)很酷，你想嘗試一下。

 

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

 



 

如果要實(shí)現暗模式，請記住以下提示：

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

11.不要忘記可訪(fǎng)問(wèn)性規則，并根據通用標準測試您的深色模式調色板。你可以在這里測試你的顏色。