Enviar pesquisa
Carregar
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
•
39 gostaram
•
16,206 visualizações
Chihiro Tomita
Seguir
より凝ったグラフィック編 http://www.ladybeetle-design.com/androidappdesigns/
Leia menos
Leia mais
Design
Tecnologia
Notícias e política
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 107
Baixar agora
Baixar para ler offline
Recomendados
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
How to measure UIView position on Native App
How to measure UIView position on Native App
Daisuke Yamashita
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
Chihiro Tomita
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
Recomendados
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
How to measure UIView position on Native App
How to measure UIView position on Native App
Daisuke Yamashita
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
Chihiro Tomita
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
CSS Design and Programming
CSS Design and Programming
Taku AMANO
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1
Hiroshi Oyamada
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
What's Sketch.app
What's Sketch.app
littlebustersreply
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
Daiji Hirata
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
計算機理論入門09
計算機理論入門09
Tomoyuki Tarumi
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
Mais conteúdo relacionado
Semelhante a 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
CSS Design and Programming
CSS Design and Programming
Taku AMANO
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1
Hiroshi Oyamada
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
What's Sketch.app
What's Sketch.app
littlebustersreply
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
Daiji Hirata
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
計算機理論入門09
計算機理論入門09
Tomoyuki Tarumi
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
Semelhante a 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
(20)
CSS Design and Programming
CSS Design and Programming
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
画像を使わずにデザイン
画像を使わずにデザイン
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Head First XML Layout on Android
Head First XML Layout on Android
クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
What's Sketch.app
What's Sketch.app
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
計算機理論入門09
計算機理論入門09
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
1.
ハッシュタグ デザイナーが
##aaaaddeessiiggnnss コードから読み解く、 AAnnddrrooiiddアプリの デザインの幅を広げるコツと TTiippss 第22回:より凝ったグラフィック @@GGMMOO yyoouurrss 22001122..99..2200
2.
ハッシュタグ ##aaaaddeessiiggnnss
3.
ハッシュタグ
##aaaaddeessiiggnnss がんばって作ったデザインが、 実装後に残念な結果にならないために なぜ残念になるか?
4.
秋葉ちひろ •・ @@ttoommmmmmmmyy •・ デザイナー/アートディレクター •・
WWeebb系・アプリ系 •・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
5.
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
6.
前回
変態99--ppaattcchh
7.
今回のテーマ より凝ったグラフィック
前回は9-patchをした。 これはビットマップ(画像)を使っていた が、今回はできるだけ画像を使わずに、ど れだけこった表現ができるかを調べてみ た。
8.
WebでいうところのCSSと
同じと考えるとよい。 11..コードのみで グラデーション、影など CSS3で新たに加わった 可能な表現 •・ 画像を使わなくてもできる表現を デザイナーが徹底解析!
9.
22..デザインが 組み込まれる仕組み •・
仕組みを知れば、いろいろと応用 がきく(かもしれない)
10.
bbuuttttoonn__bbgg..ppnngg
11.
bbuuttttoonn__bbgg ..99 ..ppnngg
12.
main.xml <Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
13.
テキストや画像を 表示したい場合
14.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" />
15.
main.xml <ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/photo" /> pphhoottoo..ppnngg
16.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" />
17.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" />
18.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" />
19.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" android:padding="10dp" />
20.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background= "@drawable/button_bg" android:padding="10dp" />
21.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />
22.
main.xml <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= bbuuttttoonn__bbgg..99..ppnngg "@drawable/button_bg" android:padding="10dp" />
23.
main.xml <TextView android:layout_width="wrap_content"
<shape android:shape="rectangle" > android:layout_height="wrap_content" <size android:text="撮影する" android:height="100dp" android:width="100dp" /> <solid android:color="#cc2f2f2f" /> android:textSize="20sp" </shape> android:textColor="#fff" button_bg.xml android:background= "@drawable/button_bg" android:padding="10dp" />
24.
res drawable-xhdpi drawable-hdpi drawable-mdpi
iimmgg drawable-ldpi layouts JJAAVVAA main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
25.
res drawable
xxmmll drawable-xhdpi drawable-hdpi drawable-mdpi iimmgg drawable-ldpi JJAAVVAA layouts main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
26.
重要!
<<sshhaappee>> コードでグラフィックを 表現するためのタグ
27.
<?xml version="1.0" encoding="utf-8"?> <shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="xxxxxx" > ここにいろいろ書くよ </shape>
28.
rreeccttaannggllee 長方形
角丸長方形
29.
oovvaall
円
30.
lliinnee 線�
31.
rriinngg リング
32.
rreeccttaannggllee 長方形
角丸長方形
33.
rreeccttaannggllee <shape android:shape="rectangle"> </shape>
長方形 角丸長方形
34.
rreeccttaannggllee <shape android:shape="rectangle">
<size android:width="100dp" android:height="50dp" /> </shape> 長方形 角丸長方形
35.
rreeccttaannggllee <shape android:shape="rectangle">
<size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> </shape> 長方形 角丸長方形
36.
rreeccttaannggllee <shape android:shape="rectangle">
<size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> 長方形 角丸長方形 <stroke android:width="2dp" android:color="#000" /> </shape>
37.
rreeccttaannggllee <shape android:shape="rectangle">
<size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> 長方形 角丸長方形 <stroke android:width="2dp" android:color="#000" /> <corners android:radius="10dp" /> </shape>
38.
rreeccttaannggllee <shape android:shape="rectangle"> </shape>
長方形 角丸長方形
39.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> </shape> 長方形 角丸長方形
40.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> android:angle="90" /> 長方形 角丸長方形 </shape>
41.
42.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#000" android:endColor="#fff" /> </shape> 長方形 角丸長方形
43.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#fff" android:endColor="#000" /> </shape> 長方形 角丸長方形
44.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> </shape> 長方形 角丸長方形
45.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /> </shape>
46.
47.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /> </shape>
48.
rreeccttaannggllee <shape android:shape="rectangle"> <gradient
android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="33" /> </shape>
49.
50.
ポイント! <<sshhaappee>>タグでできること
51.
<size> 大きさ
<solid> 塗り <stroke> 線� <corners> 角丸 <gradient> グラデーション <padding> 内側の余白
52.
<size> 大きさ wwiiddtthh,,
hheeiigghhtt solid> 塗り bbaacckkggrroouunndd--ccoolloorr troke> 線� bboorrddeerr rners> 角丸 bboorrddeerr--rraaddiiuuss dient> グラデーション ggrraaddiieenntt dding> 内側の余白 ppaaddddiinngg
53.
54.
ssttrrookkee
ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr
55.
56.
ssttrrookkee
ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr ×
57.
58.
ssttrrookkee
ssttaarrttCCoolloorr eennddCCoolloorr ×
59.
rraaddiiaall
ssttaarrttCCoolloorr eennddCCoolloorr
60.
<gradient
android:startColor="#87d1bc" cceenntteerrXX android:endColor="#00845d" cceenntteerrYY android:type="radial" android:gradientRadius="300" android:centerX="0.2" android:centerY="0.5" />
61.
62.
ssttrrookkee ×
63.
実は不便 <<sshhaappee>>タグでできないこと •・ 上下左右、個別の<<ssttrrookkee>>
•・ ドロップシャドウ的なもの
64.
TTIIPP
SS カラーコードについて ##dd6655ee9944 ##cccccc ##88bbcc11ee22 ##000000 ##ffffaabb7755
65.
TTIIPP
SS ##cccccc ##33cccccc ##000000 ##55000000 ##dd6655ee9944 ##2255dd6655ee9944 ##88bbcc11ee22 ##660088bbcc11ee22 ##ffffaabb7755 ##5555ffffaabb7755
66.
Q.
こういう表現なら どうする?
67.
68.
ccaassee..11
99--ppaattcchh •・ グラデーション込みで99--ppaattcchhに してしまう
69.
70.
71.
72.
73.
74.
75.
76.
77.
ん〜 やっぱりやだ
78.
ccaassee..22
重ねる •・ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
79.
bbiittmmaapp sshhaappee
80.
bbiittmmaapp sshhaappee
81.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
sshhaappee </item> <item> bbiittmmaapp </item> </layer-list>
82.
83.
bbiittmmaapp sshhaappee
84.
bbiittmmaapp bbiittmmaapp sshhaappee
85.
bbiittmmaapp sshhaappee
86.
bbiittmmaapp sshhaappee
87.
nniinnee--ppaattcchh
sshhaappee
88.
nniinnee--ppaattcchh
sshhaappee
89.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
sshhaappee </item> <item> nniinnee--ppaattcchh </item> </layer-list>
90.
91.
nniinnee--ppaattcchh
bbiittmmaapp
92.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
bbiittmmaapp </item> <item> nniinnee--ppaattcchh </item> </layer-list>
93.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
<bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <nine-patch android:src="@drawable/border" /> </item> </layer-list>
94.
95.
96.
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#fff" android:shadowColor="#5000" android:shadowDx="0" android:shadowDy="-1" android:shadowRadius="1" android:text="11:20" />
97.
android:shadowColor="#5000" android:shadowDx="0"
XX位置 android:shadowDy="-1" YY位置 android:shadowRadius="1" ぼかし text-shadow: 0 -1px 1px rgba(0,0,0,0.5); XX位置 ぼかし YY位置
98.
http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
99.
100.
101.
##55000000
bbiittmmaapp sshhaappee ##00000000 tteexxttuurree__bbgg..ppnngg
102.
103.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
<bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000"
104.
android:src="@drawable/texture_bg"
android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000" android:type="radial" android:gradientRadius="300" /> </shape> </item> </layer-list>
105.
106.
まとめ •・ コードでかけるものは、コードで表現 •・ 重ね技
<<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>> •・ 位置調整も可能
107.
ありがとうございました! GGoooodd LLuucckk!! •・
@@ttoommmmmmmmyy •・ ffaacceebbooookk :: 秋葉ちひろ •・ 次回は1100//44(木)@CCAAさん (カスタムUUIIについて)
Baixar agora