91久久九色_99精品在线免费_91精品欧美一区二区三区_成人一级毛片_国产精品久久久久免费视频_99精彩视频在线观看

巧妙利用UI設計中的暗黑模式– Dark Mode

2021-04-15
7201
0

我們每天都會看一些APP和網站。有時候一些設備的亮白色屏幕可能會使我們眼睛感覺到不舒服。這就是為什么越來越多的設計師開始注重創作兩種主題模式——明亮和黑暗。

黑暗模式有一些我們應當遵守的特定規范,使其對用戶使用來說會更加合理。本期和大家分享一些實用的小貼士和技巧,使你可以創造一個能帶來積極作用的主題。

 

為什么選擇暗黑模式?

黑暗主題的主要優勢是在于弱光環境下具有更高的可讀性。黑暗模式降低了設備屏幕的亮度。它改善了視覺工程學,并能在特定的光照條件下得到更好的調節。正因如此,在夜晚及深夜使用數碼設備會更加舒適。

 

使用暗黑模式可以:

  • 減輕眼睛疲勞
  • 構造視覺層次
  • 使界面更神秘
  • 營造高端感
  • 提高在夜間提高可讀性
  • 確保夜晚使用環境(比如在晚上使用娛樂的app)

 

在以下情況下,請避免使用暗黑模式

  • 該解決方案在戶外白天使用。
  • 有很多文字可供閱讀

這些是深色模式的優缺點。讓我們轉到可以在項目中使用的實用技巧:

盡量不要用100%的純黑色

當您想開始設計暗黑模式時,你想到的第一件事可能是“直接創建一個黑色背景!”。

這應該是我們常犯的錯誤。

Google的Material Design建議使用深灰色,而不是純黑色。Material Design建議的深色主題界面顏色為#121212。

 

 

考慮把顏色飽和度降低

黑暗模式應避免使用飽和色。首要原因便是可訪問性——飽和色不符合WCAG (注:Web內容無障礙指南 ) 的標準:即深色背景下的正文文本至少為4.5:1(注:即界面主色與文字信息的對比度 )。

飽和色在深色背景下會產生光學振動(optical vibrations),從而可能會導致眼部疲勞。

 

 

做兩個調色板–用于暗黑模式和明亮模式

在上面的技巧中,我提到過飽和的顏色更適合深色主題。另一方面,我們都喜歡輕便的用戶界面中充滿活力的色調。

如何匹配這兩個?接下來的答案是- 給這兩種主題創建互補的色板是最佳選擇。

 

 

記住深色模式下的可訪問性

如果你想使解決方案更易于使用,則有適用于深色主題的特定準則。最重要的是以下內容:正文和背景之間的對比度應至少為15.8:1。正因這點,即便是更高、顏色更淺的層級,可讀性也很不錯(參見Material Design)

 

你可以使用這些工具來檢查對比度:

– Contrast(mac版)

– Accessible Brand Colors(web端)

– Stark(XD、Sketch、Figma插件)

 

 

避免使用陰影

在一些明亮的界面中,我們往往使用輕微的陰影來表現深度。正因如此,現在的界面使用起來會更加自然合理(注:可能是界面設計借鑒和引用了自然的光影效果,所以感覺會比較自然合理 )。然而,陰影在大多數黑暗模式的元素中,并不是那么明顯。這就是為什么不要頻繁地使用它們。畢竟還有另外的表現層次的方法。

 

海拔高度構建層級結構

如你所知,陰影在黑暗主題中顯示效果不好。表達層級結構的更好的方法是使用海拔的亮暗。

背景層應該是最暗的。放置在其頂部的元素應稍亮一些。正因如此,界面能夠更合理的被用戶感知。

 

 

遵循平臺準則

設計一套流暢合理的界面是所有平臺的使命。所有主流平臺都有制定規范,可以幫助你來實現黑暗主題(或模式)。

iOS人機界面指南的主要規范:

  • 專注于內容。
  • 在淺色和深色外觀中測試你的設計。
  • 當你調整對比度和透明度等輔助功能設置(注:accessibility settings,或稱為可訪問性設置 )時,確保在黑暗模式下的內容清晰易讀(上面講到的技巧將做到這一點)

 

顏色

  • 使用適應當前外觀的顏色(使用動態顏色——兩個色板)(注:iOS13官方新增動態顏色dynamic color ,同樣的顏色在dark mode和light mode模式下的色值不一樣 )
  • 確保所有外觀都有足夠的色彩對比
  • 柔化白色背景的顏色(白色背景–深色調,深色背景–淺色調)。

 

