首頁 > 網頁教程 > 設計分享 > 設計分享:深色模式設計的8個小技巧

設計分享:深色模式設計的8個小技巧

時間:2019-09-17    來源:神譯局

隨著九月份的臨近,蘋果 iOS 13 正式版也即將推出,隨之而來的還有大家期盼已久的「深色模式」。前幾天,蘋果推送了 iOS 13 的 beta 5 版本。其中,「深色模式」還加入了過渡動畫,效果看起來更加流暢自然。本文中,Nick 跟大家分享了設計「深色模式」的 8 個小技巧,希望對你有用。

△ 圖片來源:MacRumors

近幾年來,越來越多的產品都推出了「深色模式」。無論是蘋果,還是谷歌,「深色模式」都已經成為其產品界面中不可缺少的一部分。

相比于「淺色模式」,「深色模式」的屏幕亮度更低,可以讓用戶在暗黑的環境下更友好地體驗產品,同時,也可以最大程度地減緩眼睛疲勞。

那么,「深色模式」到底應該怎么設計才好呢?以下,我總結了 8 條產品設計建議,希望對你有所幫助。

避免全黑設計

「深色模式」并不一定要求背景全黑或者字體全白。實際上,這種高反差也會讓人看起來很難受。

安全起見的話,建議在頁面上主要采用深灰色,而不要采用全黑色(色號#000000)。

相比于全黑色,深灰色背景下的淺色文字反差感稍弱,可以緩解用戶的眼睛疲勞。此外,因為在灰色背景下(而非全黑背景)更容易看見陰影,所以采用深灰色,還可以更好地體現更多色彩、陰影以及立體感等內容。

根據谷歌等材料設計(Material design)原則,頁面「深色模式」的主色最好選用 #121212 深灰色號。

避免在「深色模式」中采用過度飽和色彩

在淺色背景下,飽和色彩看起來會非常生動形象。然而,如果在「深色模式」下采用飽和色彩,則會讓人難以識別有關元素或內容。

因此,在「深色模式」中,主色調一定不要采用飽和色彩。建議使用淺色調(色調控制在 50 至 200 范圍內),從而讓頁面內容在「深色模式」下體現更佳的可讀性。

淺色調不僅不會影響用戶體驗,它還會在不造成眼睛疲勞的前提下保持恰當的反差。

避免在「深色模式」中采用飽和色彩,否則會降低用戶的可讀性(如左圖);建議采用淺色調,保證基本的可讀性(如右圖)。

符合色彩對比標準

此外,還要確保在「深色模式」下,頁面內容也要保持舒適和清晰度。背景顏色必須要足夠深,從而反襯出頁面淺色文字。

根據谷歌的材料設計原則,建議文字和背景的對比比例至少保持在 15.8 : 1。

你也可以通過色彩對比工具來測試有關對比比例。

文本用色一定要「亮」

所謂「亮」,即是要讓用戶能立即識別頁面文本內容。通常情況下,頁面文本也必須要采用「亮」色。

對于「深色模式」,一般采用的「亮」色是純白色(色號#FFFFFF)。不過,純白色會給人非常明亮的感覺,在一定程度上與深色背景結合在一起,會給人一種眩暈的感覺。

所以,根據谷歌的材料設計原則,建議在頁面文本選色方面采用稍微深一點的白色:

  • 對于重點強調的文本,可以將透明度設置為 87%。
  • 而最不重要的文本則可以將透明度設置為 38%。
  • 一般重要的則可以將透明度設置為 60%。

小提示:相比于淺色背景下的深色文本,深色背景下的淺色文本會顯得更加厚實。因此,你可能會喜歡在「深色模式」中采用相對較細的文字。

△ 采用稍微深一點的白色,可以防止文本和背景顏色之間的明顯對比產生的眩暈感。

相關推薦
十五個用戶體驗設計(UI/UX)案例剖析
騰訊CDC分享QQ登錄界面的banner設計過程點滴
移動終端全新界面設計語言“Metro”簡析
20個精致漂亮的視頻播放器界面設計欣賞及點評
淺談界面設計中的結構設計
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
分享:360安全桌面主題設計過程及思路總結
移動應用設計的橫豎屏切換中的界面設計與體驗提升
國外精彩網頁界面設計案例賞析
成功的視覺設計需要給用戶傳達四個要點
富有靈感和創意的web布局及交互設計賞析
Photoshop教程:提高IOS設計效率的30個要訣分享
在網頁設計中如何應用黃金分割比例?
優秀網頁/平面設計師是怎樣煉成的
符合用戶操作習慣的網站界面設計分享
21個帶斜線排版設計的網站設計創意欣賞
另眼觀看用戶界面扁平化設計的不足之外
產品視覺設計與用戶心理的有趣現象
平面設計中關于控制視覺層次的設計方法
10個漂亮實用并附帶源碼的Web設計教程分享
創造視覺沖擊力的網頁設計配色技巧
在視覺設計中對像素的深度解析
網頁設計中關于透明效果的小技巧分享
色彩情感對用戶體驗設計的影響
換湯不換藥?看應用們如何“為iOS 7設計”
APP瀏覽體驗設計的思考:如何理解用戶的眼?
高效UI設計秘笈 Photoshop CC使用技巧圖文教程
25個創意獨特的Web表單設計案例欣賞
2014年Web網頁設計的10大發展趨勢前瞻
20個創意漂亮的手機應用程序登陸頁面設計欣賞
界面設計教程:如何做好扁平化設計之交互篇
美工做推廣?我的工資是如何從3.5K漲到9K的
移動應用圖標配色訣竅 APP界面配色設計教程
網頁設計教程:首屏圖文混排10大技巧分享
Android應用開發教程:最常見的十大導航設計錯誤!

精彩推薦

熱門教程

北京pk10走势图下载 新加坡快乐8开 做直播游戏赚钱吗 福彩3d出号走势图彩吧网 斗地主棋牌游戏手机版 排三杀差变软件下载 宁夏11选5开奖号码 买澳洲幸运8 河南11选5开奖结果走势图 澳洲幸运8走势 广东11选5专家推荐 网上彩票投注app 吉林11选5开奖结果查询