FRMSKI開発ブログ

AWS、iOS、AR/VRなど開発メモ

【iOSデザインガイドライン和訳】意外と知らないカスタムアイコンのマナー

意外と知らないカスタムアイコンについてのガイドラインです。

カスタムアイコン

 アプリにシステムアイコンで表現できないタスクやモードが含まれている場合や、システムアイコンがアプリのスタイルと一致しない場合は、独自のアイコンを作成できます。

  • 認識しやすく、高度に単純化されたデザインを作成してください
     詳細が多すぎると、アイコンが混乱したり読めなくなったりすることがあります。ほとんどの人がすぐに認識し、不快にならないシンプルでユニバーサルなデザインを目指してください。より良いアイコンは、開始するアクションまたはそれが明らかにするコンテンツに直接関係する親しみやすい視覚的メタファを使用します。

f:id:frmski:20181213110332p:plain:w300

  • グリフとしてのアイコンのデザイン
     グリフは、テンプレート画像とも呼ばれ、透過性、アンチエイリアス、マスクを使用して形状を定義するドロップシャドウなしの単色画像です。グリフは、文脈やユーザーとのやりとりに基づいて、適切な外観(着色、ハイライト、活気など)を自動的に受け取ります。ナビゲーションバー、タブバー、ツールバー、ホーム画面のクイックアクションなど、さまざまな標準インターフェイス要素がグリフをサポートしています。

  • グリフを@ 2xの倍率で準備し、PDFとして保存
     PDFは高解像度のスケーリングを可能にするベクトル形式なので、通常はアプリで@ 2xの単一のバージョンを用意し、他の解像度のために拡大縮小することができます。

  • アイコンの一貫性を保つ
     カスタムアイコンのみを使用する場合でも、カスタムアイコンとシステムアイコンを組み合わせる場合でも、アプリ内のすべてのアイコンは、詳細レベル、光学重量、ストロークウェイト、位置、およびパースペクティブの点で同じである必要があります。

f:id:frmski:20181213110633p:plain:w300

  • アイコンが見やすいことを確認してください
     一般に、ソリッドアイコンはアウトラインアイコンよりも明確になる傾向があります。アイコンに線が含まれている必要がある場合は、他のアイコンとアプリのタイポグラフィとの重さを調整します。

f:id:frmski:20181213110752p:plain:w300

  • 選択した状態と選択解除した状態を連携するには、色を使用します
     ソリッドバージョンとアウトラインバージョンのような、2つの異なるアイコンデザインの切り替えは避けてください。

  • アイコンにテキストを含めないでください
     テキストが必要な場合は、アイコンの下にラベルを表示し、それに応じて配置を調整します。

  • Appleハードウェア製品の複製は使用しないでください
     アップル製品は著作権で保護されており、アイコンや画像で再現することはできません。一般的には、ハードウェアのデザインが頻繁に変更される傾向があり、アイコンが日付表示になる可能性があるため、デバイスの複製を表示しないでください

  • アイコンの代替テキストラベルを提供する
     代わりのテキストラベルは画面上には表示されませんが、VoiceOverは画面上に表示されているものを音声で表現できるため、視覚障害のある方にとってナビゲーションが容易になります。

カスタムアイコンのサイズ

 とりわけ、あなたのアプリのアイコンファミリは視覚的に一貫している必要があります。個々のアイコンのデザインの重さが異なる場合、この効果を達成するために、一部のアイコンを他のアイコンのデザインよりもわずかに大きくする必要があります。

f:id:frmski:20181213111247p:plain:w300

ナビゲーションバーとツールバーのアイコンサイズ

 カスタムナビゲーションバーとツールバーのアイコンを準備する際には、以下のサイズを参考にしてください。必要に応じてバランスを調整してください。

Target sizes Maximum sizes
72px × 72px (24pt × 24pt @3x) 84px × 84px (28pt × 28pt @3x)
48px × 48px (24pt × 24pt @2x) 56px × 56px (28pt × 28pt @2x)

タブバーのアイコンサイズ

 縦向きでは、タブタイトルの上にタブバーアイコンが表示されます。横向きの向きでは、アイコンとタイトルが並べて表示されます。デバイスと向きに応じて、通常のタブバーまたはコンパクトタブバーが表示されます。あなたのアプリには、両方のサイズのカスタムタブバーアイコンが含まれている必要があります。

f:id:frmski:20181213111614p:plain:w300