アダプティブアイコンの設計

Android Oでは、新しいアプリのアイコン形式であるアダプティブアイコンが導入されています。アダプティブアイコンは、すべてのアプリアイコンの形状を統一し、興味深い視覚効果への扉を開くことで、デバイスの一貫性を高めることができます。この投稿では、それらがどのように機能するかを説明し、それらを設計するためのいくつかのテクニックを探ります。

この機能の由来を振り返るには、次を参照してください。

基礎

サイズと形

アダプティブアイコンのサイズは108dp * 108dpですが、最大で72dp * 72dpにマスクされます。さまざまなデバイスがさまざまなマスクを提供できますが、マスクは形状が凸である必要があり、場所によっては中心から最低33dpに達する場合があります。

適用されるさまざまな形状のマスクの例

マスクの最小リーチのため、中央の直径66dpの円を安全なゾーンと見なすことができ、クリップされないことが保証されています。

角丸マスク内のセーフゾーン

キーライン

アイコンのキーライン

キーラインシェイプは、アイコングリッドの基盤であり、アイコンの視覚的な割合を他のアプリのアイコンと一致させるのに役立ちます。キーラインの形状は次のとおりです。

  • 円:直径52dpおよび36dp
  • 正方形:44dp * 44dp、4dpコーナー半径
  • 長方形:52dp * 36dp&36dp * 52dp、4dpコーナー半径

この記事の最後に含まれているテンプレートを参照してください。

レイヤー

アダプティブアイコンは、実際には2つのレイヤーで構成されています。前景と背景。両方のレイヤーは108dp * 108dpです。背景は完全に不透明である必要がありますが、前景には透明が含まれる場合があります。これらの層は、互いの上に積み重ねられます。

表示された(つまりマスクされた)サイズよりも大きい2つの別々のレイヤーに要素を提供すると、興味深い視覚的処理とアニメーションの機会が生まれます。正確にどのような効果が適用される可能性があり、いつまでも未解決の問題です。決定するのはデバイスとランチャーのメーカー次第です。想像できるいくつかの簡単な例を次に示します。マスクを適用する前に各レイヤーを個別に変換またはスケーリングすることによる視差またはパルス。

108dp * 108dpアイコンは最大72dp * 72dpまでマスクされるため、各側の外側の18dpは「余分な」コンテンツと見なすことができ、モーション中にのみ表示されます。

設計上の考慮事項

製品アイコンを作成するための材料設計ガイドラインは依然として非常に当てはまります。具体的には、アイコンの構造、影、および仕上げは残りますが、要素を前景または背景レイヤーに配置して、さまざまな効果を得ることができます。

ブランドマークを無地の背景の前景に配置し、それを1日と呼ぶことで、多くのアイコンがうまく機能するようになりました。これにより、アイコンがデバイスにぴったり収まるようになります。私がワクワクするのは、コミュニティとしての私たちがこれらの新しい制約を探り、楽しいアイコンを作成するための興味深く、遊び心があり、革新的な方法を見つける方法です。ここでは、覚えておくべきいくつかの事柄と、潜在的に探求すべきいくつかのアイデアを示します。

クリッピング

アダプティブアイコンの動的な性質により、適用される正確なマスク形状を知ることはできません。そのため、ブランドマークなどの重要な要素はすべてセーフゾーン内に配置し、マスクの縁から遠ざけるのが最善です。

背景の固定

前景のように見えるかもしれないいくつかの要素を実際に背景に配置することは、それらが独立して動くことを意味します。たとえば、電卓アプリはほとんどの要素を前景に配置しますが、背景のアクセントカラーブロックにある[等しい]ボタンは次のようになります。

異なるレイヤー上の要素がレイヤーを強調します

これにより、明るい色のブロックに視覚的に固定する動きの興味深い機会が生まれますが、前景の要素よりも動きが少なく、奥行き感が生まれます。

仮面

