如和退出 百度云暗黑模式_黑暗模式的过去和现在

如和退出 百度云暗黑模式

At Lunabee Studio, we attended in 2019 the Google I/O and the Apple WWDC conferences in California.And one of the major announcements of 2019 was definitely the introduction of Dark Theme on Android during the I/O, and right after that on iOS during the WWDC (called the Dark Mode in Cupertino).

Lunabee Studio上 ,我们于2019年参加了在加利福尼亚举行的Google I / O和Apple WWDC会议.2019年的主要公告之一肯定是I / O期间在Android上引入了Dark Theme ,iOS之后又引入了Dark Theme 。在WWDC期间(在库比蒂诺称为“ 黑暗模式” )。

Lyrical as usual, Apple said about Dark Mode that it’s a “dramatic new look that helps you focus on your work,’’ as well as a “distraction-free environment that’s easy on the eyes — in every way”.

苹果公司一如既往地抒情,对黑暗模式说,这是一种“戏剧性的新外观,可以帮助您专注于工作”,以及“一种无干扰的环境,无论从哪方面来看,都很容易”。

Google was much more pragmatic, saying Dark Theme can “reduce power usage by a significant amount”, “improve visibility for users with low vision and those who are sensitive to bright light” and “make it easier for anyone to use a device in a low-light environment”.

Google更加务实,他说Dark Theme可以“大幅减少耗电量”,“为视力不佳的用户和对强光敏感的用户提高可视性”,并“使任何人都可以更轻松地在智能手机中使用设备弱光环境”。

A thing to take into consideration is that we spend an average of 3 hours and 15 minutes on our smartphones every day (and not mentioning other screens such as your TV, computer…).Then, if Dark Mode can truly improve focus, readability, eye-strain and battery life, we can imagine the huge impact Dark Mode could have on our tech usage and our health.

需要考虑的一件事是,我们每天平均在智能手机上花费3个小时15分钟 (并且不提及电视,计算机等其他屏幕),那么,如果“暗模式”可以真正改善对焦,可读性,眼睛疲劳和电池寿命,我们可以想象黑暗模式可能会对我们的技术使用和健康产生巨大影响。

Ok, now that the scene is set on Dark Mode, let’s deep dive a bit. Dark Mode is a super interesting topic, from both a scientific and UX standpoint.

好的,既然场景设置为黑暗模式,那么让我们深入探讨一下。 从科学和用户体验的角度来看,黑暗模式都是一个非常有趣的话题。

起源:光模式的兴起 (The genesis: the rise of Light Mode)

Image for post
Monochrome Computer CRT Monitor 单色计算机CRT显示器

Computers screens originally were in what we call today “dark mode”, because of the capacities of the cathode-ray tubes used back then.

由于当时使用的阴极射线管的容量,计算机屏幕最初处于我们今天所说的“暗模式”。

As a skeuomorphic approach, positive polarity was adopted to make computer interfaces resemble paper, since people who weren’t programmers were introduced to computers and word processing became a significant tool for every corporation: they had to work in a familiar-looking environment. And that environment was none other than paper.

作为一种拟态方法,采用了正极性使计算机界面类似于纸张,因为不是程序员的人员被引入计​​算机,并且文字处理已成为每个公司的重要工具:他们必须在外观熟悉的环境中工作。 而且那个环境就是纸。

Image for post
Apple Lisa 苹果丽莎

Humans are programmed to live during the day, sleep during the night.

人类被编程为白天生活,晚上睡觉。

We evolved outside, and our eyes are used to see dark objects (people, mountains) in front of light backgrounds (the sunlit sky).

我们在外面进化,我们的眼睛习惯于在明亮的背景(阳光普照的天空)前看到黑暗的物体(人,山)。

Image for post

It’s built-in our brains. A research paper published in 1988 by Dannemiller and Stephens showed that a 3 months old baby tends to be more attracted to dark on light pictures than to light-on-dark ones.

它内置在我们的大脑中。 丹妮米勒(Dannemiller)和史蒂芬斯(Stephens)于1988年发表的研究论文表明,一个3个月大的婴儿在明亮图片上比在黑暗图片上更容易被黑暗吸引。

