激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

如何讓你的深色UI看起來更舒服?給你5個設(shè)計(jì)技巧

發(fā)布時間：2024-02-27 10:04:30 瀏覽量：205次

眾所周知，深色主題是UI設(shè)計(jì)的最新趨勢。macOS去年推出了暗模式。Android和iOS現(xiàn)在也趕上來了。如果做得好，深色主題有很多好處。比如在黑暗環(huán)境下，深色可以減少眼睛疲勞，讓界面更容易閱讀。而且，根據(jù)屏幕的不同，它們的耗電量也可以大大減少。


不過，深色設(shè)計(jì)雖好，我們卻很難創(chuàng)造一個美感與實(shí)用兼?zhèn)涞暮诎抵黝}。因?yàn)槿绻覀冎皇呛唵蔚陌焉钌黝}視為色彩的顛倒和重復(fù)，那么反而會增加眼睛的疲勞，使其在弱光下更難閱讀，甚至可能打破我們的信息層次結(jié)構(gòu)。


在這篇文章中，我們將分享如何設(shè)計(jì)易讀、平衡和讓人感到舒適的深色主題。


1.近淺遠(yuǎn)暗

大多數(shù)深色主題的UI設(shè)計(jì)都遵循這一原則:越遠(yuǎn)的地方越暗。因?yàn)樗M了光從上方投射的環(huán)境。而當(dāng)我們設(shè)計(jì)深色主題時，很容易被淺色主題的慣性所左右，即越近的元素越暗，而越遠(yuǎn)的元素越亮。這種打破物理慣性的畫面會讓我們視覺感受非常不自然。


因此，當(dāng)我們設(shè)計(jì)深色主題時，應(yīng)該先提取出淺色主題的主色彩，然后反轉(zhuǎn)此色彩以得到深色主題的主色彩。并且對較高層次的元素調(diào)亮這種顏色，對較遠(yuǎn)層次的元素色調(diào)暗這種顏色。


在郵件應(yīng)用Superhuman中，我們的深色主題是由五種灰色陰影構(gòu)成的，較近的層次使用了較淺的灰色，較遠(yuǎn)的層次使用較深的灰色。




2.重新審視知覺對比

通過引用淺色主題設(shè)計(jì)深色主題時，重新審視感知對比度很重要。


例如，在我們的淺色主題中，聯(lián)系人信息是黑色的，不透明度為60%。但是在我們的黑色主題中，我們將聯(lián)系方式設(shè)置為白色，不透明度為65%。雖然兩者的對比度都超過AA標(biāo)準(zhǔn)，但額外的5%可以防止視覺疲勞，特別是在光線不足的情況下。


對于這些補(bǔ)償并沒有嚴(yán)格的規(guī)定。相反，我們會根據(jù)文本大小、字體大小和行寬分別調(diào)整每一項(xiàng)，以確保深色主題和淺色主題一樣清晰、易于閱讀。



3.減少大塊鮮艷的色彩

在淺色主題中，我們經(jīng)常使用大塊明亮的色彩，但是在黑暗的主題中，大塊的色彩會分散我們對于重要內(nèi)容的關(guān)注度。

比如，在Superhuman的“提醒我”界面。在淺色主題中，粉紅色的覆蓋層不會分散對話框的亮度。但是在黑暗主題中，相同的覆蓋層就會分散用戶的大部分注意力，因此我們在后續(xù)版本中刪除了疊加層，以便用戶可以快速、輕松地關(guān)注到重要內(nèi)容。





4.避免使用純黑或純白

通常，我們不會在深色主題中使用純黑或純白。這樣做有四個原因：


  • 物理世界

由于真正的黑色并不存在于我們的日常環(huán)境中。(世界上最黑的物體是麻省理工學(xué)院開發(fā)的一種尚未命名的材料，離真正的黑色還差0.005% !)。因此，我們的視覺已經(jīng)適應(yīng)了將相對的黑暗視為真正的黑色。這也是為什么#000000會讓人感覺非常不和諧的原因，尤其是在與較淺的元素對比時，它和我們?nèi)粘Ｒ姷降娜魏螙|西都不匹配。


  • 黑色拖尾現(xiàn)象


