淘寶內(nèi)測(cè)深色模式：iOS領(lǐng)先一步

微信最近正在內(nèi)測(cè)黑暗模式，而手機(jī)淘寶也在內(nèi)測(cè)自己的深色模式，這下晚上剁手更方便了。

其實(shí)，很多APP都已經(jīng)支持“黑夜模式”，但深色模式或者黑暗模式并不是簡(jiǎn)單地把APP界面變成深顏色。

深色模式是今年手機(jī)系統(tǒng)的重要特性，參考蘋(píng)果官方建議，需要通過(guò)語(yǔ)義化顏色的方式進(jìn)行適配，可以讓UI界面元素靈活地適應(yīng)淺色、深色模式切換。

其中，語(yǔ)義化顏色是指通過(guò)“用途”來(lái)對(duì)元素UI進(jìn)行定義描述，而不是具體的顏色值。

語(yǔ)義化顏色說(shuō)明

對(duì)于手機(jī)淘寶來(lái)說(shuō)，適配深色模式的難度相當(dāng)大，因?yàn)樗卸鄠€(gè)技術(shù)框架、數(shù)百個(gè)入淘業(yè)務(wù)，要兼容多種品牌體系、各式各樣的商品和內(nèi)容、全年豐繁復(fù)雜的大促會(huì)場(chǎng)等等。

如果對(duì)應(yīng)用內(nèi)所有頁(yè)面進(jìn)行顏色語(yǔ)義化設(shè)置，設(shè)計(jì)與開(kāi)發(fā)量將無(wú)比巨大，無(wú)異于把整個(gè)APP重新開(kāi)發(fā)一遍。

最終，手機(jī)淘寶采用了“智能語(yǔ)義化”的方案，大幅降低適配成本。設(shè)計(jì)師根據(jù)不同UI元素的特性，先期制定顏色語(yǔ)義化規(guī)則，然后在框架層面通過(guò)“顏色自動(dòng)反轉(zhuǎn)”技術(shù)，實(shí)現(xiàn)顏色反轉(zhuǎn)。

結(jié)合智能語(yǔ)義化方案，手機(jī)淘寶對(duì)全域的色值都進(jìn)行了適配規(guī)則定義，絕大多數(shù)場(chǎng)景都無(wú)需修改代碼即可自動(dòng)適配深色模式，再手動(dòng)修改少量有問(wèn)題的界面，最終在短時(shí)間內(nèi)快速、高質(zhì)量地適配了深色模式。

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

全域色值的適配

目前，iOS版手機(jī)淘寶已初步完成深色模式適配，正進(jìn)行小范圍內(nèi)測(cè)，感興趣的可以關(guān)注“淘寶設(shè)計(jì)”公眾號(hào)獲取。

安卓版的深色模式正在開(kāi)發(fā)中。