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

暗黑模式在 Trip.com App 的实践

一、背景 在 2019 年,随着 iOS 13 与 Android Q 的推出,Apple 和 Google 同时推出主打功能暗黑模式,分别为 Dark Mode(iOS)/Dark Theme(Android...在前期预研中,我们发现 66% 的 iOS 13 用户选择打开Dark Theme,可见用户对暗黑模式的喜爱和期待。 那么 Dark Theme 能带来哪些好处呢?...UI中的彩色,统一进行了降饱和处理,这些彩色会应用于不同的场景,可能是背景,行动点,标签,或者是图标等等地方,那么当彩色用于背景,为了确保文字和背景色有足够对比度,低饱和度的浅色背景就需要配合深色字一起使用...3.1 iOS 我们为 iOS 13 以上用户提供了两种主题模式的选择: 自适应模式:跟随系统展示 Light/Dark 主题 强制 Light 模式:App 保持 Light 主题,不随系统主题变化...3.1.2 适配方案 1)设置开关 ? App主题设置逻辑如图,KeyWindow 只有在App和系统都开启 Dark Theme ,才会开启 Dark 主题。

1.9K20

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

关于如何设计黑暗模式,苹果也给出了几点建议。在iOS 13.0及更高版本中,人们可以选择采用称为黑暗模式外观。在模式下,系统为所有屏幕,视图,菜单和控件使用较的配色,使前景内容在较的背景下突出。...黑暗模式支持所有辅助功能。 人们可以选择模式作为其默认界面风格,并且他们可以使用设置功能,使设备在环境光线较低自动切换到黑暗模式。...例如,地图在使用地图模式时会显示浅色方案,但在激活卫星模式时会切换为深色方案。放置在半透明元素后面或应用于半透明元素(如工具栏),颜色也会显得不同。...在填充色,分隔线和系统色中,建议大家使用各种透明度的颜色来处理,确保在黑暗模式和白色模式下,这些颜色都能很好的适配。 ? 当然,不是所有的颜色都可以用透明色,比如下面这种。...004.控制条与导航栏(Control & Bars) 对于这些基础的组件,苹果建议我们使用系统内置的设计,因为他们都使用了语义化的颜色,能更好的适配白色模式和深色模式。 ?

4.4K40
您找到你想要的搜索结果了吗?
是的
没有找到

网站如何适配暗色模式并实现手动、自动切换

iOS13开始全面支持暗色模式。 那么,我们自己的网站如何适配暗色/亮色模式呢?首先说一下最基础的媒体查询,然后带大家了解一下我的适配方案(纯JS、CSS和HTML的前端操作)。...,但是坏处也有,主要的体现是无法用户主动切换: 举个例子,有些用户习惯把系统长期设置为暗色模式,访问你网站,想看清你网站的图片,希望调整成亮色模式,却必须到系统设置内,手动把系统配色调成亮色再刷新网站...适配逻辑 本次适配适配暗色/亮色模式的用户操作逻辑分两种情况:存在暗色模式标识符、不存在暗色模式标识符。...不存在暗色模式标识符 用户进入网站,若之前没有手动点击网站上切换暗色/亮色按钮(不存在暗色模式标识符),则使用媒体查询检测用户是否有开启暗色模式,同步系统配色。...$('#nightMode').removeClass("icon-yueliang").addClass("icon-zhishifufeiqiapianicon-"); } } // 切换模式

7.3K160

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

在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式,并提供相关 API...暗色主题的 App 比比皆是,但是让 Android 和 iOS 从系统层级支持暗黑模式还是头一次。也许是用户的呼声也许是工业的推动,发展得益于进步和反馈,暗黑模式就这样来到了你我的手机上。...所以,在如今使用 OLED 屏幕的手机上面,开启暗黑模式会大幅减少手机电量的消耗。关于其中更详细的作用原理以及好处,推荐阅读来自中科院物理所公众号的文章,点击下方查看。...mp.weixin.qq.com 为你的 Android App 适配暗黑模式 适配大概可以分为三部分工作: 为应用内的背景、文字、图标做适配 对在设备上显示但并不直接控制的界面进行适配,例如通知、桌面组件...在应用内为用户提供切换主题的开关选项 适配的方式也分为三种:自动适配、自定义适配、使用 Material Design Components 进行适配,为了方便说明,我这里写了一个实例代码,在没有开启适配前是这个样子的

5K20

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

