Excite Designer's Blog

iOS、Android、Windows Phoneのデフォルトアイコン

e0292726_229362.gif

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

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

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



iOS
e0292726_17464570.gif

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

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

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

<引用>
− iOS UI Element Usage Guidelines


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

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



Android
e0292726_22212997.gif

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

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

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


Windows Phone
e0292726_22221932.gif

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

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

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


アイコンの比較例

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

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

by spdesigner | 2013-03-19 17:48 | Tips | Comments(0)


Exciteのデザイナーのブログです。


by spdesigner

プロフィールを見る
通知を受け取る

検索

カテゴリ

design
アプリ紹介
検証
Tips
ブックマーク
iOS

外部リンク