iOS 13的“深色模式”發(fā)布后，各大主流 app也坐不住了。微信剛剛發(fā)布了Android深色模式內(nèi)測版，淘寶也已準備就緒。

據(jù)“淘寶設(shè)計”官方微信公眾號消息，手機淘寶的深色模式初步適配完成，目前iOS已經(jīng)推出了支持深色模式的淘寶測試版，Android系統(tǒng)尚在開發(fā)中。淘寶官方稱，這是“史上最難的深色模式適配”。

淘寶的“深色模式”

今年手機系統(tǒng)的重要特征之一就是深色模式，在全面屏?xí)r代，深色模式更能讓手機屏幕呈現(xiàn)一體感，并且增加用戶的沉浸感。淘寶參考了蘋果官方適配建議，通過語義化顏色的方式進行適配。語義化顏色是指通過「用途」來對元素UI進行定義描述，而不是具體的顏色值，可以讓UI元素靈活的適應(yīng)淺色與深色模式切換。

“語義化顏色”說明

淘寶官方介紹道，淘寶適配深色模式之所以難，是因為它有多個技術(shù)框架、數(shù)百個入淘業(yè)務(wù)，要兼容多種品牌體系、各式各樣的商品和內(nèi)容、全年豐繁復(fù)雜的大促會場等等。如果對應(yīng)用內(nèi)所有頁面進行顏色語義化設(shè)置，設(shè)計與開發(fā)量巨大，無異于重新開發(fā)一遍。

手機淘寶APP構(gòu)成復(fù)雜

所以他們最終選擇了“智能語義化”的方案，可以極大地降低適配成本。設(shè)計師根據(jù)不同UI元素的特性先期制定顏色語義化規(guī)則，技術(shù)在框架層面通過“顏色自動反轉(zhuǎn)”技術(shù)實現(xiàn)顏色反轉(zhuǎn)。

基于內(nèi)容的智能語義化

對于這項技術(shù)，官方表示他們結(jié)合智能語義化方案，對全域的色值都進行了適配規(guī)則定義，使得絕大多數(shù)場景無需修改代碼就可以自動適配深色模式，再輔以設(shè)計和測試走查，手動修改少量有問題的界面，可以在短時間內(nèi)快速、高質(zhì)量適配深色模式。

全域色值的適配（示意）

36氪作者對內(nèi)測版的手機淘寶進行了評測，發(fā)現(xiàn)目前已經(jīng)適配深色模式的頁面仍然存在不完善之處。在深色模式下圖片過亮的問題比較突出。

適配下圖片過亮問題

深色模式目前并不支持所有的板塊，像“有好貨”、“聚劃算”、哇哦視頻、每日好店等板塊以及和淘寶小蜜的對話框并沒有實現(xiàn)適配。

部分板塊尚未實現(xiàn)適配

目前iPhone上的APP很多都適配了深色模式，比如知乎、豆瓣、網(wǎng)易云音樂、百度、喜馬拉雅等等。

其實這并不是個新鮮的模式，深色模式早在Windows Phone時代就有了，但真正適配的APP很少，魅族也在蘋果之前開發(fā)了深色模式，但相比蘋果其號召力有限。

深色模式不僅可以護眼，而且也能延長續(xù)航時間。有相關(guān)測評表示開啟深色模式可以省30%的電量，但是機型有限，目前只有使用了OLED屏幕的手機才能在開啟深色模式后達到省電效果。

頭圖及文章配圖均來自：淘寶設(shè)計