如今:黑暗模式是新的炒作……怎么来的? (Nowadays: Dark Mode is the new hype… How come?)

After having used Light Mode for so long, Dark Mode feels like a breath of fresh air. It gives the users the opportunity to customize their device, their digital environment more.

长时间使用“灯光模式”后,“黑暗模式”感觉就像是呼吸新鲜空气。 它使用户有机会自定义其设备以及更多的数字环境。

It has a tech and design look to it, it looks new without being a complete re-design, and it is marketed as a solution to problems surrounding our digital habits (such as eye strains, using a screen in a low-light environment, or reducing screen-induced headaches).

它具有技术和设计外观,外观新颖,无需完全重新设计,并且可作为解决我们数字习惯(例如眼睛疲劳,在弱光环境下使用屏幕,或减少屏幕诱发的头痛)。

Is it better than good old Light Mode?

它比旧的Light模式好吗?

Dark mode is more of a personal preference than an absolute answer to everything: some people feel more comfortable, less tired and more focused while using Dark Mode. Some others will notice being easily distracted because of the colors becoming flashier.

相对于所有问题的绝对答案,暗模式更是个人喜好:使用暗模式时,某些人会感到更舒适,更少疲劳且更专注。 其他一些人会注意到,由于颜色变得闪光,很容易分散注意力。

Science shows that the human eye is more used to light-on-dark (positive polarity).

科学表明,人眼更习惯于在黑暗中发光(正极性)。

Our eyes work like a camera lens: when we see something in positive polarity, our pupil constricts: we see things sharper, more detailed.

我们的眼睛像摄像机镜头一样工作:当我们看到正极性的东西时,我们的瞳Kong会收缩:我们看到的东西更清晰,更细致。

On the contrary, when we see something in negative polarity, less light is coming to the eye, causing our pupil to dilate: things become blurrier. White text on a black background will appear bigger, to have a kind of a halo…

相反,当我们看到负极性的东西时,更少的光线进入眼睛,导致我们的瞳Kong扩大:事物变得模糊。 黑色背景上的白色文本会显得更大,有一种光晕……

That’s because the light emitted by a letter is reflected by the other letters.

那是因为一个字母发出的光被其他字母反射。

The opposite phenomenon happens in positive polarity. This is partly what makes negative polarity harder to read.

相反的现象发生在正极性上。 这部分地导致了负极性难以阅读。

Multiple tests prove that proofreading, reading speed and such tasks are performed better in positive polarity (article from TidBits, article from Wired). Additionally, because it is harder to read, our eyes and brain have to focus more on the task, making us more prone to suffer from eye strain, headaches.

多项测试证明,在正极性上,校对,读取速度和此类任务的执行效果更好( TidBits的 文章,Wired的文章 )。 此外,由于难以阅读,因此我们的眼睛和大脑必须更加专注于这项任务,这使我们更容易遭受眼睛疲劳和头痛。

All in all, it all comes down to each individual.

总而言之,这取决于每个人。

Despite spending more time reading and analyzing content, some users may find it easier to not be distracted by interruptive content.

尽管花费更多的时间阅读和分析内容,但一些用户可能会发现更容易不受干扰性内容的干扰。

Dark Mode works well when you quickly scan a screen looking for visual/colored elements.

当您快速扫描屏幕以查找视觉/彩色元素时,暗模式效果很好。

In 2018, designers from SalesForce were wondering what mode was best when developing a dashboard feature.

在2018年, SalesForce的设计师想知道开发仪表板功能时哪种模式最好。

They interviewed many users and it turned out that users made decisions faster, and just as accurately, with charts displayed in Dark Theme.

他们采访了许多用户,结果发现用户使用“黑暗主题”中显示的图表可以更快,更准确地制定决策。

Image for post
salesforce.com salesforce.com

It’s the same for developers: when you’re developing, you’re more interested in seeing the structure of your code, made clear with the coloring syntax, rather than having to read every single word.

对于开发人员来说是相同的:在开发时,您对查看代码的结构更感兴趣,使用着色语法使其清晰可见,而不必阅读每个单词。

Image for post
Xcode
Xcode

Or even the Bloomberg application: traders will see information much faster with negative polarity.

甚至是彭博社的应用程序:交易者可以通过负极性更快地看到信息。