當(dāng)較淺的內(nèi)容被拖動在純黑色背景中時，會產(chǎn)生一種叫做拖尾的視覺失真現(xiàn)象，這種效應(yīng)通常出現(xiàn)在越來越普遍的OLED屏幕上，這種屏幕會在黑色背景下關(guān)閉像素點(diǎn)。(這也是為什么深色主題比淺色主題更省電的原因)。然而，這些像素的開啟和關(guān)閉要比改變顏色更慢，所以就產(chǎn)生了這種拖尾效果。




我們可以通過使用深灰色來避免黑色拖尾現(xiàn)象，那樣的話像素點(diǎn)即不會關(guān)閉，也依然要比淺色主題省電很多。

  • 層次感


除此之外，如果我們在背景元素中使用純黑色，那么將很難用陰影技巧來表達(dá)層次感。


例如，大家都知道，如果我們想在界面之上顯示一條通知，通知應(yīng)該浮于背景上方，那么可以使用陰影來傳達(dá)層次感。但在純黑背景下是無法呈現(xiàn)出陰影效果的，畢竟沒有什么顏色比純黑色更暗了。


如果我們的背景不是純黑色，那么就可以使用不同不透明度的陰影，還可以使用模糊效果來表達(dá)層次感。例如，郵件應(yīng)用Superhuman中的通知：



  • 暈光


純黑色背景和純白色文本可產(chǎn)生最高的對比度為：21：1。在定量的WCAG可訪問性術(shù)語中，這是最佳的輸出。


然而，在設(shè)計(jì)深色主題時，一定要注意避免過高的對比度。對比度太高會導(dǎo)致眼睛疲勞和光暈。


當(dāng)將非常明亮的文本設(shè)置在非常暗的背景下時，會產(chǎn)生光暈現(xiàn)象。尤其是對于散光患者來說，這種影響甚至更強(qiáng)。根據(jù)感官知覺和互動研究小組的博士后研究員Jason Harrison的說法：

散光患者（約占總?cè)丝诘?0％）發(fā)現(xiàn)，閱讀黑底白字要比閱讀白底黑字更難。這在一定程度上與光線有關(guān):在明亮的白色背景下，虹膜會閉合得更多一些，從而降低了晶狀體的變形程度。如果為黑色背景，那么虹膜會打開以接收更多的光線，晶狀體的變形會在眼睛上產(chǎn)生更加模糊的焦點(diǎn)。


因此在文本內(nèi)容較多的界面中，我們必須特別注意光暈效果，在郵件應(yīng)用Superhuman中，我們將白色文本設(shè)置為90％不透明度，以便它們和深色背景融合在一起。這可以平衡對比度和亮度，令該應(yīng)用在各種光照條件下都易于閱讀。



5.加深色彩

由于為了避免眼睛疲勞和光暈現(xiàn)象，我們把文本的顏色變暗了，所以在對比之下我們的色彩和按鈕就可能顯得太亮了。因此在最后的階段我們也必須調(diào)整這些顏色，以便用戶能在深色主題更舒適和體驗(yàn)。


首先，我們應(yīng)該降低亮度，使這些色彩不會影響到附近的文本。其次，我們應(yīng)該增加飽和度，令他們?nèi)匀荒鼙挥脩糇⒁獾健?/p>


例如，如果我們直接使用來自淺色主題的紫色，那么它在附近的文本中就顯得太亮了。因此在我們最后深色主題中，我們加深了這種顏色，這樣用戶就可以專注于文本內(nèi)容了。





6.總結(jié)一下

雖然深色主題有很多好處，現(xiàn)在也正在被廣泛關(guān)注著。但其實(shí)它很難很好地執(zhí)行，簡單的重復(fù)使用顏色和反轉(zhuǎn)色調(diào)只會增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。


因此我們找到了一種系統(tǒng)的方式來構(gòu)建易用、平衡、讓人舒適的黑暗主題。只需遵循以下步驟:


  • 近明遠(yuǎn)暗
  • 重新審視知覺對比
  • 減少大塊明亮的顏色
  • 避免純黑或純白
  • 加深色彩

今天的內(nèi)容就到這里了，希望能對大家所有幫助~

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定