UI.

如何获得黑暗模式设计

雷维斯卡卡特 经过 雷维斯卡卡特  |  10月16日2020年10月16日

黑暗主题是 到处 这些日子。 

随着人类继续花费更多时间与技术互动,黑暗主题为与数字世界进行互动的方式提供了更加轻松的方式。更常见的是,这些主题在眼睛上更容易,更有吸引力, 并且完善专门的用户

整个2020年,无数领先品牌借助了他们自己的黑暗主题版本。 谷歌为您的驱动器提供解决方案,而Apple和Android在其操作系统中建立了黑暗的主题性能。 

如果您还没有学会如何充分利用黑暗模式,那么您可能会出现在一个很好的机会上,以区分您的设计技能,以及 赚取更多客户 going forward. 

 

为什么黑暗模式?

在我们潜入创建自己的黑暗主题的可能性之前,让我们检查黑暗模式是什么,为什么它如此有效。 

最终,创建了黑暗主题以减少从桌面和笔记本电脑到智能手机和SmartWatch发出的一切发出的亮度量。黑暗主题有助于改善 视觉人体工程学 设计,通过减少眼睛菌株,调整亮度以适应电流照明条件等。此外,许多黑暗模式产品在节约电池寿命方面也很棒。 

以下是添加的一些主要好处 您的设计投资组合的黑暗主题

  • 更好的用户体验: 专注于用户体验是数字时代最重要的趋势之一。如果您想脱颖而出,您需要愿意向访问您网站的每个人提供令人难以置信的经验。暗模式从眼睛压力降低到电池功耗。这有助于让客户在网站上更长。
  • 创新和尖端上诉: 大多数公司希望证明他们可以留在其行业的前沿。提供网站主题或外观的选择退出的暗模式版本的能力可以帮助您的客户从人群中脱颖而出。由于环境变得更加移动,更多的公司将寻找可以提供最佳移动体验的设计师。 
  • 支持通用设计: 黑暗模式对晚上有光线感的人来说不仅仅是伟大的。对于否则访问您的网站时,这种解决方案对视觉障碍用户可能更舒适。如果您希望您的内容更多 包括更广泛的观众,然后学习如何为暗模式设计是一个很好的启动方式。

 

设计黑暗模式时的最佳实践

为黑暗模式设计比你想象的更容易。大多数时候,它涉及只考虑如何替换您网站的一些更亮,更压倒的方面,更深入地更深。 

以下是一些有用的提示,让您朝着正确的方向移动。 

1.尝试颜色

在开发黑暗模式解决方案方面,很多网页设计师的一个大问题是他们太陷入了像纯白文本一样对纯黑色背景这样的东西。然而,这种高对比度选项可能会有一段时间。 

使用深灰色作为主要曲面颜色通常更容易,而不是真正的黑色。此外,而不是使用明亮的白色,思考略微灰白的替代品,这对眼睛更加温暖。

用表面和彩色组合进行实验,不太可能引起太多的眼睛菌株。深灰色基础通常提供更广泛的深度,因为您可以在灰色上展示阴影。 

此外,当您尝试颜色时,请记住,饱和颜色经常振动为非常暗的表面,使其更加易于阅读。不饱和颜色将有助于减少对比度并使您的网站更加热。 

200-50个范围内的更轻的音调将在黑暗主题上具有更好的可读性。但是,您可以随时尝试您的选择。 Google Material Design建议在背景和文本之间使用约15:8:1的对比度。 

2.考虑情绪影响

暗模式设计所涉及的大部分努力是弄清楚某些颜色如何一起工作。鲜明对比很容易被带走,特别是当你习惯使用白色背景时。但是,您需要记住您正在为用户设计,主要是寻找更容易和更柔和的浏览体验。

在你工作的时候,请记住考虑设计的情感方面。颜色的情绪可以制造或打破买方 ’在任何环境中的旅程。然而,经常被忽视的色彩心理学,是人们觉得不同的视线 当他们在黑色背景上

例如,想想颜色绿色。在明亮的背景下,它传达了自然甚至金融财富。然而,在黑暗的背景上,相同的绿色可能会遇到毒性,有毒,甚至病毒。重要的是要考虑那种印象最终用户将在您的网站到达时将获得。

3.让用户自由选择

当您开始设计黑暗模式时,您可以制作最大的错误之一,思考您应该完全关注您的黑暗主题,而不是别的。如果您与想要最好的世界的用户互动,则会向您提供问题。如果您特别为应用程序设计,您需要在光线和黑暗主题之间自然切换的网页。 

学习如何在您创建的书桌中实现暗模式和光模式选项将有助于您达到更广泛的客户。请记住,您需要测试两个主题中设计的性能和影响,检查它们是否提供相同类型的经验,无论您的用户如何浏览。 

虽然黑暗模式应该为最终用户提供不同的体验,但它仍然需要感觉好像他们在同一网站上浏览。这意味着您将需要尝试使用最自然的光线和暗模式选项。

记住基础知识

请记住,虽然上述三个技巧将帮助您获得暗模式设计的正确路径,但您还需要考虑您设计的平台的机会和限制。您可以为Google Chrome网站提供的那种黑暗模式体验将与您在iOS上运行的东西创建的内容非常不同。

检查系统提供的文档,即您设计的设计将有助于您在实际可能的情况下开发一些密切洞察的东西。 

黑暗模式设计的其他顶尖提示包括:

  • 专注于您的内容:确保您的内容突出页面上,而不会过于压倒性。  
  • 测试您的设计:在光线和黑暗外观中,您需要确保一切都在工作。
  • 为接口采用活力:活力有助于改善背景和前景之间的对比度。 
  • 使用语义颜色:语义颜色自动适应网站的当前外观。不适应的硬编码颜色值似乎更具侵略性。 
  • 桌面TINTING:尝试尝试尝试像透明度和过滤器这样的东西,以便为您的网站和应用程序提供稍微温暖的色调 - 非常适合深夜浏览
  • 如有必要,图标:使用单个字形和浅色模式的图标。 

 

准备设计黑暗模式?

准备您的Web开发和设计投资组合以沉迷于暗模式的时代,可以成为一个复杂的体验。当他们在寻找更加微妙的东西时,您需要仔细思考人们如何浏览您的网站和应用程序,而不是我们习惯于制作的网站。 

要记住的最重要的是,您的网站或应用程序上的一切都应该看起来像在光模式下以暗模式一样定制。只需添加当人们想要在应用中切换设置时添加动态黑色背景就不够。您需要深入了解您的设计,并检查如何不同的字体,颜色和图像一起工作。