デザイナーがエンジニアさんと楽しくデザイン実装の話をするためにXXMMLLから読み解くAAnnddrrooiiddデザインのコツとTTiippss                         秋葉ちひろ                   ...
がんばって作ったデザインが、実装後に残念な結果にならないために
勉強会をやっています•・ デザイナーさんにXXMMLLを広めたい•・ エンジニアさんにデザイナーの 気持ちを聞いてほしい
@@GGMMOO  yyoouurrss(渋谷)
〜総集編〜1111月88日(木)1199::0000〜 @@GGooooggllee  東京オフィス
秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント  エンドの一部
なぜ残念になるのか?エンジニアまかせだから•・ デザイナーが実装のことをわかって いないから•・ 実装の指示が出せない
なぜ残念になるのか?エンジニアまかせだから•・ エンジニアはデザインのことをわ からずに実装しているから
実装のことをわかっていたら、 組みやすい、理にかなった   デザインができる!
このセッションのポイントデザイナーさんへ•・ ちょっとでもXXMMLLの知識があれば、 実装可能かどうかがわかる•・ 110000%できなくてもいいので、 ちょっとでも知っておこう
このセッションのポイントエンジニアさんへ•・ デザイナーが実装するときの気持ちを 共有したい
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
細いラインハイライト ライン 影
アナログ感カスタムUUII
ダイアログ
AAnnddrrooiiddアプリの宿命なぜ実装がむずかしい?•・ 画面解像度がバラバラ•・ 画面サイズも  まったく統一されない
iiPPhhoonneeの場合                       ddeennssiittyy   ddeennssiittyy      ssiizzee((ppxx))                        ggrroou...
AAnnddrrooiiddの場合                           ddeennssiittyy   ddeennssiittyy      ssiizzee((ppxx))                         ...
116600ddppii 224400ddppii 332200ddppii  mmddppii       hhddppii               xxhhddppii    11            11..55          ...
中身のことを知っておかないと   実装可能なものか   どうかわからない
今日のアジェンダ•・ 99--ppaattcchh•・ コードでグラフィックを 表現する
99--ppaattcchh99--ppaattcchhとは
CCSSSS  ((CCSSSS33))  でいうと、bboorrddeerr--iimmaaggee  というプロパティがある
画像を99分割して、四隅は固定、その他を伸びてもいいようにする
Q.   なぜ必要なの?A.   伸縮のことを考えないと     いけないことが多い
448800xx880000   556600xx996600
448800xx880000   556600xx996600
縦横比を勝手に変えられない  ためにも…�
99--ppaattcchh   仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める
黒い点((線�))で表現•・ 書き出したパーツの上下左右に、 11ppxxずつ余白を追加する
伸びる部分と伸びない部分•・ 上側と左側に黒い点((線�))をかく
伸びるところ
このデザインに関しては 結果は同じ伸びても耐えられるデザイン
同じ色
大きなグラデーション
同じ色同じ色
このデザインに関しては結果はビミョーにちがう もっこり感がビミョーに変わる
99--ppaattcchhを熟知していたら…�  エンジニアさんに「ここ伸ばしてね♥」   と指示できる!
99--ppaattcchh   仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める
中のコンテンツが入�り込むエリア•・ 右側と下側に黒い点((線�))をかく
コンテンツが入�り込むエリア
余白
余白
余白
99--ppaattcchhは余白を定義することもできる!
仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める  双方は独立している
bbuuttttoonn__bbgg..ppnngg
bbuuttttoonn__bbgg ..99 ..ppnngg
main.xml<Button  android:layout_width="wrap_content"	 android:layout_height="wrap_content"	 android:background="@drawable/...
99--ppaattcchh   プラスα•・ 伸ばす点はいくつでも•・ 伸ばす点の割合•・ 伸ばすことしかできない
99--ppaattcchhのポイント11伸ばす点はいくつでも•・ 上側・左側の伸ばす点はいくつでも  打てます
99--ppaattcchhのポイント22伸ばす点の割合•・ 何ピクセル打つかによって伸びる割  合が変わってきます
99--ppaattcchhのポイント33伸ばすしかできない•・ ちぢむことができないので、  最小の大きさで作るとGGoooodd!
重なっとるーー!!
がんばって作ったデザインが、実装後に残念な結果にならないためにあらかじめ、実装できる可能なデザインの範囲でデザインする
slideshare android デザイナー
slideshare android デザイナー
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
Upcoming SlideShare
Loading in …5
×

デザイナーがエンジニアさんと楽しくデザイン実装の話をするために

2,724 views

Published on

〜XMLから読み解く AndroidデザインのコツとTips〜
at 「ICT ERA + ABC 2012 東北」2012.10.20

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

No Downloads
Views
Total views
2,724
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
51
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

