如何正確設計暗色模式

如今,暗色模式無處不在

隨着人類將更多的時間在與科技產品的互動上,暗色模式題提供了一種更輕鬆的方式來接觸數字世界。通常情況下,這些主題更容易讓人眼前一亮,更具吸引力,更適合專門的用戶。

縱觀整個2020年,無數知名品牌都推出了自己版本的暗色模式。谷歌爲雲端存儲硬盤提供瞭解決方案,而蘋果和安卓也已經在他們的操作系統中構建了暗色主題性能。

如果你還沒有學會如何充分利用暗色模式,那麼你可能會錯過一個極好的凸顯你的設計實力的機會,也會錯過贏得更多的用戶。

爲什麼暗色模式這麼流行?

在我們深入探討如何創建暗色模式之前,讓我們先看看什麼是暗色模式,以及它爲什麼有用。

最終,暗色模式的創建是爲了減少所有東西發出的亮度,從你的桌面和筆記本電腦,到你的智能手機和智能手錶。暗色模式有助於改善視覺人體工程學設計,通過減少眼睛疲勞,調整亮度以適應當前的照明條件,等等。此外,許多暗色模式產品在節省電池壽命方面也很出色。

傳送門:怎麼利用暗色模式在你的作品集裏體現設計實力

更好的用戶體驗:關注用戶體驗是數字時代產品設計最重要的趨勢之一。如果你想脫穎而出,你需要每個訪問你網站的人提供難以置信的體驗。暗色模式從緩解眼睛疲勞到電減小池電量消耗,這有助於讓客戶在網站上停留更長的時間。

創新和最前沿吸引力:大多數公司都想證明自己能夠保持在行業的前沿。爲網站主題或外觀提供一個可選擇的暗色模式版本可以幫助你的客戶從人羣中脫穎而出。隨着環境變得更加關注移動設備,越來越多的公司將尋找能夠提供最佳移動體驗的設計師。

更具包容性的設計:暗色模式不僅僅適合夜間對光敏感的人。這個解決方案對於視力受損的用戶來說會更適宜,因爲他們在訪問你的網站時可能會受到眼睛疲勞的困擾。如果你想讓你的內容對更廣泛的觀衆更有包容性,那麼學習如何設計暗色模式是一個很好的開始。

設計暗色模式時的最佳做法

在暗色模式下設計比你想象的要容易得多。大多數時候,這只是簡單地考慮如何用更深更暗的東西來取代站點中更明亮、更突出的部分。

這裏有一些有用的建議,可以讓你朝着正確的方向前進。

1.色彩實驗

對於許多網頁設計師來說,在開發暗色模式解決方案時,一個大問題是他們太過於沉迷於純白色文本和純黑色背景。然而,這種高對比度的選擇可能目前是比較普遍的做法。

使用深灰色作爲你的主要背景面顏色比使用真正的黑色要合適的多。此外,與其使用明亮的白色,還不如考慮使用稍微偏白的顏色,這樣看起來會更溫暖。

用不太可能引起眼睛過度疲勞的背景和顏色組合進行實驗。深灰色粉底通常展現出更大的適用範圍,因爲你可以在灰色上顯示陰影。

另外,當你嘗試顏色的時候,記住飽和的顏色經常在非常暗的表面上劇烈振動,使它們更難閱讀。降低色彩飽和度有助於降低對比度,讓網站具有更好的用戶體驗。

在 200-50 範圍內的淺色色調在深色主題上有更好的可讀性。然而,你總是可以嘗試你的選擇。 Google Material Design 建議的背景和文本之間的對比度是15:8:1。

2.考慮情緒影響

暗模式設計所涉及的大部分工作都是要弄清楚某些顏色是如何協同工作的。強烈的對比很容易讓人忘乎所以,尤其是當你習慣於在白色背景下工作時。然而,你需要記住,你是爲一個主要尋求更輕鬆、更柔和的瀏覽的用戶體驗而設計的。

工作的時候,記得也要考慮下設計的情感方面。在任何環境下,色彩中的情感可以決定或破壞買家的體驗。然而,色彩心理學中一個經常被忽視的方面是,當人們處於黑色背景時,他們對陰影的感知不同。

例如,想想綠色。在一個淺色的背景下,它傳達了自然,甚至是金融財富。然而,在黑暗的背景下,同樣的綠色可能會讓人覺得是有毒的,有毒的,甚至是病態的。重要的是要考慮終端用戶到達你的站點後會得到什麼樣的印象。

3.讓用戶選擇的自由

當你開始爲黑暗模式設計時,你可能犯的最大錯誤之一就是認爲你應該完全專注於暗色模式,而沒有別的選項。如果你和想要兩全其美的用戶交流,會讓你覺得很麻煩。如果你是爲應用程序設計的,你需要的設計應該可以自然地在明暗主題之間切換。

瞭解如何在你創建的桌面上同時實現暗模式和光模式選項,將有助於產品觸達到更多的客戶。記住,你需要測試設計在這兩個模式中的性能和影響,不管你的用戶選擇如何瀏覽,檢查它們是否提供了相同的體驗。

儘管暗色模式應該爲用戶提供不同的體驗,但仍然需要感覺好像他們在同一網站上瀏覽一樣。這意味着你需要嘗試最自然的亮暗模式選項組合。

4.記住最基礎的

請記住,儘管上面的三個提示將幫助ni 找到暗模式設計的正確silu ,但你還需要考慮所設計的平臺的機會和限制。你能爲谷 歌Chrome 網站提供的暗模式體驗將與你在 iOS 上運行的體驗截然不同。

檢查正在設計的系統所提供的文檔將有助於你更深入瞭解實際可行的設計內容。

其他關於暗色模式設計的小貼士如下:

關注你的內容:確保內容在頁面上脫穎而出,但不會太突出。

測試設計:在亮和暗的外觀下,你需要確保所有東西都能正常工作。

爲界面增加活力:活力有助於改善你的背景和前景之間的對比。

使用語義色彩:語義色彩自動適應當前網站的外觀。硬編碼的顏色值不適應可能看起來更激進。

桌面着色:試着用透明和濾鏡來給你的網站和應用程序一個稍微暖和一點的着色——很適合深夜瀏覽

圖標:如有必要,在暗模式和亮模式中使用單獨的符號和圖標。


準備好設計暗色模式了嗎?

爲沉迷於黑暗模式的時代準備你的網頁開發和設計作品是一種複雜的事情。你需要仔細考慮,當人們在搜索一些更微妙的東西時,他們將如何瀏覽你的網站和應用程序,和我們習慣的網站相比,視覺上沒有那麼強大。

最重要的是要記住,你的網站或應用程序上的所有東西在暗模式下看起來應該和在亮模式下一樣漂亮。當人們想要在應用程序中切換設置時,僅僅添加一個動態的黑色背景是不夠的。你需要深入你的設計,研究不同的字體、顏色和圖像是如何協同工作的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章