火星網(wǎng)校
做UI的來收，關(guān)于深色模式設(shè)計(jì)的9個(gè)小技巧
發(fā)布時(shí)間：2024-02-27 19:45:53 瀏覽量：199次
深色模式設(shè)計(jì)要點(diǎn)1
考慮把顏色飽和度降低:主要原因是可訪問性——飽和色不符合WCAG的標(biāo)準(zhǔn):即深色背景下的正文文本至少為4.5:1(即界面主色與文字信息的對(duì)比度)。另外飽和色在深色背景下會(huì)產(chǎn)生光學(xué)振動(dòng),造成視覺疲勞。
深色模式設(shè)計(jì)要點(diǎn)2
避免使用陰影:在一些明亮的界面中,會(huì)使用輕微的陰影來表現(xiàn)深度。這樣的界面使用起來會(huì)更加自然合理。然而,陰影在大多數(shù)黑培模式的元素中,并不是那么明顯。
深色模式設(shè)計(jì)要點(diǎn)3
使用亮度差構(gòu)建視覺層級(jí),陰影在黑暗主題中顯示效果不好,表達(dá)層級(jí)結(jié)構(gòu)的更好的方法是使用亮暗差。背景層應(yīng)該是最暗的,放置在其頂部的元素應(yīng)該稍亮一些。
深色模式設(shè)計(jì)要點(diǎn)4
盡量避免使用純黑色，Google的Material Design建議使用深灰色,而不是純黑色;Material Design建議的深色主題界面顏色為#121212。
深色模式設(shè)計(jì)要點(diǎn)5
在明暗的環(huán)境下分別測試:對(duì)界面的看法可能會(huì)因主題而異,需要進(jìn)行測試來驗(yàn)證該主題結(jié)構(gòu)是否合理。同時(shí)要在夜間的弱光條件下來測試深色模式,也應(yīng)該白天在戶外檢查深色主題的基本元素是否具有足夠的可讀性。
深色模式設(shè)計(jì)要點(diǎn)6
做兩個(gè)調(diào)色板——用于深色模式和明亮模式:就深色模式而言,低飽和度的顏色更合適,另一方面,我們都喜歡輕便的用戶界面中充滿活力的色調(diào),作為另一種選擇,就會(huì)在明亮模式中選用此類顏色。
深色模式設(shè)計(jì)要點(diǎn)7
遵循平臺(tái)準(zhǔn)則以匹配視覺風(fēng)格,Material Design主要原則有:用灰色變暗;低飽和度色彩;節(jié)省能源和增強(qiáng)可訪問性。另有iOS人機(jī)界面指南亦可指導(dǎo)。
深色模式設(shè)計(jì)要點(diǎn)8
可以自由切換:允許用戶在需要時(shí)能夠從明亮模式切換到深色模式,也可以根據(jù)日照條件使其能夠在模式之間自動(dòng)切換,最重要的是用戶可以隨時(shí)手動(dòng)進(jìn)行設(shè)置。
深色模式設(shè)計(jì)要點(diǎn)9
時(shí)刻牢記深色模式下的可訪問性:最重要的是內(nèi)容是正文和背景之間的對(duì)比度應(yīng)至少為15.8: 1，正因如此,即使是更高、顏色更淺的層級(jí),可讀性也不會(huì)有問題（參見Material Design)。
福利互動(dòng)
為答謝客官閱讀完此文支持，特準(zhǔn)備新人大禮包贈(zèng)送領(lǐng)取:
精選2000款海報(bào)設(shè)計(jì)模板素材
300套Psd場景素材，ps源文件
300款ps 空間場景素材（出圖快，改稿更快）
100+設(shè)計(jì)電子書 ps 色環(huán)插件ps涂抹筆刷
Adobe全家桶軟件大全
5000款設(shè)計(jì)師必用字體等等10G設(shè)計(jì)資源
獲取方式：
1.關(guān)注小編~
2.評(píng)論文章,不限字?jǐn)?shù)~
3.私信領(lǐng)取~
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
