什麼？Android O 圖示能自適應了？！

Android O 引入了一種新的應用圖示格式：自適應圖示。自適應圖示可以統一所有應用圖示的形狀，為使用者展現有趣的視覺效果，從而使裝置提供更為一致的體驗。本文會向您解釋它的工作原理，以及一些設計這種圖示的技術。

基礎元素部分

尺寸和形狀

自適應圖示的大小為 108dp * 108dp，但最大隻能遮蓋 72dp * 72dp 的面積。不同的裝置可以提供不同的遮蓋，但必須是凸形的（不能凹進去），圖示邊緣距離中心不小於 33dp。

△ 內容 + 遮罩 = 成品，注意剛才強調的，不要使用凹進去的輪廓

考慮到遮罩的最小面積，您可以畫一個 66dp 直徑的圓來作為安全區域的參考，以保證圖示不被剪裁。

△ 安全區域的參考

參考線

參考線的形狀是圖示網格的基礎，它可以讓您的圖示的視覺比例與其他應用圖示一致。參考線的一些具體設定如下：

• 圓形：直徑為 52dp 或 32dp

• 方形：44dp * 44dp，圓角半徑為 4dp

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

內容圖層

自適應圖示實際上由兩層內容堆疊而成：前景和背景。兩層圖形的大小均為 108dp * 108dp; 背景必須完全不透明，而前景允許出現一定的透明度。

簡單計算一下：由於 108dp * 108dp 圖示被遮蓋到了 72dp * 72dp 大小，每條邊外部被切掉的 18dp 可以被認為是 “額外的” 內容，只在動效中顯示。

設計時需要注意的地方

用於建立產品圖示的 Material Design 設計規範在這裡仍然適用。具體來說，圖示結構、陰影和修飾效果仍然存在，但您現在可以將多種元素分散放置在前景或背景圖層中，以產生不同的效果。

我們相信，如果您將圖示的品牌標記放置在前景上，再把它們放置在純色背景上，圖示的顯示效果就會非常出色。您的圖示會完全與裝置貼合。聰明絕頂的設計師們將會如何探索這些新的設計要求，並使用有趣和創新的方式來創造多少令人愉快的圖示？只要想象一下設計社群裡可能湧現出來諸多傑作就頗令人興奮呢。下面列出一些要記住的事情和一些可供探索的想法。

剪裁

由於自適應圖示的動態特性，您無法知道將要應用的遮罩的形狀究竟會是什麼樣子。因此，最好將所有關鍵元素（如品牌 logo）放在安全區內，並遠離遮罩邊緣。

背景錨定

放置一些看起來像是前景的元素，但實際上它們被畫在背景圖層上，這也意味著他們可以在後面獨立移動。例如，下面計算器應用將大多數元素放置在前景中，而將等號按鈕放置在背景內的高光色塊中：

這樣一來就為動效提供了一個有趣的機會，您可以把視覺錨點標定在明亮的色塊上，但它又比前景元素的移動量少，從而創造出一種深度感。

被遮蓋的遮罩

我們認為如果將遮蓋元素放置在前景中，可能會很有趣  ——  您會發現本該是固定的內容也能靈動起來。這裡我們為 Google Play Store 設計了一個參考圖示用來簡單地講述這個思路，即將彩色三角形放置在白色背景上的前景中，如下圖所示，已經成型的 logo 單獨放在一個圖層裡。

△ 一定有設計師認為這是一張透明底的圖片對不對？

但是！如果放棄這種做法，轉而使用彩色背景和白色前景（被鏤空出了三角形輪廓），就能實現相同的靜態輸出：

 

但上面這種做法允許下方圖層的顏色 “滲出”，並獨立於遮罩進行移動，從而在移動或放大時顯示出背景的不同部分。下圖就是兩種方案的對比：

光與影

放置在不同圖層中的光照和陰影效果，在相互作用時，可以產生有趣的現象。例如，在前景元素上使用長陰影，並在遮蓋區域內移動時，可以產生出很好玩的視覺效果。類似地，光照效果可以放置在前景圖層中，而不是被固定到背景中。例如，“高光” 層可以放置在前景中，以模擬光源。將其放置在前景中，意味著它在運動時將在背景層上播放，並以不同的速率向它移動。

 

請當心，不要建立沒有意義的效果。例如，從前景元素中分離出來的陰影，或是在背景元素後移動的陰影。還要記住，許多圖示可能會一起被看到，所以請保守地定製光照效果，並時刻遵循 Material Design 中對圖示光影的設計要求。

遲滯效果

您可以將元素放置在背景圖層中，這時它們會被前景層完全遮蔽，僅在動效下顯示。

 

資源和工具

Sketch 原始檔（請注意裡面的關鍵元素都符號化了，必要的時候請斷開符號和副本的依賴關係）：

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

Illustrator 原始檔：

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

自適應圖示 Playground

在開發自適應圖示時，我們已經明白，在運用動效時，許多細微之處來自前景和背景元素的相互作用。這仍然是一個開放的問題，因為我們尚未看到裝置和啟動器製造商將如何實現這一點。為了提前讓大家能預覽一下 “實機” 效果，我們建立了一個小型測試應用，以幫助您對它進行評估，同時建立您的圖示：

 

該應用使用自適應圖示顯示裝置上安裝的所有應用。滾動網格會對圖示應用視差效果，觸控圖示則會應用縮放效果。您可以配置效果的強度，並更改適用於所有圖示的遮罩形狀。希望此工具能夠幫助您感知您的圖示將會如何被顯示出來，在不同的裝置上將會如何移動。

Github 地址:

https://github.com/nickbutcher/AdaptiveIconPlayground

儘管去適應吧

希望這篇文章能夠為您提供一些資訊和靈感，從而幫助您為應用設計出很棒的自適應圖示。大家也可以看到我們雖然提供了一些思路，但更多隻是在拋磚引玉。我們期待著大家的作品。

點選 “閱讀原文” 瞭解更多自適應圖示的資訊。

推薦閱讀：

萬眾矚目Instant Apps終於全面問世啦

【視訊】Material Design設計規範的誕生

課程提醒 | 全新Play管理中心重點使用祕訣

Kotlin 語言入門寶典 | Android 開發者 FAQ Vol.5