アプリアイコンデザイン仕様書_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 システム アイコンを統一し、グリッド上での配置を標準化するために作成されました。
ビルド
構成
システムアイコン分析
ストロークの終わり
- コーナー
- 空白スペース
- ストローク
- 内角
- 境界領域
-
アイコンの内側の角は直角である必要がありますが、これも変更しないでください。
外隅
内隅
ストローク
一貫したブラシ幅 (2px) も、一連のシステム アイコン全体を統一するための鍵です。内隅と外隅の幅を 2px に維持してください。
一貫性
ポリラインとコーナー
ストロークの端
内側のコーナー
視覚的な修正
極端な修正が必要アイコンの明瞭度を高めることができます。 必要に応じて、他のアイコンとの一貫したジオメトリを維持し、変形させないでください。
複雑
削減
鮮明
読みやすさとタッチ操作のニーズのために、アイコンの周囲に一定量の空白スペースを残すことができます。
エリアをクリア
場所
------------------------------------- --- --------------------------------------------------- --- -------
最良の例
一貫したアイコンは、ユーザーが理解しやすく、さまざまなアプリケーションで既存のシステム アイコンを使用しようとするのに役立ちます。
(上) 同じブラシ幅と四角いストロークエンドを使用することをお勧めします
。
(上の写真) はお勧めできません
異なるブラシ幅や非正方形のストローク エンドを使用しないでください。
(上の写真) が望ましいです
アイコンをポジティブでしっかりとしたものにします。
(上の画像) はお勧めできません
アイコンを傾けたり回転させたり、アイコンを立体的に見せたりしないでください。
(上の写真) 望ましい
アイコンを簡素化して、より明確で読みやすくします。
(上の写真) はお勧めできません
過度のスキューモーフィズムによってアイコンを複雑にしないでください。
(上の写真) 望ましい
アイコンをより幾何学的でより目立つようにします。
(上の写真) はお勧めできません
ブラシの幅が細すぎないように注意してください。
(上) 一貫した幾何学的形状を使用することをお勧めします
。
(上の写真) はお勧めできません
緩すぎる形状は使用しないでください。
(上図) アイコンはピクセル点上に
することが望ましい(X,Y座標値に小数点は含まれない)。
歪みを避けるために、アイコンは同じ幅と高さ (例: 24x24) である必要があります。
(上の写真) はお勧めできません
アイコンはピクセル ポイント上にありません。
幅と高さが異なります。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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