亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

相信大家對(duì)深色模式已經(jīng)不陌生了,自從 iOS13 啟用深色模式開(kāi)始,各個(gè)軟件及平臺(tái)對(duì)于深色模式基本都做了相應(yīng)的設(shè)計(jì)適配,經(jīng)過(guò)了長(zhǎng)時(shí)間的使用體驗(yàn)及迭代,每個(gè)人對(duì)深色模式也有了自己內(nèi)心的好壞評(píng)判標(biāo)準(zhǔn),下面是一些結(jié)合深色模式設(shè)計(jì)的相關(guān)總結(jié)。

深色模式小結(jié):

深色模式下的顏色應(yīng)用

1. 關(guān)于深色模式下的色彩應(yīng)用

避免使用純黑色值

深色模式不意味著在純黑色背景上使用純白色文本,而為何不使用#000000 純黑色值作為大面積背景,原因在于現(xiàn)階段智能手機(jī)多采用 OLED 屏幕,當(dāng)我們?cè)O(shè)定界面顏色為純黑色值時(shí),屏幕集成中的發(fā)光管是不會(huì)點(diǎn)亮的,而在進(jìn)行界面操作時(shí),發(fā)光管則會(huì)因?yàn)榛瑒?dòng)到有色部分而被點(diǎn)亮。簡(jiǎn)單來(lái)說(shuō)就是大面積使用純黑色值就會(huì)造成發(fā)光管一直處于即開(kāi)即關(guān)的狀態(tài),長(zhǎng)時(shí)間使用便會(huì)導(dǎo)致較為嚴(yán)重的拖影現(xiàn)象。所以具有廣泛使用性的軟件一般會(huì)使用深灰色值來(lái)替代純黑。同時(shí),純黑與純白的高對(duì)比度也會(huì)使用戶很難適應(yīng)這兩種色彩亮度,引起用戶的視覺(jué)疲勞。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

選擇低飽和度色彩

使用較淺的色調(diào)(200–50范圍內(nèi)的顏色),在深色模式上具有更好的可讀性。較淺的顏色不會(huì)降低UI的視覺(jué)表現(xiàn)力,但可以幫助你保持適當(dāng)?shù)膶?duì)比度而不會(huì)引起眼睛疲勞。飽和度低的色彩能提高可讀性,減少用戶視覺(jué)震動(dòng),而飽和度高的色彩易讀性較弱,很容易使眼睛產(chǎn)生疲勞感,降低用戶的使用體驗(yàn),同時(shí)也容易造成頁(yè)面信息層級(jí)的混亂,導(dǎo)致重點(diǎn)信息不夠突出。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

合理使用彩色

在深色模式下,大面積的彩色使用會(huì)破壞暗色平衡,使用戶產(chǎn)生刺眼感與疲勞感??梢钥吹较聢D同一顏色的深淺模式對(duì)比中:第一組在淺色界面較突出,第三組在深色界面較突出,第二組則在深淺界面突出程度相差不多,所以在設(shè)計(jì)深色模式時(shí)應(yīng)該充分考慮在深淺底色上,色彩指示效果是否能保持一致。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

除了在選擇顏色時(shí)充分考慮之外,也可以借鑒 iOS 設(shè)計(jì)指南中相應(yīng)的色彩映射以達(dá)到同等的設(shè)計(jì)效果,即淺色模式選用一個(gè)顏色時(shí),深色模式會(huì)自動(dòng)映射另一種顏色。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

2. 維持指示性

深色模式不是簡(jiǎn)單的將淺色模式的顏色翻轉(zhuǎn),更應(yīng)保證在暗色模式下信息展示層級(jí)也可以保持視覺(jué)提示的準(zhǔn)確性。

我們?cè)跍\色模式中想要突出的信息與元素,在深色模式時(shí)同樣應(yīng)該是突出的。作為背景色,深色模式遵循的設(shè)計(jì)規(guī)則應(yīng)該是離我們?cè)浇脑仡伾綔\,越遠(yuǎn)的顏色越深,用不同的色彩灰度來(lái)模擬淺色模式下的層級(jí)概念。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

類似的,谷歌 Material Design 有一套屬于自己的層級(jí)規(guī)范:

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

3. 輔助色的應(yīng)用

輔助色在深色模式中亦是用來(lái)區(qū)分層級(jí)關(guān)系的重要部分(如下圖的下拉菜單設(shè)計(jì)),比如輔助色中的分割線色值界定,不論是用分割線區(qū)分層級(jí)或是用底色區(qū)分層級(jí),在屏幕亮度調(diào)暗時(shí)或色彩對(duì)比度較小時(shí)都有可能會(huì)"消失",深色模式下,相較于分割線與投影,較優(yōu)的處理方式是在交互層面設(shè)計(jì)更好的信息層級(jí)區(qū)分,這樣即使在看不清分割線的情況下依舊可以保持可讀性。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

關(guān)于文字

關(guān)于深色模式下的文字使用,老生常談的就是對(duì)比度了,這里就要引入一個(gè)新的名詞"WCAG",WCAG 全稱為 Web 內(nèi)容無(wú)障礙指南,其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議。WCAG 規(guī)定為了確保文字的可讀性,對(duì)比度需要符合 WCAG 的 AA 級(jí) 與 AAA 級(jí)標(biāo)準(zhǔn)。WCAG 的 AA 級(jí) 要求小文本與背景的對(duì)比度至少為 4.5:1,大文本與背景的對(duì)比度至少為 3:1。WCAG 的 AAA 級(jí)則要求小文本與背景的對(duì)比度至少為 7:1,大文本與背景的對(duì)比度為 4.5:1。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

