iOS 13的“深色模式”发布后,各大主流app也坐不住了。微信刚刚发布了Android深色模式内测版,淘宝也已准备就绪。
据“淘宝设计”官方微信公众号消息,手机淘宝的深色模式初步适配完成,目前iOS已经推出了支持深色模式的淘宝测试版,Android系统尚在开发中。淘宝官方称,这是“史上最难的深色模式适配”。
淘宝的“深色模式”
今年手机系统的重要特征之一就是深色模式,在全面屏时代,深色模式更能让手机屏幕呈现一体感,并且增加用户的沉浸感。淘宝参考了苹果官方适配建议,通过语义化颜色的方式进行适配。语义化颜色是指通过「用途」来对元素UI进行定义描述,而不是具体的颜色值,可以让UI元素灵活的适应浅色与深色模式切换。
“语义化颜色”说明
淘宝官方介绍道,淘宝适配深色模式之所以难,是因为它有多个技术框架、数百个入淘业务,要兼容多种品牌体系、各式各样的商品和内容、全年丰繁复杂的大促会场等等。如果对应用内所有页面进行颜色语义化设置,设计与开发量巨大,无异于重新开发一遍。
手机淘宝APP构成复杂
所以他们最终选择了“智能语义化”的方案,可以极大地降低适配成本。设计师根据不同UI元素的特性先期制定颜色语义化规则,技术在框架层面通过“颜色自动反转”技术实现颜色反转。
基于内容的智能语义化
对于这项技术,官方表示他们结合智能语义化方案,对全域的色值都进行了适配规则定义,使得绝大多数场景无需修改代码就可以自动适配深色模式,再辅以设计和测试走查,手动修改少量有问题的界面,可以在短时间内快速、高质量适配深色模式。
全域色值的适配(示意)
36氪作者对内测版的手机淘宝进行了评测,发现目前已经适配深色模式的页面仍然存在不完善之处。在深色模式下图片过亮的问题比较突出。
适配下图片过亮问题
深色模式目前并不支持所有的板块,像“有好货”、“聚划算”、哇哦视频、每日好店等板块以及和淘宝小蜜的对话框并没有实现适配。
部分板块尚未实现适配
目前iPhone上的APP很多都适配了深色模式,比如知乎、豆瓣、网易云音乐、百度、喜马拉雅等等。
其实这并不是个新鲜的模式,深色模式早在Windows Phone时代就有了,但真正适配的APP很少,魅族也在苹果之前开发了深色模式,但相比苹果其号召力有限。
深色模式不仅可以护眼,而且也能延长续航时间。有相关测评表示开启深色模式可以省30%的电量,但是机型有限,目前只有使用了OLED屏幕的手机才能在开启深色模式后达到省电效果。
头图及文章配图均来自:淘宝设计