Your SlideShare is downloading. ×
0
Android UI Guidelines より                 アイコン               2011/09/17(Sat)Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net
アイコンガイドライン                の説明を。               と、の前に。2011/09/17     Android UI Guidelines より アイコン   2
Android は『カオス』 ●   Smart Phone は 2.x系と2.3.x系が混在。 ●   Tablet は 2.x系と2.3.x系と3.x系が混在。             –   両方共、OS1.6もまだあるよ。 ●   Ho...
Supporting Multiple Screens       http://developer.android.com/guide/practices/screens_support.html2011/09/17             ...
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
画像のマルチデバイス対応 ●   画像は、hdpi向けサイズだけでほぼ対応可能。             –   端末側で勝手に拡縮してくれる(IS03やTabletとか)。             –   xhdpiは、OS2.3と3.0以上...
画像の多言語対応 ●   英語をdefaultにしておいたほうがいい。 ●   画像のファイル名は同じ。 ●   res/drawable で。置く場所が違う。             –   「drawable-hdpi」を英語でdefaul...
本題へ。      と、言いたいところですが。      今はとっても微妙な時期…。2011/09/17   Android UI Guidelines より アイコン   11
Google I/O 2011 で            コードネーム      「Ice Cream Sandwich」を         4Qリリースと発表。2011/09/17   Android UI Guidelines より アイコ...
ということは。2011/09/17    Android UI Guidelines より アイコン   13
2011/09/17   Android UI Guidelines より アイコン   14
ということか?!2011/09/17    Android UI Guidelines より アイコン   15
次のコードネーム             「Jerry Beans」…?!2011/09/17       Android UI Guidelines より アイコン   16
近々、リファレンス                 が             更新されるなぁ。              と思いながら、             資料作ってます。2011/09/17     Android UI Guidel...
今後への資料として。2011/09/17     Android UI Guidelines より アイコン   18
http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html          ...
http://code.google.com/p/iosched/                                                      ソース見て!2011/09/17            Android...
今のGoogleさん。              Webサイトも含め、             デザイン&レイアウトを                順次変更中。2011/09/17      Android UI Guidelines より ...
Googleさんが、               最近リリースした             Android Application。2011/09/17        Android UI Guidelines より アイコン   22
Google+2011/09/17   Android UI Guidelines より アイコン   23
Android Market2011/09/17     Android UI Guidelines より アイコン   24
Web Site             Android Application             統一感が出てきてる。2011/09/17        Android UI Guidelines より アイコン   25
デザイン的には、             Webサイトに似てきた。2011/09/17      Android UI Guidelines より アイコン   26
では、本題へ。2011/09/17    Android UI Guidelines より アイコン   27
アイコンはどうなる?!2011/09/17      Android UI Guidelines より アイコン   28
Honeycom のアイコン2011/09/17      Android UI Guidelines より アイコン   29
1.6系と2.x系と新3D風が混在。2011/09/17   Android UI Guidelines より アイコン   30
新しいものだけ見ると、      質感が格段に良くなってる!                    心の声        「Star Trek」好きだねぇ。Googleさん。2011/09/17      Android UI Guidelin...
User Interface Guidelines      http://developer.android.com/guide/practices/ui_guidelines/index.html2011/09/17            ...
psdファイル2011/09/17   Android UI Guidelines より アイコン             33
Icon Design Guidelines  http://developer.android.com/guide/practices/ui_guidelines/icon_design.html2011/09/17             ...
●     タイプ別アイコンサイズ。       ●     hdpi向けのみで対応可能。       ●     Status Bar は、2.3系サイズで。2011/09/17             Android UI Guidelin...
Launcher Icons  http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html2011/09/17            ...
ランチャーアイコンのサイズ             丸と四角でアイコンを描くときのサイズがちょっと違う。2011/09/17          Android UI Guidelines より アイコン   37
ランチャーアイコン xhdpi & Web 512                                xhdpi用はリファレンスに、                                まだ無いので作ってみた。      ...
推奨カラー             このカラーをベースにグラデーション作ったりしてね。2011/09/17         Android UI Guidelines より アイコン   39
エフェクト効果(Photoshop)              トップライト・ドロップシャドウ・ノイズを加える。2011/09/17          Android UI Guidelines より アイコン   40
メイン2色+α…3色まで。             グラデーションを使う。             原色使うのはやめよう。2011/09/17       Android UI Guidelines より アイコン   41
おっと、      こんなところにいいものが。2011/09/17   Android UI Guidelines より アイコン   42
Android Asset Studio     http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html      アイコンが簡単に作れます。2011/09/...
またまた、      こんなところにいいものが。2011/09/17   Android UI Guidelines より アイコン   44
Android Vector Icon Template        Pack | dotproof      http://www.dotproof.jp/2010/04/14/android-vector-icon-template-ki...
Illustlator & Inkscape                   で使えます。              Inkscapeの場合は、                グループ解除を              繰り返して下さい。20...
お役立ちリンクその他 ●   Draw 9-patchを使ってAndroidアプリを解像度に応     じたリキッドデザインする|caraldo.net     http://bit.ly/nsmNOI ●   Androidアプリデザインの基...
絵の具体的な描き方は…。2011/09/17   Android UI Guidelines より アイコン   48
ツールのよって違うので、           質問ある方どうぞ!             @mrshiromi まで。2011/09/17      Android UI Guidelines より アイコン   49
ご清聴、         ありがとうございました。2011/09/17   Android UI Guidelines より アイコン   50
Upcoming SlideShare
Loading in...5
×

