恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
深色模式将会席卷而来?
0.0°
2019-06-05 自译外文 经验/观点 原作者: Ilke Verrelst 举报 2474 4 4 0

在为你的APP或网站设计深色模式时要记住的事项

在2018年的时候这个趋势就已经很清楚了,深色模式即将来临。现在我们已经到了2019年年中,我们可以有把握地说:它们已经来了,并且无处不在。

Image title

一个旧版绿字黑底的显示器的示例


首先说深色模式不是一个全新的概念,它已经存在相当长的一段时间了。很早的时候深色模式就存在了:显示器是绿色和黑色显示的,但这仅仅是因为内部的荧光粉涂层受到辐射时会发出绿光。


但即使在彩色显示器问世之后,深色式仍然存在,究竟为什么会这样呢?


错误持续一整天

Image title

有两个主要的动机解释了为什么现在每个人都急于在他们的应用程序中添加深色主题。 首先: 计算机无处不在。 我们看的每个地方,都有各种屏幕。我们整天整夜都在使用移动设备。深色模式使您的眼睛更容易在睡前最后一次浏览你的“内容”。 (如果你像我一样,“最后一次”可能要花3个小时)


另一个原因是屏幕背后不断创新的技术。苹果(apple)、谷歌、三星(Samsung)和华为(Huawei)等大公司的旗舰机型都采用OLED屏幕,与LCD显示器不同,OLED不需要背光。这对你的电池寿命来说是个好消息。想象你正在用手机看一个黑色方块的图片;使用LCD显示屏时,即使大部分屏幕是黑色的,背光也能照亮整个屏幕。但是,当在OLED显示屏上观看相同的黑色方块图像时,构成黑色方块的像素就会被关闭,这是零耗能的。


这些类型的显示器使深色模式更有趣。通过提供深色界面,你可以极大地延长您设备的电池寿命。可以 去查看去年11月的Android开发者峰会的一些事实和数据。而且深色模式确实会带来一些UI调整,让我们一起看一下。


深色模式

首先:“深色”不等于“黑色”。不要只用黑色背景改变你的白色背景,因为这样就无法在物体上使用阴影。这将使你的设计看起来超级扁平(虽然不是好的扁平)


重要的是要记住一些基本的阴影原则。更高的物体应该在阴影下比较轻,模仿真实的照明和阴影。这样,就可以更容易地区分不同的组件及其层次结构。

Image title

两个相同的带有阴影的灰色方块,一个放在100%黑色背景上,另一个放在#121212上。升高时,物体会变成浅灰色。


在你的深色主题中,只要对比度合适,它仍然可以使用你的原始颜色。让我们用一个例子来解释。

Image title


在此界面中,您的主要操作是底栏中的一个蓝色大按钮。在明暗模式之间切换时,没有大的的对比度方面的问题,按钮仍然能吸引所有注意力,图标清晰,一切正常。

Image title


但当在文本中使用相同颜色时,会出现问题。这时可以考虑使用一种不太饱和的原色色调,或寻找其他方式将主色彩融入你的界面中。

Image title


你可能使用的所有其它饱和颜色也是如此,例如警告或错误颜色。Google在“ 设计指南”  中默认错误状态颜色的基础上新加一层40%白色图层,在切换到深色模式时,可以将其作为新的颜色使用。这是一个非常好的开始,因为这将提高对比度,以通过AA级标准。你当然可以根据自己的选择调整这些颜色,但请务必检查对比度。有一个有用的工具Sketch的Stark 插件,它可以准确地告诉你2层之间的对比度。


文本怎么样?

文本的规则很简单:任何东西都不应该是100%的黑或100%的白,反之亦然。白色反射所有波长的光,黑色吸收它。如果你把100%的白色文本放在100%的黑色背景上,这些字母会反射光线,分散开来,变得越来越难以区分,从而影响可读性。


同样的道理也适用于100%白色的背景,因为它反射的光线太多,无法完全聚焦在文字上。试着稍微柔化白色,使用浅灰色作为黑色背景上的文本。这将更容易防止眼睛疲劳。

Image title


深色模式来了,而且会继续下去

我们每天看屏幕的时间每天都在增加,从我们醒来的那一刻到晚上睡觉的时候,每天都会有新的屏幕被添加到我们的日常生活中。我们的眼睛不习惯在晚上这么晚且这么长时间看屏幕。这就是深色模式的用武之地。随着macOS和Material Design(iOS也很有可能)中这一功能的引入,我们相信它将成为所有应用程序的默认功能,包括移动和桌面应用程序。所以必须更早地做好准备!


不采用深色模式的唯一原因是,当你100%确定你的应用程序只是在白天专门使用,这是非常特殊的。


在实现深色模式时,除了前面总结的基本原则之外,还有一些事情需要额外注意。在可访问性方面,深色模式显然不是最友好的,因为对比度整体较低,也不能真正提高可读性。

Image title


但是,想象一下你已准备睡觉了,非常困,但就在你入睡之前,你突然记起要给别人发送一个不能再等一晚的超重要文本。你拿起你的手机,打开它,然后AHHHHH ......你的iMessage的浅色背景会让你再精神3个小时。虽然深色背景下的浅色文字不被认为是访问性最好的,但是拥有正确的深色模式可以将可用性提高一百万倍。 这完全取决于用户当时所处的情况。


这就是为什么我们认为自动深色模式是一个很好的功能。它晚上开,早上自动关闭。你的用户甚至不需要考虑它,这是真正好的可用性。Twitter在深色模式设置方面做得很好。最重要的是, 它们具有深色模式和更深的模式,对于那些OLED屏幕,真是福音。 重要的是添加设置:让用户在任何时候可以手动切换回到他喜欢的模式,没有什么比自动更改且无法设置更令人沮丧了。

Image title

Twitter有一个自动深色模式,它在晚上开启,早上关闭


在为你的应用程序设计这一功能时要记住的另一件事是,有些东西是不能变黑的。


以文本编辑器为例。您可以将界面设置为黑色,但是您的工作范围将始终是白色的,就像真实的纸张一样。

Image title

打开深色模式的页面


同样的道理也适用于所有的内容创造产品,比如Sketch或Illustrator。 虽然你正在使用的环境可能会切换到深色状态,但你正在工作的画板默认情况下总是白色的。

Image title

在深色模式下,仍然是一个明亮的白色画板


所以无论什么应用程序,我们都相信深色模式将会成为你所使用的操作系统的固有模式,所以最好为未来做准备,它可能会变成的。


如果你想了解更多关于设计深色界面的内容,请查看Material Design指南,这是本文的主要信息来源。









更新:2019-06-05

收藏

4人已收藏

GianniChia

交流群公号:GianniChia

  • 38

    作品

  • 1916

    粉丝

  • 12

    关注

  • ICON网格制作极简手册
  • 网页网格设计极简手册
  • 动效灵感集 5.17
  • 如何画出完美手机模板
相关标签

    猜你喜欢

      2019-06-05 自译外文 经验/观点 原作者: Ilke Verrelst 举报 2474 4 4 0

      深色模式将会席卷而来?

      0.0°

      你确定要举报深色模式将会席卷而来?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录