Androidデザイン アイコンデザイン

2012/1/15 14381hit

アイコンデザイン


アイコンは画面の小さな部分でアクションや状態、アプリを素早く直感的に表現するグラフィックです。

ランチャー

ランチャーアイコンはホーム画面とすべてのアプリケーション画面であなたのアプリを視覚的に表現します。
ユーザーがホームの壁紙をかえる事が出来るのでランチャーアイコンはどんなタイプの壁紙上でもクリアに見える事を確認してください。

サイズとスケール


ランチャーアイコンはモバイルデバイス上で48x48dpです。
Marketのランチャーアイコンは512x512ピクセルです。

プロポーション


完全な資産は48x48dpです。

スタイル


異なるシルエットを使ってください。
3次元で、正面から、まるで上から見ているかのように、わずかに遠近法をつけることでユーザーは立体感を感じます。



アクションバー

アクションバーアイコンは人々がアプリ内で行う最も重要なアクションを意味するグラフィックボタンです。
それぞれ大部分の人が一目で分かる1つの意味を表す単純な比喩を使う必要があります。

サイズとスケール


電話機でアクションバーアイコンは32x32dpで表示されます。

焦点エリアとプロポーション


完全な資産は32x32dp
視覚的には矩形の24x24dp

スタイル


フラットで詳細は描かれず滑らかなカーブかシャープな形のデザインです。
細長い画像の場合、見た目の領域を埋めるために左または右に45度回転させます。
線と色がついていない部分の太さはそれぞれ最低2dp必要です。

色: #333333
有効: 60% opacity
無効: 30% opacity

色: #FFFFFF
有効: 80% opacity
無効: 30% opacity


小さな/文章上のアイコン

アプリのボディ部(訳注:アクションバー以外の部分)では、アクションや特定のアイテムの状態を表すのに小さなアイコンを使用してください。
例えば、Gmailアプリは各メッセージが重要であるかの評価をする星のアイコンを持っています。

サイズとスケール


スモールアイコンは16x16dpで表示されます。

焦点エリアとプロポーション


完全な資産は16x16dp
視覚的には矩形の12x12dp

スタイル


自然でフラットでシンプル
塗りつぶされた図形は細い線より認識しやすいです。
ユーザーがその目的を簡単に認識し理解できるように、一つの視覚的な比喩を使用してください。


控えめかつ意識的に彩度の高い色を使ってください。
例えばGmailはブックマークしたメッセージを示すために黄色の星アイコンを使います。
アイコンが利用できる状態ならば背景から際立つ色を選んでください


通知アイコン

もし、アプリで通知を動かすならば新しい通知が利用可能になったときにいつでも、システムがステータスバーに表示できるアイコンを提供してください。

サイズとスケール


通知アイコンは24x24dpで表示されます。

焦点エリアとプロポーション


完全な資産は24x24dp
視覚的には矩形の22x22dp

スタイル


ランチャーアイコンと同じ単一の視覚的メタファーを使用して、スタイルをフラットでシンプルなものにしてください。

通知アイコンは完全に白でないといけません。
システムはアイコンを縮小したり暗くする事があり得ます。


次へ
前へ
目次に戻る

原文
Except as noted, this content is licensed under Creative Commons Attribution 2.5.

前:Androidデザイン 色 次:Androidデザイン 文章の書き方

関連キーワード

[Android][モバイル][IT][翻訳]

コメント

名前:ひさねこ|投稿日:2012/01/25 13:47

●アプリ内の画面上の行動に対して小さなアイコンを使って特定アイテムの状態を提供してください。

アプリのボディ部(訳注:アクションバー以外の部分)では、
アクションや特定のアイテムの状態を表すのに小さなアイコンを使用してください。

Within the body of your app,
use small icons to 【<surface actions> and/or <provide status for specific items>】.

※surface は動詞。ここでは、『画面上に見えるようにする』というような意味と思います。

名前:ひさねこ|投稿日:2012/01/25 13:59

●控えめで用途を表すくすんでいない色を使ってください。


控えめ、かつ意図的に非中間色を使用してください。

Use non-neutral colors sparingly and with purpose.

※ 英文の内容と少し異なる翻訳になっているようです。
※ "sparingly and with purpose" は "Use ・・・" を修飾します。

名前:ひさねこ|投稿日:2012/01/25 14:04

●アイコンが利用できる状態ならば背景から際立つ色を選んでください。

アイコンがアクションを起動するためのものなら、背景から際立つ色を選んでください。

If an icon is actionable, choose a color that contrasts well with the background.

※actionable:アクションを表すアイコンの話だと思います。

名前:ひさねこ|投稿日:2012/01/25 14:22

●フラットでシンプルさを保ちランチャーアイコンと同一の視覚的比喩を使ってください。

ランチャーアイコンと同じ単一の視覚的メタファーを使用して、
スタイルをフラットでシンプルなものにしてください。

Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.

※ style と single が翻訳されていません。

コメントを投稿する

名前URI
コメント