这样,在显示黑色,OLED 的屏幕像素只需要关闭,就是纯正的黑色了。 在 macOS 的深色模式中,基底色并不是纯黑,而是带有一定灰度的黑色。...的开启颜色反转,并不能开启暗黑模式。...第二行的「Vibrant」则为经过了鲜活化处理的文字效果,在背景色变亮,也能保证文字的可读性。 此外,苹果还更新了 UIKit    中的系统级控件,以适配深浅两种颜色外观。...而 Instapaper    在深色外观下,会自动化(Dimmed)处理内容中的图片元素。 此外,从客观因素上来说,许多网页还没有针对 Dark Mode 进行适配,导致打开时会一片惨白刺眼。...例如,深色模式其实未必适合文字的阅读,以及即使开启了深色模式,在昏暗环境中使用电子设备对视力的伤害也不容小觑。

1.8K20

IOS开发基础系列】屏幕适配专题

这个特性在OSX上也有出现过:         从Xcode6 GM版本开始,模拟器新增了iPhone6和iPhone6 Plus两种,如果旧的工程直接跑到这两个模拟器中,默认是"兼容模式",即系统会简单的把内容等比例放大...即iPhone6 plus适配你的应用, 而不是你的应用适配iPhone6 plus。这导致了6的高分辨率无用武之地。所以,我们要手动开启高分辨率模式。...App在旧版iOS启动,该属性会被自动忽略,不会造成异常。...所以, 要做好现在这些设备的适配, 需要学会autolayout(自动布局), 当然,这只是个人建议。另外, 还要多准备一份@3x的图片。再有, 要开启高分辨率模式。...所以我们的应用在6+上也应该尽量适配横屏。

23840

你在直播间看到的高清1080P,可能还没720P画质好

主播在使用补光灯等设备,经常还会遭遇曝光过强的问题,声网“光增强”算法就规避了这一问题,避免过度增强正常曝光的区域,最大化平衡性能和画质效果。...视频降噪带来双BUFF增益:当我们在光线不足的情况下拍摄视频,手机为了弥补缺少的光线,会自动增加ISO值,从而导致画面出现噪点。...由于声网的 SDK 主要面向直播/视频社交/会议类应用,画面中往往人脸就是感兴趣区域或者视觉聚焦区域,因此声网 AI感知处理算法是基于人脸检测的视频编码技术。...通过下面的视频,可以更直观的感受360P开启超分后的画质效果。...在性能和适配方面,声网多倍超分算法在中低端机型也能实时处理,能够覆盖95%以上的 iOS 视频用户,85%以上的安卓用户。

20230

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

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

2.1K10

使用 CSS prefers-* 规范,提升网站的可访问性与健壮性