這里推薦一個(gè)檢查色彩對(duì)比度的網(wǎng)站:contrast-ratio.com。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

為了適配暗黑模式,建議字色采用某個(gè)固定色值,字色的層級(jí)僅靠透明度進(jìn)行區(qū)分,如下圖:

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

同時(shí),白色相較于黑色會(huì)有視覺(jué)擴(kuò)充的效果,同樣的粗細(xì),白底黑字白色向內(nèi)壓會(huì)覺(jué)得字體較細(xì),黑底白字白色向外擴(kuò)則會(huì)覺(jué)得字體較粗,所以當(dāng)大面積使用粗體時(shí),字體的顏色在保證對(duì)比度的前提下如果相對(duì)較灰就不會(huì)造成視覺(jué)壓抑的感受。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

關(guān)于 ICON

在深色模式中,icon 的表現(xiàn)上建議不要直接翻轉(zhuǎn)顏色或者保持原樣,不同的 icon 需要進(jìn)行針對(duì)性的處理。白色背景可以更好地表現(xiàn)出形狀,人的大腦可以將白色腦補(bǔ)成圖形的一部分。然而在暗黑模式下,這種作用消失了,人腦更傾向于認(rèn)為這些空白的部分是鏤空的,如下圖:在 iOS 9 上,蘋果公司采用的辦法是將淺色模式下的線性圖標(biāo)顏色反轉(zhuǎn),拿到深色界面下使用。等到了 iOS 11,蘋果公司將這個(gè)圖標(biāo)在暗黑模式下改成了面性圖標(biāo)。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

同時(shí),對(duì)于彩色線性 icon 來(lái)說(shuō),基于我們前文所述,黑色對(duì)飽和度的變化會(huì)更敏感,而且明度不同也會(huì)導(dǎo)致淺色視覺(jué)外擴(kuò)程度不同而產(chǎn)生視覺(jué)上的粗細(xì)不統(tǒng)一,這就導(dǎo)致了黑底彩色線性圖標(biāo)極容易看起來(lái)很亂,對(duì)于這種圖標(biāo),一種是去除個(gè)性統(tǒng)一用純色展示,而一定要用不同顏色的話,則可以用單色圖標(biāo)加輔助色進(jìn)行點(diǎn)綴,或是將線性圖標(biāo)加固定形狀底色形成統(tǒng)一形狀(類似于 iOS),再或者將線性圖標(biāo)加粗規(guī)避飽和度和明度帶來(lái)的視覺(jué)干擾來(lái)規(guī)避這個(gè)問(wèn)題。

關(guān)于 button

關(guān)于按鈕點(diǎn)擊態(tài)的問(wèn)題。在我們?cè)O(shè)計(jì)界面的時(shí)候,按鈕的點(diǎn)擊態(tài)通常都是模擬現(xiàn)實(shí)的按鈕按下的狀態(tài)做了加深處理。但是在暗黑模式下,就要考慮加深是否能有效傳達(dá)點(diǎn)擊反饋。因此我們可以在按鈕邊緣增加閃爍效果,來(lái)增強(qiáng)暗色模式下的按鈕反饋效果。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

關(guān)于陰影

在淺色模式下,我們區(qū)分視覺(jué)層級(jí)通常會(huì)使用投影,陰影 y 值越高 blur 值越大則層級(jí)越高,反之則越低。而在深色模式中,因?yàn)楸尘暗纳钌茈y體現(xiàn)出陰影,這種方案相對(duì)來(lái)說(shuō)就不夠適用了。

在淺色模式下,頁(yè)面的層級(jí)可以靠投影進(jìn)行區(qū)分,底層元素投影面積較小、而上層元素投影面積較大。如下圖左側(cè):

而在深色模式下投影變得不明顯。因此改用"明暗"區(qū)分層級(jí),如下圖右側(cè):

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

谷歌 Material Design 把頁(yè)面分成了 8 個(gè)層級(jí):

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

其中最底層的"代號(hào)"為 00dp*,最高層為 24dp(PS:這里的 dp,無(wú)需和邏輯像素單位 dp、pt 關(guān)聯(lián)),不同層級(jí)的實(shí)現(xiàn)方式,是在同一個(gè)背景色上,疊加"不透明度"不同的白色。

深色模式如何設(shè)計(jì)?從6個(gè)方面總結(jié)深色模式的設(shè)計(jì)細(xì)節(jié)

比如:背景色為#121212, 那么最底層的 00dp 就是#121212 疊加不透明度為 0%的白色;而最上層的 24dp,則是#121212,疊加不透明度為 16%的白色。這樣一來(lái)不同層級(jí)只要調(diào)整所疊加的白色不透明度即可,操作起來(lái)也相對(duì)方便。

第三方產(chǎn)品圖

對(duì)于第三方不可控的圖片,為圖片加一層黑色遮罩是一種較好的選擇,這樣用戶在瀏覽時(shí)眼睛會(huì)感到更加舒適,在圖片多且高對(duì)比度的場(chǎng)景下,用這種處理方式,在保證易讀性的同時(shí),也可以降低用戶的使用疲勞感。

總結(jié)

深色模式的實(shí)用性有多少,每個(gè)人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰,但深色模式的界面卻具有一定的魅力,可以讓你聯(lián)想到新穎,高端,精致,神秘,力量,奢華這些詞。深色模式仍然有很多東西值得我們?nèi)ヌ剿?,但無(wú)論是深色模式還是淺色模式,以用戶的可讀性和易讀性為前提進(jìn)行設(shè)計(jì),才能更好地為用戶服務(wù),提升用戶的使用體驗(yàn)!

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/17736.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。