Android O 引入了一種新的應(yīng)用圖標(biāo)格式：自適應(yīng)圖標(biāo)。自適應(yīng)圖標(biāo)可以統(tǒng)一所有應(yīng)用圖標(biāo)的形狀，為用戶展現(xiàn)有趣的視覺效果，從而使設(shè)備提供更為一致的體驗(yàn)。本文會(huì)向您解釋它的工作原理，以及一些設(shè)計(jì)這種圖標(biāo)的技術(shù)。

一、基礎(chǔ)元素部分

1. 尺寸和形狀

自適應(yīng)圖標(biāo)的大小為 108dp * 108dp，但***只能遮蓋 72dp * 72dp 的面積。不同的設(shè)備可以提供不同的遮蓋，但必須是凸形的(不能凹進(jìn)去)，圖標(biāo)邊緣距離中心不小于 33dp。

△ 內(nèi)容 + 遮罩 = 成品，注意剛才強(qiáng)調(diào)的，不要使用凹進(jìn)去的輪廓

考慮到遮罩的最小面積，您可以畫一個(gè) 66dp 直徑的圓來作為安全區(qū)域的參考，以保證圖標(biāo)不被剪裁。

△ 安全區(qū)域的參考

2. 參考線

參考線的形狀是圖標(biāo)網(wǎng)格的基礎(chǔ)，它可以讓您的圖標(biāo)的視覺比例與其他應(yīng)用圖標(biāo)一致。參考線的一些具體設(shè)置如下：

• 圓形：直徑為 52dp 或 32dp
• 方形：44dp * 44dp，圓角半徑為 4dp
• 矩形：52dp * 36dp 或 36dp * 52dp，圓角半徑為 4dp

3. 內(nèi)容圖層

自適應(yīng)圖標(biāo)實(shí)際上由兩層內(nèi)容堆疊而成：前景和背景。兩層圖形的大小均為 108dp * 108dp; 背景必須完全不透明，而前景允許出現(xiàn)一定的透明度。

簡(jiǎn)單計(jì)算一下：由于 108dp * 108dp 圖標(biāo)被遮蓋到了 72dp * 72dp 大小，每條邊外部被切掉的 18dp 可以被認(rèn)為是 “額外的” 內(nèi)容，只在動(dòng)效中顯示。

二、設(shè)計(jì)時(shí)需要注意的地方

用于創(chuàng)建產(chǎn)品圖標(biāo)的 Material Design 設(shè)計(jì)規(guī)范在這里仍然適用。具體來說，圖標(biāo)結(jié)構(gòu)、陰影和修飾效果仍然存在，但您現(xiàn)在可以將多種元素分散放置在前景或背景圖層中，以產(chǎn)生不同的效果。

我們相信，如果您將圖標(biāo)的品牌標(biāo)記放置在前景上，再把它們放置在純色背景上，圖標(biāo)的顯示效果就會(huì)非常出色。您的圖標(biāo)會(huì)完全與設(shè)備貼合。聰明絕頂?shù)脑O(shè)計(jì)師們將會(huì)如何探索這些新的設(shè)計(jì)要求，并使用有趣和創(chuàng)新的方式來創(chuàng)造多少令人愉快的圖標(biāo)?只要想象一下設(shè)計(jì)社區(qū)里可能涌現(xiàn)出來諸多杰作就頗令人興奮呢。下面列出一些要記住的事情和一些可供探索的想法。

1. 剪裁

由于自適應(yīng)圖標(biāo)的動(dòng)態(tài)特性，您無法知道將要應(yīng)用的遮罩的形狀究竟會(huì)是什么樣子。因此，***將所有關(guān)鍵元素(如品牌 logo)放在安全區(qū)內(nèi)，并遠(yuǎn)離遮罩邊緣。

2. 背景錨定

放置一些看起來像是前景的元素，但實(shí)際上它們被畫在背景圖層上，這也意味著他們可以在后面獨(dú)立移動(dòng)。例如，下面計(jì)算器應(yīng)用將大多數(shù)元素放置在前景中，而將等號(hào)按鈕放置在背景內(nèi)的高光色塊中：

這樣一來就為動(dòng)效提供了一個(gè)有趣的機(jī)會(huì)，您可以把視覺錨點(diǎn)標(biāo)定在明亮的色塊上，但它又比前景元素的移動(dòng)量少，從而創(chuàng)造出一種深度感。

3. 被遮蓋的遮罩

我們認(rèn)為如果將遮蓋元素放置在前景中，可能會(huì)很有趣 —— 您會(huì)發(fā)現(xiàn)本該是固定的內(nèi)容也能靈動(dòng)起來。這里我們?yōu)?Google Play Store 設(shè)計(jì)了一個(gè)參考圖標(biāo)用來簡(jiǎn)單地講述這個(gè)思路，即將彩色三角形放置在白色背景上的前景中，如下圖所示，已經(jīng)成型的 logo 單獨(dú)放在一個(gè)圖層里。

△ 一定有設(shè)計(jì)師認(rèn)為這是一張透明底的圖片對(duì)不對(duì)?

但是!如果放棄這種做法，轉(zhuǎn)而使用彩色背景和白色前景(被鏤空出了三角形輪廓)，就能實(shí)現(xiàn)相同的靜態(tài)輸出：

但上面這種做法允許下方圖層的顏色 “滲出”，并獨(dú)立于遮罩進(jìn)行移動(dòng)，從而在移動(dòng)或放大時(shí)顯示出背景的不同部分。下圖就是兩種方案的對(duì)比：

4. 光與影

放置在不同圖層中的光照和陰影效果，在相互作用時(shí)，可以產(chǎn)生有趣的現(xiàn)象。例如，在前景元素上使用長(zhǎng)陰影，并在遮蓋區(qū)域內(nèi)移動(dòng)時(shí)，可以產(chǎn)生出很好玩的視覺效果。類似地，光照效果可以放置在前景圖層中，而不是被固定到背景中。例如，“高光” 層可以放置在前景中，以模擬光源。將其放置在前景中，意味著它在運(yùn)動(dòng)時(shí)將在背景層上播放，并以不同的速率向它移動(dòng)。

請(qǐng)當(dāng)心，不要?jiǎng)?chuàng)建沒有意義的效果。例如，從前景元素中分離出來的陰影，或是在背景元素后移動(dòng)的陰影。還要記住，許多圖標(biāo)可能會(huì)一起被看到，所以請(qǐng)保守地定制光照效果，并時(shí)刻遵循 Material Design 中對(duì)圖標(biāo)光影的設(shè)計(jì)要求。

5. 遲滯效果

您可以將元素放置在背景圖層中，這時(shí)它們會(huì)被前景層完全遮蔽，僅在動(dòng)效下顯示。

三、資源和工具

Sketch 源文件(請(qǐng)注意里面的關(guān)鍵元素都符號(hào)化了，必要的時(shí)候請(qǐng)斷開符號(hào)和副本的依賴關(guān)系)：

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/ic_launcher.sketch

Illustrator 源文件：

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/adaptive-icon.ai

自適應(yīng)圖標(biāo) Playground

在開發(fā)自適應(yīng)圖標(biāo)時(shí)，我們已經(jīng)明白，在運(yùn)用動(dòng)效時(shí)，許多細(xì)微之處來自前景和背景元素的相互作用。這仍然是一個(gè)開放的問題，因?yàn)槲覀兩形纯吹皆O(shè)備和啟動(dòng)器制造商將如何實(shí)現(xiàn)這一點(diǎn)。為了提前讓大家能預(yù)覽一下 “實(shí)機(jī)” 效果，我們創(chuàng)建了一個(gè)小型測(cè)試應(yīng)用，以幫助您對(duì)它進(jìn)行評(píng)估，同時(shí)創(chuàng)建您的圖標(biāo)：

該應(yīng)用使用自適應(yīng)圖標(biāo)顯示設(shè)備上安裝的所有應(yīng)用。滾動(dòng)網(wǎng)格會(huì)對(duì)圖標(biāo)應(yīng)用視差效果，觸摸圖標(biāo)則會(huì)應(yīng)用縮放效果。您可以配置效果的強(qiáng)度，并更改適用于所有圖標(biāo)的遮罩形狀。希望此工具能夠幫助您感知您的圖標(biāo)將會(huì)如何被顯示出來，在不同的設(shè)備上將會(huì)如何移動(dòng)。

Github 地址:

https://github.com/nickbutcher/AdaptiveIconPlayground

【本文是51CTO專欄機(jī)構(gòu)“谷歌開發(fā)者”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者(微信公眾號(hào)：Google_Developers)】

戳這里，看該作者更多好文