ひつじのにっき

mhidakaのにっきです。たまに長文、気が向いたとき更新。

【NT-1】たのしい Android: カスタム UI でAndroid アプリにワクワク感を加えよう

矢野りん / adamrocker (日本 Android の会)
インタラクションについて:イージングの活用方法

イージング

ゆっくり加速する動きのこと。アニメーション効果。
動きの変化をつけることで、使いやすさ、見た目の面白さを表現

Tweenerというライブラリがある。

ActionScriptやPyhon、JSで公開されている。
加速特性がいろいろある。 Tweenerリファレンス参照
http://www.tonpoo.com/tweener/misc/transitions.html

どの程度のイージングが妥当か

動きに期待する効果、テーマによる。一般的な解は無い。
自分が気持ちいいと感じるように。

アンドロイドのアニメーション実装

Interpolators
Package android.view.animation

ダイアログに設定する例

テーマダイアログを拡張して、カスタムダイアログを作る
Windows.AnimationStyleを指定
Tensionはアニメーションの動きを決める。ほとんどXMLで設定可能。

デザインカラーについて

カラーコーディネートの効果
ユーザーに操作の違和感を感じさせない。
目立たせたい部分を計画的に出す。ムードを作る

意識して、UIを変える。

  • Dialogのテーマを作成。ボタンの状態によって、画像、色を決める。R.styleほにゃららを設定。
  • アニメーションやデザインで統一感を。横スクロールのアニメーション化

インタラクションとグラフィックでアプリの世界観を構築する

デザインテーマを決める
仮設定例

アンティーク調の布張り手帳
背景画像にウィリアムモリス
ベルベットぽいかんじ
図書館通いが好きな知性的な女性が冒険のつもりで選んだデザイン
こっそり鞄に入れている(妄想w)
内緒なのよ

アニメーション設定

テンション:移動量小、移動するたびに設定しなおすと良い
移動が多いと、アニメーション時間が長いほうがいい。
短いと当然短くなる。時間は線形では問題なのでMath.logなど自然対数を利用
Scroller.startScrollの中身を確認するとStatic Finalだった

オリジナルでメソッドを作成する(同じようなクラスをもう一つ作る、コピペ。)
端末のサイズを考慮して、タブを下に移動

Twitter Acount: @adamrocker, @yanorin

下にアイコンを置く場合は、ハードキーがそばにある可能性もあるので
注意して、置くべき。タブは、下にあったほうが使いやすいよね。
テーマを設定するときにActivtyのアニメーションも可能