关于如何设计黑暗模式，苹果也给出了几点建议。在iOS 13.0及更高版本中，人们可以选择采用称为黑暗模式外观。在暗模式下，系统为所有屏幕，视图，菜单和控件使用较暗的配色，使前景内容在较暗的背景下突出。...您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。...在选择浅色和深色背景下单独和组合的应用色调颜色时，请查看系统的配色方案以获得指导。 明智地使用颜色进行交流：当谨慎使用时，提高注意重要信息的颜色力量会增强。...暗模式中的调色板包括较暗的背景颜色和较浅的前景色，经过精心挑选以确保对比度，同时保持模式之间的一致感。 使用适应当前外观的颜色：语义颜色（如分隔符）会自动适应当前外观。...同样的，iOS 13也提供了三种默认的背景色供我们选择，包含系统背景，二级和三级背景。设计师可以在三种层级颜色中搭配来表达更好的层次效果。 ? 苹果还给我们准备了一套更适合列表区域的颜色组合效果。
两个图层的颜色通过乘以它们的值来混合，从而产生更暗且更混合的外观。当从彩色图像中删除白色背景时，这非常有用，因为白色部分变得透明，显示下面的背景。虽然这会使图像有点暗。...它通过将元素的颜色与其背景混合来应用变暗效果。此方法增强较暗区域，产生烧焦或阴影的外观。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出，如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色，具体取决于背景颜色。...要实现这种效果，只需使用 1 个 CSS 规则即可将文本颜色与周围背景混合 h1{ mix-blend-mode: difference; } 差异混合模式从背景的颜色值中减去内容的颜色值，创造出引人注目的视觉效果...浅色元素往往在深色背景下脱颖而出，反之亦然。 演示地址：https://codepen.io/nweligalla/pen/rNRNVZQ 10.
直到我了解到在色相、饱和度、亮度（HSB）上进行简单的加法和减法就能发挥魔法，在这个公式里我们将使用 HSB 的色彩模式，而不是 RGB 模式。...除了在两个组之间添加一条线来表示区分之外，在组与组之间使用一个宽敞的留白的解决方案会更好、更容易的。...利用颜色分隔行 做列表界面往往很无聊，因为只需要不断地复制组件就可以了。但是对于用户，如果行与行之间没有很明显的区别，阅读起来会很困难。...因此，除了使用线条之外，在列表中添加彩色背景对于阅读中的用户来说很有效，并且对于我们设计师来说也会更有乐趣。 ?...对于动态图像背景的文本，通常的解决方案是给文本添加阴影，但这并不能提高用户的可读性。而且它会增加文字周围的视觉混乱，因为它们填补了文字之间的留白。
他补充说：“它对我们来说非常有效，因为它让我们为更复杂的图标添加了所需的额外细节。” 暗黑模式 当然，由于 macOS 支持明暗模式，团队的工作还没有完成。...“我们必须牢记，图标需要在较暗的 UI 设置中易于观看，并且具有良好的易读性，”Janik说。...“如果您没有以正确的方式将形状放置在像素网格上的话，带有 1.5pt 线条的图标在 Retina (@2x) 和非 Retina (@1x) 显示器上看起来非常模糊。”Janik 解释说。...“虽然在某些情况下使用内部边框会更容易，但当你需要一个带有开放路径的图标时，事情很快就会变得混乱或不一致，”他说。...如您所见，当外边缘没有以完整像素展示时，图标最终看起来会很模糊。最后，Janik 将形状层的每边的周长扩大了 0.25pt，以在完成的图标上创建清晰的外边缘。
近年来，深色模式已成为网页设计的主要趋势，以其优雅的外观吸引访问者，并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行，包括操作系统、移动应用程序和网站。...称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...深色模式在操作系统、移动应用程序和网站等各种数字平台上变得越来越常见，因为它提供了许多有用的功能和令人愉悦的外观。...从本质上讲，深色模式颠倒了界面的标准配色方案，用较浅的背景代替较暗的色调，用较浅的字体代替更鲜艳的色调。移动应用程序、网站和操作系统的用户被这种倒置产生的引人注目的视觉美感所吸引。...文本对比：为了保持深色背景下的易读性，在深色模式下，文本和其他材料通常以较浅的颜色呈现，例如白色或浅灰色。
它比传统的亮色模式好吗？黑暗模式更是个人喜好，而不是所有问题的绝对答案：使用黑暗模式时，有些人会感到更舒适，更少疲劳且更加专注。其他一些人会注意到，由于颜色变得闪烁，很容易分散注意力。...相反，当我们看到负极性的东西时，更少的光进入眼睛，导致我们的瞳孔扩大：事物变得模糊。黑色背景上的白色文字会显得更大，并产生光晕…… 这是因为一个字母发出的光被其他字母反射。这导致了负极性难以阅读。...另外，在Android系统中，有一个非常有用的功能，称为“允许强制深色”。基本上，这是Android的自动暗模式。它会与黑暗模式兼容，虽然不完美，但是看起来还不错。...请记住，某些内容可以在浅色模式下共享同样的颜色，但是在黑暗模式下，则可能不行。 ?...· 减少颜色使用量 颜色在黑暗模式下可产生更多的对比度：通过使用它们使某些内容更加明显，但务必不要使用太多，会产生副作用。 ? ·重新设计启动画面 很多设计师会忘了这个步骤。
如果设置了聊天背景，聊天背景图片也会自动调暗，便于阅读。 虽然整体色彩加深，但微信在设计时仍保持着清晰的层次。...比如置顶聊天窗口的灰色会比其他窗口稍浅，聊天消息的标题和摘要也采用了明度不同的浅灰色来区分层级。除此之外，微信的彩色线型图标在黑色背景上也变得更具科技感，颜值提升了不少。...如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。 豆 瓣 普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。...虽然这样会让整体页面看起来比较和谐，但内容变得不够突出，无法在最短时间看清标题，对于一个以内容为主的社区来说，无疑会给用户带来不太好的体验。...综上所述，合理使用深色模式，可以降低屏幕亮度，不仅可以减少耗电量，还能减小对自己或他人眼睛的刺激。除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。
为了适配系统，不少APP纷纷推出了深色模式。 使用OLED屏幕的设备，在纯黑色下可以有效降低耗能，进一步延长续航时间。除此之外，深色模式还可以有效解决OLED屏烧屏、费眼的问题。...如果设置了聊天背景，聊天背景图片也会自动调暗，便于阅读。 虽然整体色彩加深，但微信在设计时仍保持着清晰的层次。...如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。 豆 瓣 普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。...虽然这样会让整体页面看起来比较和谐，但内容变得不够突出，无法在最短时间看清标题，对于一个以内容为主的社区来说，无疑会给用户带来不太好的体验。...综上所述，合理使用深色模式，可以降低屏幕亮度，不仅可以减少耗电量，还能减小对自己或他人眼睛的刺激。除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。
以一个PC端的应用界面为例。 在本文中，我们在创建样式的同时，会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。 0.常量样式 重要的是要注意，在为明暗模式选择颜色时，颜色会略有不同。...1.1颜色样式-灰度样式 灰度颜色是可更改的样式，因为在黑暗模式下应用相同的颜色时时，您将不会获得与在明亮模式下相同的效果。...这是因为，在黑暗模式下，背景已经完全为黑色，此时在黑色背景上使用100透明度的灰度颜色时，你的颜色会完全不可见。...1.2 系统颜色 系统颜色（也称为基础色）是你项目的主要颜色。我们建议您选择温暖和亲切的颜色，但是在某些情况下，选择调色板时，您可能需要考虑品牌的颜色，这将成为设计系统的一部分。...请注意，在暗模式下，由于阴影颜色是暗的，因此可能看不到这种效果。 最后，Figma具有一个非常有用且功能强大的功能，称为“自动布局”。
未点击的按钮投射出一个稀薄地阴影——在放大的截图中能看的更清楚。 点击后的按钮，底部依然比顶部还要暗一些，并且整个按钮全都更暗。这是因为它与屏幕本身处于同一个平面，光线就不能轻易的照到它了。...，因此将大量的光反射到你的眼睛中，导致周围会变暗点。...首先是在没有色彩的帮助下让应用变得美观并且可用，最后添加色彩，仅此而已。 Haraldur Thorleifsson 的灰度线框图看起来和其他设计师的成品网站一样好。...《Smashing》 杂志的金色主题。 《Smashing》 杂志的蓝色主题。 通过修改单一色调的饱和度和亮度，可以生成多种颜色——暗色调、灯光、背景、重点、吸引眼球的特效——而且不会让人眼花缭乱。...使用一种或两种基本色调的多种颜色是强调和中和元素的最可靠的方法，而且不会使设计变得混乱。 倒数计时器来自 Kerem Suer。 关于颜色的其他一些补充 色彩是视觉设计中最复杂的领域。
3、背景的扇子亮度比较高，对于主体人物来说有些抢眼，添加一个图层，使用渐变工具，设置为由黑到透明，拉出渐变使扇子变暗。能看出背景扇子的造型又不会十分抢眼，影响到对主体观察这就是我们想要的效果。...10、皮肤已经变得厚重了，只是质感还不强烈，下面对人物的高光、亮部、中间调和暗部分别进行调整，使高光更亮，暗部更暗，这样人物就会更有立体。...11、通过以上的方法，调整出中间灰的区域，利用曲线调整图层将中间灰区域压暗。调出暗部选区，利用曲线调整图层将暗部区域压暗。这样调整之后人物皮肤的质感变得更加强烈。12、现在对皮肤进行更加精细化的处理。...在需要修改的区域附近定义源点，在修改区域进行涂抹，人物脸部暗部区域附近定义源点，在修改区域进行涂抹，人物脸部暗部区域比较粗糙，所以需要处理的更多。因为人物脸部作为主体，所以身体不需要进行过多的保留。...14、人物的主体在脸部，身体就显得比较亮，打开快速蒙版，在快速蒙版编辑模式下，使用渐变工具，从右下角拉出黑到透明的渐变，脱出快速蒙版编辑模式，使用曲线命令压暗人物的身体部分。
03 系统背景色 根据准则，iOS的背景始终具有＃000000的纯黑色。Google 则更喜欢深灰色，值为＃121212。 ? 苹果将此背景称为“ 系统背景”。...需要注意，黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。必须为所有元素分配一组单独的颜色，也就是说，你必须重新设计它们。 如下所示，在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。...不必告诉它在明亮模式下显示白色，而在黑暗模式下显示黑色。系统会自动判定。 ? 如果要在暗模式下为元素显示自定义颜色怎么办？ 当然，你可以轻松地做到这一点。为每种模式分配自定义颜色即可。...但是，这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色，则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下的颜色是稍有差异的，请务必注意。...这里有一些需要注意的事项： 尝试选择一种在亮模式和暗模式下均能正常工作的颜色（相同的RGB值）。 或者您可以选择2种不同的颜色，一种用于亮模式，另一种用于暗模式。
例如，如果您的应用在纵向模式下显示图像网格，则不必在横向模式下显示与列表相同的图像。相反，它可能只是调整网格的尺寸。尝试在所有情况下保持可比的体验。...在深色模式下，系统为所有屏幕、视图、菜单和控件使用较暗的色彩，并使用更具活力的颜色，使前景内容在较暗的背景下突出。深色模式也支持所有辅助功能。...暗黑模式的颜色 深色模式中的配色包括较暗的背景颜色和较浅的前景色，经过精心挑选以确保对比度，同时也保证了两种模式之间的统一性。 首选系统背景色。...暗模式是动态的，这意味着当界面位于前景（例如，弹出框或模式表）中时，背景颜色会自动从基本颜色变为高色。该系统还使用增强的背景色在多任务环境中的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色会自动适应浅色模式和深色模式下的外观。 使用系统视图绘制文本字段和文本视图。
创建深色模式主题的第二个问题是，网页设计师不遵循特定颜色需要在深色模式下更改为其他颜色的逻辑。这可能会导致创建过多类型的变量，这些变量难以理解或维护。...当我们需要创建同一色调的不同深浅时，使用这种表示方式会变得比较困难。 在处理这个问题时，作者选择将HEX/RGB颜色转换为HSL颜色，然后尝试找出每一组颜色的典型色调。...），在大多数情况下，每个部分的颜色在切换模式后都会变化。...在作者的方法中，所有的颜色都是全局的，包括明亮模式和暗黑模式的颜色。为了管理这两种模式的颜色，他添加了本地颜色变量，这些变量会根据当前模式引用全局颜色变量。...全局颜色状态 作者强调，在大多数情况下，我们并不希望定义那些在暗黑模式下会改变为其他颜色的全局颜色变量。
如果大家想在项目中使用Tailwind CSS,可以考虑下，自己团队和项目中，是否满足下面的条件；如果不满足下面的要求，Tailwind 可能会让我们的工作变得举步维艰。 1....: "rgba(247, 186, 30, 0.6)", }, }, }; 在添加了一个名为primary的新颜色后，我们可以在整个应用程序中使用bg-primary设置背景颜色，或者使用...HTML 文件可能会因多个类而变得混乱，而且与传统的 CSS 框架相比，学习曲线更陡峭。尽管存在这些权衡，开发人员通常发现收益往往超过了挑战。 4....「保持单一的语义命名约定」将使查找必要的令牌并随着应用程序的增长扩展系统变得更加容易。...如果我们不考虑优化，我们的 CSS 大小可能会变得非常大（超过几十千字节）。即使在一个只有几个带有样式的组件的小项目中，启用 CSS 压缩和 JIT 模式后，大小差异也可能超过 30%。
，用于简化水平书写模式下（如英文、中文）的左右外边距设置。...color-scheme属性允许网页告诉浏览器，其内容是为浅色模式、暗色模式，或两者皆适配的。设置此属性后，浏览器会自动调整表单控件、滚动条和CSS系统颜色等UI元素，以适应相应的主题模式。...属性，以改善特定背景下的对比度和可读性。.../* 对暗背景的元素使用暗色模式 */ .dark-background { color-scheme: dark; } 为什么使用color-scheme 简化暗模式的实现：使用color-scheme...即使在不需要滚动条的情况下，浏览器也会绘制一个“沟槽”（gutter），作为滚动容器的额外空间，避免了因滚动条消失而引起的布局变化。
可以在查看菜单中更改此设置 语法高亮颜色：添加了为深色和非深色用户界面设置不同语法高亮颜色的功能 颜色：添加了为深色和非深色用户界面设置不同前景色和背景色的功能 启动时间减少约 10% 自动完成/自动查找...，弹出菜单字体不会增加 深色模式：匹配括号/括号高亮颜色难以看到 Mac：在某些情况下，查看菜单未正确显示当前设置的外观选择 通过 UCanAccess 驱动程序连接到 MS Access 时，日期字段在导入工具和生成...SQL 选项中用单引号而不是 # 括起来 某些窗口在深色模式下未显示正确的文本颜色 RazorSQL 不再在某些 Windows 7 机器上启动 MySQL：创建函数工具将 IN 关键字放在参数前面...文件系统浏览器：Windows / Linux：文件名可能会被截断 文件系统浏览器：突出显示与文件名标签不匹配的日期和大小标签的颜色前景 Mac：如果从视图菜单中选择暗模式，将选择切换到自动检测暗/亮模式不再重新打开自动检测...Mac：文件系统浏览器：如果自动检测深色/浅色模式已打开，并且 Mac 处于浅色或灰色模式，则文件系统浏览器上的突出显示颜色不正确 查找/自动完成显示列表/工具提示文本：字体大小并不总是基于当前编辑器字体
在任何视觉应用中需要的图像质量很大程度上取决于照明条件：颜色，角度和使用照明对象的光源数量意味着好图像之间的差异，有可能会产生更好的性能，也会带来质量差的图像，产生不好的结果。...在玻璃中检测裂痕使用非漫射光 比如检测玻璃容器上的裂痕 照明技术：暗场 在这个应用当中，用暗场照明来创立一个明亮的，在暗背景下容易检测的感兴趣特征。在一个暗场区域中光线直接通过透明的瓶子。...这些光线将很难检测的划痕转换到暗背景下的亮特征。 技巧4：检测透明包装使用漫射光 比如检测玻璃容器上的裂痕 照明技术：暗场 在这个应用当中，用暗场照明来创立一个明亮的，在暗背景下容易检测的感兴趣特征。...这些光线将很难检测的划痕转换到暗背景下的亮特征。 技巧5：使用颜色创造对比度 在机器视觉应用中创造一个高对比度图像的一个有用的方法是用特殊波长（彩色）的光照明物体。...在许多视觉应用当中，环境光带来了不想要的亮反射，这样使得检测感兴趣特征变得困难或不可能。红外光就能解决这个问题。 技巧8：使用红外光消除颜色差异 红外光能用于在彩色对象之间消除灰度差别。
带有阴影的提示图形 场景04.活动项目（如开关） 当涉及到活动状态（例如切换或选定的列表项）时，一种不错的做法是为它们提供视觉层次结构，例如颜色，当然还有阴影。另外，使它们简单而柔软。 ?...这使得阴影有更自然的感觉，而不会显得生硬。 ? 小技巧：只增加Y轴去获得阴影 颜色使用 在制作阴影的时候，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好。 ?...如果你的背景色是明亮的颜色，那可以将Alpha值设置在15%到40%之间的某个值。但是，如果你的背景色是深色，则需要将Alpha的值设定为5%到15%之间。...彩色的阴影效果 黑暗场景阴影的运用 如果元素具有颜色，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的。但是如果你一定要用，则可以使用具有小于10%的透明度设定，并且颜色跟随主色调来。...黑暗模式下的阴影 关于阴影使用的总结 总结一下，在做阴影的时候，要让你的投影效果简单，并且平滑自然。使用透明度数值和柔和的颜色设定，直到调节完美位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