在用户开启了 prefers-reduced-motion: reduce ,就应该把它去掉。那么该如何开启这个选项呢?...是计算机更易于查看 > 关闭不必要动画 在 MacOS 中:系统偏好 > 辅助使用 > 显示 > 减少运动 在 iOS 上:设置 > 通用 > 辅助性 > 减少运动 在 Android 9+ 上:设置...> 辅助性 > 移除动画 prefers-color-scheme 适配明暗主题 prefers-color-scheme 还是非常好理解的,它用于匹配用户通过操作系统设置的明亮或夜间(模式。...它有两个不同的取值: prefers-color-scheme: light: 明亮模式 prefers-color-scheme: dark: 夜间(模式 语法如下,如果我们默认的是明亮模式,只需要适配夜间模式即可...文字与背景对比度为 21 color: #000; } } 上面只是伪 CSS 代码,具体可能需要对具体的一些元素进行处理,或者使用 filter: contrast() 全局统一处理,当开启配置

62120

APP设计实例解析,深色模式为什么突然就火了?

苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。...为了适配系统,不少APP纷纷推出了深色模式。 深色模式除了降低耗能,进一步延长手机续航时间外,还可以有效解决OLED屏烧屏、费眼的问题。...如果设置了聊天背景,聊天背景图片也会自动调,便于阅读。 虽然整体色彩加深,但微信在设计时仍保持着清晰的层次。...当用户开启夜间模式,还会有一个设计彩蛋:部分图标会根据模式切换而改变。如消息图标会从笑脸切换为休息的状态,这种具有趣味性的设计,也会拉近用户与产品之间的距离。...bilibili动画 B站刚推出深色模式收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切的化处理,导致用户浏览体验极差。

1.9K50

APP设计实例解析,深色模式为什么突然就火了?

苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。...为了适配系统,不少APP纷纷推出了深色模式。 使用OLED屏幕的设备,在纯黑色下可以有效降低耗能,进一步延长续航时间。除此之外,深色模式还可以有效解决OLED屏烧屏、费眼的问题。...如果设置了聊天背景,聊天背景图片也会自动调,便于阅读。 虽然整体色彩加深,但微信在设计时仍保持着清晰的层次。...当用户开启夜间模式,还会有一个设计彩蛋:部分图标会根据模式切换而改变。如消息图标会从笑脸切换为休息的状态,这种具有趣味性的设计,也会拉近用户与产品之间的距离。...bilibili动画 B站刚推出深色模式收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切的化处理,导致用户浏览体验极差。

1.4K30

FlutterUnit 已上架 iOS,暗色模式全面支持

项目地址: github.com/toly1994328… iOS 应用商店地址: apps.apple.com/cn/app/flut… 今后,各平台的软件安装包将放在 FlutterUnit...FlutterUnitWin.zip 免安装,解压即用 MacOS FlutterUnitMac.zip 免安装,解压即用 Web toly1994328.gitee.io/flutter_web 直接访问 ---- 二、暗色模式全平台支持...() 绘制集录(亮) 组件详情页() ---- 移动端部分界面展示 移动端组件页(亮) 移动端组件页() 绘制详情页(亮) 绘制详情页() 组件详情页 组件详情页...可供审核 与 正在等待审核 注意 App Store Connect应用的状态: 可供审核 不是在审核,应该是: 正在等待审核 才对。 审核被拒后,处理完,要重新提交构建版本。...比如我在充值按钮点击弹出 iOS 将在后续版本支持内购 , 这样也是会被拒绝的。

29250

iOS14 定位适配:1、向用户申请临时开启一次精确位置权限的方案2、高德定位SDK适配

iOS13 及以前,App 请求用户定位授权时为如下形态:一旦用户同意应用获取定位信息,当前应用就可以获取到用户的精确定位。 ?...对于对用户位置敏感度不高的 App 来说,这个似乎无影响,但是对于强依赖精确位置的 App 适配工作就显得非常重要了。 用户可以通过在 “隐私设置” 中设置来开启精确定位,但是若用户不愿意开启。...设置之后,即使用户想要为该 App 开启精确定位权限,也无法开启。 注意:当 App 在 Background 模式下,如果并未获得精确位置授权,那么 Beacon 及其他位置敏感功能都将受到限制。...NSLocationTemporaryUsageDescriptionDictionary且desiredAccuracyMode设置CLAccuracyAuthorizationFullAccuracy精确定位模式...定位SDK适配文档详情请见: 在iOS14之后的SDK新增的API ?

5.7K30

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

在本指南中,我将逐步解释为iOS应用设计模式的过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。 ? 在WWDC 2019大会上,苹果公布了iOS 13的所有新功能。...这意味着打开黑暗模式,iPhone上的所有应用程序都将具有黑暗外观。 因此,作为设计师和开发人员,为您的应用程序设计和实现黑暗模式非常重要。苹果已经发布了为您的应用程序设计模式的人机交互指南。...但是,这9种颜色在亮模式模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将亮模式色调颜色更改为模式色调颜色。 ? 你会发现亮模式模式下的颜色是稍有差异的,请务必注意。...但是如果你要自定义颜色,你必须把黑暗模式和亮色模式的颜色都定义出来才行。这里有一些需要注意的事项: 尝试选择一种在亮模式模式下均能正常工作的颜色(相同的RGB值)。...或者您可以选择2种不同的颜色,一种用于亮模式,另一种用于模式。 无论您选择哪种颜色,两种颜色都必须通过可访问性对比度测试。

3.2K10

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

尽管黑暗模式下,用户需要花费更多的时间阅读和分析内容,但他们可能更不容易受干扰性内容的影响。 当您快速扫描屏幕以查找视觉/彩色元素模式效果也很好。...彭博社的应用程序 同样的情况也适用于iOS中的股票应用和健康及活动应用,这些应用甚至在宣布Dark Mode之前就使用Dark UI。 ?...开发工程师在使用Xcode,Android Studio进行程序开发,这些开发平台可以用非常简单的方法来为应用的亮色模式提供一组设计素材,为模式提供另一组素材。从技术上讲,模式很容易实现。...基本上,这是Android的自动模式。它会与黑暗模式兼容,虽然不完美,但是看起来还不错。 黑暗模式应用设计原则 创建应用程序的黑暗模式,不可否认,我们要遵循一些规则,否则用户体验会大大恶化。...对于开发人员来说,能够为两种模式提供两个不同的应用程序图标,以及允许用户为亮模式模式设置不同的墙纸,将是一个很好的选择。 作者:Olivier Berni 翻译:静电

1.4K50

WWDC22 开发者需要关注的重点内容

iOS 16 系统新特性,WWDC22 开发者,需要关注的重点内容、注意事项等,快速了解最新内容和需要适配的最新情况。...而在 iOS 16,增加了“开发者模式”,顾名思意,跟安卓一样,开启开发者模式,才能调试系统的一些能力。图片打开“开发者模式”,在设置 -> 隐私与安全性 -> 开发者模式,默认是关闭状态。...图片TestFlight目前“开发者模式” 影响  TestFlight 安装的包含,不开启 “开发者模式”,无法打开:图片目前苹果文档显示为已知问题,可以下一版本修正,也不确定未来是否还会依赖“开发者模式...剪切版:iOS 14 开始,app 读取剪贴板,在 app 的顶部会显示一行提示内容:图片在 iOS 16 开始,当 app 要读取剪贴板;会被明确询问用户是否要允许它。...图片跨平台设计,一套 app 图标自动适配 iOS,iPadOS,macOS,  tvOS 等。iOS 只需要一张 1024 px 图片即可。

95200

Android 12 新版本泄露,隐私安全可媲美 iOS 系统?

媲美 iOS 的隐私安全?...剪贴板访问提示 在新版本中,Android 12 要新增一个剪贴板访问提示,可在“设置-隐私”下的一个新的“显示剪贴板访问”中控制权限开关,开启后,每当应用程序访问剪贴板,都会显示提示消息。...还有,每个应用的启动画面会显示自动生成的图标,背景会根据当前系统的日/夜主题相适配;充电动画也进行更新:将从屏幕底部开始播放一个新的波纹动画,然后向上扩展;当滑动屏幕到顶部或底部,波纹动画和滚动效果也进一步优化...,使用户体验起来更为流畅;“降低亮度”改为“超”。...随着即将进入 Beta 阶段,开发人员已经开始了兼容性测试,确保应用程序的适配

1.8K30

从今天开始,用对 Android 新老 Camera APIs

1-3-5 Scene Mode 场景模式 应用预设的拍照模式,如:夜景、沙滩、雪景或烛光等。...Figure 13. aeMode 模式开启,Pixel 后置摄像头曝光补偿分别为-12、0、12 拍下的照片 ?...Figure 14. aeMode 模式开启,Pixel 后置摄像头 ISO 分别为 100、6400、12800 拍下的照片 可见自动曝光模式,改变曝光补偿起效;改变 ISO 则无效(曝光时间同理...aeMode 开启既是开启自动曝光模式,关闭则是进入手动曝光模式。...环境下,Pixel 前置摄像头,自动模式下将曝光补偿开到最大,同手动模式下调节 ISO、曝光时间的效果比较 四排照片,每一排中间(那张相同)的完整图像是将 aeMode 打开 、相机曝光补偿开到最大

7.6K126

iOS14适配汇总:【1、隐私权限相关:定位、相册、IDFA 2、KVC相关3、UIView相关;4、网络相关】

【定位授权新增了精确和模糊定位 可根据不同的需求设置不同的定位精确度】向用户申请临时开启一次精确位置权限的方案(不同场景可定义不同purposeKey) iOS14隐私权限适配:【相册权限】 iOS14...相册权限适配 :Limited Photo Access模式、PHAccessLevel(请求查询limited权限在 accessLevel 为readAndWrite 生效)、图片选择器 iOS14...pageImage】解决方案:新增了API:preferredIndicatorImage设置image III、UIView相关的适配 Xcode 12 + iOS 14适配:pop多层控制器至主页...,tabbar不显示问题 iOS14适配:【解决iOS14下pop多层控制器至首页,tabbar不显示问题】方案1:重写pushViewController;方案2: hook hidesBottomBarWhenPush...V、网络相关 iOS14 开启 encrypted DNS 提高安全性,防止DNS 劫持 1、iOS网络请求安全优化:SSL证书验证, 让Charles再也无法抓你的请求数据;对请求参数进行签名;2、

1.6K30

iOS10-iOS15主要适配回顾

ios15适配 1、UITabar、NaBar新增scrollEdgeAppearance,来描述滚动视图滚动到bar边缘的外观,即使没有滚动视图也需要去指定scrollEdgeAppearance,...3、IDFA必须要用户用户授权处理,否则获取不到IDFA 4、 UIPageControl的变化 具体参考iOS 14 UIPageControl对比、升级与适配 ios13适配 -1、 iOS 13...推出暗黑模式,UIKit 提供新的系统颜色和 api 来适配不同颜色模式,xcassets 对素材适配也做了调整 2、支持第三方登录必须,就必须Sign In with Apple 3、MPMoviePlayerController...2、safeAreaLayoutGuide的引入 3、tableView默认开启了Size-self 4、新增的prefersLargeTitles属性 5、改善圆角,layer新增了maskedCorners...ios11适配相关 ios10适配 1、通知统一使用UserNotifications.framework框架 2、UICollectionViewCell的的优化,新增加Pre-Fetching预加载机制

1.2K50
领券