千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 暗色模式设计的正确打开方式

暗色模式设计的正确打开方式

来源:千锋教育
发布人:wjy
时间: 2022-06-08 11:35:00 1654659300

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

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

  暗色模式设计的正确打开方式152

 

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

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

暗色模式设计的正确打开方式286

 

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

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

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

暗色模式设计的正确打开方式622

 

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

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

  1.色彩实验

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

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

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

暗色模式设计的正确打开方式910

 

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

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

  2.考虑情绪影响

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

暗色模式设计的正确打开方式1192

 

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

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

暗色模式设计的正确打开方式1387

 

  3.让用户选择的自由

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

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

暗色模式设计的正确打开方式1605

 

  4.记住最基础的

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

暗色模式设计的正确打开方式1708

 

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

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

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

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

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

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

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

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

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

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

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

更多关于“UI培训”的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT