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

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

淘寶的“深色模式”

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

“語義化顏色”說明

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

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

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

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

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

全域色值的適配（示意）

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

適配下圖片過亮問題

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

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

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

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

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