デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
•
22 gefällt mir•1,481 views
〜XMLから読み解く AndroidデザインのコツとTips〜 at 「ICT ERA + ABC 2012 東北」2012.10.20
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
- 1. デザイナーがエンジニアさんと 楽しくデザイン実装の話をする ために XXMMLLから読み解く AAnnddrrooiiddデザインのコツとTTiippss 秋葉ちひろ @@ttoommmmmmmmyy
- 3. 勉強会をやっています •･ デザイナーさんにXXMMLLを広めたい •･ エンジニアさんにデザイナーの 気持ちを聞いてほしい
- 9. 秋葉ちひろ •･ @@ttoommmmmmmmyy •･ デザイナー／アートディレクター •･ WWeebb系・アプリ系 •･ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
- 11. なぜ残念になるのか？ エンジニアまかせだから •･ デザイナーが実装のことをわかって いないから •･ 実装の指示が出せない
- 13. 実装のことをわかっていたら、 組みやすい、理にかなった デザインができる！
- 14. このセッションのポイント デザイナーさんへ •･ ちょっとでもXXMMLLの知識があれば、 実装可能かどうかがわかる •･ 110000％できなくてもいいので、 ちょっとでも知っておこう
- 19. アナログ感 カスタムUUII
- 20. ダイアログ
- 21. AAnnddrrooiiddアプリの宿命 なぜ実装がむずかしい？ •･ 画面解像度がバラバラ •･ 画面サイズも まったく統一されない
- 22. iiPPhhoonneeの場合 ddeennssiittyy ddeennssiittyy ssiizzee((ppxx)) ggrroouupp rraattiioo iiPPhhoonnee 33GG iiPPhhoonnee 33GGSS 116600 11 332200xx448800 iiPPhhoonnee 44 iiPPhhoonnee 44SS 332200 22 664400xx996600 iiPPhhoonnee 55 332200 22 664400xx11113366
- 23. 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 448800xx880000 GGaallaaxxyy NNeexxuuss 332200 22 772200xx11228800
- 24. 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
- 25. 中身のことを知っておかないと 実装可能なものか どうかわからない
- 28. CCSSSS ((CCSSSS33)) でいうと、 bboorrddeerr--iimmaaggee というプロパティがある
- 30. Q. なぜ必要なの？ A. 伸縮のことを考えないと いけないことが多い
- 32. 448800xx880000 556600xx996600
- 33. 448800xx880000 556600xx996600
- 35. 99--ppaattcchh 仕組みと作り方 •･ 伸びる部分と伸びない部分を決める •･ 中のコンテンツが入�り込むエリアを 決める
- 40. 伸びるところ
- 58. 同じ色
- 65. 大きな グラデーション
- 71. 同じ色 同じ色
- 74. 99--ppaattcchhを熟知していたら…� エンジニアさんに 「ここ伸ばしてね♥」 と指示できる！
- 76. 99--ppaattcchh 仕組みと作り方 •･ 伸びる部分と伸びない部分を決める •･ 中のコンテンツが入�り込むエリアを 決める
- 80. コンテンツが入�り込むエリア
- 81. 余白
- 82. 余白
- 83. 余白
- 86. 仕組みと作り方 •･ 伸びる部分と伸びない部分を決める •･ 中のコンテンツが入�り込むエリアを 決める 双方は独立している
- 89. main.xml <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
- 90. 99--ppaattcchh プラスα •･ 伸ばす点はいくつでも •･ 伸ばす点の割合 •･ 伸ばすことしかできない
- 92. 99--ppaattcchhのポイント22 伸ばす点の割合 •･ 何ピクセル打つかによって伸びる割 合が変わってきます
- 100. 99--ppaattcchhのポイント33 伸ばすしかできない •･ ちぢむことができないので、 最小の大きさで作るとGGoooodd！
- 104. 重なっとるーー！！