【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips...

ハッシュタグ

##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はメーカーによって　デフォルトのデザインが違う　から、そろえてほしいそうです。



　なるほど、そのとおりですね。




　なぜそろえてほしいのですか？



　なぜそろえてほしいのですか？

　・・・・・・・。

クライアントさんにも

ちゃんとした理由を

考えてほしい

カスタムUUII

•･設定がメインとなるアプリ

使うのに適した場面その11

カスタムUUII

•･世界観を出したいアプリ

使うのに適した場面その22

スライダー

OONN//OOFFFF

スライダー

スライダー

ラジオボタン

ラジオボタン

カスタムUUII

•･本当にやるべきかどうかをしっかり考える（コンセプトも含めて）

•･予算面

そもそもの段階で…�

気をつけることその11!

ユーザーが「自分で決めれる」

ということがわかるものにしな

いといけない


ユーザーが「自分がどういう状

態か」ということがわかるもの

にしないといけない


あくまで脇役なので、必要以上

に華美�になってはいけない

また、デフォルトと離れすぎる

とびっくりする


世界観が必要なら、確実にその

方向�が必要

22..状態とデザインについて


•･チェックボックス

状態とは？

オフのとき

オフ／押しているとき

オンのとき

オン／押しているとき

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="true"



state_pressed="false"

state_pressed="true"

state_pressed="false"

state_pressed="true"

押されているかどうか




state_focused="true"

state_focused="true"

ffooccuussされているか



•･スライダー

オンになっているエリア

オフになっているエリア

つまみ（通常時）

つまみ（押されたとき）

ssttaarrttCCoolloorr

eennddCCoolloorr

##5500ccff

##00ccff

ssttrrookkee

##5599ccff

ccoorrnneerrss

つまみには注意が必要

なんかこう気持ち悪い

スライダー

•･透過をしたり、特別な形にするときは注意！

•･バーの進み具合は、つまみのセンターに従ってくれない！

つまみのデザイン

tthhuummbbOOffffsseettを

使ってみる

スライダー

•･ tthhuummbbOOffffsseettを使うと、両端が切れてしまう…�

つまみのデザイン

つまみのデザイン注意11!

・できるだけギリギリで

　スライスする

つまみのデザイン注意22!

・プレス時も外回りに影などを

　つけるのではなく、ギリギリ

　の範囲内でわかるようなもの

sshhaappee

99--ppaattcchh

ssttrrookkee

ssttaarrttCCoolloorr eennddCCoolloorr

99--ppaattcchh

ssttaarrttCCoolloorr eennddCCoolloorr



•･シークバー

</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>


x

pivotX="50%"pivotY="50%"

<animated-rotate>

</animated-rotate>

</shape>


<animated-rotate>

</animated-rotate>

</bitmap>

<bitmap android:src= "@drawable/rotate">

<animated-rotate>

</animated-rotate>

かんたんシークバー!・回転するものを作っておく



•･スクロールバー

ssttaarrttCCoolloorr

cceenntteerrCCoolloorr

eennddCCoolloorr

ssttrrookkee

ccoorrnneerrss

sshhaappee

99--ppaattcchh

スクロールバーのカスタマイズ!

・基本的には99--ppaattcchhなどで

　伸びる表現が必要

・どの程度余白をとるかを指示

カスタムUUII

まとめ

•･やればいいというものではない•･ユーザーのアクションを妨げない•･とはいえ、デザイナーとして可能な範囲を考えたい

GGoooodd LLuucckk!!

ありがとうございました！

•･ @@ttoommmmmmmmyy•･ ffaacceebbooookk :: 秋葉ちひろ•･次回は1100//2255（木）＠GGMMOOさん

【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips...

Design

Transcript of 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips...