寫(xiě)這篇文章的初衷本來(lái)只是打算完成給讀者的一個(gè)承諾，講解一下Android 8.0后的應(yīng)用圖標(biāo)適配?？墒菍?xiě)著寫(xiě)著，發(fā)現(xiàn)安卓現(xiàn)行的圖標(biāo)適配法則和“Z軸拆分法”十分類似，便由適配法牽扯出了許多相關(guān)話題。希望通過(guò)本文，UI同行們能透過(guò)手法本身，進(jìn)行更多的思考。

一、安卓應(yīng)用圖標(biāo)適配

眾所周知，安卓相較于iOS來(lái)說(shuō)，“建立標(biāo)準(zhǔn)化”一路走來(lái)是非常波折的。因?yàn)榘沧康脑荚O(shè)備制造商 (OEM) 很多，每一個(gè)OEM又希望打造自己獨(dú)立的產(chǎn)品特性，這些產(chǎn)品特性注入到硬件設(shè)備和系統(tǒng)軟件等諸多方面，造就了安卓的雜屏現(xiàn)象。

所以我們常說(shuō)安卓“雜屏”，可不僅僅指安卓設(shè)備物理像素、倍率繁多等方面，還有軟件與各類系統(tǒng)適配的問(wèn)題。這些問(wèn)題在近幾年其實(shí)已經(jīng)得到了諸多改善，國(guó)內(nèi)小米的創(chuàng)始人雷布斯就為設(shè)備的標(biāo)準(zhǔn)化做出了不小的貢獻(xiàn)。而Google也一直在致力于解決軟件標(biāo)準(zhǔn)化的問(wèn)題，應(yīng)用圖標(biāo)的適配就是其中一個(gè)方面。

Material Design 規(guī)范中倡導(dǎo)：對(duì)于安卓應(yīng)用圖標(biāo)，自Android O（Android 8.0）版本開(kāi)始，應(yīng)用程序設(shè)計(jì)者應(yīng)提供一套標(biāo)準(zhǔn)化文件。

文件應(yīng)包含：

• 前景層.svg文件：圖標(biāo)主視覺(jué)區(qū)域 72dp*72dp ；最終輸出尺寸 108dp*108dp；
• 背景層.svg文件：最終輸出尺寸 108dp*108dp。

可能聽(tīng)起來(lái)讓你有些一頭霧水，一個(gè)圖標(biāo)還要拆分輸出前景層、背景層，什么鬼？下面我來(lái)講解一下原因。

前面我們說(shuō)到，不同的OEM的系統(tǒng)視覺(jué)規(guī)范不同，對(duì)于桌面應(yīng)用圖標(biāo)，有些OEM出廠設(shè)備是顯示方形，有些OEM出廠設(shè)備是顯示圓形。如果不采用一套標(biāo)準(zhǔn)輸出應(yīng)用圖標(biāo)的規(guī)范，圖標(biāo)很可能會(huì)被OEM所提供的形狀蒙層裁剪到主體部分。

并且從Android 8.1版本開(kāi)始，安卓引入了圖標(biāo)的視差和脈動(dòng)效果。

如何讓設(shè)計(jì)者只需提供一套圖標(biāo)文件，就自動(dòng)適配解決前面的這些問(wèn)題呢？

MD選擇將應(yīng)用圖標(biāo)的前景層與背景層分離。

UI需提供給安卓開(kāi)發(fā)人員兩個(gè)圖層.svg文件：前景層尺寸為108dp*108dp，但主視覺(jué)區(qū)域?yàn)?2dp*72dp；背景層尺寸為108dpx108dp，僅包含背景圖層。

最后根據(jù)各個(gè)不同OEM提供的蒙層遮罩，自由適配不同的圖標(biāo)視覺(jué)樣式。

這樣也就可以調(diào)節(jié)控制前景層與背景層不同的偏移距離，形成視差效果。

看看MD官方展示的最終效果：

這就是MD規(guī)范為OEM安卓桌面圖標(biāo)差異性提供的解決方案。盡管MD官方并沒(méi)有對(duì)這種制圖手法給出一個(gè)官方的名稱，但這種手法與“Z軸拆分法”十分類似，并且常被應(yīng)用在設(shè)計(jì)體系當(dāng)中。

二、Z軸拆分法——機(jī)器作圖的基本邏輯

記得阿里剛推出機(jī)器作圖AI產(chǎn)品“鹿班”的時(shí)候，設(shè)計(jì)師們紛紛表示感受到了人工智能帶來(lái)的威脅。

AI機(jī)器作圖的智能性不用多說(shuō)，它可以根據(jù)產(chǎn)品分析、文案分析等手法，瞬間造出千萬(wàn)張適用于不同應(yīng)用場(chǎng)景中的圖片。并且它還能夠不斷學(xué)習(xí)，越來(lái)越符合主流審美，簡(jiǎn)直不要太玄乎。

后期人工智能會(huì)強(qiáng)大到什么地步，我們不討論，但實(shí)際上此類機(jī)器作圖的基本邏輯就是運(yùn)用的“Z軸拆分法”。