Android UI Guidelines より アイコン

3,382

Published on

2011/09/17 日本Androidの会 浜松支部 第5回ミーティング資料。ガイドラインより抜粋説明。

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,382
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Android UI Guidelines より アイコン"

  1. 1. Android UI Guidelines より アイコン 2011/09/17(Sat)Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net
  2. 2. アイコンガイドライン の説明を。 と、の前に。2011/09/17 Android UI Guidelines より アイコン 2
  3. 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 より アイコン 3
  4. 4. Supporting Multiple Screens http://developer.android.com/guide/practices/screens_support.html2011/09/17 Android UI Guidelines より アイコン 4
  5. 5. 2011/09/17 Android UI Guidelines より アイコン 5
  6. 6. 2011/09/17 Android UI Guidelines より アイコン 6
  7. 7. 2011/09/17 Android UI Guidelines より アイコン 7
  8. 8. 2011/09/17 Android UI Guidelines より アイコン 8
  9. 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 より アイコン 9
  10. 10. 画像の多言語対応 ● 英語をdefaultにしておいたほうがいい。 ● 画像のファイル名は同じ。 ● res/drawable で。置く場所が違う。 – 「drawable-hdpi」を英語でdefault。 – ボタンとかは英語でも大して違和感なく使えるので大丈夫。 – 「drawable-ja-hdpi」日本語の画像はこっちへ。 – 文字を画像にした場合などは多言語化も忘れずに。 – リソースフォルダ名の設定方法 - hyoromoの日記2011/09/17 Android UI Guidelines より アイコン 10
  11. 11. 本題へ。 と、言いたいところですが。 今はとっても微妙な時期…。2011/09/17 Android UI Guidelines より アイコン 11
  12. 12. Google I/O 2011 で コードネーム 「Ice Cream Sandwich」を 4Qリリースと発表。2011/09/17 Android UI Guidelines より アイコン 12
  13. 13. ということは。2011/09/17 Android UI Guidelines より アイコン 13
  14. 14. 2011/09/17 Android UI Guidelines より アイコン 14
  15. 15. ということか?!2011/09/17 Android UI Guidelines より アイコン 15
  16. 16. 次のコードネーム 「Jerry Beans」…?!2011/09/17 Android UI Guidelines より アイコン 16
  17. 17. 近々、リファレンス が 更新されるなぁ。 と思いながら、 資料作ってます。2011/09/17 Android UI Guidelines より アイコン 17
  18. 18. 今後への資料として。2011/09/17 Android UI Guidelines より アイコン 18
  19. 19. http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html pdfファイル必読!2011/09/17 Android UI Guidelines より アイコン 19
  20. 20. http://code.google.com/p/iosched/ ソース見て!2011/09/17 Android UI Guidelines より アイコン 20
  21. 21. 今のGoogleさん。 Webサイトも含め、 デザイン&レイアウトを 順次変更中。2011/09/17 Android UI Guidelines より アイコン 21
  22. 22. Googleさんが、 最近リリースした Android Application。2011/09/17 Android UI Guidelines より アイコン 22
  23. 23. Google+2011/09/17 Android UI Guidelines より アイコン 23
  24. 24. Android Market2011/09/17 Android UI Guidelines より アイコン 24
  25. 25. Web Site Android Application 統一感が出てきてる。2011/09/17 Android UI Guidelines より アイコン 25
  26. 26. デザイン的には、 Webサイトに似てきた。2011/09/17 Android UI Guidelines より アイコン 26
  27. 27. では、本題へ。2011/09/17 Android UI Guidelines より アイコン 27
  28. 28. アイコンはどうなる?!2011/09/17 Android UI Guidelines より アイコン 28
  29. 29. Honeycom のアイコン2011/09/17 Android UI Guidelines より アイコン 29
  30. 30. 1.6系と2.x系と新3D風が混在。2011/09/17 Android UI Guidelines より アイコン 30
  31. 31. 新しいものだけ見ると、 質感が格段に良くなってる! 心の声 「Star Trek」好きだねぇ。Googleさん。2011/09/17 Android UI Guidelines より アイコン 31
  32. 32. User Interface Guidelines http://developer.android.com/guide/practices/ui_guidelines/index.html2011/09/17 Android UI Guidelines より アイコン 32
  33. 33. psdファイル2011/09/17 Android UI Guidelines より アイコン 33
  34. 34. Icon Design Guidelines http://developer.android.com/guide/practices/ui_guidelines/icon_design.html2011/09/17 Android UI Guidelines より アイコン 34
  35. 35. ● タイプ別アイコンサイズ。 ● hdpi向けのみで対応可能。 ● Status Bar は、2.3系サイズで。2011/09/17 Android UI Guidelines より アイコン 35
  36. 36. Launcher Icons http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html2011/09/17 Android UI Guidelines より アイコン 36
  37. 37. ランチャーアイコンのサイズ 丸と四角でアイコンを描くときのサイズがちょっと違う。2011/09/17 Android UI Guidelines より アイコン 37
  38. 38. ランチャーアイコン xhdpi & Web 512 xhdpi用はリファレンスに、 まだ無いので作ってみた。 仕上がりアイコン画像サイズ 丸(default)アイコンサイズ 四角アイコンサイズ 四角アイコンの場合少し小さ めに作ること。2011/09/17 Android UI Guidelines より アイコン 38
  39. 39. 推奨カラー このカラーをベースにグラデーション作ったりしてね。2011/09/17 Android UI Guidelines より アイコン 39
  40. 40. エフェクト効果(Photoshop) トップライト・ドロップシャドウ・ノイズを加える。2011/09/17 Android UI Guidelines より アイコン 40
  41. 41. メイン2色+α…3色まで。 グラデーションを使う。 原色使うのはやめよう。2011/09/17 Android UI Guidelines より アイコン 41
  42. 42. おっと、 こんなところにいいものが。2011/09/17 Android UI Guidelines より アイコン 42
  43. 43. Android Asset Studio http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html アイコンが簡単に作れます。2011/09/17 Android UI Guidelines より アイコン 43
  44. 44. またまた、 こんなところにいいものが。2011/09/17 Android UI Guidelines より アイコン 44
  45. 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 より アイコン 45
  46. 46. Illustlator & Inkscape で使えます。 Inkscapeの場合は、 グループ解除を 繰り返して下さい。2011/09/17 Android UI Guidelines より アイコン 46
  47. 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 より アイコン 47
  48. 48. 絵の具体的な描き方は…。2011/09/17 Android UI Guidelines より アイコン 48
  49. 49. ツールのよって違うので、 質問ある方どうぞ! @mrshiromi まで。2011/09/17 Android UI Guidelines より アイコン 49
  50. 50. ご清聴、 ありがとうございました。2011/09/17 Android UI Guidelines より アイコン 50
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×