2021-03-01 09:13

网站的黑暗模式崛起

数字哥谭市“哦,你认为黑暗是你的盟友。但是你只是采用了黑暗……”

在数字世界中,这变成了事实!似乎整个网络都被黑暗熏黑了!这种补充模式正逐渐成为主流。事实证明,增强的视觉人体工程学在移动应用程序中异常流行。现在,这种趋势已经超越了所有障碍,也进入了网站领域。如果你想了解更多内容,请联系我们济南网站建设

这场黑风暴吸引了似乎已经足够适应这种情况的互联网用户的眼球。科技行业的嗡嗡声使所有其他网站设计趋势都落在了后面。

独特的外观,缩小的字体/图形以及宁静的设计都吸引了目标受众的眼球。

不用说,这对在网站上花费的时间以及对SERP的多米诺骨牌效应产生了预期的影响。由于品牌之间日益激烈的竞争,因此必须在您的网站上打上阴影。

听起来很简单,但暗模式不只是使网站的浅色版本反转。有一些调整需要遵循。因此,这是您通往网络“阴暗面”的门户!

黑暗模式(阅读–骑士)崛起网站上较暗的调色板导致颠覆了传统的UI基础知识–在深色背景上使用浅色。因此,尽管您喜欢在“月球的另一侧”上向下滚动–网站,但这里是其所有详细信息的列表。享受阅读!

1.场景是如何产生的?暗模式首先通过Windows Phone 7接管了屏幕。目标是确保减少能耗,因为带有黑色像素的OLED屏幕上没有发光。

历史继续–

Google于2018年11月确认了此模式的节电功能。

YouTube在2018年增加了一个可选的夜景主题。

三星于2018年12月发布了一个拥有黑暗模式的UI。

苹果宣布于2019年6月在其iPadOS和iOS平台上提供明暗模式可用性。

谷歌宣布于2019年8月在其Android 10中正式推出阴影模式。

Google云端硬盘在2019年引入了适用于Android的夜间主题。

Reddit在2019年带来了可选的夜间模式。

前端开发人员可以访问CSS属性-'prefers-color-scheme'。

Facebook在2020年推出了深色主题(可选)。

谷歌浏览器和Firefox带来了内部暗色主题,这些主题在一年前就已进入夜间模式。

Whatsapp将于2020年3月在Android和iOS平台上启动夜间模式。

2.它有什么好处?黑暗模式的推出是经过多年轻型模式之后的新鲜空气。在定制时代,用户非常渴望有机会指望该选项增加一点个人风格。其中一个主要方面是重新设计应用程序或网站的能力–谈论“新瓶装旧酒”!但是瓶子看起来很开胃,不是吗?

但是,外观是包含性的,但在这种情况下不是确定性的指针。该主题还有其他优点。因此,这里是它的好处之旅!

A.节能对于具有AMOLED和OLED屏幕的设备,夜间模式设置很受欢迎,因为它有助于节省电池。在OLED显示器中,每个像素都点亮,因此,当屏幕为白色时,能耗非常高。在暗模式下,这些像素不亮或变黑,从而节省了大量能量。

B.减少屏幕眩光通过在暗模式下使用高对比度组合,可以显着减少蓝光,使任何内容都更易于阅读。这表明减轻了眼睛的疲劳,并因此减轻了用户的疲劳。

C.提高低光下的可见度考虑到夜间模式在外观上令人舒缓,因此在昏暗的空间中阅读很方便。这对于夜间工作或对光敏感的人尤其有利。

3.如何进行设计?出于上述好处和黑暗模式UI的普及,全球最好的Web设计公司正在从袖子中抽出所有花招,以应对设计游戏。以下是其中一些,请稍后再感谢!

#提示1:在较深的字体周围提供白色阴影深色字体周围的白色笔触可能不可见。但是,这将大大改善字体的可见性,但会突出显示它。

#提示2:包含具有透明度的图像切换到夜间模式会更改CSS中的颜色,而图像中的颜色则不是这种情况。因此,开发人员,尤其是纽约顶级Web开发公司的开发人员,需要对此进行研究并选择透明的背景。

由于由深色主题设置的背景色,这会导致图像颜色发生变化。

#提示3:降低色彩饱和度在夜间模式下,完全饱和的颜色效果不佳。选择具有白色和灰色的柔和和柔和阴影会更好。

达到与颜色在灯光模式下相同的响应,将需要进行一些调整。这将有助于更好地突出您的品牌及其座右铭。