我們看一看京東的人工智能作圖產(chǎn)品“羚瓏”的設(shè)計(jì)規(guī)則：

實(shí)際上人工智能都是提前被錄入了一套設(shè)計(jì)公式，設(shè)計(jì)者將一張圖片的Z軸結(jié)構(gòu)拆分為裝飾、背景、前景、文字、按鈕等，AI通過(guò)篩選、搭配每一層的元素的樣式，最終堆疊生成為合理的設(shè)計(jì)成品。

三、我們可以用Z軸拆分法做什么

Z軸拆分法法其實(shí)已經(jīng)不算新鮮了，我在網(wǎng)上找了一些案例。

Z軸拆分法的優(yōu)點(diǎn)就在于，它容易形成模塊規(guī)范，有助于模塊批量化生產(chǎn)。

我們知道，團(tuán)隊(duì)里每一個(gè)設(shè)計(jì)師的審美與平面能力不同，同一個(gè)模塊的設(shè)計(jì)，按照不同的理解，大家可以做出五花八門的設(shè)計(jì)。就算是讓同一個(gè)設(shè)計(jì)師來(lái)做，也可能因?yàn)椴煌瑫r(shí)間的不同想法，產(chǎn)生不同風(fēng)格的作品，這個(gè)創(chuàng)作過(guò)程是非常消耗時(shí)間和精力的。

并且……作為UI，我必須承認(rèn)，有時(shí)候錙銖必較一些視覺(jué)工作，可能對(duì)于業(yè)務(wù)和增長(zhǎng)來(lái)說(shuō)，并不能起到多少的作用。

而使用了Z軸拆分法后，會(huì)提升模塊作圖的統(tǒng)一規(guī)范性與效率。

所以Z軸拆分法可以被用于模塊批量化生產(chǎn)作圖的場(chǎng)景當(dāng)中，也正是因?yàn)椤澳K批量化”的特征，導(dǎo)致人工智能作圖鉆了UI設(shè)計(jì)師的空子。

四、Z軸拆分法讓你感到輕松還是焦慮？

Z軸拆分法簡(jiǎn)單來(lái)說(shuō)就是，將模塊批量化的作圖場(chǎng)景，在Z軸上拆分為多個(gè)結(jié)構(gòu)，替換每一個(gè)結(jié)構(gòu)的元素，可以搭配出各式各樣的規(guī)范化設(shè)計(jì)成品。讓設(shè)計(jì)師在作圖過(guò)程中，減少思考成本，提升作圖效率。

那么我有一個(gè)問(wèn)題，學(xué)會(huì)了這個(gè)方法，你感到輕松還是焦慮呢？

有一些設(shè)計(jì)師可能覺(jué)得，掌握了這個(gè)方法，或多或少可以讓自己在美工的道路上減輕一些負(fù)擔(dān)；有一些設(shè)計(jì)師可能覺(jué)得，這是沒(méi)有靈魂的批量化生產(chǎn)過(guò)程，這樣的設(shè)計(jì)師以后一定會(huì)被人工智能淘汰吧…

借用京東“羚瓏”團(tuán)隊(duì)的一段話：

如果把作圖工作給到機(jī)器學(xué)習(xí)，它會(huì)按照錄入的邏輯，搜索合適的素材和配色，按照規(guī)則進(jìn)行組合。而我們的設(shè)計(jì)師，則回憶起場(chǎng)景中的聲音、景象、氣味、觸感和味道，并把這些感受進(jìn)行視覺(jué)表達(dá)，使得每一個(gè)人在看到后都有所觸動(dòng)。這是很長(zhǎng)一段時(shí)間機(jī)器設(shè)計(jì)所無(wú)法做到的共情。

前面我說(shuō)，正是因?yàn)椤澳K批量化生產(chǎn)”，導(dǎo)致人工智能作圖鉆了UI設(shè)計(jì)師的空子。但沒(méi)有一個(gè)體系是完全沒(méi)有漏洞的，想要不被人工智能所取代，我們也要反鉆人工智能的空子，因?yàn)闄C(jī)器是無(wú)法像人一樣擁有共情能力的。

機(jī)器學(xué)習(xí)也許會(huì)讓設(shè)計(jì)行業(yè)受到一定沖擊，但更加加大了對(duì)優(yōu)秀設(shè)計(jì)師的過(guò)濾。更加警醒我們做UI這一行的同學(xué)，不要只聚焦于視覺(jué)，我們應(yīng)該更加關(guān)心設(shè)計(jì)背后的情感和邏輯，聚焦原理、用戶心理與業(yè)務(wù)這些機(jī)器無(wú)法解析的場(chǎng)景，才能夠不被智能時(shí)代所淘汰。

說(shuō)了這么多，感覺(jué)越扯越遠(yuǎn)了。還是一開(kāi)始的那句話希望通過(guò)本文，UI同行們能透過(guò)手法本身，進(jìn)行更多的思考。

作者：UCD耍家；公眾號(hào)：UCD耍家（ID：ucdplayer）

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議