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

重庆网站设计

Website design

案例778

重庆网站设计

如何正确设计黑暗模式

来源:派臣科技|时间:2021-01-22|浏览:

这些天黑暗主题无处不在。

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

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

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

为什么黑暗模式?

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

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

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

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

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

支持通用设计:黑暗模式不仅仅适合那些在晚上对光线敏感的人。这个解决方案可能更适合视力受损的用户,他们可能会在访问你的网站时遇到眼疲劳。如果你想让你的内容更包容更广泛的观众,那么学习如何设计黑暗模式是一个很好的开始。

设计黑暗模式的最佳实践

暗模式的设计比你想象的要简单。大多数时候,这只是简单地考虑如何用一些更深更暗的东西来取代站点中一些更明亮、更压倒性的方面。

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

1. 实验与颜色

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

通常使用深灰色作为你的主要表面颜色要比真正的黑色容易得多。此外,与其使用明亮的白色,不如考虑使用略偏灰白色的替代品,这样会更温暖眼睛。

尝试不太可能引起太多眼睛疲劳的表面和颜色组合。深灰色粉底通常也能提供更大的深度范围,因为你可以在灰色上展示阴影。

此外,当你在试验颜色时,记住饱和的颜色经常会在非常暗的表面上产生剧烈的振动,使它们更难阅读。降低颜色的饱和度可以降低对比度,让你的网站更受欢迎。

在200-50范围内较浅的色调在深色主题上会有更好的可读性。然而,你总是可以试验你的选择。谷歌材质设计推荐使用15:8:1左右的背景和文本对比度。

2. 考虑情感影响

暗模式设计的大部分工作是弄清楚某些颜色是如何协同工作的。鲜明的对比很容易让人走神,尤其是当你习惯了用白色背景工作的时候。然而,您需要记住,您是为用户设计的,主要是寻找更容易和更柔和的浏览体验。

当你在工作的时候,记住也要考虑设计的情感方面。在任何环境中,颜色所蕴含的情感可以成就或破坏买家的旅程。然而,色彩心理学中一个经常被忽视的方面是,人们在黑色背景下对阴影的感知是不同的。

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

3.给用户选择的自由

当你开始设计黑暗模式时,你可能会犯的最大错误之一就是认为你应该完全专注于黑暗主题。如果您与希望两全其美的用户进行交互,那么就会遇到问题。如果你是专门为应用程序设计的,你就需要能够在明暗主题之间自然切换的网页。

学习如何在您创建的办公桌上同时设置暗模式和亮模式,将有助于您获得更广泛的客户选择。请记住,您需要在两个主题中测试设计的性能和影响,以检查无论用户选择如何浏览,它们都提供相同的体验。

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

4. 记住最基本的

记住,尽管上述3个技巧能够帮助你正确设计黑暗模式,但你也需要考虑你所面向的平台的机遇和局限性。你可以为谷歌Chrome网站提供的黑暗模式体验将与你在iOS上创造的体验非常不同。

检查您所设计的系统所提供的文档将有助于您深入了解实际可能实现的内容。

其他关于黑暗模式设计的建议包括:

关注你的内容:确保你的内容在页面上突出,但不要太过突出。

测试你的设计:不管是在亮面还是暗面,你都需要确保所有的东西都能正常工作。

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

使用语义色彩:语义色彩会自动适应网站当前的外观。无法适应的硬编码颜色值似乎更具有侵略性。

桌面着色:试着用透明和滤镜之类的东西给你的网站和应用程序加点暖色调——适合深夜浏览

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

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

为沉溺于黑暗模式的时代准备你的网页开发和设计作品集是一种复杂的体验。你需要仔细思考当人们在搜索一些更微妙的东西时,他们将如何浏览你的网站和应用程序,而不是像我们所习惯的网站那样在视觉上令人难以接受。

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

留言

返回顶部

君
重庆网站建设重庆网站设计如何正确设计黑暗模式