亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

深色主題是應(yīng)用程序設(shè)計(jì)的最新趨勢(shì)，MacOS 去年推出了暗黑模式，Andriod上個(gè)月推出了Dark Theme。IOS 在過(guò)去的兩周里也迎頭趕上了。 

曾經(jīng)罕見(jiàn)的暗黑模式現(xiàn)在已成為人們普遍期待的主題。

如果做得好，暗黑模式有許多好處。它們可以減少眼睛的疲勞，在昏暗光線下更容易閱讀。而且，根據(jù)屏幕的不同，可以大大降低電池消耗。

然而，創(chuàng)造一個(gè)令人愉悅的暗黑模式是很困難的。我們不能簡(jiǎn)單地重復(fù)使用我們的顏色或反轉(zhuǎn)我們的色調(diào)，如果這樣做，我們將得到與之相反的結(jié)果：我們會(huì)增加眼睛的疲勞，讓我們?cè)诨璋档墓饩€下閱讀變得更加吃力，甚至可能破壞我們看到的信息層次。 

在這篇文章中，我們將分享如何設(shè)計(jì)可讀、平衡、令人愉悅的暗黑模式。 

1.讓遠(yuǎn)的元素更暗

在暗黑模式里，UI元素的背景顏色遵循一個(gè)指導(dǎo)原則：越接近用戶的層（例如彈窗），表面顏色越淺。這個(gè)模型類似于一個(gè)光源從上方投射的環(huán)境。層離的越遠(yuǎn)，它所接受的光線就越少，也就越能融入到背景中。

在創(chuàng)建暗黑模式時(shí)，直接反轉(zhuǎn)現(xiàn)有的淺色主題顏色可能很容易，但是更遠(yuǎn)的層級(jí)會(huì)變得明亮，近的層級(jí)反而會(huì)變得黑暗，這樣會(huì)打破物理特性，感覺(jué)不自然。

相反，只取你的淺色主題的主要表面顏色。反轉(zhuǎn)這個(gè)顏色來(lái)變成你的深色主題的主要表面顏色，在較近的層級(jí)上把這個(gè)顏色變淺，而在較遠(yuǎn)的層級(jí)上把這個(gè)顏色變深。

在 Superhuman 中，我們的暗黑模式由五種深淺不一的灰色組成。較近的曲面使用較淺的灰色；較遠(yuǎn)的曲面使用較暗的灰色。 

2.重新審視視覺(jué)對(duì)比度

當(dāng)通過(guò)參考淺色主題來(lái)設(shè)計(jì)一個(gè)深色主題時(shí)，重新審視視覺(jué)對(duì)比度是很重要的。

例如，在我們的淺色主題中，聯(lián)系人詳細(xì)信息為黑色，不透明度為60%。但在我們的暗色主題中，我們將聯(lián)系方式設(shè)置為不透明65%的白色。雖然這兩種對(duì)比度都超過(guò)了AA標(biāo)準(zhǔn)，但額外的5%可以更有效地防止疲勞，特別是在光線較弱的情況下。 

對(duì)于這些細(xì)微區(qū)別沒(méi)有硬性規(guī)定。相反，我們根據(jù)文本大小、字體粗細(xì)和行高?來(lái)?分別調(diào)整每個(gè)項(xiàng)目，以確保深色主題與淺色主題一樣清晰和易于閱讀。 

3.減少大塊的明亮色塊

在淺色主題中，我們經(jīng)常使用大塊的明亮顏色。這一般是很好的，這樣最重要的元素可能會(huì)更加顯眼。但在暗黑主題中，這樣就不行了，大塊的亮顏色會(huì)讓我們?nèi)菀缀鲆暩匾脑亍?nbsp;

例如我們的提醒頁(yè)面，在淺色主題中，粉色的覆蓋不會(huì)分散對(duì)更明亮的對(duì)話框的注意力。但在我們的暗黑主題中，同樣的覆蓋吸引了我們的注意力。當(dāng)我們把覆蓋層變成更深的顏色，這樣就可以輕松地專注于重要的層級(jí)。 

4.避免純黑和純白

4.1靠近現(xiàn)實(shí)

