首页 > 网页教程 > 设计分享 > 设计分享:深色模式设计的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应用开发教程:最常见的十大导航设计错误!

精彩推荐

热门教程