[&] Android App Designs Vol.3
デザイナーがコードから読み解くAndroidアプリの
デザインと幅を広げるコツとTips #3
http://www.ladybeetle-design.com/androidappdesigns/
-------------------------------------------------------
カスタムUIみなさんはやりますか？
がんばって作ったデザインが実装後に残念な結果にならないために
ある時ふと考えて、XMLを勉強してみると、
おもいのほか HTML/CSSと似ていて分かった。
皆と共有しようと！と勉強会を始めました。
@tommmmy
今はBaiduでSimejiの開発のフロントエンドの一部を担当しております。
■1.カスタム UI について
カスタムUIとは。
●チェックボックス
●ラジオボタン
●スライダー
●シークバー
●スライドバー など
デフォルトで決まっている部品のデザインのカスタマイズをしていきます。
デフォルトで決まっていますし、OSによって違いますし、
OSのバージョンによっても違いますね。
そこを Android でどうやってカスタマイズしていくかというと...
カスタムUIって使う？
結構皆さん作ってますね？
カスタムUIは一長一短があります。
やればいいというものでもありません。
まず、iOSがどんなものかを見ていきます。
ON/OFFのトルグボタンです。
右と左で ON/OFFが切り替えられるよー
バージョンによって、丸かったり、四角かったりしますが、
コンセプト的にはほとんどかわりません。
これが Android だと？？？
黒い設定画面にボテっとしたボタンが並んでいます。
メーカーによって違います。
スライダーを見てみると、メーカーによって違います。
4.0以降になると、ちょっとシュッっとしてきました。
アプリの中に入れても奇麗に使えるようになりました。
チェックボックス くせ者ですよね〜
黒い背景であれば、黒のチェックボックスは「有り」かな〜
黒い背景にいきなり灰色のボタンが出てくると変えたくなりますよね。
■デザインをカスタマイズする理由
実は、変えたからオシャレで良くなったというような
単純な理由ではありません。普通のデザイン以上に注意深くする
ひつようがあります。いいところ悪いところがあります。
いつ使う？
●ユーザーに何かを決めてもらうとき。
●現在のステータスを何かしら提示したいとき
ユーザーが決めたいとき、自分がどういう位置にあるのか分かるもの
なので、奇をてらったデザインをしてしまうと、ユーザーに伝わりにくく
なる可能性もある。
簡単な気持ちでカスタムUIにしてはいけないな〜
■デメリット
●いつも見ているものと違うとビックリする（かもしれない）
●それが自分で操作できるものかがわからない（かもしれない）
迷わせてしまうのはいけません。
押したらチェックが入りそう？押したら選択されそう？
といのがわかるデザインにしなければいけません。
スライダーであれば、つかんで動かす。つかめそう？動かせそう？
というのが分かるデザインであることが絶対条件。
■メリット
●端末によるデザインの違いがなくなる
●アプリのデザインとして統一感がでる（ブランディング）
普段自分が使い慣れていないものに対してユーザーの気持ちを考えると
ひとくくりにメリットだけではない。そのへんも考える。
ふんわりしたデザインの中にグレーのボテっとしたデザインがあるのは
うれしく無い。でも全部の端末で合わせる必要は無い。
普通のユーザーは Android を一台しか持っていないので、
実はカスタムUIは製作者のエゴかもしれない！と思ったりする。
奇麗なものを使いたいという意思はあるのだが、
単に変えればいいというものでもないので、よく考えて。
■ちょっと物知りのクライアントさん
→カスタムUIにしてください！
←どういう感じにしたいですか？
→いや、クライアントさんがそうしたいって言っているんで、なんでもいいです....
クライアントさんも、アプリに関してはド素人だと思います。
アプリを触ってはいると思いますが、作りに関しては素人です。
ちゃんと話を聞いて、噛み砕いて理解する必要があります。
→Androidはメーカーによってデフォルトのデザインが違うから、そろえて欲しいそうです。
←なるほど、そのとおりですね。
←なぜそろえてほしいのですか？
いろいろ話を聞くと、聞き出すことができて、うまくいきました。
クライアントに聞くのが難しければ、こちらから説明してあげる。
UIって複雑なもので、いろいろな理由があることをクライアントに
教えていかないと、ものすごくイイアプリはできません！
クライアントさんにもちゃんとした理由を考えてほしい。
■使うのに適した場面その１
●設定がメインとなるアプリ
10/1 に新バージョンがリリースされて設定画面が奇麗になりました。
simeji は IMEなのでアプリとしては設定画面ばかりです。
中を見ていただくと、チェックボックスで設定をしたりというもの。
設定の項目ばっかりです。
いっぱいあるし.....
これがもしデフォルトのチェックボックスが並んだら....
と、考えると是非変えたいと思いました。
背景が黒ならデフォルトでも良いのですが、
simeji はふんわりとしたテクスチャを使っているので、
カスタムUIにしたいいと思いました。
■使うのに適した場面その２
●世界観をだしたい場合
magic hour
スライダーとか、ON/OFF のボックスも、なじむように奇麗にしています。
grid lens
設定画面がぶっ飛んでる！レイアウトを決める画面とか。
オプション画面が、もう設定画面すらない！ラジオボタンですらない！
世界観を出したい時にはとてもいいと思います。
■そもそもの段階で....
●本当にやるべきかどうかをしっかり考える（コンセプトも考えて）
●予算面
というのもあると思います。予算が無くて出来ない場合も....
確実に工数が増えるので、お金をかけてもカスタムUIにするかどうか。
そういう話をした上で、やると決まったら....
■気をつけることその１
ユーザーが「自分で決めれる」ということがわかるものにしないといけない。
ToDoアプリの例。設定画面。ON/OFF すごく書いてある。
テーマも白か黒か？パッと見て、なんだか良くわからない。
■気をつけることその２
ユーザーが「自分がどういう状態か」というのことが
わかるものにしないといけない。
キャンバスの向き「縦／横」
一瞬、どちらが ONなのか分からなくなってくるような失敗デザインです。
ちょっと工夫して、ちょっと色がつくとわかります。
■気をつけることその３
あくまで脇役なので、必要以上に華美になってはいけない
また、デフォルトと離れすぎるとびっくりする。
ワリカンアプリ The 割り勘 というアプリ
○で囲ってあるのが設定画面。ぱっと見てびっくりしてしまう。
黒板をモチーフとしてあるもの、押すものと分かるものはあるが、
ちょっとびっくりします。
■気をつけることその４
世界観が必要なら、確実にその方向が必要
ここまでが気をつけることと、前置きです！----------------------------
■2. 状態とデザインについて
●チェックボックス
ICSになってから、こういうブルーのデフォルトのチェックボックスがあります。
どういう状態が必要なのか確認していきます。
まず普通のチェックボックス。何もチェックされていない状態。
チェックをします。
押している時は、周りが青くなります。
チェックボックスの四角以外のところも色がかわります。
四角だけだと指で隠れて見えなくなるので、周りも色が変わります。
チェックがつきます。
再度指で押すと、微妙にチェックの色が変わって、
チェックがはずれます。
周りがボワっとなるのは参考になります。
フォーカスしている時、
タッチ端末を使っている時にはあまり見ることはありません。
キーボードをつないでいる時とか？
ディスエーブル。押せない状態の時、ちょっと薄くなっています。
チェックボックスカスタマイズで調べると、
ものすごいいろんな状態があります。
オフの時
オフ／押しているとき
オンの時
オン／押しているとき
simeji もいろいろ使っていて... 茶色いチェックマークが
入るようになっています。詳しくみると....
今周りがボワっとするようになっていて、
チェックボックスを押した時は、周りがボワッと黒くでるようになっています。
行の中を押した時は、周りがボワッとせずに、チェックが入ります。
チェックボックスではなく、行を押した時にボワッとなるのは変なので
止めています。
リソースの中の drawable (xml) 状態をカスタマイズするxmlを入れていきます。
selector という状態を変化させるタグを使います。
item
android:state_checked="true"
android:state_pressed="true"
チェックされているかどうか？
押されているかどうか？
フォーカスされているかどうか？
ディスエーブルの時もあります。
たくさん状態があって、資料を見るだけでも「うぇっ」ってなります。
前半終了。コネタに移ります！
-------------------------------------------------------------
＠asamieee7
11月に Carry ていう iPhone アプリ出ます！
アプリのステッカーを持ってきました！
「渋谷アプリ」の Android をぜんぜん違うUIで出すんだ！
というタイムアウト東京さんのチームにまぜてもらいました。
本題
そのアプリの世界観を具体的に形にできるのは
お客さんじゃない あたしだ！
とにかくたくさん話を聞く
お客さんとたくさん話す
打ち合わせをめんどくさがらない
できればお客さんの熱い想いや、世界観をたくさん聞かないと、
それを聞かないとビジュアルに出来ないと思っています。
箇条書きでデザインはできません！
とにかくああでもない、こうでもないと。
クライアントの脳をできるだけ自分の脳に入れていく。
Photoshop やイラレを使うだけではありません。
だんだんお客さんから
ターゲット／目的
ビジュアルイメージが分かってきます。
思っていることを言えないということもあるので、
いっぱいいろいろ聞きます。
どうも、ターゲットとイメージが合っていない時もあります。
例；National Geographic のアプリを例に....
どうもやろうとしているアプリは全部あってないジャン！
いろいろとかみ合ってないかもしれない...
と、悩んでいる場合じゃないです！
それ、世界観違うかも！ というのも大事なお仕事
勝手な解釈や見当違いはダメ。だまってろ！
違うといいっぱなしはダメ。
別な、こうしてみませんか？という提案を。
実装は大変だけども、世界観を合わせるのが大事です。
教えて、ちひろぴょん！
-------------------------------------------------------------
@adamrocker
Layout Performance 対決！
Android Training の中の Optimizing Layout Hierarchies の紹介
http://developer.android.com/training/improving-layouts/optimizing-layout.html
リニアレイアウトが使いやすい。
horizontal で横に並べて、vertical で区切って、スペーサーを入れて..
基本これでも奇麗にみれます。
Android のハイエラルキーツールで見ることができます。
赤とか黄色とかでていて、重そうなヤバイ感じがしますよね。
RelativeLayout でやってみます。
さっきと同じパーツですが、角を合わせていきます。
高さを合わせたり、横を合わせたり、親のレイアウトの右上にそろえるとか....
さっきと同じものができますが、シンプルな構造になります。
時間を計ってみました。
LinearLayout だと... Measuter 8.8ms , Draw 5ms
RelativeLayout は 2ms Draw 4ms
タイムライン描画だと、100個とか並びます。
だいたい、10%〜20% 速くなります。
プログラムは変えてなくても、レイアウト変えるだけで速くなります！
LinearLayout は使いやすいけどほどほどに
RelativeLayoutで代用できるときはコッチ
RLならレイアウトがスッキリしてみやすい
RL なら LLより 10%-20% ぐらい高速化できる。
-------------------------------------------------------------
2.状態とデザインについて
●スライダー
4.0以降のスライダーデフォルトのもの。
simeji もカスタム UIを使っています。
フリック判定幅のところで使っています。
ちょっとだけ変えました。
デザイナーは仕組みを知っているといいです。
ドーン
三つの部品が重なっています。
オンになっているエリア
オフになっているエリア
つまみ（通常時）
つまみ（押されたとき）
画像でもいいんですが、実はシェイブになっています。
中がグラデーションになっています。
stroke #59cf
startColor #50cf
endColor #0cf
透明度を変えただけですが、奇麗なパーツになてちます。
透明度を変えるのはけっこうアリなテクニックです。
corners で角丸をつけています。
つまみの真ん中の部分が操作している値になると思います。
カスタムUIで書いた時に、それができませんでした.....
つまみを作る時には注意が必要！
だんだん移動してくるのですが、
下のバーの、オフになっているエリアの色の部分が微妙な位置にきます。
半分に来ると、やっと中心になります。
なんか気持ち悪くないですか？
画像の端とバーの右端があうという変な仕様です。
つまみのデザイン
●透過をしたり、特別な形にするときは注意！
●バーの進み具合はつまみのセンターに従ってくれない！
回避方法.....
設定で、真ん中をずらす thumbOffset を使ってみる。
なんでここが切れるの！
なんでこうなるんだ！
つまみのデザイン
thumbOffset を使うと両端が切れてしまう。
ドロップシャドウを用意しておくと、画像のサイズが一回り小さくなってしまいます。
つまみの画像自体は、ピッタリぎりぎりで切れるようにしておきます。
そとに何かを表示するのではなく、押した時に黒くするとかで対処する。
■つまみのデザイン注意１
●できるだけギリギリでスライスする
●プレス時も外回りに影などをつけるのではなく、ぎりぎりまでつかい、色の変化などで対応
バーを shape で作る方法と、9-patch で作る方法があります。
繊細なデザインの時は、9-patch で作ります。細くなります。
スライダーはつまみがネックです！
■シークバー
くるくるまわるヤツ！
いろいろ見た事があると思います。
実はこれ、すごく簡単で、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だけじゃなく、画像でも大丈夫です。
中を bitmap に書き換えることもできます。
かんたんシークバー
回転するものを作っておく
■スクロールバー
皆さん結構変えられますか？
simeji は勝手に変えています。
グレーの普通のスライダーです。
別にデフォルトでも問題無いですが、
微妙に色を変えます。スライダーも shape で作っています。
横向きのグラデーションで角丸をつけています。
意外と簡単なものであれば、コードで表現することが多いと思います。
デザイナーも分かっているといいです。
ちょっと余白が欲しいな... という時
スクロールバーが出ているのですが、上などに余白が欲しい時。
上と右に 2dp づつとっています。
スクロールバー、あんまり注目しなくてもいいかな〜と思います。
どうしてもやってみたかったのは、キャラを入れてみたかった！
ヒモみたいのがあらかじめあり、スライドするとキャラが登る！みたいな。
構造的に言えばそういうのも出来るかと思ったのですが....
9patch でのばすしか無いのかな〜
全体的にネコのキャラクタを入れてしまうと、細く伸びた猫になってしまうので、
やるならこれぐらいなのかな〜
■スクロールバーのカスタマイズについて
●基本的には 9-patch などで伸びる表現が必要
●どの程度余白をとるかを指示
ということで、今日はカスタムUI でした。
■まとめ
●やればいいというものではない
普通のデザインをする以上に神経を尖らせてデザインしなければいけない。
●ユーザーのアクションを妨げない
●とはいえ、デザイナーとして可能な範囲を考えたい
なにかしら世界観のあるデザインをしたい場合がいっぱいある。
やり方、仕組みをしっておくと、奇麗に実装してもらえる。
今日は時間ぴったりに終わりました！
<< Home