真正的黑色并不存在于我們的日常環(huán)境中。(世界上最暗的物體是麻省理工學(xué)院開(kāi)發(fā)的一種尚未命名的物質(zhì)，距離真正的黑色仍有0.005%的差距）因此，我們的視覺(jué)已經(jīng)適應(yīng)了將相對(duì)黑暗感知為真正的黑色，這就是為什么#000000會(huì)讓人感覺(jué)如此刺眼，特別是在與淺色元素對(duì)比時(shí)，因?yàn)樗c我們通?？吹降娜魏螙|西都不匹配。 

4.2黑色模糊

黑色模糊是當(dāng)較淺的內(nèi)容在純黑色背景上拖動(dòng)或滾動(dòng)時(shí)發(fā)生的視覺(jué)失真。 

在OLED屏幕上，這種現(xiàn)象越來(lái)越普遍。在這些屏幕上，純黑色像素被關(guān)閉。(這就是深色主題比淺色主題更省電的原因。）然而，這些像素的開(kāi)啟和關(guān)閉比改變顏色要慢。這種可變的反應(yīng)產(chǎn)生了模糊涂抹的效果。

你可以使用深灰色來(lái)避免黑色模糊，因?yàn)檫@樣像素將不會(huì)關(guān)閉。這甚至適用于像#010101?一樣暗的灰色，并且仍然比淺色主題更省電。

4.3深度

如果你在背景元素中使用純黑，你將不能更好地表現(xiàn)視覺(jué)深度。

舉個(gè)栗子，想象一下在一個(gè)純黑背景上要顯示一個(gè)通知，通知應(yīng)該漂浮在背景之上的，所以你用陰影來(lái)表達(dá)深度，但是這個(gè)陰影實(shí)在是難以察覺(jué)，因?yàn)闆](méi)有什么比純黑更黑的了。

而如果你的背景不是純黑色的，你就可以使用不同透明度和模糊度的陰影來(lái)表現(xiàn)深度。

4.4光散現(xiàn)象

純白的文字與純黑的背景產(chǎn)生了最高的對(duì)比度：21：1。在WCAG內(nèi)容無(wú)障礙指南里，這是最極端的情況。

然而，在設(shè)計(jì)暗黑模式時(shí)，最重要的就是要注意對(duì)比度不能過(guò)高。對(duì)比度太高會(huì)導(dǎo)致眼睛疲勞和暈眩。 

當(dāng)在非常暗的背景下設(shè)置非常亮的文本時(shí)，文本可能會(huì)看起來(lái)滲入背景中。對(duì)于我們這些散光的人來(lái)說(shuō)，這種影響甚至更強(qiáng)。根據(jù)感官知覺(jué)和互動(dòng)研究小組的博士后研究員Jason Harrison的說(shuō)法：

有散光的人(大約50%的人)發(fā)現(xiàn)在黑底白字比白底黑字更難閱讀。這在一定程度上與光線水平有關(guān)：在明亮的顯示器(白色背景)下，眼睛虹膜關(guān)閉得更多，從而降低了“變形”鏡頭的效果；在黑暗顯示器(黑色背景)下，虹膜打開(kāi)以接收更多的光線，而鏡頭的變形在眼睛處產(chǎn)生了更模糊的焦點(diǎn)。 

在Superhuman 里，我們必須特別小心，因?yàn)槲覀兊腁PP里文字占比非常大。我們將白色文本設(shè)置為90%不透明度，這樣黑色背景就可以融入其中。這平衡了對(duì)比度和亮度，因此該應(yīng)用程序在各種光線條件下都很容易閱讀。 

5.加深其他顏色

由于我們淡化了文字顏色以避免眼睛疲勞和光散現(xiàn)象，其他的可點(diǎn)擊文字和按鈕就可能顯得太亮了。我們現(xiàn)在必須調(diào)整這些顏色，以便在暗黑模式中更好地顯示。首先，我們降低亮度，這樣這些顏色就不會(huì)蓋過(guò)附近的文字，然后增加飽和度，使它們?nèi)匀挥忻黠@的區(qū)別。

例如，如果我們直接使用淺色主題中的紫色，相對(duì)于附近的文本，它會(huì)顯得太亮。在我們實(shí)際的暗色主題中，我們加深了這個(gè)顏色，以便用戶可以專注于文本。 

總結(jié)

暗黑模式有很多好處而且現(xiàn)在被廣泛期待，但是很難應(yīng)用的很好。重復(fù)使用顏色和反轉(zhuǎn)色調(diào)的簡(jiǎn)單方法會(huì)增加眼睛的疲勞，在光線不足的情況下更難閱讀，甚至可能打破視覺(jué)和信息的層次。

我們找到了一種系統(tǒng)的方法來(lái)建立一個(gè)可讀性良好、視覺(jué)平衡和令人舒適的暗黑模式。只需遵循以下步驟： 

1.讓遠(yuǎn)的元素更暗

2.重新審視視覺(jué)對(duì)比度

3.減少大塊的明亮色塊

4.避免純黑和純白

5.加深其他顏色

Powered by Froala Editor