デザイナーがエンジニアさんと楽しくデザイン実装の話をするために

  1. 1. デザイナーがエンジニアさんと楽しくデザイン実装の話をするためにXXMMLLから読み解くAAnnddrrooiiddデザインのコツとTTiippss 秋葉ちひろ @@ttoommmmmmmmyy
  2. 2. がんばって作ったデザインが、実装後に残念な結果にならないために
  3. 3. 勉強会をやっています•・ デザイナーさんにXXMMLLを広めたい•・ エンジニアさんにデザイナーの 気持ちを聞いてほしい
  4. 4. @@GGMMOO yyoouurrss(渋谷)
  5. 5. 〜総集編〜1111月88日(木)1199::0000〜 @@GGooooggllee 東京オフィス
  6. 6. 秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
  7. 7. なぜ残念になるのか?エンジニアまかせだから•・ デザイナーが実装のことをわかって いないから•・ 実装の指示が出せない
  8. 8. なぜ残念になるのか?エンジニアまかせだから•・ エンジニアはデザインのことをわ からずに実装しているから
  9. 9. 実装のことをわかっていたら、 組みやすい、理にかなった デザインができる!
  10. 10. このセッションのポイントデザイナーさんへ•・ ちょっとでもXXMMLLの知識があれば、 実装可能かどうかがわかる•・ 110000%できなくてもいいので、 ちょっとでも知っておこう
  11. 11. このセッションのポイントエンジニアさんへ•・ デザイナーが実装するときの気持ちを 共有したい
  12. 12. http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
  13. 13. 細いラインハイライト ライン 影
  14. 14. アナログ感カスタムUUII
  15. 15. ダイアログ
  16. 16. AAnnddrrooiiddアプリの宿命なぜ実装がむずかしい?•・ 画面解像度がバラバラ•・ 画面サイズも まったく統一されない
  17. 17. iiPPhhoonneeの場合 ddeennssiittyy ddeennssiittyy ssiizzee((ppxx)) ggrroouupp rraattiioo iiPPhhoonnee 33GGiiPPhhoonnee 33GGSS 116600 11 332200xx448800 iiPPhhoonnee 44 iiPPhhoonnee 44SS 332200 22 664400xx996600 iiPPhhoonnee 55 332200 22 664400xx11113366
  18. 18. AAnnddrrooiiddの場合 ddeennssiittyy ddeennssiittyy ssiizzee((ppxx)) ggrroouupp rraattiioo ひと昔前 116600 11 332200xx448800 XXppeerriiaa aarrcc 224400 11..55 448800xx885544 IINNFFOOBBAARR AA0011 224400 11..55 556600xx996600 GGaallaaxxyy SS IIII 224400 11..55 448800xx880000GGaallaaxxyy NNeexxuuss 332200 22 772200xx11228800
  19. 19. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 11 11..55 22 XXppeerriiaa aarrcc GGaallaaxxyy NNeexxuuss IINNFFOOBBAARR AA0011 GGaallaaxxyy NNoottee GGaallaaxxyy SS IIII http://myakura.github.com/n/density.html
  20. 20. 中身のことを知っておかないと 実装可能なものか どうかわからない
  21. 21. 今日のアジェンダ•・ 99--ppaattcchh•・ コードでグラフィックを 表現する
  22. 22. 99--ppaattcchh99--ppaattcchhとは
  23. 23. CCSSSS ((CCSSSS33)) でいうと、bboorrddeerr--iimmaaggee というプロパティがある
  24. 24. 画像を99分割して、四隅は固定、その他を伸びてもいいようにする
  25. 25. Q. なぜ必要なの?A. 伸縮のことを考えないと いけないことが多い
  26. 26. 448800xx880000 556600xx996600
  27. 27. 448800xx880000 556600xx996600
  28. 28. 縦横比を勝手に変えられない ためにも…�
  29. 29. 99--ppaattcchh 仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める
  30. 30. 黒い点((線�))で表現•・ 書き出したパーツの上下左右に、 11ppxxずつ余白を追加する
  31. 31. 伸びる部分と伸びない部分•・ 上側と左側に黒い点((線�))をかく
  32. 32. 伸びるところ
  33. 33. このデザインに関しては 結果は同じ伸びても耐えられるデザイン
  34. 34. 同じ色
  35. 35. 大きなグラデーション
  36. 36. 同じ色同じ色
  37. 37. このデザインに関しては結果はビミョーにちがう もっこり感がビミョーに変わる
  38. 38. 99--ppaattcchhを熟知していたら…� エンジニアさんに「ここ伸ばしてね♥」 と指示できる!
  39. 39. 99--ppaattcchh 仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める
  40. 40. 中のコンテンツが入�り込むエリア•・ 右側と下側に黒い点((線�))をかく
  41. 41. コンテンツが入�り込むエリア
  42. 42. 余白
  43. 43. 余白
  44. 44. 余白
  45. 45. 99--ppaattcchhは余白を定義することもできる!
  46. 46. 仕組みと作り方•・ 伸びる部分と伸びない部分を決める•・ 中のコンテンツが入�り込むエリアを 決める 双方は独立している
  47. 47. bbuuttttoonn__bbgg..ppnngg
  48. 48. bbuuttttoonn__bbgg ..99 ..ppnngg
  49. 49. main.xml<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
  50. 50. 99--ppaattcchh プラスα•・ 伸ばす点はいくつでも•・ 伸ばす点の割合•・ 伸ばすことしかできない
  51. 51. 99--ppaattcchhのポイント11伸ばす点はいくつでも•・ 上側・左側の伸ばす点はいくつでも 打てます
  52. 52. 99--ppaattcchhのポイント22伸ばす点の割合•・ 何ピクセル打つかによって伸びる割 合が変わってきます
  53. 53. 99--ppaattcchhのポイント33伸ばすしかできない•・ ちぢむことができないので、 最小の大きさで作るとGGoooodd!
  54. 54. 重なっとるーー!!
  55. 55. がんばって作ったデザインが、実装後に残念な結果にならないためにあらかじめ、実装できる可能なデザインの範囲でデザインする
  56. 56. slideshare android デザイナー
  57. 57. slideshare android デザイナー

×