目次
この拡大縮小率を維持すると、サイズが縮小してもエッジがシャープになり、位置が正しく保たれます。
コンテンツ領域
アクティビティエリア
(上の写真) 望ましい
(上) 一貫した幾何学的形状を使用することをお勧めします
(上図) アイコンはピクセル点上に
ホームページ ウェブフロントエンド htmlチュートリアル アプリアイコンデザイン仕様書_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:30 AM

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

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

キーラインの形状

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

正方形

高さと幅: 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) である必要があります。

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

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

幅と高さが異なります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles