2012年7月12日木曜日

Google I/O 2012 セッションまとめ : So You've Read the Design Guide; Now What?

So You've Read the Design Guide; Now What?

デザインガイドラインを実際に使ってアプリをよりよくする方法についてのセッション


■ Standardize in DPs
  • mdpi で 1px = 1dp (mdpi : 160, hdpi : 240, xhdpi : 320)
  • xhdpi は mdpi の 2倍(Galaxy Nexus は xhdpi)

  • Galaxy Nexus : 360 x 640 dp
  • Nexus 7 : 600 x 960 dp
  • Xoom : 800 x 1280dp

  • dp 単位でコミュニケーションするようにする(デザイナー、開発者間)と間違いが減る
  • 4dp Grid(Metrics and Grids
  • ステンシルを使う(ここからダウンロードできる)
  • Android Design Preview tool : デスクトップ上の領域をデバイス上にミラーリングできる

  • LinearLayout のネストをさける
    RelativeLayout や GridLayout(support package に backport された) を使う
  • LinearLayout での weight の使い方
    weight で分配されるのは android:width や android:height の実際のサイズの残り


■ Holoテーマのカスタマイズ
  • ベースのテーマを選ぶ(Light, Dark, Light with Dark Action Bar)
  • Action Bar の色を変える(ハイライトと影を忘れずに)
  • アプリのアイコンではなくロゴを使うという選択肢
  • ボタンやチェックボックスをカスタマイズする際は state に対応することをを忘れずに
    Normal, Focused, Pressed それぞれの on/off で6スタイルは最低用意すること
  • 全てのコンポーネントをカスタマイズすることができるが、手間がかかる(システムは様々な解像度用の画像などをあらかじめ用意している)
  • オススメはメイン画面を変えること(例えば YouTube アプリはほとんどがデフォルトの Holo テーマだが、HDボタンの下線、動画のシークバー、タブに赤色を使っている)
  • システムデフォルトのカラーを押せる部分の背景に使うには selectableItemBackground 属性を利用する android:background="?android:attr/selectableItemBackground"
  • Focused 状態のテストにはキーボードを使うとよい(Bluetooth キーボードとか)


■ Iconography
  • Icon Pack (ここからダウンロードできる。ベクター形式になってる)
  • 各解像度用のアイコンを用意するのがよいが、それをしたくない場合は一番高い解像度のアイコンを用意する

  • 新しい Icon wizard を使う([New] - [Other] (もしくは Command + N)-[Android] - [Android Icon Set])
  • Android Icon Set で Notification アイコンを作成しようとすると、version に応じて適切な背景色や文字色にしてくれる


  • Lint ツールで画像の重複や画像のサイズ(ActionBar のアイコンとして適切なサイズかなど)をチェックしてくれる


■ Fragment
  • 7inch は tablet と phone の中間。どっちのように振る舞ったら良い?

    縦画面では phone のように、横画面では tablet (2 pane) のようにすると、画面内のレイアウト的にはよくなるが、画面を回転したときに 2 pane → 1 pane になるとユーザーが元いた場所を見失ってしまう。
    タブレットでは(例えばカーナビとして使ってるなど)回転はよくおこることなので、回転時に pane 数を変えないようにする(このコンセプトを rotational stability と呼んでいる)。
    People アプリでは縦画面のときには左側の pane が狭くなるようにサムネイルが出ないようにして 2 pane でも使えるレイアウトになっている。


■ Testing layouts
  • 大きいデバイスで小さいデバイスをシミュレートする
    Zoom で :
    adb shell am display-size 1024x768

    Nexus7 で :
    adb shell am display-size 852x480

    Reset するには :
    adb shell am display-size reset

    ・density は変えられない

    ・Android はラインタイム中の画面サイズ変更をネイティブにサポートしているわけではないので、いくつかのアプリケーションはクラッシュする可能性がある(最悪の場合にはホームボタンへのアクセスできなくなる)

    ・デバイスのバケットを切り替えないほうがいい (システムのハードキーがないデバイスでハードキーが必要なデバイスのシミュレートは危険) (10 inch から 9inch にするのはいいが、phone サイズにするとシステムは多くのことを再構成しないといけないのでクラッシュする可能性が高い)

    ・Bluetooth キーボードを使っていれば、Back や Home キーがあるのでデバイスを使うことができる

  • Emulator をつかう

    AVD で既存のハードウェアの解像度等を指定できる Device: という項目が増えた
    (でも ADT20 にしてもこの項目でてこないよ。。。)

  • Eclipse で Graphical Layout 上で複数の画面サイズをサムネイルでチェックできる機能が増えた
    (でも ADT20 にしてもこの機能でてこないよー。。。本当は Graphical Layout の上部の default 部分のドロップダウンを開くと Preview Al Screen Sizes とかがあるそうなのだが、現状ではまだ Create New... しかない)

    本当はこうなるらしい


    けど、まだこの状態


■ targetSdkVersion
  • targetSdkVersion はアプリが動作する最小の SDK version ではない。それは minSdkVersion。 maxSdkVersion というのもあるが、通常は使わないことが推奨されている。なぜなら、ユーザーがデバイスをアップデートしたときにアプリを利用できなくなる可能性があるから。 targetSdkVersion は対象としてテストした最新の SDK のバージョン。 デバイスのバージョンよりも古いバージョンを targetSdkVersion に指定している場合、システムは様々な部分に対してコンパチビリティモードを追加したり切り替える。例えば、targetSdkVersion="8" のアプリを Honeycomb タブレットで動かすと、Notification の色を変えたり、Dialog のテーマを古いものにしたり、Zoom mode を有効にしたり、Menu キーを表示したりする


■ QA

Q. theme の attribute の補間はどうやったらでますか?

A. ADT20 でサポートを追加したが、コード補間はまだ動いてなかったと思う。次のバージョンで入るかもしれない。


Q. ベータバージョンのツールは利用できますか?

A. ツールはオープンになっているし、adt-dev Google group でディスカッションできる。我々は外部の Gerrit AOSP ツリーにチェックインしているが、ここで見せた multi-configuration 編集はまだチェックインされていない。でもすぐに使えるようになるよ。


Q. Google+ の左上のメニューを押したときのようなレイアウトが作るのに困っています

A. 次のセッションにその質問に最適の人がでるので、そこで聞いてみてください


Q. どういうスタイルのコラボレーションがいいですか(開発者とデザイナー間で)?セッションで見せたツールは開発者が使うべき?それとも開発者とデザイナー両方?例えば Photoshop ファイルをメールでやりとりするようなことはしたくないのです。

A. うーん。我々は近くに座って、それぞれの作成物を互いに見せ合います。我々のエンジニアのほとんどは Photoshop の使い方を知らないです。ほとんどは GIMP です。よく見る結果は GIMP の出力ですw 本当に本当に利益をもたらすのは、一緒に座って一緒に働くことです。そして自分のデザインワークを見せてつねに話し合うことです。そうすれば、より短いイテレーションサイクルをとることができるでしょう。tool team が開発しているツールはほとんど開発者向けですが、ギャップを埋めるようなものにしたいと思っています。Photophop のパーツと 9 patch ファイルの間のような。

デザイナーがデザインからパーツ(assets)を取り出す実際のプロセスを開発者に示すのもオススメです。 バージョンコントロールツールを使うのは良い手ですが、問題はデザイナーにGIMPの使い方を教えないといけない点です。


Q. ガイドラインに載っている他のカラーでのパーツは stencil として用意しないのですか?

A. できるけど、リリースするのはすごく大変なので、、、この二人(スピーカーで開発者の二人)がコードで解決するとかw


Q. runtime で selector ファイルを作るとうまく動かないです

A. runtime で作成しないで XML で作ってください


Q. ダイアログの Ok, Cancel がバージョンで変わるのにどう対応すればいいですか?

A. Lint のチェック機能があります。残念ながら自動で配置してくれる機能はないです。独自のレイアウトを作る場合は v14 以降と以前で順番を変えてください。


Q. Photoshop で最初につくるキャンバスサイズはいくつですか?

A. すごい大きいです。2560x1600。さまざまな解像度のデバイス用のパーツを一度に配置できるようにしてます。ビギナーは mdpi で初めてなれてきたら xhdpi を基準に作るといいと思います。いいツールを今用意しているところです。


Q. 画像とXMLで生成した場合(shapeのこと)とではどちらのパフォーマンスがいいですか?

A. 通常は bitmap です。runtime 時にすることが少ないからです。でも具体的にどうするかに依存すると思います。


Q. 開発者です。デザイナーによくレイアウトXMLの Graphical Layout を見せるのですが、テキストや画像の多くが runtime に配置されるので、そこになにも出ないことがあります。いい方法はありますか?

A. いま取り組んでいることは、Fragment や ListView のようなウィジェットで、実際の runtime 時に配置されるデータを Graphical Layout で置くことです。実際の text 属性には置きたくないが、デザイン時のプレビューとして文字列が見たいという要望は受けています。我々がやりたいことの一つです。今あなたができることで簡単な方法はビューのサブクラスを作って View の isInEditMode() を利用するとツールでは動きます。でもすごくいい方法というわけではありません。


Q. ListView や GridView で実際の子要素のレイアウトを Graphical Layout で見たいのですが

A. デザインのときだけのレイアウトを作って、プレビューレンダリングとして利用できます。


Q. Launcher アプリが portlait しかサポートしてないのはなぜですか?

A. いい答えをもってないです。すいません。



2 件のコメント:

  1. eToro is the most recommended forex broker for new and pro traders.

    返信削除
  2. Are you looking for free Google+ Circles?
    Did you know you can get these AUTOMATICALLY & ABSOLUTELY FOR FREE by getting an account on Add Me Fast?

    返信削除