免费获取策划方案多一份参考,总有益处

重庆网站建设

Website construction

案例778

重庆网站建设

如何获得正确的暗模式设计

来源:xk星空官方网站|时间:2020-11-04|浏览:

如今,黑暗主题无处不在。

随着人们继续花更多的时间与科技互动,黑暗主题提供了一种更轻松的方式与数字世界互动。通常情况下,这些主题更容易吸引眼球,更有吸引力,而且对于专注的用户来说是完美的。

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

如果你还没有学会如何充分利用黑暗模式,那么你可能会错过一个极好的机会来突出你的设计技能,并赢得更多的客户。

为什么黑暗模式?

在我们深入探讨创建自己的黑暗主题之前,让我们先看看什么是黑暗模式,以及它为什么如此有效。

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

下面是在你的设计作品集中添加黑色主题的一些主要好处。

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

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

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

设计暗模式时的最佳实践

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

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

1. 实验与颜色

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

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

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

此外,当你尝试使用颜色时,要记住饱和的颜色在非常深的表面上会产生痛苦的振动,使它们更难阅读。降低颜色的饱和度有助于减少对比,让你的网站更受欢迎。

在200-50范围内的浅色在暗主题上会有更好的可读性。但是,您总是可以尝试您的选择。谷歌材料设计建议使用大约15:8:1的对比度背景和文本。

2. 考虑情绪影响

暗色模式设计的大部分工作都是要弄清楚特定的颜色是如何协同工作的。鲜明的对比很容易让人忘乎所以,尤其是当你习惯使用白色背景的时候。但是,您需要记住,您是为那些主要寻求更轻松、更压抑浏览体验的用户设计的。

当你在工作的时候,记住也要考虑设计的情感方面。在任何环境下,色彩的情感都能成就或毁掉一个买家的旅程。然而,色彩心理学中经常被忽视的一个方面是,人们在黑色背景下对色调的感知是不同的。

例如,想想绿色。在明亮的背景下,它传达了自然甚至是财富。然而,在深色背景下,同样的绿色可能会被认为是有毒的,有毒的,甚至是病态的。当终端用户访问你的网站时,考虑他们将获得什么样的印象是很重要的。

3.给用户选择的自由

当你开始设计暗模式时,你可能会犯的一个最大的错误就是认为你应该完全专注于你的暗主题,而不是其他。如果您与用户交互时,他们想从两个世界中得到最好的东西,那么您将面临一个问题。如果你是专门为应用程序设计的,你将需要网页能够在明暗主题之间自然切换。

学习如何在你创建的桌子上同时使用暗模式和亮模式,这将帮助你获得更多的客户选择。请记住,您需要测试您的设计在这两个主题中的性能和影响,以检查它们是否提供相同的体验,无论您的用户选择如何浏览。

虽然暗模式应该给终端用户提供不同的体验,但它仍然需要让用户感觉他们是在浏览同一个网站。这意味着你需要尝试最自然的明暗模式组合。

 4. 记住最基本的

请记住,尽管上面的三个技巧将帮助你走上黑暗模式设计的正确道路,但你也需要考虑你所设计的平台的机会和局限性。你为谷歌Chrome网站提供的暗模式体验将与你为运行在iOS上的东西创建的体验大不相同。

检查您所设计的系统所提供的文档,将有助于您深入了解什么是实际可能的。

其他关于暗模式设计的小贴士包括:

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

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

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

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

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

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

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

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

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

留言

返回顶部

君
重庆网站建设重庆网站建设如何获得正确的暗模式设计
XML 地图