2019-12-23 15:59:53
近日有多款知名APP開啟測試黑暗模式,除了之前已經(jīng)爆料的微信外,淘寶APP也開始進(jìn)行內(nèi)測,這下晚上買買買再也不傷眼了。
其實(shí),很多APP都已經(jīng)支持“黑夜模式”,但深色模式或者黑暗模式并不是簡單地把APP界面變成深顏色。
深色模式是今年手機(jī)系統(tǒng)的重要特性,參考蘋果官方建議,需要通過語義化顏色的方式進(jìn)行適配,可以讓UI界面元素靈活地適應(yīng)淺色、深色模式切換。
其中,語義化顏色是指通過“用途”來對元素UI進(jìn)行定義描述,而不是具體的顏色值。
語義化顏色說明
對于手機(jī)淘寶來說,適配深色模式的難度相當(dāng)大,因?yàn)樗卸鄠€(gè)技術(shù)框架、數(shù)百個(gè)入淘業(yè)務(wù),要兼容多種品牌體系、各式各樣的商品和內(nèi)容、全年豐繁復(fù)雜的大促會(huì)場等等。
如果對應(yīng)用內(nèi)所有頁面進(jìn)行顏色語義化設(shè)置,設(shè)計(jì)與開發(fā)量將無比巨大,無異于把整個(gè)APP重新開發(fā)一遍。
最終,手機(jī)淘寶采用了“智能語義化”的方案,大幅降低適配成本。設(shè)計(jì)師根據(jù)不同UI元素的特性,先期制定顏色語義化規(guī)則,然后在框架層面通過“顏色自動(dòng)反轉(zhuǎn)”技術(shù),實(shí)現(xiàn)顏色反轉(zhuǎn)。
結(jié)合智能語義化方案,手機(jī)淘寶對全域的色值都進(jìn)行了適配規(guī)則定義,絕大多數(shù)場景都無需修改代碼即可自動(dòng)適配深色模式,再手動(dòng)修改少量有問題的界面,最終在短時(shí)間內(nèi)快速、高質(zhì)量地適配了深色模式。
基于內(nèi)容的智能語義化
全域色值的適配
目前,iOS版手機(jī)淘寶已初步完成深色模式適配,正進(jìn)行小范圍內(nèi)測,感興趣的可以關(guān)注“淘寶設(shè)計(jì)”公眾號獲取。
安卓版的深色模式正在開發(fā)中。