Suche senden
Hochladen
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
•
22 gefällt mir
•
1,481 views
Chihiro Tomita
Folgen
〜XMLから読み解く AndroidデザインのコツとTips〜 at 「ICT ERA + ABC 2012 東北」2012.10.20
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 108
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
Asociatia Techsoup Romania
解析データの分析と活用
解析データの分析と活用
Keisuke Anzai
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
画像Hacks
画像Hacks
Yusuke Wada
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Mihai Corlan
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Naoki Matsuda
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
takashi ono
Empfohlen
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
Asociatia Techsoup Romania
解析データの分析と活用
解析データの分析と活用
Keisuke Anzai
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
画像Hacks
画像Hacks
Yusuke Wada
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Mihai Corlan
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Naoki Matsuda
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
takashi ono
The Craft of UX
The Craft of UX
Leanna Gingras
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
Shigeru Kishikawa
Simple Pure Java
Simple Pure Java
Anton Keks
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
Noriyo Asano
言語の世界
言語の世界
yukihiro_matz
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
Ryan Stewart
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
Yasuhisa Hasegawa
6 Key Elements to a Good Website
6 Key Elements to a Good Website
Webs
JavaFX
JavaFX
Michael Heinrichs
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
Digital Intelligence Inc.
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
hmimura_embarcadero
プログラマに優しいバグレポートの書き方
プログラマに優しいバグレポートの書き方
Katsutoshi Makino
What is this UX thing?
What is this UX thing?
Abby Covert
Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料
学 松崎
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
Takashi Uemura
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler Forum
Pierre Spring
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Yuya Unno
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
Yasuhisa Hasegawa
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
nishio
Weitere ähnliche Inhalte
Andere mochten auch
The Craft of UX
The Craft of UX
Leanna Gingras
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
Shigeru Kishikawa
Simple Pure Java
Simple Pure Java
Anton Keks
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
Noriyo Asano
言語の世界
言語の世界
yukihiro_matz
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
Ryan Stewart
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
Yasuhisa Hasegawa
6 Key Elements to a Good Website
6 Key Elements to a Good Website
Webs
JavaFX
JavaFX
Michael Heinrichs
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
Digital Intelligence Inc.
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
hmimura_embarcadero
プログラマに優しいバグレポートの書き方
プログラマに優しいバグレポートの書き方
Katsutoshi Makino
What is this UX thing?
What is this UX thing?
Abby Covert
Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料
学 松崎
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
Takashi Uemura
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler Forum
Pierre Spring
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Yuya Unno
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
Yasuhisa Hasegawa
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
nishio
Andere mochten auch
(20)
The Craft of UX
The Craft of UX
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
Simple Pure Java
Simple Pure Java
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
言語の世界
言語の世界
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
6 Key Elements to a Good Website
6 Key Elements to a Good Website
JavaFX
JavaFX
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
プログラマに優しいバグレポートの書き方
プログラマに優しいバグレポートの書き方
What is this UX thing?
What is this UX thing?
Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler Forum
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
Human Centered Game Design (人間中心遊戯設計: 人に寄り添ったゲームデザイン)
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
1.
デザイナーがエンジニアさんと 楽しくデザイン実装の話をする ために XXMMLLから読み解く AAnnddrrooiiddデザインのコツとTTiippss
秋葉ちひろ @@ttoommmmmmmmyy
2.
がんばって作ったデザインが、 実装後に残念な結果にならないために
3.
勉強会をやっています •・ デザイナーさんにXXMMLLを広めたい •・ エンジニアさんにデザイナーの
気持ちを聞いてほしい
4.
5.
6.
@@GGMMOO yyoouurrss(渋谷)
7.
〜総集編〜 1111月88日(木)1199::0000〜 @@GGooooggllee
東京オフィス
8.
9.
秋葉ちひろ •・ @@ttoommmmmmmmyy •・ デザイナー/アートディレクター •・
WWeebb系・アプリ系 •・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
10.
11.
なぜ残念になるのか? エンジニアまかせだから •・ デザイナーが実装のことをわかって いないから •・
実装の指示が出せない
12.
なぜ残念になるのか? エンジニアまかせだから •・ エンジニアはデザインのことをわ からずに実装しているから
13.
実装のことをわかっていたら、 組みやすい、理にかなった
デザインができる!
14.
このセッションのポイント デザイナーさんへ •・ ちょっとでもXXMMLLの知識があれば、 実装可能かどうかがわかる •・
110000%できなくてもいいので、 ちょっとでも知っておこう
15.
このセッションのポイント エンジニアさんへ •・ デザイナーが実装するときの気持ちを 共有したい
16.
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
17.
18.
細いライン ハイライト ライン 影
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.
中身のことを知っておかないと
実装可能なものか どうかわからない
26.
今日のアジェンダ •・ 99--ppaattcchh •・ コードでグラフィックを
表現する
27.
99--ppaattcchh 99--ppaattcchhとは
28.
CCSSSS ((CCSSSS33))
でいうと、 bboorrddeerr--iimmaaggee というプロパティがある
29.
画像を99分割して、四隅は固定、 その他を伸びてもいいようにする
30.
Q.
なぜ必要なの? A. 伸縮のことを考えないと いけないことが多い
31.
32.
448800xx880000
556600xx996600
33.
448800xx880000
556600xx996600
34.
縦横比を 勝手に変えられない ためにも…�
35.
99--ppaattcchh
仕組みと作り方 •・ 伸びる部分と伸びない部分を決める •・ 中のコンテンツが入�り込むエリアを 決める
36.
黒い点((線�))で表現 •・ 書き出したパーツの上下左右に、 11ppxxずつ余白を追加する
37.
38.
39.
伸びる部分と伸びない部分 •・ 上側と左側に黒い点((線�))をかく
40.
伸びるところ
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
このデザインに関しては 結果は同じ 伸びても耐えられるデザイン
53.
54.
55.
56.
57.
58.
同じ色
59.
60.
61.
62.
63.
64.
65.
大きな グラデーション
66.
67.
68.
69.
70.
71.
同じ色 同じ色
72.
73.
このデザインに関しては 結果はビミョーにちがう もっこり感がビミョーに変わる
74.
99--ppaattcchhを熟知していたら…� エンジニアさんに 「ここ伸ばしてね♥」
と指示できる!
75.
76.
99--ppaattcchh
仕組みと作り方 •・ 伸びる部分と伸びない部分を決める •・ 中のコンテンツが入�り込むエリアを 決める
77.
中のコンテンツが入�り込むエリア •・ 右側と下側に黒い点((線�))をかく
78.
79.
80.
コンテンツが入�り込むエリア
81.
余白
82.
余白
83.
余白
84.
85.
99--ppaattcchhは 余白を定義する こともできる!
86.
仕組みと作り方 •・ 伸びる部分と伸びない部分を決める •・ 中のコンテンツが入�り込むエリアを
決める 双方は独立している
87.
bbuuttttoonn__bbgg..ppnngg
88.
bbuuttttoonn__bbgg ..99 ..ppnngg
89.
main.xml <Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
90.
99--ppaattcchh
プラスα •・ 伸ばす点はいくつでも •・ 伸ばす点の割合 •・ 伸ばすことしかできない
91.
99--ppaattcchhのポイント11 伸ばす点はいくつでも •・ 上側・左側の伸ばす点はいくつでも
打てます
92.
99--ppaattcchhのポイント22 伸ばす点の割合 •・ 何ピクセル打つかによって伸びる割
合が変わってきます
93.
94.
95.
96.
97.
98.
99.
100.
99--ppaattcchhのポイント33 伸ばすしかできない •・ ちぢむことができないので、
最小の大きさで作るとGGoooodd!
101.
102.
103.
104.
重なっとるーー!!
105.
106.
がんばって作ったデザインが、 実装後に残念な結果にならないために あらかじめ、実装できる可能な デザインの範囲でデザインする
107.
slideshare android デザイナー
108.
slideshare android デザイナー
Jetzt herunterladen