美文网首页
【暗黑】

【暗黑】

作者: 是小嗯嗯啊 | 来源:发表于2020-08-06 15:07 被阅读0次

最近两年,各种系统、软件都开始支持酷酷的「黑暗模式」。2019 年的两场重量级发布会 Google I/O 和 Apple WWDC,两家公司也不约而同的发布了手机系统的 Dark Mode(Theme),在随后的几个月内升级 Android Q 和 iOS 13 体验暗黑色彩模式的 UI 界面。


为什么暗黑模式如此的受到大家重视

· 暗光环境下使用场景

人们对智能手机的依赖性越来越强,设备使用时间也越来越高频。覆盖了白天、黑夜,所以在弱光环境下使用的需求也随之越来越需要被考虑。最早人们的需求只是护眼,在视频网站、社交平台等停留时间较多的地方,通过设计和技术手段降低屏幕对眼睛的损害。所以 Dark Mode 可以降低屏幕的亮度,减少对眼睛的视觉压力。所以也可以称之为「夜间模式」。

· 省电

现在智能机屏幕越做越大,屏幕越做越亮,屏幕成了耗电大头,手机续航能力的问题也日益严峻。可以降低设备耗电速度的 Dark Mode,由于 OLED 自发光的特性,在纯黑色时像素点可以完全关闭达到省电效果优势突显出来。

· 突出内容

色彩具有层级关系,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样的对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作。


对设计的影响

· 暗黑UI不是简单的反色处理

苹果为官方组件中的彩色做了黑暗模式的适配。仔细分析会发现在保障原色系基础上,适量增加对比度&降低透明度,使得色彩与背景的对比度在深浅模式中能够保持一致。

增加对比度&降低透明度


同样,设计师常用的投影的部分也是在Dark mode中较普通模式有较大区别的。在白色背景下能够轻而易举突出页面/卡片纵向层级关系的「阴影」,在 Dark Mode 的纯黑色背景下已经不适用了。所以 iOS 建议利用「浮层」(Elevated) 来表达页面的纵向关系。Elevated 层只在黑暗模式中起作用,所以对应的色彩规范也全是以深色模式为准。说人话就是在 Dark mode 中去掉阴影,把卡片颜色做淡。

DarkMode下通过灰度来表达纵向关系


· 注重用户的观感体验

以文字颜色配比为例,传统浅底深字的界面,因为对比度较强,阅读时间长后眼睛容易产生疲劳感。通过黑暗模式的深底浅字,减少了屏幕中发出的光,也满足了最低色彩对比度要求。但暗色背景上的浅色文字也要把握尺度,避免亮度过高会产生的视觉疲劳。


一些坑

浅色为主的图片、视频等图像内容信息

例如电商 APP 不可避免有大量商品图片元素,并且在目前主流图片规范引导的是干净的浅色底为主,就会形成下图中「Dark」所示,产品图区域比较突兀。

总之,「暗黑」已经来了,设计师们好好接招

相关文章

  • 暗黑霸业隐私政策

    暗黑霸业隐私政策 暗黑霸业重视用户的隐私。您在使用暗黑霸业的服务时,暗黑霸业可能会收集和使用您的相关信息。暗黑霸业...

  • 禁用iOS13暗黑模式

    如果手机开启暗黑模式,没有做暗黑模式的app显示会有问题,如果不打算支持暗黑模式,需要将暗黑模式禁止。在plist...

  • 暗黑模式开发

    iOS13暗黑模式适配(项目开发版) iOS 13 DarkMode 暗黑模式 IOS 暗黑模式适配---基础适配

  • ios13适配不断更新

    1. 暗黑模式 iOS13使用暗黑模式时,UIView默认背景色会变成暗黑色。适配暗黑模式的工作量较大,改为强制使...

  • iOS13 适配总结

    1. 暗黑模式 iOS13使用暗黑模式时,UIView默认背景色会变成暗黑色。适配暗黑模式的工作量较大,改为强制使...

  • 暗黑战域用户协议

    暗黑战域用户协议 欢迎申请使用暗黑战域提供的服务! 《暗黑战域用户协议》(以下简称“本协议”)由您与暗黑战域共同缔...

  • Xcode 升级11 适配 ⚠️记录~

    1、关闭暗黑模式 ,如果没有适配暗黑模式,在暗黑模式下会很丑 2、 报错 library not found fo...

  • Android 10 暗黑模式适配,你需要知道的一切

    暗黑模式 在 Android 10 里,Dark theme 暗黑模式得到了系统级的支持。暗黑模式不仅酷炫,而且有...

  • 暗黑战域隐私政策

    隐私政策 暗黑战域重视用户的隐私。您在使用暗黑战域的服务时,暗黑战域可能会收集和使用您的相关信息。暗黑战域希望通过...

  • iOS 开发之关闭暗黑模式

    对于现在很多应用不想适配暗黑模式或者来不及适配的,可以关闭暗黑模式。 全局关闭暗黑模式: 在 Info.plist...

网友评论

      本文标题:【暗黑】

      本文链接:https://www.haomeiwen.com/subject/emxgyctx.html