Image for post
Bloomberg
彭博社

The same thing applies to the Stock app and Activity app in iOS, using Dark UIs before Dark Mode was even announced.

同样的情况也适用于iOS中的Stock应用程序和Activity应用程序,甚至在宣布Dark Mode之前使用Dark UIs。

Image for post
Apple Activity App 苹果活动应用

Even when Dark Mode wasn’t yet a thing, a dark UI was used for some products, like luxury brands, streaming services… To convey a feeling of elitism, to make the content pop up, to go along with the context of use of the service (you’re most likely to use streaming services at night, in a dim-lit room, making a dark UI much more comfortable). But it was pretty rare and rarely a toggle option, as it was a design choice.

即使还没有使用深色模式,某些产品(如奢侈品牌,流媒体服务)也使用了深色的用户界面……为了传达一种高贵的感觉,使内容弹出,并结合使用服务(您最有可能在晚上在昏暗的房间中使用流媒体服务,从而使黑暗的UI更加舒适)。 但这是很少见的,很少是切换选项,因为它是一种设计选择

Image for post
Breitling’s previous design 百年灵的先前设计

We also have to acknowledge that some people do suffer from conditions preventing them from using light mode.

我们还必须承认,有些人确实遭受了妨碍他们使用灯光模式的条件的折磨。

People who are visually impaired or suffering from photophobia will greatly benefit from the Dark Mode. And using it reduces the emission of blue light, known to reduce the quality of our sleep.

视力障碍或畏光的人将从黑暗模式中受益匪浅。 并且使用它可以减少蓝光的发射,众所周知,蓝光会降低我们的睡眠质量。

And what about battery life?

那电池寿命呢?

Since the democratization of Dark UI, we have been told that it saved battery. As you might have heard already, it isn’t quite true: unless you have a phone equipped with an OLED screen, you are not going to benefit from this.

自从Dark UI民主化以来,我们被告知可以节省电池。 正如您可能已经听说的那样,事实并非如此:除非您的手机配备了OLED屏幕,否则您将不会从中受益。

Usual LED screens need to be backlit to display colors, even black. With OLED screens, only colored LEDs will be lit up and the black ones will stay off. And it seems that lighting dark grey (used in Dark Mode) LEDs still allows some energy savings.

通常的LED屏幕需要背光以显示颜色,甚至是黑色。 使用OLED屏幕时,只有彩色的LED会点亮,而黑色的LED会保持熄灭状态。 似乎点亮深灰色(用于黑暗模式)LED仍可以节省一些能量。

(Video from PhoneBuff comparing the battery usage between Light and Dark Mode: Dark Mode vs. Light Mode Battery Test)

(来自PhoneBuff的视频比较了亮模式和暗模式之间的电池使用情况: 暗模式与轻模式电池测试 )

然后,我必须在我的应用程序中实现它吗? (Then, do I have to implement it in my app?)

Ignoring Dark Mode will make your app stand out (in a negative way), displaying all kinds of bright colors the users did not expect to be blinded with while using Dark Mode on his device. Users are starting to expect this, and you definitely don’t want to be the last app that is exclusively bright.

忽略黑暗模式会使您的应用脱颖而出(以负面的方式),显示用户在其设备上使用黑暗模式时不会被蒙蔽的各种鲜艳颜色。 用户已经开始期望这一点,并且您绝对不想成为最后一个表现出色的应用程序。

And there are shortcuts to this, using Xcode, Android Studio… They implement very easy ways to have a set of assets for Light Mode, and another one for Dark Mode. Technically speaking, it makes it pretty easy to implement Dark Mode from then.

还有使用Xcode,Android Studio的快捷方式……它们实现了非常简单的方法来为轻模式提供一组资产,为暗模式提供另一组资产。 从技术上讲,从那时起,它很容易实现暗模式。

Plus, on Android, there’s a very useful feature called « Force Dark Allowed ». Basically, it’s an automated dark mode for Android. Then, it’ll be compatible with Dark Mode. It’s not perfect, but it does a pretty good job (and using this will give you some time to design the real thing, avoiding any annoyance for your users).

