Submit Search
Upload
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
•
60 likes
•
11,887 views
Chihiro Tomita
Follow
全力でカスタムUI http://www.ladybeetle-design.com/androidappdesigns/
Read less
Read more
Design
Report
Share
Report
Share
1 of 153
Download Now
Download to read offline
Recommended
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【concrete5】CMS夏祭り2015@mttokyo
【concrete5】CMS夏祭り2015@mttokyo
Shinji Sakai
画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
More Related Content
Similar to 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Wide2
Wide2
N.Nakasato
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた
Hiromitsuuuuu Morikawa
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
AssetTouchAndTry20170608
AssetTouchAndTry20170608
Takashi Jona
コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話
Shinobu Okano
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
Similar to 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
(8)
Wide2
Wide2
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
AssetTouchAndTry20170608
AssetTouchAndTry20170608
コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
1.
ハッシュタグ デザイナーが
##aaaaddeessiiggnnss コードから読み解く、 AAnnddrrooiiddアプリの デザインの幅を広げるコツと TTiippss 第33回:全力でカスタムUUII @@SSTTAARRTTUUPP BBaassee CCaammpp 22001122..1100..44
2.
ハッシュタグ
##aaaaddeessiiggnnss がんばって作ったデザインが、 実装後に残念な結果にならないために
3.
秋葉ちひろ •・ @@ttoommmmmmmmyy •・ デザイナー/アートディレクター •・
WWeebb系・アプリ系 •・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
4.
全力でカスタムUUII 11..カスタムUUIIについて
5.
どんなもの? カスタムUUIIとは? •・ チェックボックス •・ ラジオボタン •・
スライダー •・ シークバー •・ スライドバー など
6.
カスタムUUIIって使う?
11.
デザインを カスタマイズする理由
12.
カスタムUUII いつ使う? •・ ユーザーに何か決めてもらうとき •・ 現在のステータスを何かしら提示し
たいとき
13.
デザインをカスタマイズする
デメリット •・ いつも見ているものと違うとビックリ する(かもしれない) •・ それが自分で操作できるのかがわから ない(かもしれない)
14.
デザインをカスタマイズする
メリット •・ 端末によるデザインの違いがなくなる •・ アプリのデザインとして統一感が出る (ブランディング)
15.
だとしたらそれは…� ただの制作者の エゴかも!!
16.
注意! ちょっと物知りの クライアントさん
17.
カスタムUUIIにしてください どういう感じにしたいですか? いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
18.
どういう感じにしたいですか? いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…� AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
19.
そうしたいって言ってるんで なんでもいいです…� AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
20.
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。
21.
そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。 なぜそろえてほしいのですか?
22.
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。 なぜそろえてほしいのですか? ・・・・・・・。
23.
クライアントさんにも ちゃんとした理由を
考えてほしい
24.
カスタムUUII 使うのに適した場面その11 •・
設定がメインとなるアプリ
27.
カスタムUUII 使うのに適した場面その22 •・
世界観を出したいアプリ
29.
スライダー
OONN//OOFFFF
33.
スライダー スライダー ラジオボタン ラジオボタン
34.
カスタムUUII
そもそもの段階で…� •・ 本当にやるべきかどうかをしっかり 考える(コンセプトも含めて) •・ 予算面
35.
!
気をつけること その11 ユーザーが「自分で決めれる」 ということがわかるものにしな いといけない
37.
!
気をつけること その22 ユーザーが「自分がどういう状 態か」ということがわかるもの にしないといけない
40.
!
気をつけること その33 あくまで脇役なので、必要以上 に華美�になってはいけない また、デフォルトと離れすぎる とびっくりする
43.
!
気をつけること その44 世界観が必要なら、確実にその 方向�が必要
45.
全力でカスタムUUII 22..状態とデザインについて
•・ チェックボックス
59.
状態とは? オフのとき オフ/押しているとき
オンのとき オン/押しているとき
67.
res drawable-xhdpi drawable-hdpi drawable-mdpi
iimmgg drawable-ldpi layouts JJAAVVAA main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
68.
res drawable
xxmmll drawable-xhdpi drawable-hdpi drawable-mdpi iimmgg drawable-ldpi JJAAVVAA layouts main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
69.
checkbox_stateful.xml <?xml version="1.0" encoding="utf-8"?> <selector
xmlns:android="http://schemas.android.com/apk/res/android"> </selector>
70.
checkbox_stateful.xml <?xml version="1.0" encoding="utf-8"?> <selector
xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" チェックされているかどうか android:state_pressed="true" 押されているかどうか android:drawable="@drawable/xxx"> その状態で表示する画像 </item> </selector>
71.
オフのとき オフ/押しているとき オンのとき オン/押しているとき
72.
チェックされているかどうか
押されているかどうか state_checked="false" state_pressed="false" state_checked="false" state_pressed="true" state_checked="true" state_pressed="false" state_checked="true" state_pressed="true"
73.
チェックされているかどうか
ffooccuussされているか state_checked="false" state_focused="true" state_checked="true" state_focused="true"
74.
全力でカスタムUUII 22..状態とデザインについて
•・ スライダー
77.
オンになっているエリア オフになっているエリア つまみ(通常時) つまみ(押されたとき)
78.
ccoorrnneerrss
ssttrrookkee ##5599ccff ssttaarrttCCoolloorr ##5500ccff eennddCCoolloorr ##00ccff
84.
つまみには注意が必要
95.
なんかこう気持ち悪い
106.
スライダー
つまみのデザイン •・ 透過をしたり、特別な形にするときは 注意! •・ バーの進み具合は、 つまみのセンターに従ってくれない!
109.
tthhuummbbOOffffsseettを
使ってみる
117.
スライダー
つまみのデザイン •・ tthhuummbbOOffffsseettを使うと、 両端が切れてしまう…�
122.
!
つまみのデザイン 注意11 ・できるだけギリギリで スライスする
123.
!
つまみのデザイン 注意22 ・プレス時も外回りに影などを つけるのではなく、ギリギリ の範囲内でわかるようなもの
124.
ssttrrookkee
sshhaappee ssttaarrttCCoolloorr eennddCCoolloorr 99--ppaattcchh
125.
99--ppaattcchh
126.
全力でカスタムUUII 22..状態とデザインについて
•・ シークバー
132.
<shape android:shape="ring" android:innerRadius="7dp"
android:thickness="3dp" android:useLevel="false"> </shape>
133.
<shape android:shape="ring" android:innerRadius="7dp"
android:thickness="3dp" android:useLevel="false"> <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /> </shape>
134.
<animated-rotate>
<shape x android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" pivotX="50%" android:useLevel="false"> pivotY="50%" <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /> </shape> </animated-rotate>
140.
<animated-rotate> <shape
android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"> <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /> </shape> </animated-rotate>
141.
<animated-rotate> <bitmap
android:src= "@drawable/rotate"> </bitmap> </animated-rotate>
142.
!
かんたんシークバー ・回転するものを作っておく
143.
全力でカスタムUUII 22..状態とデザインについて
•・ スクロールバー
146.
ccoorrnneerrss
ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr ssttrrookkee
150.
sshhaappee 99--ppaattcchh
151.
!
スクロールバーの カスタマイズ ・基本的には99--ppaattcchhなどで 伸びる表現が必要 ・どの程度余白をとるかを指示
152.
まとめ カスタムUUII •・ やればいいというものではない •・ ユーザーのアクションを妨げない •・
とはいえ、デザイナーとして可能な 範囲を考えたい
153.
ありがとうございました! GGoooodd LLuucckk!! •・
@@ttoommmmmmmmyy •・ ffaacceebbooookk :: 秋葉ちひろ •・ 次回は1100//2255(木)@GGMMOOさん
Download Now