2011/09/17(Sat)

Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net

Android UI Guidelines より

アイコン

2011/09/17 Android UI Guidelines より アイコン 2

アイコンガイドラインの説明を。

と、の前に。

2011/09/17 Android UI Guidelines より アイコン 3

Android は『カオス』

● Smart Phone は 2.x系と2.3.x系が混在。● Tablet は 2.x系と2.3.x系と3.x系が混在。

– 両方共、OS1.6もまだあるよ。

● Honeycomのソースって公開した？● Screenサイズ（アス比）と解像度の混在。● Statu Bar の色と高さもメーカー次第。● Samsunの勝手にicon角丸四角仕様とか…。

2011/09/17 Android UI Guidelines より アイコン 4

Supporting Multiple Screens

http://developer.android.com/guide/practices/screens_support.html

2011/09/17 Android UI Guidelines より アイコン 5

2011/09/17 Android UI Guidelines より アイコン 6

2011/09/17 Android UI Guidelines より アイコン 7

2011/09/17 Android UI Guidelines より アイコン 8

2011/09/17 Android UI Guidelines より アイコン 9

画像のマルチデバイス対応

● 画像は、hdpi向けサイズだけでほぼ対応可能。– 端末側で勝手に拡縮してくれる（IS03やTabletとか）。– xhdpiは、OS2.3と3.0以上から対応。まだシェアは少ない。– 人間が認識できる解像度には限界がある。– 240dpiと360dpiを目で見ても違いなんかわかんない。

● 画面サイズと解像度（density）は違う。– IS03の物理画面サイズは480x720px。解像度は320dpi。– drawable-320dpi を用意しなくても drawable-hdpi で大丈夫。

2011/09/17 Android UI Guidelines より アイコン 10

画像の多言語対応

● 英語をdefaultにしておいたほうがいい。● 画像のファイル名は同じ。● res/drawable で。置く場所が違う。

– 「drawable-hdpi」を英語でdefault。– ボタンとかは英語でも大して違和感なく使えるので大丈夫。– 「drawable-ja-hdpi」日本語の画像はこっちへ。– 文字を画像にした場合などは多言語化も忘れずに。– リソースフォルダ名の設定方法 - hyoromoの日記

2011/09/17 Android UI Guidelines より アイコン 11

本題へ。と、言いたいところですが。

今はとっても微妙な時期…。

2011/09/17 Android UI Guidelines より アイコン 12

Google I/O 2011 でコードネーム

「Ice Cream Sandwich」を4Qリリースと発表。

2011/09/17 Android UI Guidelines より アイコン 13

ということは。

2011/09/17 Android UI Guidelines より アイコン 14

2011/09/17 Android UI Guidelines より アイコン 15

ということか？！

2011/09/17 Android UI Guidelines より アイコン 16

次のコードネーム「Jerry Beans」…？！

2011/09/17 Android UI Guidelines より アイコン 17

近々、リファレンスが

更新されるなぁ。

と思いながら、資料作ってます。

2011/09/17 Android UI Guidelines より アイコン 18

今後への資料として。

2011/09/17 Android UI Guidelines より アイコン 19

http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html

pdfpdfファイル必読！ファイル必読！

2011/09/17 Android UI Guidelines より アイコン 20

http://code.google.com/p/iosched/

ソース見て！ソース見て！

2011/09/17 Android UI Guidelines より アイコン 21

今のGoogleさん。

Webサイトも含め、デザイン＆レイアウトを

順次変更中。

2011/09/17 Android UI Guidelines より アイコン 22

Googleさんが、最近リリースした

Android Application。

2011/09/17 Android UI Guidelines より アイコン 23

Google+

2011/09/17 Android UI Guidelines より アイコン 24

Android Market

2011/09/17 Android UI Guidelines より アイコン 25

Web SiteAndroid Application

統一感が出てきてる。

2011/09/17 Android UI Guidelines より アイコン 26