另外,在Android上,有一个非常有用的功能,称为“允许强制深色”。 基本上,这是Android的自动暗模式。 然后,它将与黑暗模式兼容。 它不是完美的,但是做得很好(并且使用它会给您一些时间来设计真实的东西,避免给用户带来烦恼)。

黑暗模式下应用程序的未来 (The future of your app with Dark Mode)

There’s already plenty of resources on this topic, but we will do a recap (you will find links to all the referred articles at the end). Some rules have to be undeniably followed when creating the Dark Mode of your app, or else the user experience will be significantly worse.

关于此主题的资源已经很多 ,但是我们将做一个回顾(您将在最后找到所有引用文章的链接)。 创建应用程序的暗模式时,必须不可否认地要遵循一些规则,否则用户体验会大大恶化。

Let’s see what the good practices are, and then the bad ones.

让我们看看什么是好的做法,然后是坏的做法。

应用程式的黑暗模式的一些规则 (A few rules for your app’s Dark Mode)

Follow platform guidelines

遵循平台准则

This is the first and maybe most important tip. Google and Apple have put up very thorough and complete guidelines to help you implement dark mode to your products. Use them while designing your Apps!

这是第一个,也许也是最重要的提示。 Google和Apple提出了非常彻底和完整的准则,以帮助您对产品实施暗模式。 在设计应用程序时使用它们!

Avoid 100% black

避免100%黑色

Material Design recommends using #121212 for your Dark Theme surface color, as pure black is too hard on the eye. The same goes for the text color: avoid pure white, but instead use it with an Alpha (Material Design recommends 87% for primary content) to lessen the strong contrast.

Material Design建议使用#121212作为Dark Theme表面颜色,因为纯黑色对眼睛来说太硬了。 文字颜色也是如此:避免使用纯白色,而应将其与Alpha配合使用(Material Design建议主要含量为87%)以减少强烈的对比度。

Image for post

Use Elevation Brightness

使用高程亮度

In Light Mode, you most likely use drop shadows to communicate visual hierarchy. You have to avoid them in Dark Mode, as they’re not really visible. Use different shades of grey to tell apart the different levels of content.

在“灯光模式”下,您很有可能使用阴影来传达视觉层次。 您必须避免在黑暗模式下使用它们,因为它们并不是真正可见的。 使用不同的灰色阴影来区分内容的不同级别。

Image for post
Material Design elevation principles
材料设计高程原则
Image for post
Evernote design by Ji-Hern Baek Evernote设计,Ji-Hern Baek设计

Note that shadows can be perceived as the background gets lighter. So don’t stop using them, just stop relying solely on them. And do not use colored or light shadows: they’re unnatural to the eye and won’t bring the same depth effect as regular shadows.

请注意,随着背景变浅,可以感觉到阴影。 因此,不要停止使用它们,而只是停止完全依赖它们。 并且不要使用彩色或浅色阴影:它们对眼睛不自然,不会带来与常规阴影相同的深度效果。

Consider changing your Primary Color

考虑更改您的原色

You should avoid using too saturated colors in Dark Mode: they can be too bright and/or decrease the readability.

您应该避免在黑暗模式下使用过于饱和的颜色:它们可能太亮和/或降低了可读性。

Google Material Design recommends using a 500 color for Light Mode, and a 200 for Dark Mode. You can check your contrast ratio on WGAG.

Google Material Design建议在浅色模式下使用500色,在深色模式下使用200。 您可以在WGAG上检查对比度。

Image for post
Primary color change for Dark Mode (Material Design)
深色模式下的原色更改(材料设计)
Image for post
Source: Material Design 资料来源:材料设计

Convert color palettes

转换调色板

Since you have to change your primary color and the way you show elevation, you should create a new color palette. Keep in mind that some pieces of content might share the same colors in Light Mode but might not in Dark Mode.

由于必须更改原色和显示高程的方式,因此应创建一个新的调色板。 请记住,某些内容在浅色模式下可能共享相同的颜色,但在深色模式下可能不会共享。

Image for post
Source: 资料来源: Kat Angeles from TripItTripIt的Kat Angeles

If you want to keep your app well branded, you can apply your primary color to your dark mode.

如果要保持应用程序品牌良好,则可以将原色应用到深色模式。

Image for post
Source: 资料来源: UX MisfitsUX Misfits

