简单了解APP黑暗模式

本文转载：关于APP黑暗模式的设计探索

前不久苹果发布会IOS13系统和大家见面了，其中的黑暗模式是一项比较大功能性更新，黑暗模式倒也并不是什么新奇的功能，国内的很多APP早就进行了开发，包括一些国产手机厂商也做了类似了夜间模式或是护眼模式。

目前公司产品要适配IOS13,计划把黑暗模式加入到产品中，故现在简单了解一下app的黑暗模式设计与实现。

一、黑暗模式的由来和作用

最早应该是智能手机的普及大大延迟了人们的睡眠时间，大家都习惯晚上躺在被窝里看一会手机才能睡着，但是关了灯之后手机屏幕的亮度就会特别刺眼，由于绝大多数APP页面背景色都是浅色系，与周围环境的亮度对比比较大，导致手机屏幕和白天一样的亮度就会感觉十分刺眼，所以一些产品开始开发了黑暗模式。

黑暗模式的主要作用就是为了让用户在环境亮度比较暗的时候能够舒适的使用产品，避免由于刺眼、视觉疲劳等问题暂时放弃使用产品，在一定程度上是为了延长用户使用的时间。这里有一点要注意的是刺眼程度并不是由手机屏幕的亮度决定的，而是由手机屏幕亮度和周围环境亮度的差值大小决定的。

二、黑暗模式的切换方式

在夜间通常情况下，我们面对屏幕的距离会比白天更近，在长时间近距离的注视，对眼睛伤害比白天更大。所以睡前使用频率较高的app，会开发夜间模式，如阅读类、资讯类、音乐类及浏览器等。

1.列表切换方式；例如：简书列表切换、QQ音乐主题选择。

2.按钮切换方式；例如：导航按钮、侧边栏底部标签按钮、内容详情标签按钮。

3.宫格切换方式；例如：我的页宫格按钮、下拉弹窗宫格按钮。

4.自动切换方式；例如：UC浏览器、微博；

自动切换模式是更加人性化的一种体验方式，APP会设置一个默认时间段（多为夜间十点到次日早晨六点），在固定时间段内，也可以根据APP的使用场景自定义夜间模式的时间段；开启后会自动进入夜间模式；

三、常见的两种黑暗模式设计方式

总结了手机上的一些有夜间模式的APP后我发现黑暗模式的设计从简单到复杂大致有下面几种：

1）在所有页面上加一层黑色半透明的蒙版，例如今日头条、微博、百度、虎嗅、等等；

这种方式的体验实在谈不上优秀，感觉有一些偷懒的嫌疑。但是这种方式的好处同样存在，就是实现起来比较简单，不知道是不是由于产品内容数量太大，图片展示多的原因导致头条不得不采用这种方式;

2）改变背景色色值和文字色值，例如夸克浏览器、网易新闻、网易云音乐、糗事百科、QQ等等；

这种方式一般是把页面中最大的光源调整成为和环境接近的颜色，通过降低亮度差值的方式降低刺眼度。这种方式的设计成本比第一种要大，需要针对夜间模式的页面进行颜色、字体、icon等方面的定义，当用户开启夜间模式时，调用夜间模式的UI界面；开发和适配的难度增大，实现成本高，并且后期版本迭代的时候都需要进行研发和维护，小型研发团队负担很重。

QQ对于黑暗模式的设计就更加细致一些，除了背景色、文字颜色、图片之外对底部的标签栏也有黑暗化设计，并且这种设计也不是简简单单的修改颜色，而是做了更加细节的场景化设计。

四、黑暗模式是如何实现的？

原理我们都懂了，那么在具体场景下黑暗模式是如果实现的呢？这里不同的元素实现方式有些区别。

1）文字和背景色只需要设置好两个不同的色值，通过打开和关闭夜间模式的按钮进行触发修改就能实现；

2）复杂一些的按钮和图标需要预先设计好两个场景所需的文件，同样在打开和关闭夜间模式的按钮时进行替换按钮图片即可；

3）如果使用的是一些特殊格式的图片(文字图片)可以通过代码来控制图片的颜色达到实现的目的；

4）对正常格式的图片进行处理是最麻烦的，图片在黑暗模式下会变暗，这种变暗有两种实现方法，第一种和今日头条的实现方法类似，就是在图片上增加一层黑色半透明的蒙层来实现变暗，第二种是把图片置于顶层在底部放一个黑色色块，通过调整图片的透明度来实现变暗，两种方法效果差别大。

五、对黑暗模式设计要点的总结

最后总结一下设计黑暗模式时的步骤：确定背景色、确定文字色、确定图标、确定图片。

简单了解APP黑暗模式相关推荐

前端例程20221102：黑暗模式（Dark Mode）
文章目录演示原理代码更多补充 prefers-color-scheme filter和mix-blend-mode Darkmode.Js 更多例程演示原理使用CSS自定义属性来定义页面 ...
crt 8.7.3 黑暗模式_科技有意思 | 黑黑黑黑黑黑黑黑暗模式
不知从什么时候,手机上的黑暗模式成了系统的标配. 本来这只是系统中的一个功能,现在经过从iOS 13系统的终于支持.苹果督促包括腾讯在内的开发者尽快适配,到一直不支持黑暗模式的微信也答应尽快开发相关功 ...
程序封装真的是令人讨厌_网络上最令人讨厌的黑暗模式
程序封装真的是令人讨厌 This article is part of a series created in partnership with SiteGround. Thank you for s ...
AndroidQ(10)黑暗模式适配
前言:作为一个Android程序员,每年最期待就是Google的发布会啦!!这不,今年的AndroidQ如期而至.这里简单介绍一下Android的新特性: AndroidQ全局暗黑模式隐私权限的更新 ...
如和退出百度云暗黑模式_黑暗模式的过去和现在
如和退出百度云暗黑模式 At Lunabee Studio, we attended in 2019 the Google I/O and the Apple WWDC conferences in ...
使用Qt 6.5的Windows 11上的黑暗模式
Dark Mode on Windows 11 with Qt 6.5 使用Qt 6.5的Windows 11上的黑暗模式 February 24, 2023 by Volker Hilsheimer ...
曙光 raid_黑暗模式的曙光
曙光 raid As more and more apps and interfaces introduce dark mode (and as I happily switch them over ...
whatsapp和黑暗模式是否匹配
Becoming a new UX designer you not only have to get comfortable with designing but also with why you ...
三星Galaxy S20：如何开启黑暗模式
Justin Duino 贾斯汀·杜伊诺(Justin Duino) Samsung was one of the first Android manufacturers to add Dark Mo ...

简单了解APP黑暗模式

简单了解APP黑暗模式相关推荐

最新文章

热门文章