デザイン的には、

Webサイトに似てきた。

2011/09/17 Android UI Guidelines より アイコン 27

では、本題へ。

2011/09/17 Android UI Guidelines より アイコン 28

アイコンはどうなる？！

2011/09/17 Android UI Guidelines より アイコン 29

Honeycom のアイコン

2011/09/17 Android UI Guidelines より アイコン 30

1.6系と2.x系と新3D風が混在。

2011/09/17 Android UI Guidelines より アイコン 31

新しいものだけ見ると、質感が格段に良くなってる！

心の声「Star Trek」好きだねぇ。Googleさん。

2011/09/17 Android UI Guidelines より アイコン 32

User Interface Guidelines

http://developer.android.com/guide/practices/ui_guidelines/index.html

2011/09/17 Android UI Guidelines より アイコン 33

psdpsdファイルファイル

2011/09/17 Android UI Guidelines より アイコン 34

Icon Design Guidelines

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

2011/09/17 Android UI Guidelines より アイコン 35

● タイプ別アイコンサイズ。

● hdpi向けのみで対応可能。

● Status Bar は、2.3系サイズで。

2011/09/17 Android UI Guidelines より アイコン 36

Launcher Icons

http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html

2011/09/17 Android UI Guidelines より アイコン 37

ランチャーアイコンのサイズ

丸と四角でアイコンを描くときのサイズがちょっと違う。丸と四角でアイコンを描くときのサイズがちょっと違う。

2011/09/17 Android UI Guidelines より アイコン 38

ランチャーアイコン xhdpi ＆ Web 512

xhdpi用はリファレンスに、まだ無いので作ってみた。

仕上がりアイコン画像サイズ丸(default)アイコンサイズ四角アイコンサイズ

四角アイコンの場合少し小さめに作ること。

2011/09/17 Android UI Guidelines より アイコン 39

推奨カラー

このカラーをベースにグラデーション作ったりしてね。このカラーをベースにグラデーション作ったりしてね。

2011/09/17 Android UI Guidelines より アイコン 40

エフェクト効果（Photoshop）

トップライト・ドロップシャドウ・ノイズを加える。トップライト・ドロップシャドウ・ノイズを加える。

2011/09/17 Android UI Guidelines より アイコン 41

メイン2色+α…3色まで。

グラデーションを使う。

原色使うのはやめよう。

2011/09/17 Android UI Guidelines より アイコン 42

おっと、こんなところにいいものが。

2011/09/17 Android UI Guidelines より アイコン 43

Android Asset Studio

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

アイコンが簡単に作れます。

2011/09/17 Android UI Guidelines より アイコン 44

またまた、こんなところにいいものが。

2011/09/17 Android UI Guidelines より アイコン 45

Android Vector Icon Template Pack | dotproof

http://www.dotproof.jp/2010/04/14/android-vector-icon-template-kit/

2011/09/17 Android UI Guidelines より アイコン 46

Illustlator ＆ Inkscapeで使えます。

Inkscapeの場合は、グループ解除を繰り返して下さい。

2011/09/17 Android UI Guidelines より アイコン 47

お役立ちリンクその他

● Draw 9-patchを使ってAndroidアプリを解像度に応じたリキッドデザインする｜caraldo.net http://bit.ly/nsmNOI

● Androidアプリデザインの基礎知識 ≪ ジェネシックスブログ http://bit.ly/m0zChL

● Android R Drawables http://androiddrawableexplorer.appspot.com/

– OS2.2システムリソースの画像。9patch画像などの参考に。

2011/09/17 Android UI Guidelines より アイコン 48

絵の具体的な描き方は…。

2011/09/17 Android UI Guidelines より アイコン 49

ツールのよって違うので、質問ある方どうぞ！

@mrshiromi まで。

2011/09/17 Android UI Guidelines より アイコン 50

ご清聴、

ありがとうございました。