中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

深色主題是應(yīng)用程序設(shè)計(jì)中的最新趨，本文作者闡述了如何設(shè)計(jì)可讀、平衡且令人愉悅的深色主題，給出了相關(guān)建議。

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

曾經(jīng)很少見(jiàn)的黑暗主題已成為人們普遍期望的主題。

如果做得好，深色主題會(huì)帶來(lái)很多好處。它們減少了眼睛疲勞，在弱光下更易于閱讀，大大減少電池消耗。

但是，很難創(chuàng)建令人愉悅的深色主題。

我們不能簡(jiǎn)單地重用我們的顏色或反轉(zhuǎn)我們的陰影，如果這樣做，我們將獲得與想要的相反的結(jié)果：我們將增加眼睛疲勞，并使其在弱光下更難以閱讀，我們甚至可能打破我們的信息層次結(jié)構(gòu)。

在這篇文章中，我們分享了如何設(shè)計(jì)可讀、平衡且令人愉悅的深色主題。

使遠(yuǎn)處的表面變暗

在深色主題中，UI元素的背景顏色遵循一個(gè)指導(dǎo)原則：該層離用戶越近（例如，模態(tài)），則表面積越輕。該模型類似于從上方投射光源的環(huán)境。一層后面越深，接收到的光線越少，進(jìn)入背景的光線就越多。

創(chuàng)建深色主題時(shí)，可能會(huì)想反轉(zhuǎn)現(xiàn)有的淺色主題。但是，遠(yuǎn)處的表面將變亮，而近處的表面將變暗，這會(huì)破壞身體并感覺(jué)不自然。

僅采用燈光主題的主表面顏色，反轉(zhuǎn)此顏色可產(chǎn)生深色主題的主表面顏色，變淺此顏色可得到較近的表面，變深的顏色可得到較遠(yuǎn)的表面。

在《超人》中，我們的黑暗主題由五種灰色陰影組成。較近的表面使用較淺的灰色。較遠(yuǎn)的表面使用較深的灰色。

較近的表面使用較淺的灰色，較遠(yuǎn)的表面使用較深的灰色

回顧知覺(jué)對(duì)比

通過(guò)引用淺色主題設(shè)計(jì)深色主題時(shí)，重新審視感知對(duì)比度很重要。不管數(shù)字可能暗示什么，這就是元素看起來(lái)有多少對(duì)比度。

例如，在我們的淺色主題中，聯(lián)系方式為黑色，不透明度為60％。但是在黑暗主題中，我們將聯(lián)系方式設(shè)置為白色，不透明度為65％。雖然兩個(gè)對(duì)比度均超過(guò)AA標(biāo)準(zhǔn)，但額外的5％可以防止疲勞，尤其是在弱光條件下。

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

減少大塊鮮艷的色彩

在淺色主題中，我們經(jīng)常使用大塊明亮的顏色。通常這很好：我們最重要的元素可能還會(huì)更亮。但是在黑暗的主題中，它不起作用：大塊的顏色將焦點(diǎn)從我們最重要的元素中提取出來(lái)。

例如，考慮我們的“提醒我”屏幕。在我們的淺色主題中，粉紅色的覆蓋層不會(huì)分散對(duì)話框的亮度。但是在我們的黑暗主題中，相同的覆蓋層吸引了我們的注意力。我們完全刪除了疊加層，以便可以快速，輕松地關(guān)注重要內(nèi)容。

減少大塊鮮艷的色彩，以使您可以輕松專注于重要事項(xiàng)

避免純黑色或白色

在《超人》中，我們不會(huì)在黑暗主題中使用任何純黑色或白色。這樣做有四個(gè)原因。

4.1 現(xiàn)實(shí)主義

在我們的日常環(huán)境中不存在純黑色。（世界上最黑暗的物體，是麻省理工學(xué)院開(kāi)發(fā)的一種尚待命名的材料，仍然比真黑色低0.005％?。┮虼?，我們的視野已適應(yīng)將相對(duì)黑暗感知為真黑色。這就是為什么#000000會(huì)感到如此刺耳的原因，尤其是當(dāng)與較輕的元素接觸時(shí)。它不符合我們通常看到的任何內(nèi)容。

4.2 黑色涂片

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

