如何正确设计暗色模式

如今,暗色模式无处不在

随着人类将更多的时间在与科技产品的互动上,暗色模式题提供了一种更轻松的方式来接触数字世界。通常情况下,这些主题更容易让人眼前一亮,更具吸引力,更适合专门的用户。

纵观整个2020年,无数知名品牌都推出了自己版本的暗色模式。谷歌为云端存储硬盘提供了解决方案,而苹果和安卓也已经在他们的操作系统中构建了暗色主题性能。

如果你还没有学会如何充分利用暗色模式,那么你可能会错过一个极好的凸显你的设计实力的机会,也会错过赢得更多的用户。

为什么暗色模式这么流行?

在我们深入探讨如何创建暗色模式之前,让我们先看看什么是暗色模式,以及它为什么有用。

最终,暗色模式的创建是为了减少所有东西发出的亮度,从你的桌面和笔记本电脑,到你的智能手机和智能手表。暗色模式有助于改善视觉人体工程学设计,通过减少眼睛疲劳,调整亮度以适应当前的照明条件,等等。此外,许多暗色模式产品在节省电池寿命方面也很出色。

传送门:怎么利用暗色模式在你的作品集里体现设计实力

更好的用户体验:关注用户体验是数字时代产品设计最重要的趋势之一。如果你想脱颖而出,你需要每个访问你网站的人提供难以置信的体验。暗色模式从缓解眼睛疲劳到电减小池电量消耗,这有助于让客户在网站上停留更长的时间。

创新和最前沿吸引力:大多数公司都想证明自己能够保持在行业的前沿。为网站主题或外观提供一个可选择的暗色模式版本可以帮助你的客户从人群中脱颖而出。随着环境变得更加关注移动设备,越来越多的公司将寻找能够提供最佳移动体验的设计师。

更具包容性的设计:暗色模式不仅仅适合夜间对光敏感的人。这个解决方案对于视力受损的用户来说会更适宜,因为他们在访问你的网站时可能会受到眼睛疲劳的困扰。如果你想让你的内容对更广泛的观众更有包容性,那么学习如何设计暗色模式是一个很好的开始。

设计暗色模式时的最佳做法

在暗色模式下设计比你想象的要容易得多。大多数时候,这只是简单地考虑如何用更深更暗的东西来取代站点中更明亮、更突出的部分。

这里有一些有用的建议,可以让你朝着正确的方向前进。

1.色彩实验

对于许多网页设计师来说,在开发暗色模式解决方案时,一个大问题是他们太过于沉迷于纯白色文本和纯黑色背景。然而,这种高对比度的选择可能目前是比较普遍的做法。

使用深灰色作为你的主要背景面颜色比使用真正的黑色要合适的多。此外,与其使用明亮的白色,还不如考虑使用稍微偏白的颜色,这样看起来会更温暖。

用不太可能引起眼睛过度疲劳的背景和颜色组合进行实验。深灰色粉底通常展现出更大的适用范围,因为你可以在灰色上显示阴影。

另外,当你尝试颜色的时候,记住饱和的颜色经常在非常暗的表面上剧烈振动,使它们更难阅读。降低色彩饱和度有助于降低对比度,让网站具有更好的用户体验。

在 200-50 范围内的浅色色调在深色主题上有更好的可读性。然而,你总是可以尝试你的选择。 Google Material Design 建议的背景和文本之间的对比度是15:8:1。

2.考虑情绪影响

暗模式设计所涉及的大部分工作都是要弄清楚某些颜色是如何协同工作的。强烈的对比很容易让人忘乎所以,尤其是当你习惯于在白色背景下工作时。然而,你需要记住,你是为一个主要寻求更轻松、更柔和的浏览的用户体验而设计的。

工作的时候,记得也要考虑下设计的情感方面。在任何环境下,色彩中的情感可以决定或破坏买家的体验。然而,色彩心理学中一个经常被忽视的方面是,当人们处于黑色背景时,他们对阴影的感知不同。

例如,想想绿色。在一个浅色的背景下,它传达了自然,甚至是金融财富。然而,在黑暗的背景下,同样的绿色可能会让人觉得是有毒的,有毒的,甚至是病态的。重要的是要考虑终端用户到达你的站点后会得到什么样的印象。

3.让用户选择的自由

当你开始为黑暗模式设计时,你可能犯的最大错误之一就是认为你应该完全专注于暗色模式,而没有别的选项。如果你和想要两全其美的用户交流,会让你觉得很麻烦。如果你是为应用程序设计的,你需要的设计应该可以自然地在明暗主题之间切换。

了解如何在你创建的桌面上同时实现暗模式和光模式选项,将有助于产品触达到更多的客户。记住,你需要测试设计在这两个模式中的性能和影响,不管你的用户选择如何浏览,检查它们是否提供了相同的体验。

尽管暗色模式应该为用户提供不同的体验,但仍然需要感觉好像他们在同一网站上浏览一样。这意味着你需要尝试最自然的亮暗模式选项组合。

4.记住最基础的

请记住,尽管上面的三个提示将帮助ni 找到暗模式设计的正确silu ,但你还需要考虑所设计的平台的机会和限制。你能为谷 歌Chrome 网站提供的暗模式体验将与你在 iOS 上运行的体验截然不同。

检查正在设计的系统所提供的文档将有助于你更深入了解实际可行的设计内容。

其他关于暗色模式设计的小贴士如下:

关注你的内容:确保内容在页面上脱颖而出,但不会太突出。

测试设计:在亮和暗的外观下,你需要确保所有东西都能正常工作。

为界面增加活力:活力有助于改善你的背景和前景之间的对比。

使用语义色彩:语义色彩自动适应当前网站的外观。硬编码的颜色值不适应可能看起来更激进。

桌面着色:试着用透明和滤镜来给你的网站和应用程序一个稍微暖和一点的着色——很适合深夜浏览

图标:如有必要,在暗模式和亮模式中使用单独的符号和图标。


准备好设计暗色模式了吗?

为沉迷于黑暗模式的时代准备你的网页开发和设计作品是一种复杂的事情。你需要仔细考虑,当人们在搜索一些更微妙的东西时,他们将如何浏览你的网站和应用程序,和我们习惯的网站相比,视觉上没有那么强大。

最重要的是要记住,你的网站或应用程序上的所有东西在暗模式下看起来应该和在亮模式下一样漂亮。当人们想要在应用程序中切换设置时,仅仅添加一个动态的黑色背景是不够的。你需要深入你的设计,研究不同的字体、颜色和图像是如何协同工作的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章