アプリデザインに欠かせないアイコン。
iOS、Android、Windows Phoneで使われてるアイコンって...、似てるようで違いますね。

ユーザが混乱したり違和感を感じるのを防ぐ為、各プラットフォームに相応しいアイコンを使うことが大事です。
そのためには、まず各プラットフォームで提供するデフォルトアイコンを把握することが必要です。あとカスタムアイコンを作る時も出来ればそのプラットフォームのアイコンスタイルを守って作るといいですね。

今回はiOS／Android／Windows Phoneの
1. デフォルトアイコン
2. カスタムアイコンのスタイルガイド
を紹介したいと思います。　（2013年3月最新Ver.基準）

iOS

シンプルで無駄がない。細かすぎると粗雑で判別のできないアイコンになります。

システムに用意されているアイコンの1つと簡単に見間違えられない。ユーザは、カスタムアイコンを標準アイコンから一目で区別できる必要があります。

簡単に理解され、幅広く受け入れられる。ほとんどのユーザが正しく解釈し、どのユーザも不快と感じない記号を作成するよう努力します。

＜引用＞
−　iOS UI Element Usage Guidelines

アイコンの外観を決定したら、アイコンを作成する際に次のガイドラインに従います。
・適切なアルファ透明度を持つ純粋な白を使用する。
・ドロップシャドウを含めない。
・アンチエイリアスを使用する。
・ ベベルを追加する場合は、それが90度になるようにする（それには、アイコンの上に置かれている光源を想像します）。

＜引用＞
−　Custom Icon and Image Creation Guidelines
−　iOSヒューマンインターフェイスガイドライン

Android

滑らかな曲線か鋭い形状のプラットで細かすぎない絵文字。グラフィックが細すぎる場合は左右45°回転させて焦点スペースを埋めます。線とネガティブスペースの厚さは2DPを超えないこと。

「リフレッシュ」や「シェア」みたいな特定の共通アクションには、あらかじめ定義されたグラフィック記号を使用する必要があります。

＜引用＞
−　Android Iconography
＜アイコンダウンロード＞
−　Android UI Elements Downloads

Windows Phone

アプリ バー アイコンは明確でわかりやすくなければなりません。また、ユーザーによく知られている実際のメタファーを利用します。優れたアイコンのは単純なジオメトリで、細かな表現は抑えられています。

アイコン画像では、アルファ チャネルを使用して白の前景色と透明の背景を使用する必要があります。

＜引用＞
−　Windows Phone の基本的なグラフィックス、ビジュアル インジケーター、および通知

アイコンの比較例

・赤枠のアイコンは形はもちろん、メタファーが違う場合があって気をつける必要があります。
・青枠のアイコンはメタファーは同じで形とスタイルが少し違うだけですね。

・あと、下のように形は似てるが完全に意味が違うアイコンがありますので、こちらにも気をつけましょう。

コメントする