這種效應(yīng)發(fā)生在越來(lái)越普遍的OLED屏幕上。在這些屏幕上，純黑色像素被關(guān)閉。（這是黑暗主題比輕主題消耗更少能量的方式。）但是，打開(kāi)和關(guān)閉這些像素比改變顏色要慢。這種可變的響應(yīng)產(chǎn)生拖尾效應(yīng)。

iOS Clock應(yīng)用程序中的黑色污跡（必須在OLED屏幕上查看）

您可以通過(guò)使用深灰色來(lái)避免黑色污點(diǎn)，因?yàn)檫@樣像素將不會(huì)關(guān)閉。甚至可以使用像黑暗一樣深的灰色，#010101并且仍然比輕主題消耗更少的能量！

4.3 深度

如果在背景元素中使用純黑色，則會(huì)失去某些傳達(dá)深度的技巧。

例如，假設(shè)您的背景是純黑色的。在此之上，您將顯示一條通知。通知應(yīng)漂浮在背景上方，因此您可以使用陰影來(lái)傳達(dá)深度。除了陰影是無(wú)法察覺(jué)的，因?yàn)闆](méi)有什么比純黑色更暗。

如果您的背景不是純黑色，則可以使用具有不同不透明度的陰影，并使用模糊來(lái)傳達(dá)深度。例如，考慮超人中的通知：

如果背景不是純黑色，則可以使用陰影來(lái)傳達(dá)深度

4.4?光暈

純黑色背景上的純白色文本可產(chǎn)生最高的對(duì)比度：21：1。用定量WCAG可訪問(wèn)性術(shù)語(yǔ)來(lái)說(shuō)，這是夢(mèng)想的輸出。

但是，在設(shè)計(jì)深色主題時(shí)，請(qǐng)務(wù)必注意極高的對(duì)比度。對(duì)比度太高會(huì)導(dǎo)致眼睛疲勞和暈圈。

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

散光患者（約占總?cè)丝诘?0％）發(fā)現(xiàn)，閱讀黑白色文字比閱讀黑白色文字更難。這部分與亮度有關(guān)：在明亮的顯示（白色背景）下，虹膜會(huì)閉合得更多一些，從而降低了“變形”透鏡的效果。如果顯示為深色（黑色背景），則虹膜會(huì)打開(kāi)以接收更多的光線，并且鏡頭的變形會(huì)在眼睛上產(chǎn)生更加模糊的焦點(diǎn)。

在超人類中，我們必須特別注意光暈，因?yàn)槲覀兊膽?yīng)用程序文本非常沉重。我們將白色文本設(shè)置為90％不透明度，以使深色背景融合在一起。這平衡了對(duì)比度和亮度，因此該應(yīng)用程序在各種光照條件下都易于閱讀。

加深色彩

由于我們調(diào)低了文本的色彩以避免眼睛疲勞和暈眩，因此我們的彩色口音和按鈕可能顯得太亮?，F(xiàn)在，我們必須調(diào)整這些顏色以在黑暗主題中更好地工作。首先，我們降低亮度，以使這些顏色不會(huì)壓倒附近的文本。其次，我們?cè)黾语柡投?，以便它們?nèi)匀痪哂刑卣鳌?/p>

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

為深色主題創(chuàng)建更深的顏色；保持色調(diào)，降低亮度并增加飽和度。

結(jié)論

黑暗主題有很多好處，現(xiàn)在人們普遍期待它。但是，它們很難很好地執(zhí)行。重用顏色和倒置陰影的簡(jiǎn)單方法將增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能破壞視覺(jué)和信息層次。

我們找到了一種系統(tǒng)的方法來(lái)構(gòu)建可讀，平衡且令人愉悅的黑暗主題。只需按照以下步驟操作：

1. 使遠(yuǎn)處的表面變暗
2. 回顧知覺(jué)對(duì)比
3. 減少大塊鮮艷的色彩
4. 避免純黑色或白色
5. 加深色彩

我希望這可以幫助您設(shè)計(jì)令人愉悅的深色主題。

作者： Teresa Man；譯者： CANAAN；譯者公眾號(hào)：南設(shè)（ID：shemenglianmeng）

來(lái)源：https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f

本文由 @CANAAN 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議