Use color in small portions

少量使用颜色

Colors create more contrast in Dark Mode: use it to your advantage by using them to make certain pieces of content pop, but use them in small portions.

颜色在黑暗模式下可产生更多的对比度:通过使某些内容弹出来利用它来发挥优势,但要少使用它们。

Image for post
Source: Apple using sparse colors 资料来源:苹果使用稀疏颜色

Don’t forget your splash screen

不要忘记您的启动画面

This one might be easy to miss, but it is decisive. It is the first screen your users are going to see when opening your app, and the last thing you want to do is burn their retina before they can even start using the app.

这可能很容易错过,但这是决定性的。 这是您的用户在打开应用程序时会看到的第一个屏幕,最后要做的是在甚至开始使用该应用程序之前先烧掉他们的视网膜。

Make sure you have enough contrast

确保您有足够的对比度

If your screen doesn’t show enough contrast, it can become really difficult to tell apart different states of activity (active, hovered, inactive…)

如果您的屏幕显示的对比度不足,则很难区分活动的不同状态(活动,悬停,无效...)。

Image for post
Source: Google Chrome 资料来源:谷歌浏览器

If you use Instagram, you might be familiar with this issue. Links are pretty much indistinguishable from plain text, making it more difficult to find the « link in bio ».

如果您使用Instagram,则可能会熟悉此问题。 链接与纯文本几乎没有区别,因此很难找到“ bio中的链接”。

Image for post
Marvel’s Instagram bio
漫威的Instagram生物

Test Dark Mode in real conditions

在真实条件下测试黑暗模式

Test your app with settings such as automatic brightness, enhanced contrast, test it in a low-light environment… Prepare for every situation your user might use your app in this way, you can prevent any bad experience.

使用自动亮度,增强的对比度等设置来测试您的应用程序,在弱光环境下对其进行测试...为用户可能以这种方式使用您的应用程序的每种情况做准备,可以防止任何不良体验。

我们将来希望看到的 (What we would like to see in the future)

Looking at the adoption rate of Dark Mode, it is pretty safe to say there are going to be new features coming up with iOS 14 and Android 11.

从黑暗模式的采用率来看,可以肯定地说iOS 14和Android 11将会有新功能。

One that could take place on the home screen :

可能在主屏幕上发生的一种:

Image for post
iPhone home screen in both Light and Dark Mode
浅色和深色模式下的iPhone主屏幕

Icons don’t change between Light and Dark Mode. It would be nice for developers to be able to provide two different app icons for both modes, as well as allow users to set different wallpapers for Light and Dark Mode.

图标在明暗模式之间不变。 对于开发人员来说,能够为两种模式提供两个不同的应用程序图标,以及允许用户为亮模式和暗模式设置不同的墙纸,将是很好的。

We made a conference out of this article. And you can watch it now on Youtube 😍:

我们根据本文进行了一次会议。 您现在可以在YouTube😍上观看它:

Now we hope it’s going to be easier to implement Dark mode/theme in your Apps! And feel free to comment, of course.

现在,我们希望在您的Apps中实现深色模式/主题会变得更加容易! 当然,请随时发表评论。

— Written by Charlotte Jacquot and Olivier Berni

—由Charlotte Jacquot和Olivier Berni撰写

如果您喜欢这个,别忘了拍拍👏🏻 (Don’t forget to clap 👏🏻 if you liked this)

10 is good, 20 is great, but 50 would be the best. Just press and hold the button!

10个好,20个好,但50个最好。 只需按住按钮!

Hope you liked this. If you have any feedback, let me know in the comments 💬.

希望你喜欢这个。 如果您有任何反馈意见,请在评论💬中让我知道。

Lunabee Studio is a company creating premium (native) mobile Apps in the Alps. We love mobile UX, iOS and Android. Follow us to keep up with our latest publications and news.

Lunabee Studio是一家在阿尔卑斯山创建高级(本机)移动应用程序的公司。 我们喜欢移动UX,iOS和Android。 关注我们 ,紧跟我们的最新出版物和新闻。

翻译自: https://uxdesign.cc/the-past-present-and-future-of-dark-mode-9254f2956ec7

如和退出 百度云暗黑模式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值