マスキング要素を前景に配置する興味深い機会があると思います。つまり、領域が切り取られたソリッド要素です。 Google Playストアのアイコンを考えてみましょう。これは「明らかな」方法で構築できます。つまり、色付きの三角形を白い背景の上に前景に配置します。

白い背景の上に配置された「標準」前景

これを行う代わりに、カラフルな背景と白い前景を使用して、三角形を差し引いて同じ静的出力を生成できます。

前景をマスキングした代替のカラフルな背景

この設定により、「覗き見」する色がマスクとは独立して移動し、変換または拡大縮小されたときに背景のさまざまな部分が表示されます。

左は通常の構成です。マスクの前景がある

光と影

別々のレイヤーに配置された照明効果と影の相互作用は、興味深い結果をもたらします。たとえば、前景要素で長い影のテクニックを使用すると、マスクされた領域内を移動するときに遊び心のある相互作用が得られます。同様に、照明効果は背景に焼き付けられるのではなく、前景レイヤーに配置できます。たとえば、「仕上げ」レイヤーを前景に配置して、光源をエミュレートできます。これをフォアグラウンドに配置すると、モーション中にバックグラウンドレイヤー上で再生され、それとは異なるレートで移動します。

前景の影と背景に(誇張された)光源の例

意味をなさない効果を作成しないように注意してください。前景要素から分離する影、または背景要素の背後に移動する影。また、多くのアイコンが一緒に表示される可能性が高いことを忘れないでください。したがって、オーダーメイドの照明効果を控えめにして、素材のガイドラインに忠実に従ってください。

置き去りにする

背景レイヤーに要素を配置することができます。これらの要素は、前景レイヤーによって完全に隠され、動きの下でのみ表示されます。

運動中にのみ明らかになる要素

リソースとツール

これは、アダプティブアイコンを作成する際のテンプレートとして使用できる私のスケッチファイルです。アイコングリッド、キーラインシェイプ、セーフエリアが含まれます。シンボルとして実装されるため、マスター要素を変更するとコピーが更新され、異なるマスクが適用されたプレビューが表示されます。

必要に応じて、Adobe Illustratorテンプレートもアップロードしました。

さらに、私が出会った他のリソースもチェックしてください

  • アダプティブアイコンプレビューツール
  • Affinity Designerテンプレート
  • Bjangoテンプレートにはアダプティブアイコンが含まれています
  • figmaテンプレート(ログインが必要)
  • Adobe XDテンプレート

アダプティブアイコンプレイグラウンド

アダプティブアイコンの開発において、モーションエフェクトを適用する際の前景要素と背景要素の相互作用が微妙な点の多くをもたらしていることに気付きました。デバイスとランチャーのメーカーがこれをどのように実装するのかまだわかりませんので、これは未解決の問題です。このスペースの調査を支援するために、アイコンを作成しながら評価するのに役立つ小さなテストアプリを作成しました。

アイコンに適用されるマスクとモーションエフェクトを試す

アプリには、デバイスにインストールされているすべてのアプリケーションがアダプティブアイコンで表示されます。グリッドをスクロールすると、アイコンに視差効果が適用され、アイコンに触れるとスケール効果が適用されます。効果の強度を設定し、すべてのアイコンに適用されるマスクを変更できます。このツールが、アイコンがどのように表示され、さまざまなデバイスで移動するかを想像するのに役立つことを願っています。

APKをダウンロードするか、githubでソースをチェックアウトできます。

前進して適応する

この投稿が、アプリの素晴らしい適応アイコンを設計するための情報とインスピレーションの両方を提供してくれることを願っています。ユーザーとして、アプリがより一貫したものになるのを待つことはできません。しかし、私をさらに興奮させるのは、私たちがコミュニティとしてどのような創造的な解決策を考え出すかを見ることです。

適応型アイコンの作成を検討している開発者の場合は、パート3:適応型アイコンの実装に参加してください。