デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第3回】 #aadesigns に行ってきました

15分位遅れて行ったので、オープニングトークとかは聞けてません。帰りに雨に振られました。
週末忙しかったので、いまさらですが。

セッション

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

カスタムUI

デメリット
- いつもと違う見た目だとびっくりする
- 操作出来るものかわからないかもしれない
  - アフォーダンスをしっかりしなければならない
メリット
- 端末による違いをなくせる
- アプリデザインの統一感が出る
カスタムUIにしてくださいとのクライアントからの要求に対して
- 何故カスタムUIにするのか
- 本当にカスタムUIにする必要があるのか
- カスタマイズすれば良いと言うわけではない
- 言われたからするのではなくて、本当に必要であるかきちんと会話する必要がある
カスタムUIがハマるアプリ
- 設定がメインのアプリ
  - simeji
- 世界観を仕えたいアプリ
  - 中途半端ではないものはカスタムUIにするべき
  - きちんとコンセプトを考えてからやる
そもそも
- 本当にカスタムUIにするべきであるか考えよう
- 予算面を考えよう
  - お金をかけてまでやる必要があるのか
やると決まったら
- ユーザが意思をもって操作出来るようなものでなくてはならない
  - ボタンやスイッチであれば、押したくなるようなデザインに
- ユーザが今の状態をわかるようにしなければならない
  - スイッチ的なもので、どっちがonでどっちがoffであるかわからない場合がある
- あくまで脇役であり、必要以上ではいけない
  - ユーザをビックリさせてはならない
- 世界観が必要であれば徹底的に

状態とデザインについて

チェックボックス
- 未選択
- 未選択で押しているとき
- チェックしているとき
  - 指にかぶるので、まわりも含めてもわっとする
- チェック状態で押しているとき（チェックをはずすとき）
- フォーカスしているとき（on,offの2種類）
- 押せない時（on,offとフォーカスしているしていないの4種類）
  - 薄い色で無効であることがわかるように
- selectorタグを使う（状態があるもの）
  - チェックされているかどうか
  - 押されているかどうか
  - 上記の組み合わせと、それに対する画像リソースを定義していく
スライダー
- 仕組みを知ってみよう
  - 3つの部品で構成されている
  - オンの状態のバー
  - オフの状態のバー（バックグラウンドになる部分）
  - つまみ部分（普通の状態と、つまんでいる状態）
  - shapeでやる（同じカラーコードで透明度だけを変えると楽出来る）
- つまみのデザインは気をつける
  - 端っこがずれてしまう現象になる
  - android:thumbOffsetを設定すると両端が切れてしまう
  - 画像自体に透過部分を持たせない
  - 出来る限りギリギリでスライスする
  - プレス時には影とかを付けないようにする
- 細いスライダーを作るときは9patchを使って、外側が伸びるようにする
シークバー
- shapeタグのringを使う
- innerRadius, thikness, useLevelをfalseに設定する
- グラデーションはsweepを設定する
- animated-rotateでくるくるさせる
スクロールバー
- 色を変える
  - shapeで横のグラデーションをつける
  - 余白が欲しい場合は上下左右に2dpくらいつける
  - キャラ物とかは、9patchで対応するとよさそう
まとめ
- カスタムすれば良いと言うわけではない
- やるとなったらユーザのアクションを妨げないように考慮すること
- とは言え、デザイナーとして、可能な範囲は考えていく必要がある

小ネタ１

アプリに情熱を持っているのは、デザイナではなくてクライアント
- 世界観を作り出せるのはデザイナ
- デザイナはもっとクライアントの話を聞こう、聞きに行こう
「それ世界観が違いますよね」
- もっと、こうしてみませんか？
- 提案できないなら黙っておけ

小ネタ２

Android Training
- Getting Started | Android Developers
- LinerLayoutより、RelativeLayoutの方がシンプルでいいよ！
Twitterのタイムラインのようなレイアウト
- LinearLayoutの入れ子にしてしまいがち
- Hierarchy Viewer（AndroidのEclipseプラグインの中にあるよ）で確認してみる
  - 階層構造があって黄色や赤になっている
- RelativeLayoutに修正する
  - Viewの角を揃えるような実装をしていく
- Hierarchy Viewerで確認するとフラットな構造でオールグリーン状態になる
14.37msから6.72msくらいへパフォーマンスが改善した
- 10% 〜 20%くらいは早くなる
まとめ
- LinearLayoutは使いやすいけどほどほどにする
- RelativeLayoutで代用できる場合は積極的に使いましょう