我们把淘宝“黑了”?内测名额限量开放!

简介: 现在,你有机会更沉浸地在深夜淘宝了淘宝已正式支持深色模式初步完成史上最最最“南”的深色模式适配了

你是不是经常在晚上买买买

双11的零点忍受着刺眼的白屏幕疯狂下单

现在,你有机会更沉浸地在深夜淘宝了
淘宝已正式支持深色模式
初步完成史上最最最“南”的深色模式适配了

image.png

淘宝深色模式来了

淘宝特色的深色模式

深色模式是今年手机系统的重要特性,参考苹果官方适配建议,需要通过语义化颜色的方式进行适配,可以让 UI 元素灵活的适应浅色与深色模式切换。语义化颜色是指通过「用途」来对元素 UI 进行定义描述,而不是具体的颜色值。

image.png

语义化颜色说明

淘宝适配深色模式之所以辣么难,是因为它支持多个技术框架、数百个入淘业务,同时要兼容多种品牌体系、各式各样的商品和内容、以及全年丰繁复杂的大促会场等等。

如果我们对应用内所有页面进行颜色语义化设置,其难度与工作量都巨大,无异于重新开发一遍。

image.png

淘宝APP的复杂现状

▐ 智能语义化

最终我们找到了“智能语义化”的方案,使适配成本大幅降低。设计师根据不同 UI 元素的特性先期制定颜色语义化规则,进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。

image.png

基于内容的智能语义化

结合智能语义化方案,我们对全域的色值都进行了适配规则定义,使得绝大多数场景无需修改代码就可以自动适配深色模式,再辅以设计和测试走查,手动修改少量有问题的界面,我们得以在短时间内快速、高质量适配深色模式。

image.png

技术方案原理图

邀请亲成为第一批内测用户

iOS 版的淘宝已初步完成深色模式适配,为了持续优化体验和改进,我们邀请大家进行小范围内测,想尝鲜的小伙伴可以通过以下方式获取👇:

关注「淘系技术」微信公众号
回复“淘宝黑化”获取体验测试包
体验名额有限,先到先得

image.png

Android 版用户稍等,我们正在紧张开发中。持续关注“淘系技术”公众号,后续我们将带来淘宝深色模式设计内幕,更多内容敬请期待。

We are hiring

淘系技术部依托淘系丰富的业务形态和海量的用户,我们持续以技术驱动产品和商业创新,不断探索和衍生颠覆型互联网新技术,以更加智能、友好、普惠的科技深度重塑产业和用户体验,打造新商业。我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、移动技术、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。
请投递简历至邮箱:ruoqi.zlj@taobao.com
了解更多职位详情:2684亿成交!每秒订单峰值54.4W!这样的团队你想加入吗?

相关文章
|
Android开发
解决 Android Studio 日志乱码
解决 Android Studio 日志乱码
2503 0
解决 Android Studio 日志乱码
|
11月前
|
人工智能 计算机视觉
HarmonyOS NEXT AI基础视觉服务-背景替换
这是一个基于AI基础视觉服务的背景替换案例,通过调用设备相册选择图片并智能分割主体,支持动态更换背景颜色。主要步骤包括:1) 导入模块与定义组件;2) 实现图片选择与格式转换;3) 使用`subjectSegmentation.doSegmentation`接口完成主体分割;4) 通过随机RGB值实现背景色动态更换。代码结构清晰,功能完整,适合学习AI图像处理技术。
HarmonyOS NEXT AI基础视觉服务-背景替换
|
7月前
|
人工智能 IDE 前端开发
写给尊贵的 Tare Pro 用户的喂饭级 IOS APP 开发指南
本文介绍了如何利用 AI IDE Trae,从零开始快速开发一个 iOS 应用《回声》。通过 AI 辅助完成需求梳理、原型设计、编码与调试,展示了 AI 在整个开发流程中的强大助力。
1010 0
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
1099 1
html动态爱心代码【一】(附源码)
html动态爱心代码【一】(附源码)
14872 0
|
SQL JavaScript 小程序
来了,MyBatisPlus的join联表查询!
来了,MyBatisPlus的join联表查询!
来了,MyBatisPlus的join联表查询!
|
前端开发 JavaScript Java
Springboot静态资源访问、上传、回显和下载
Springboot静态资源访问、上传、回显和下载
1758 0
Springboot静态资源访问、上传、回显和下载
|
前端开发 JavaScript
vue3全局组件-全局变量-base64-axios-封装
vue3全局组件-全局变量-base64-axios-封装
264 0
|
安全
PADS Layout元器件独立规则设置
对于设计规则设置,之前有粉丝说单独设置元器件的规则没有效果,主要是指间距和线宽的设置。
1139 0