Download - Android UI Guidelines より アイコン
2011/09/17(Sat)
Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net
Android UI Guidelines より
アイコン
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 より アイコン 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 より アイコン 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 より アイコン 32
User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
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 より アイコン 43
Android Asset Studio
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
アイコンが簡単に作れます。
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 より アイコン 49
ツールのよって違うので、質問ある方どうぞ!
@mrshiromi まで。