淘宝 App 支持黑暗模式

据淘宝官方技术消息,现在,你有机会更沉浸地在深夜淘宝剁手了,淘宝已正式支持 iOS 13 深色模式,初步完成史上最 “难” 的深色模式适配。(文末有 iOS 版淘宝测试版下载)

Android 版用户稍等,该功能正在紧张开发中。

淘宝App支持黑暗模式
淘宝App支持黑暗模式
淘宝App支持黑暗模式
淘宝App支持黑暗模式
淘宝App支持黑暗模式

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

淘宝App支持黑暗模式

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

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

淘宝App支持黑暗模式

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

淘宝App支持黑暗模式

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

淘宝App支持黑暗模式

技术方案原理图

体验 iOS 版淘宝深色模式:

第一步 、打开链接,通过苹果 testlight 安装(只支持 iOS13 系统):https://testflight.apple.com/join/TThGL9RX

第二步、打开系统设置-显示与亮度-深色,打开淘宝即可体验深色模式。

淘宝App支持黑暗模式

原文出处:ithome,如若转载,须获得稿源授权。

(0)
明途的头像明途

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注