#提示4:避免混合背景和图像颜色虽然将背景颜色和图像颜色组合在一起是一个不错的UI想法,但在黑暗模式下,这可能会成为一个障碍。通过进行暗光和暗光优化,背景颜色将发生变化,并且将大大影响颜色组合。在这种情况下,最好的主意是跟进技巧2,如上所述。

这是正确的颜色选择可以为您的网站所做的–

#提示5:黑暗模式与“倒车”无关当他们说反转灯光模式不会解决问题时,请相信专业人士。在夜间模式下,关键是与客户一起玩心理游戏。反转将无法满足颜色选择方面的需求。
 
#提示6:提升情感品牌对于深色主题,必须留有空白空间。它可以确保该站点看起来不会混乱。此外,与较浅的模式相比,在夜间/黑暗的网站中,可以获取更强烈的情感。这与具有强烈情感吸引力的色彩心理学有关。使用黑色,相关的情绪会延伸到–

优雅,

力量,

戏剧,

神秘

因此,当涉及到黑暗的背景时,高对比度和大图像正合适并且影响观看者的情感方面。

#提示7:选择“少即是多”不再强调空白,黑暗空间,使最小的页面和图像显得生动而优雅的机会大大增加。还有增加的专业商,以及有组织的外观。因此,在网页设计中的黑暗模式下,极简主义无疑是命中注定的。

请记住,永远不要将您的设计美学抛在后面。有了这个模式的黑暗骑士,您将需要的远远超出了您的想象。

#提示8:测试始终是完美的结局启动该模型,无测试会带来大量错误,这些错误只会破坏您的UI,因此会对您的客户产生不利影响。进行实验,然后根据客户的反馈进行调整–毕竟,这一切都与用户体验有关。因此,他们愿意从当前的亮模式切换到暗模式。

经过适当的测试,您的网站看起来像–

 

#提示9:不要变黑!请注意,您的书中的纸张是不是完全是白色的?这是因为,对于纯白色页面,空白墨水可能太鲜明了。读起来很不舒服,可能会导致视觉障碍。

网站中的暗模式也是如此。太黑或纯黑色会伤害眼睛,而不是希望的宁静优雅的冲击,而是会带来头痛的机会。因此,该领域专家的建议是–

柔化文本的黑色阴影和颜色,并且

将不饱和或柔和的颜色与各种灰色阴影融合在一起。

记住,你不要去肤浅的黑暗。挖掘–从布局到版式,再到徽标设计,一应俱全。在考虑夜间模式的情况下自定义它们。

因此,既然您已经掌握了最后一道菜的食谱,那么该该该该些知识来让您的品尝者又是您的目标受众了。这将有助于您在根据深色主题模式设计网站时做出明智的决定。因此,来吧,这里是您最好的评论家和客户!

4.深色模式的目标客户端(电子邮件)逐渐地,人们似乎对模仿纸上墨水外观的光模式失去了兴趣。黑暗模式带来的“远离主流”趋势使不必要的坐坐成为了巨大的打击。

然而,这又再次吸引了市场上大品牌的竞争,这些品牌希望通过向黑人模式用户提供“更多”来瞄准他们。知道这些“更多”的元素方法,您将很快获得游戏的胜利!

A.Data-ogsc和/或data-ogsb旨在针对Outlook应用。看起来像是一个微弱的市场,实际上将为您带来更大的利润空间-超出您的实际期望。

只需复制并粘贴应用于@media的样式(prefers-color-scheme:dark),然后在CSS规则中添加合适的Data-ogsc和/或data-ogsb前缀即可。

B. @media(prefers-color-scheme:黑暗)这类似于在媒体查询中为移动响应视图应用样式块。唯一的区别是,在这种情况下,您的CSS块将帮助您定位按暗模式设置的所有用户界面。

5.哪些站点现在正在使用它?我们经历了多少次眼睛疲劳和随之而来的头痛,这些头痛来自现场的明亮光线以及长时间盯着他们看?那些日子已经结束,似乎我们所有热门访问的网站都提供了可选的深色主题!

在这里,看看这些站点–

谷歌

歌剧

外表

邮箱

Web设计中的黑暗模式及其未来!有了电影Matrix的所有精通知识,您还记得黑色背景下泛起绿色调的计算机代码吗?在黑暗模式下,开始了面包屑的Hansel-Gretel追踪!

截至目前,“黑暗”主题的未来似乎非常光明。但是,用户正在等待一些更新。看看您是否可以成为第一个开始的人–

在明亮和黑暗模式之间切换主题时图标的更改。

使暗模式用户友好,以提高可读性。

那么,将会是什么呢?“是光明还是黑暗?”如果你想了解更多内容,请联系我们济南网站建设