アプリアイコンデザイン仕様書_html/css_WEB-ITnose

製品アイコン グリッドは一貫した標準を形成し、グラフィック要素の配置に関する明確なルールを確立しました。この標準化により、柔軟で一貫性のあるシステムが実現します。

上は実物大の幅の広いグリッド図です。右クリックして参照図として保存できます。

キーラインの形状

キーの形状。ラインはグリッドの基礎です。これらの中心となる形状をガイドとして使用して、関連製品のアイコン全体で一貫した視覚的な比率を維持します。

正方形

高さと幅: 152

円形

直径: 176

縦長長方形

高さ: 128

横長長方形

高さ: 128 幅: 176

DP ユニット グリッド

デバイス上のランチャーは製品アイコンを 48 dp サイズ (1 dp エッジ) で表示するため、アイコンを作成するときは 48 dp サイズを使用し、必要に応じて 400% を 192 x 192 dp (エッジ) に拡大します。ディスプレイスメント 4dp)。

この拡大縮小率を維持すると、サイズが縮小してもエッジがシャープになり、位置が正しく保たれます。

1:1 ユニット グリッド

4:1 ユニット グリッド

ジオメトリ

これらの特定の主要な線: 円線、正方形の線、長方​​形の線、直交線、および対角線に対して、プリセット ルールを確立しました。この多用途かつ簡潔な要素パレットは、製品アイコンを統一し、グリッド上の配置を標準化するために作成されました。

なぜこのようなデザインになっているのですか？上の右側の図の有名な錯視のケースを例に挙げます。

同じ長さの線分の異なる視覚表現は、異なる視覚認識を生み出します。 長方形の視覚領域は比較的大きいため、デザインは中央に配置されます。グリッドライン上に配置し、最小部分に固定することで、他の形状スタイルのアイコンの統一感を実現します。

コンテンツ領域

コンテンツはアクティブ領域内に保持する必要があります。必要に応じて、コンテンツを変更領域に拡張できますが、それを超えて拡張することはできません。

アクティビティエリア

変更エリア

キーラインの形状

キーラインの形状はグリッドの基礎となり、キーラインを通じてシステムアイコンの一貫性を維持できます。

正方形

幅と高さ: 18px

円

直径: 20px

縦長の長方形

高さ: 20px、幅: 16px

縦長の長方形

高さ: 20px、幅: 16px

ジオメトリ

これらの特定のキーラインには、円形の線、正方形の線、長方​​形の線、直交線、対角線などのルールが事前に設定されています。この多用途かつ簡潔な要素パレットは、Google システム アイコンを統一し、グリッド上での配置を標準化するために作成されました。

ビルド

構成

システムアイコン分析

ストロークの終わり

1. コーナー

2. 空白スペース

3. ストローク

4. 内角

5. 境界領域

6. コーナー

一貫したコーナー半径 (2px) は、一連のシステム アイコン全体を統一するための鍵です。変更しないでください。

アイコンの内側の角は直角である必要がありますが、これも変更しないでください。

外隅

内隅

ストローク

一貫したブラシ幅 (2px) も、一連のシステム アイコン全体を統一するための鍵です。内隅と外隅の幅を 2px に維持してください。

一貫性

ポリラインとコーナー

ストロークの端

内側のコーナー

視覚的な修正

極端な修正が必要アイコンの明瞭度を高めることができます。 必要に応じて、他のアイコンとの一貫したジオメトリを維持し、変形させないでください。

複雑

削減

鮮明

読みやすさとタッチ操作のニーズのために、アイコンの周囲に一定量の空白スペースを残すことができます。

エリアをクリア

場所

------------------------------------- --- --------------------------------------------------- --- -------

最良の例

一貫したアイコンは、ユーザーが理解しやすく、さまざまなアプリケーションで既存のシステム アイコンを使用しようとするのに役立ちます。

(上) 同じブラシ幅と四角いストロークエンドを使用することをお勧めします

。

(上の写真) はお勧めできません

異なるブラシ幅や非正方形のストローク エンドを使用しないでください。

(上の写真) が望ましいです

アイコンをポジティブでしっかりとしたものにします。

(上の画像) はお勧めできません

アイコンを傾けたり回転させたり、アイコンを立体的に見せたりしないでください。

(上の写真) 望ましい

アイコンを簡素化して、より明確で読みやすくします。

(上の写真) はお勧めできません

過度のスキューモーフィズムによってアイコンを複雑にしないでください。

(上の写真) 望ましい

アイコンをより幾何学的でより目立つようにします。

(上の写真) はお勧めできません

ブラシの幅が細すぎないように注意してください。

(上) 一貫した幾何学的形状を使用することをお勧めします

。

(上の写真) はお勧めできません

緩すぎる形状は使用しないでください。

(上図) アイコンはピクセル点上に

することが望ましい(X,Y座標値に小数点は含まれない)。

歪みを避けるために、アイコンは同じ幅と高さ (例: 24x24) である必要があります。

(上の写真) はお勧めできません

アイコンはピクセル ポイント上にありません。

幅と高さが異なります。