APP设计实例分析，为什么黑暗模式突然火了？
为了适应系统，很多app都推出了黑暗模式。
除了降低能耗，进一步延长手机的续航时间，黑暗模式还能有效解决烧有机发光二极管屏幕和浪费眼睛的问题。小莫体验了几个常用app的黑暗模式，和大家分享了我的体验。
从这些案例中，或许可以找到深色图案流行的原因。
黑暗模式是一种全新的外观，可以减少视觉疲劳，帮助用户集中注意力。与传统夜间模式最大的区别在于，黑暗模式不仅保证了弱光环境下的体验，而且在强光下也具有可读性。
虽然深色模式也叫深色模式，但并不意味着背景色要改成纯黑。
如果使用100%纯黑背景，长时间阅读会造成眼睛疲劳。在微信的深色模式下，聊天背景和主页面的背景颜色都不是纯黑，而是深灰色。
另外，纯黑和纯白的高对比度也会造成视觉疲劳。所以在微信的深色模式下，使用浅灰色作为字体颜色，既能保持显示的清晰，又能降低对比度，减轻用户的阅读负担。
如果设置了聊天背景，聊天背景图片也会自动变暗，方便阅读。
虽然整体色彩加深，但微信在设计上依然保持了鲜明的层次。比如顶部聊天窗口的灰色会比其他窗口略浅，聊天消息的标题和摘要也用不同明度的浅灰色来区分层次。
另外，微信的彩色线条图标在黑色背景上变得更加科技，颜值提升了不少。
微信的黑暗模式不仅可以帮助用户缓解夜间视觉疲劳，白天使用也几乎没有障碍。总体来说，体验感觉还不错。
如果说微信的黑暗模式更注重颜值的话，腾讯的另一款社交工具QQ则更注重用户的深夜阅读体验。
首先，微信切换黑暗模式时，需要重启软件才能生效。QQ切换夜间模式时，采用平滑渐变，让用户快速适应场景切换。
其次，为了减少夜间光线对人眼的刺激，QQ降低了信息和背景的对比度，并在用户的头部和其他图片上添加了一个遮罩，使其在弱光环境下看起来更加柔和。
当用户开启夜间模式时，还会有一个设计彩蛋:一些图标会根据模式切换而变化，比如消息图标会从笑脸切换到休息状态，这种有趣的设计也会拉近用户与产品的距离。
正常模式下豆瓣APP的背景颜色是纯白的，白天偶尔会觉得有点刺眼，更别说睡前必须刷豆瓣的用户的苦了。在被用户骂了一轮又一轮之后，豆瓣APP终于推出了夜间模式。
豆瓣的夜间模式和微信一样，也保留了五颜六色的图标。同时，豆瓣在设计中始终保证良好的对比度和清晰的视觉层次，保证了信息结构的准确传递。
配色方面，为了避免“死黑”让整个界面过于死板，豆瓣还在黑色中混合了蓝色和紫色，让背景色看起来更加通透。
底部导航等主要按键使用豆瓣绿的主色调，在夜间模式下可以清晰显示，不会太刺眼，在强光模式下也能保证正常浏览。
另一个社区APP知乎和豆瓣也有同样的问题。
知乎在设计夜晚模式时，采用了主色调蓝色和深灰的组合，以深蓝和灰色为背景，呈现出强烈的对比，摆脱了深色的沉闷感。
与豆瓣不同的是，知乎的文字颜色为灰色，对比度较低，通过字重来区分。
虽然这样会让整个页面看起来更加和谐，但是内容不够突出，无法在最短的时间内看到标题，这对于一个基于内容的社区来说，无疑会给用户带来不好的体验。
知乎在设计夜间模式时应该有明确的目标，就是只考虑用户夜间使用，所以整体色调很暗，在强光环境下无法正常浏览。
当哔哩哔哩首次引入黑暗模式时，它受到了很多批评。字体和背景色的对比不强烈，视频封面好像蒙了一层雾，导致用户浏览体验不佳。
在最新的更新中，哔哩哔哩最终优化了黑暗模式，适度增强了视频封面和图标的亮度，将多彩图标调整为单线图标，既统一了画面风格，又提升了界面阅读体验。
在设计暗模式的时候，一定要注意每个页面颜色搭配和对比度的统一。
当你在黑暗模式下点击哔哩哔哩创意中心的版块或者推荐服务时，加载屏幕仍然是白色的，突然的强光无疑会对眼睛造成刺激，用户的体验也很差。
高饱和度的颜色会在深色背景上产生炫目的视觉效果，造成视觉疲劳。在百度网盘的黑暗模式下，背景接近全黑，但图标没有大的调整，给用户带来了不好的阅读体验。
同样，因为背景颜色太深，百度网盘的文字和背景反差太大，也很难阅读。对于阅读障碍患者来说，他们在阅读时会觉得文字是旋转的，模糊的。
在设计深色模式时，除了尽可能使用深灰色作为背景色外，还需要保证大部分区域保持深色，尽可能使用有限数量的颜色。只有把握好对比度和饱和度，才能设计出舒适的暗模式。
综上所述，合理使用黑暗模式可以降低屏幕亮度，不仅降低功耗，还可以减少对自己或他人眼睛的刺激。
此外，深色模式优化了背景色、文字和系统图标颜色，可以提高阅读舒适度。对于喜欢深色或者黑色的朋友来说，深色模式是一种不同于普通模式的全新体验。
除了APP，很多生产力工具也使用暗接口，比如PS，hacker。以抄袭者为例。用户在设计的时候，深色的界面不仅可以减少眼睛疲劳，还可以突出你的设计内容，营造一种身临其境的设计体验。
黑暗模式逐渐成为APP设计的流行趋势。作为一名设计师，还必须掌握APP中黑暗模式的设计技巧。从上述的APP设计案例中，我总结了以下几点建议，供大家参考:
题图来自Pexels，基于CC0协议。