読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

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

event android

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で対応するとよさそう
  • まとめ
    • カスタムすれば良いと言うわけではない
    • やるとなったらユーザのアクションを妨げないように考慮すること
    • とは言え、デザイナーとして、可能な範囲は考えていく必要がある

小ネタ1

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

小ネタ2

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

この話はこの本に書いてありましたね、今日ちょうど読んだところでした。
こないだ知り合いとLinearLayoutのが楽だよねとか言う話をしてたのですが、反省します。

Androidプログラミング上達読本

Androidプログラミング上達読本

感想、その他

カスタムUIについてでしたね。
世界観を持つのなら徹底的に!中途半端いくない。
次回は10月25日の予定 → デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第4回】 on Zusaar

追記


Android Layout Cookbook アプリの価値を高める開発テクニック

Android Layout Cookbook アプリの価値を高める開発テクニック

Android UI Cookbook for 4.0 ICS(Ice Cream Sandwich)アプリ開発術

Android UI Cookbook for 4.0 ICS(Ice Cream Sandwich)アプリ開発術