これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ

3,443 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/467/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,443
On SlideShare
0
From Embeds
0
Number of Embeds
199
Actions
Shares
0
Downloads
1
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ

  1. 1. これだけは知っておけ! はじめてのAndroidアプリデザイン 〜 9-patch 編〜 株式会社ツクロア 秋葉ちひろ 12:002014.3.18 スクー
  2. 2. •見た目だけでなく機能のデザインを •デザインと技術、双方からのアプローチ 「気 持ちいい」をデザインする会社 PC / iPhone / iPad / Android / and more... 秋葉 ちひろ デザイナー / アートディレクター
  3. 3. Action Bar 9-patch UIと画面遷移 これだけは知っておけ!シリーズ 済 本日 未定
  4. 4. • デザイナー • 企画をする人 • 開発者 これだけは知っておけ!シリーズ Androidアプリ制作に携わる
  5. 5. •9-patch 今日の授業
  6. 6. > Android Fragmentation Report July 2013 - OpenSignal 前回の 復習
  7. 7. 画面サイズが多様すぎる! 画面サイズの展開を見た時点で つらい! 前回の 復習
  8. 8. Android - Default UI 12:00 前回の 復習
  9. 9. Android - Default UI 前回の 復習 ActionBar
  10. 10. Action Barのデザイン前回の 復習
  11. 11. 前回の 復習
  12. 12. 前回の 復習
  13. 13. Androidアプリデザインのコツ 前回の 復習 余白が大小しても 違和感のないデザイン!
  14. 14. 9-patch
  15. 15. 9-patch こんなデザイン、 実装できないよ。 に、打ち勝つために!
  16. 16. 9-patchとは? 画像を意図したとおりに 引き伸ばす A 余白を決めるB
  17. 17. 9-patchとは? 画像を意図したとおりに 引き伸ばす A 余白を決めるB
  18. 18. 角丸がっ!
  19. 19. 引き伸ばされる領域 9スライス
  20. 20. 1x1 px 1px line
  21. 21. 書きだしたパーツの上下左右に 1pxずつ余白を追加する A : 画像を意図したとおりに引き伸ばす 1
  22. 22. 上側と左側に 黒い点(線)をかく 2 A : 画像を意図したとおりに引き伸ばす
  23. 23. 伸びるところ
  24. 24. このデザインに関しては 結果は同じ
  25. 25. 同じ色
  26. 26. 大きな グラデーション
  27. 27. 同じ色 同じ色
  28. 28. このデザインに関しては 結果はビミョーにちがう
  29. 29. デザイナーのみなさん、 このクオリティどうする?
  30. 30. 9-patchとは? 画像を意図したとおりに 引き伸ばす A 余白を決めるB
  31. 31. 書きだしたパーツの上下左右に 1pxずつ余白を追加する B : 余白を決める 1
  32. 32. 右側と下側に 黒い点(線)をかく 2 B : 余白を決める
  33. 33. コンテンツが入り込むエリア
  34. 34. 余白
  35. 35. 余白
  36. 36. 余白
  37. 37. B A
  38. 38. button_bg .png
  39. 39. button_bg .png.9
  40. 40. main.xml <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
  41. 41. <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" android:padding="15dp" /> main.xml
  42. 42. android:padding="15dp" 9-patchでの余白の設定と XMLでの余白の設定、 どちらが優先される でしょうか? 問題5px 5px
  43. 43. 9-patchでの余白 XMLでのpadding (15dp) android:padding="15dp"
  44. 44. 9-patchでの余白
  45. 45. 9-patchでの余白 XMLでのpadding (15dp)
  46. 46. 9-patchでの余白 XMLでのpadding (15dp)
  47. 47. 9-patchのつくりかた Draw9PatchをつかうA グラフィックツールでつくるB Android Asset StudioをつかうC
  48. 48. 9-patchのつくりかた Draw9PatchをつかうA グラフィックツールでつくるB Android Asset StudioをつかうC
  49. 49. 9-patchのつくりかた Draw9PatchをつかうA グラフィックツールでつくるB Android Asset StudioをつかうC
  50. 50. 9-patchのつくりかた Draw9PatchをつかうA グラフィックツールでつくるB Android Asset StudioをつかうC
  51. 51. http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
  52. 52. http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html 1ヶ所しか伸ばせない…
  53. 53. 9-patchの応用と注意 伸ばす点はいくつでもA 伸ばす点の割合がポイントB 伸ばすことしかできないC
  54. 54. 9-patchの応用と注意 伸ばす点はいくつでもA 伸ばす点の割合がポイントB 伸ばすことしかできないC
  55. 55. 左の3つの図ように、 点の領域を変えていくと どうなるでしょうか? 問題 A B C
  56. 56. 9-patchの応用と注意 伸ばす点はいくつでもA 伸ばす点の割合がポイントB 伸ばすことしかできないC
  57. 57. 重なっている!!
  58. 58. 重なってしまった例
  59. 59. 9-patchが適用できるかどうか 向き / 不向きは デザイナーでも考えよう
  60. 60. @akai_t
  61. 61. logo.png actionbar_bg.png ic_menu _plus.png ic_menu _search.png
  62. 62. 9-patchを理解して… 質の高いデザインを!
  63. 63. また今度! おつかれさまでした! 秋葉ちひろ @tommmmy 12:00 UIと画面遷移 未定 だよっ
  64. 64. レポート課題 画面遷移がすぐれていると思う Androidアプリを教えてください! 理由もおねがいします。

×