【第3回】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...
DESCRIPTION
全力でカスタムUI http://www.ladybeetle-design.com/androidappdesigns/TRANSCRIPT
ハッシュタグ
##aaaaddeessiiggnnssデザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第33回:全力でカスタムUUII@@SSTTAARRTTUUPP BBaassee CCaammpp
22001122..1100..44
がんばって作ったデザインが、
実装後に残念な結果にならないために
ハッシュタグ
##aaaaddeessiiggnnss
秋葉ちひろ
•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロントエンドの一部
11..カスタムUUIIについて
全力でカスタムUUII
カスタムUUIIとは?
どんなもの?
•・ チェックボックス•・ ラジオボタン•・ スライダー•・ シークバー•・ スライドバー など
カスタムUUIIって使う?
デザインをカスタマイズする理由
いつ使う?
カスタムUUII
•・ ユーザーに何か決めてもらうとき•・ 現在のステータスを何かしら提示したいとき
デザインをカスタマイズする
•・ いつも見ているものと違うとビックリする(かもしれない)
•・ それが自分で操作できるのかがわからない(かもしれない)
デメリット
デザインをカスタマイズする
•・ 端末によるデザインの違いがなくなる•・ アプリのデザインとして統一感が出る(ブランディング)
メリット
だとしたらそれは…�
ただの制作者のエゴかも!!
ちょっと物知りの
クライアントさん
注意!
カスタムUUIIにしてください
どういう感じにしたいですか?
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
どういう感じにしたいですか?
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
なぜそろえてほしいのですか?
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
なぜそろえてほしいのですか?
・・・・・・・。
クライアントさんにも
ちゃんとした理由を
考えてほしい
カスタムUUII
•・ 設定がメインとなるアプリ
使うのに適した場面その11
カスタムUUII
•・ 世界観を出したいアプリ
使うのに適した場面その22
スライダー
OONN//OOFFFF
スライダー
スライダー
ラジオボタン
ラジオボタン
カスタムUUII
•・ 本当にやるべきかどうかをしっかり考える(コンセプトも含めて)
•・ 予算面
そもそもの段階で…�
気をつけることその11!
ユーザーが「自分で決めれる」
ということがわかるものにしな
いといけない
気をつけることその22!
ユーザーが「自分がどういう状
態か」ということがわかるもの
にしないといけない
気をつけることその33!
あくまで脇役なので、必要以上
に華美�になってはいけない
また、デフォルトと離れすぎる
とびっくりする
気をつけることその44!
世界観が必要なら、確実にその
方向�が必要
22..状態とデザインについて
全力でカスタムUUII
•・ チェックボックス
状態とは?
オフのとき
オフ/押しているとき
オンのとき
オン/押しているとき
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA構造
飾�り
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA
構造
飾�り
drawable xxmmll
checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
<item android:state_checked="true"
android:state_pressed="true"
android:drawable="@drawable/xxx">
</item>
チェックされているかどうか
押されているかどうか
その状態で表示する画像
オフのとき
オフ/押しているとき
オンのとき
オン/押しているとき
state_checked="false"
state_checked="false"
state_checked="true"
state_checked="true"
チェックされているかどうか
state_pressed="false"
state_pressed="true"
state_pressed="false"
state_pressed="true"
押されているかどうか
state_checked="false"
state_checked="true"
チェックされているかどうか
state_focused="true"
state_focused="true"
ffooccuussされているか
22..状態とデザインについて
全力でカスタムUUII
•・ スライダー
オンになっているエリア
オフになっているエリア
つまみ(通常時)
つまみ(押されたとき)
ssttaarrttCCoolloorr
eennddCCoolloorr
##5500ccff
##00ccff
ssttrrookkee
##5599ccff
ccoorrnneerrss
つまみには注意が必要
なんかこう気持ち悪い
スライダー
•・ 透過をしたり、特別な形にするときは注意!
•・ バーの進み具合は、つまみのセンターに従ってくれない!
つまみのデザイン
tthhuummbbOOffffsseettを
使ってみる
スライダー
•・ tthhuummbbOOffffsseettを使うと、両端が切れてしまう…�
つまみのデザイン
つまみのデザイン注意11!
・できるだけギリギリで
スライスする
つまみのデザイン注意22!
・プレス時も外回りに影などを
つけるのではなく、ギリギリ
の範囲内でわかるようなもの
sshhaappee
99--ppaattcchh
ssttrrookkee
ssttaarrttCCoolloorr eennddCCoolloorr
99--ppaattcchh
ssttaarrttCCoolloorr eennddCCoolloorr
22..状態とデザインについて
全力でカスタムUUII
•・ シークバー
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"></shape>
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
x
pivotX="50%"pivotY="50%"
<animated-rotate>
</animated-rotate>
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
<animated-rotate>
</animated-rotate>
</bitmap>
<bitmap android:src= "@drawable/rotate">
<animated-rotate>
</animated-rotate>
かんたんシークバー!・回転するものを作っておく
22..状態とデザインについて
全力でカスタムUUII
•・ スクロールバー
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr
ssttrrookkee
ccoorrnneerrss
sshhaappee
99--ppaattcchh
スクロールバーのカスタマイズ!
・基本的には99--ppaattcchhなどで
伸びる表現が必要
・どの程度余白をとるかを指示
カスタムUUII
まとめ
•・ やればいいというものではない•・ ユーザーのアクションを妨げない•・ とはいえ、デザイナーとして可能な範囲を考えたい
GGoooodd LLuucckk!!
ありがとうございました!
•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//2255(木)@GGMMOOさん