圖標和圖像

  • 盡量使用SF符號(SF Symbols)(可輕松調整為黑暗和明亮模式)
  • 必要時為明亮和黑暗模式單獨設計符號
  • 確保彩色圖標和單色圖標清晰易讀

 

文本

  • 使用系統提供的標簽色(label colors)
  • 使用系統視圖繪制文本字段和文本視圖

 

Material Design的主要原則

  • 用灰色變暗(使用深灰色代替純黑色)
  • 帶有重音的顏色(應用有限的重音)
  • 節省能源(較深的顏色可節省使用OLED顯示器的設備的功率)
  • 增強可訪問性(使用上一節中提到的原則)

 

 

在明暗的環境下進行測試

你對界面的看法可能會因主題而異。需要進行測試來驗證該主題結構是否合理。

你應在夜間的弱光條件下來測試黑暗模式。同時,你也可以白天在戶外檢查黑暗主題的基本元素是否具有足夠的可讀性。這樣你才能確保用戶將得到一款高質量的產品。

 

可以自由切換

允許用戶在需要時能夠從明亮模式切換到黑暗模式。你也可以根據日照條件使其能夠在模式之間自動切換,但它仍應可以手動設置。切換UI主題在用戶眼中是一個重大的變化,應該始終能由他們自己來控制。

 

 

總結

深色主題(或模式)如今非常流行。所有主流平臺都開始支持此模式,同時用戶也會要求應用界面存在這一功能。這可是學習其規范并開始在項目中創建黑暗主題的最佳時機。

轉載聲明:本文來源于網絡,不作任何商業用途

免責聲明:本文內部分內容來自網絡,所涉繪畫作品及文字版權與著作權歸原作者,若有侵權或異議請聯系我們處理。
收藏

全部評論

您還沒登錄

暫無留言,趕緊搶占沙發
繪學霸是國內專業的CG數字藝術設計線上線下學習平臺,在繪學霸有2D繪畫、3D模型、影視后期、動畫、特效等數字藝術培訓課程,也有學習資源下載,還有行業社區交流。學習、交流,來繪學霸就對了。
繪學霸iOS端二維碼

IOS下載

繪學霸安卓端二維碼

安卓下載

繪學霸微信小程序二維碼

小程序

版權聲明
本網站所有產品設計、功能及展示形式,均已受版權或產權保護,任何公司及個人不得以任何方式復制部分或全部,違者將依法追究責任,特此聲明。
熱線電話
18026259035
咨詢時間:9:00~21:00
在線客服
聯系網站客服
客服微信:18026259035
公司地址
中國·廣州
廣州市海珠區曉港中馬路130號之19
繪學霸客戶端(權限暫無,用于CG資源與教程交流分享)
開發者:廣州王氏軟件科技有限公司 | 應用版本:Android:6.0,IOS:5.1 | App隱私政策> | 應用權限 | 更新時間:2020.1.6
主站蜘蛛池模板: 国产一区二区三区在线免费观看 | 日韩在线观看精品 | 在线欧美日韩 | 亚洲成人av一区二区三区 | 男女超级黄aaa大片免费 | 欧美日韩电影 | 国产在线精品一区二区 | 精品成人免费一区二区在线播放 | 久久99成人| 麻豆国产一区二区三区四区 | 国产精品久久久久精 | 九九香蕉视频 | 99九九久久 | 亚洲 欧美 日韩 综合 | 九九综合九九 | 一区二区三区精品视频 | 欧美一级欧美一级在线播放 | 国产一区二区三区观看 | 欧美日本三级 | 精品动漫一区二区 | 精品成人网 | 成人国产精品免费网站 | 在线看的毛片 | 国产成人精品午夜视频免费 | 久国产精品韩国三级视频 | 欧美在线性爱视频 | 亚洲一区二区三区在线免费观看 | 国产午夜精品一区二区三区嫩草 | 日韩欧美大片网站 | 一区免费观看 | 99这里只有 | 99re热这里只有精品视频 | 日韩在线精品视频 | 国产伦精品一区二区三区四区免费 | 美女精品一区 | 91av看片| 欧美日韩三级 | 亚洲乱码视频 | 激情视频一区二区三区 | 日韩中文字幕在线视频 | 99久久99久久精品国产片果冻 |