首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

IOS 13深色模式强调色

IOS 13深色模式是苹果公司在iOS 13操作系统中引入的一种用户界面显示模式。它为用户提供了一种更加舒适和沉浸式的视觉体验,通过使用深色背景和亮色文本、图标等元素,以减少屏幕上的眩光和眼睛疲劳。

深色模式的优势在于:

  1. 减少眩光和眼睛疲劳:深色背景可以减少屏幕上的亮度,降低眩光对眼睛的刺激,从而减少长时间使用手机时的眼睛疲劳感。
  2. 节省电池寿命:在使用OLED或AMOLED屏幕的设备上,深色模式可以通过关闭黑色像素来节省电池寿命,因为这些屏幕在显示黑色时可以完全关闭相应的像素。
  3. 强调内容:深色背景可以使文本、图标和其他元素更加醒目,从而提高用户对界面内容的注意力和集中度。
  4. 美观和时尚:深色模式在设计上更加时尚和现代,许多用户认为它给人一种高端和专业的感觉。

深色模式适用于各种场景,特别是在夜间或低光环境下使用手机时效果更佳。它可以用于各种应用程序,包括社交媒体、阅读、浏览网页、游戏等。

腾讯云相关产品中,与深色模式相关的推荐产品是腾讯云移动分析(Mobile Analytics)。腾讯云移动分析提供了丰富的移动应用数据分析功能,可以帮助开发者深入了解用户在深色模式下的使用行为和偏好,从而优化应用的设计和功能。

腾讯云移动分析产品介绍链接地址:https://cloud.tencent.com/product/ma

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS——配适深色模式

适配深色模式 苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了,就是适配深色模式。...颜色 在iOS13以后,UIKit给我们提供了很多的动态颜色,以system开头的都是动态颜色,当我们给 UI 控件设置了动态颜色以后。 UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。...在 iOS 13 中, UIKit 为 UIColor 所提供的 新 API 来创建我们自己的动态颜色。...initWithEffect:effect]; effectView.frame = self.view.bounds; [self.view addSubview:effectView]; (滑动显示更多) 在iOS13...h5界面适配深色模式 如果工程中有嵌套h5界面,那h5界面的内容可能也需要做深色模式的适配。 可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。

1.6K10

苹果iOS 13 新设计规范全面解析

静电说:iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。...这次的规范重点讲解了iOS 13的Dark Mode,也就是黑暗模式,另外还有一些新的菜单及设计改动。...无论在深色或者浅色模式,都能呈现出良好的对比度。如下图所示。 ? 同样的,iOS 13也提供了三种默认的背景色供我们选择,包含系统背景,二级和三级背景。...在使用设计师自己指定的颜色的时候,要确保在两种模式下的对比度都足够,如下图点睛色指定了橙色,黑暗模式下使用白色,浅色模式下使用黑色文字,则对比度必须要拉大,确保应用的可读性足够好。 ?...iOS 13 中的日历应用是一个经典的例子。)

4.5K40
  • iOS应用黑暗模式设计终极指南(附套件下载)

    在本指南中,我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。 ? 在WWDC 2019大会上,苹果公布了iOS 13的所有新功能。...在所有超级令人兴奋的功能中,关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人,您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后,人们可以选择采用深色系统外观。...每个按钮都有不同的颜色,iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同(或分组)内容的元素。 ? 需要注意,黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。...如下所示,在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。所以,不要在深色模式下反转颜色。 ? 04 语义化颜色 接下来我们谈谈语义化颜色(语义化颜色是针对开发工程师的,设计师可以简单看一下)。...08 强调色(Tint Color) Apple提供了9种不同的强调颜色,可在整个应用程序中使用。它们可用于文本,图标或形状。我将下面的强调色改为不同颜色,你会发现他们会变成这样的: ?

    3.3K10

    快速适配 Flutter 之深色模式

    深色模式(Dark Mode),也被称为暗黑模式,是一种高对比度,或者反色模式的显示模式,开启之后在夜间可以缓解疲劳,更易于阅读,同时也能在一定程度上达到省电的效果。...iOS和安卓分别从 iOS 13 和 Android 10(不同厂商不尽相同,部分 Android 9 也支持) 开始加入深色模式的支持,各大浏览器纷纷开始支持深色模式如微信也终于在 iOS 客户端...7.0.12、Android 客户端 7.0.13 支持了深色模式,等网页端适配深色模式后将更进一步提高用户体验的一致性。...但白天不懂夜的黑,有的人就是喜欢一套深色主题用一天,这时就需要用户可以手动开启深色模式了。...选择深色模式 接下来如果想要切换深色模式,我们只需要执行下面这行代码即可。

    1.9K51

    Android App Dark Theme(暗黑模式)适配指南

    在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式,并提供相关 API...暗色主题的 App 比比皆是,但是让 Android 和 iOS 从系统层级支持暗黑模式还是头一次。也许是用户的呼声也许是工业的推动,发展得益于进步和反馈,暗黑模式就这样来到了你我的手机上。...如果您的应用采用浅色主题背景,则 Force Dark 会分析应用的每个视图,并在相应视图在屏幕上显示之前,自动应用深色主题背景。...Android Q 深色模式(Dark Mode)源码解析​juejin.im 自定义适配 自定义适配的关键在于,避免一切硬编码的颜色值,建立 light 、night 两份 colors,通过定义相同的名字...Material Design Components 中内置了 12 种不同场景的颜色属性,分别为主强调色、次强调色,背景颜色、表面颜色、错误颜色、以及字体和 icon 的颜色(以 on 开头的)。

    5.2K20

    Material Design Lite,简洁惊艳的前端工具箱

    自metro和ios7开始的扁平化设计语言则相反,它着意去掉冗余的装 饰效果(比如透视、纹理、渐变等等能做出3D效果的元素),让“信息”本身重新作为核心 被凸显出来。...最多用两个调色板 在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。...为文本、图标和分割线应用透明度 通过为文本设置透明度来表达文本的相对重要性: 对于深色背景的浅色文字,最重要的文本使用87%的透明度,次重要的文本使用54%的 透明度。...对于浅色背景的深色文字,最重要的文本使用100%的透明度,次重要的文本使用70%的 透明度,其他文本使用30%的透明度。 3....在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: 4.

    95110

    DarkMode(1):产品应用深色模式分析

    iOS 13 的发推出了深色模式(Dark Mode),不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。  ...在 macOS 的深色模式中,基底色并不是纯黑,而是带有一定灰度的黑色。 在 iOS 上,苹果设计 Dark Mode 的基底色就是纯黑,这样一方面来可以省电,另一方面也与「刘海」的衔接更加自然。...论是浅色还是深色外观下,我们都应该在界面层级中,让离用户在逻辑关系上更近的颜色更亮一些。 再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...你可以在这里下载苹果官方提供的    iOS 13设计模板的 Sketch 文件,其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。...例如,深色模式其实未必适合文字的阅读,以及即使开启了深色模式,在昏暗环境中使用电子设备对视力的伤害也不容小觑。

    1.8K20

    谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    用法 深色主题将会让 UI 的绝大部分以深色来呈现。它是作为默认主题(浅色主题)的一个补充模式而存在。 深色主题将会降低设备屏幕的显示亮度,同时仍保持最低程度的色彩对比度。...深色模式下,不要使用黑色,而是使用深灰色,用来呈现较环境中的高程和大范围的区域。 色彩与调性 ? 在深色主题的UI当中,尽可能使用数量有限的色彩,确保绝大部分的区域需要保持深色。...可访问性的不饱和色彩 深色主题应该尽量避免使用高饱和度的色彩,因为它们多数不能够达到 WCAG 对于文本的对比度要求(4.5:1)。高饱和度的色彩能够在深色背景上产生炫光的视觉效果,产生视觉疲劳。...强调色深色主题当中,深色的背景和元素占据了 UI 的绝大部分。而强调色通常使用的是浅色(柔和且饱和度较低)或者明亮(饱和度高,鲜艳)的色彩,确保被强调的元素能够脱颖而出。...你可以为你的深色模式色彩主题选择更合理的色彩,来构建配色。 ?

    9.7K10

    Material Design Lite ,简洁惊艳的前端工具箱

    自metro和ios7开始的扁平化设计语言则相反,它着意去掉冗余的装 饰效果(比如透视、纹理、渐变等等能做出3D效果的元素),让“信息”本身重新作为核心 被凸显出来。...最多用两个调色板 在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。...对于深色背景的浅色文字,最重要的文本使用87%的透明度,次重要的文本使用54%的 透明度。提示性文本,例如输入框、标签、被禁止的文字等使用26%的透明度。...对于浅色背景的深色文字,最重要的文本使用100%的透明度,次重要的文本使用70%的 透明度,其他文本使用30%的透明度。 3....在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: ? 4.

    1.3K30

    科研绘图配色

    不同的颜色表示不同的分组,相近的颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要的数据用深色或暖色表示,不重要的数据用浅色或冷色表示。 色彩种类两到三种。...比较窄的柱体建议用深色,比较宽的柱体建议用浅色。如果使用深色,建议添加透明度,降低其饱和度色彩。 两列数据的配色推荐选用不太接近的颜色实现对比的目的。...【饼图配色】 饼图颜色较多,建议使用软件内置颜色方案,面积小的区域使用深色系。 【折线图配色】 重叠的折线不能太多,如果超过四条,建议改用堆叠折线图或者其他图形表达方式。...配色可以把点设为深色,然后提高颜色的透明度。 【等高线图和热图配色】 颜色多,图线多,建议用配色方案,通常用双色或者三色渐变的方案。...它提供三种配色模式调色板、渐变色、三色渐变,我们可以生成调色板或从我们选择的颜色创建漂亮的CSS渐变。

    2.6K10

    你说的黑是什么黑

    近一年,随着iOS和安卓陆续支持了深色模式,各个团队的一通操作,也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子业界最火的话题之一。...深色模式是如何进入我们的视野的?我们可以看到在过去的2年中,曾经出现过2个高峰。第一个高峰是去年WWDC,苹果第一次发布了iOS13的测试版,并且最大的特性就是支持了深色模式。...第二个高峰就是随着iOS 13随着iPhone 11系列正式发布,大量的App开始为深色模式适配。 深色模式到底有啥好的? 为啥要做深色模式?...太难了...一上深色模式马上就被骂 深色模式虽然好处多多,iOS 13正式上线也1年时间了,但是刚开始这段时间的好多App,每上线了深色模式,却被舆论推上了风口浪尖。...暗黑模式 or 黑夜模式? 随着iOS和Android系统级支持,正式把深色模式带进了寻常百姓家。不同的产品大面积的开始适配深色模式。 现在的深色模式

    90820

    一篇文带你了解黑暗UI模式的过去,现在和未来

    在19年的WWDC期间,苹果在iOS上引入了 Dark Mode。...即使深色模式概念还没有发布,某些产品(如奢侈品牌,流媒体服务)也使用了深色的用户界面……为了传达一种高贵的感觉,使内容更加凸显,并结合使用场景(您最有可能在晚上在昏暗的房间中使用流媒体服务,从而使黑暗的...MD设计中的深色和浅色模式主色调整 ? · 更新配色 我们必须为黑暗模式单独设定一套调色板。请记住,某些内容可以在浅色模式下共享同样的颜色,但是在黑暗模式下,则可能不行。 ?...黑暗模式的未来 从黑暗模式的使用率来看,我们可以肯定iOS14和Android 11会有新的功能出现。比如主屏幕变成这样的: ?...浅色和深色模式下的iPhone屏幕 如果图标颜色在明暗模式切换时不变,也许并不合适。

    1.4K50

    如何让你的网站支持苹果系列的深色Dark模式

    就在前几天 9 月 20 日凌晨,苹果正式推送 iOS13、iPadOS13,iPhone 和 iPad 的深色模式也终于来了 我也是直接换上了 iPad 的深色模式,mbp 使用正常的浅色模式,访问自己网站的时候发现一个问题...,就是下面这个引用样式有些问题 我是一个引用段落 在未修复前,深色模式看的话就是一片空白,因为深色模式的字体是白色,同时给了一个background-color:#f5f5f5样式所导致 这个是不能忍的...,此属性有三个值 no-preference表示用户未指定操作系统模式,其作为布尔值时以 false 输出 light表示用户的操作系统是浅色模式 dark表示用户的操作系统是深色模式 它的用法也是很简单...: dark) { /* 深色模式样式 */ } 就酱紫。...任何个人或团体,未经允许禁止转载本文:《如何让你的网站支持苹果系列的深色Dark模式》,谢谢合作!

    88440

    Flutter适配深色模式的方法(DarkMode)

    没错,就是文章标题提到的适配深色模式(DarkMode),也可以说是实现夜间模式的功能。相信许多iOS的同学最近都比较关注,毕竟iOS 13上个月推送更新了。...说适配的原因是因为在iOS 13 和 Android 10系统上它都属于新特性。适配的目的是为了达到应用的主题随着系统主题模式的切换而变化,给用户更好的一致性体验。...按照这个思路我在设置中添加了“夜间模式”的功能,默认也是跟随系统,当然你也可以手动的开启和关闭。 ? 这里暂时有个问题,在iOS手机上开启深色模式,当我应用内关闭深色模式后,状态栏文字无法变为黑色。...问题主要还是Flutter 1.9.1的版本并没有适配iOS 13 Status Bar增的UIStatusBarStyleDarkContent 。 ?...这里暂时有个问题,在iOS手机上开启深色模式,当我应用内关闭深色模式后, 状态栏无法变为黑色 。这个问题Flutter的issues中也有人反馈了,期待官方的适配修复吧。

    2.2K10

    H5 项目如何适配暗黑模式

    一、背景 随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。...深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能 提供更好的可视性和沉浸感。...如何切换深色模式 iOS:“设置”--“显示与亮度”--“外观”,选择“深色” Android:“系统设置”--“显示”--“深色模式”。...二、问题 如果系统设置了深色模式,H5页面不做相应的处理,会出现背景色冲突、深色文字显示异常,深色图标显示异常等一些显示上的问题。 所以,需要对深色模式进行一些适配。...我尝试了一些方案: 三、H5项目适配深色模式方案 1.声明 color-scheme color-scheme 有两种方式。

    2.5K50

    借助 Material You 动态配色丰富您的应用

    Android 12 可以通过动态配色提取算法来选择颜色值,基于动态配色,您可根据用户的桌面壁纸颜色生成自定义调色板。动态的浅、深色方案可体现在整个用户系统界面,以及某些应用中。...△ 动态配色可提取壁纸主色调 动态配色的原理 首先,它从用户的壁纸上提取一种源颜色,并推算出五种关键颜色,然后将每个关键颜色转化为由 13 种色调组成的调色板。...每种色调都会生成一组浅、深色方案,这些方案将根据偏好和视觉需求进行更改或调整。Error 颜色也会自动分配到相应色槽中。...△ 不同颜色的浅深色方案 您可能已经熟悉了目前的 12 个颜色槽,比如其中的 Primary 色调和 On Primary 色调。...色调调色板中的颜色可通过设计 Token 映射到浅、深色彩方案中,同时颜色方案的值也可以被重写,以便继承自定义颜色或其他色彩引用的 Token。

    2.5K30

    最新iOS设计规范七|10大视觉规范(Visual Design)

    iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性的界面在任何环境下都提供出色的体验非常重要。...iOS 13还引入了一系列六种不透明的灰色颜色,你可以在半透明效果不佳的极少数情况下使用它们。例如:交叉或重叠元素(例如网格中的线条或条形)在不透明基础上看起来更好。...图像、图标和符号的颜色 iOS系统的SF符号,在深色模式下会自动显示效果,以及针对明暗外观优化的全彩色图像。 尽量使用SF符号。...为了在内容容器中使用,iOS 13定义了四种具有不同半透明度的材质(每种材质还包括一个深色变体): SystemUltraThinMaterial SystemThinMaterial SystemMaterial...当你做出这个选择时,请考虑: 较厚的材质,可以为具有精细特征的文本或其他元素等提供更好的对比度 半透明可以通过对后台内容的可见,来帮助用户记住其上下文 iOS13还定义了标签、填充和分隔符的活力值,这些标签

    8.1K30

    最新iOS设计规范八|3大图标和图像规范(Icons and Images)

    将8位调色板用于不需要全24位颜色的PNG图形。使用8位调色板可以减小文件大小,而不会降低图像质量。此调色板不适用于照片。 优化JPEG文件以在大小和质量之间找到平衡。...您无法预测人们会为他们的主屏幕选择哪些壁纸,因此,不要仅仅针对浅色或深色测试您的应用。查看不同照片的外观。在具有动态背景的实际设备上尝试使用该设备,该动态背景会随着设备的移动而改变视角。...例如:一个体育APP可能为不同的球队提供图标,或者一个有明暗模式的APP可能会提供相应的明暗图标。请注意,APP图标只能根据用户的请求进行更改,并且系统始终会向用户提供此类更改的确认。...三、系统图标(System Icons)iOS12及更早版本 在iOS 13或更高版本中,更习惯使用SF符号来表示APP中的任务和模式。...当你的APP在iOS 12或更早版本中运行时,请按照以下指南操作。 系统提供内置图标,表示各种用例中的常见任务和内容类型。

    3.1K20
    领券