Android UI勉強会―デザインから実装まで― #androui419 に行って来ました。

作ってるサービス

@thorikiriのてょりっき > 2012-04-20 > Android UI勉強会―デザインから...

2012-04-20

Android UI勉強会―デザインから実装まで― #androui419 に行って来ました。

event, android

Android UI勉強会―デザインから実装まで― on Zusaar

遅こ（ｒｙ

オープニングあたりは聞けなかったです。メモとかまとめとか

Android UI勉強会―デザインから実装まで #androui419 - Togetter

タダだったので、懇親会も出たかったのですが、諸事情によりすぐ帰りました。

エクストリーム フラグメントUIプログラミング

資料

事前に見ておくと良い資料 → Fragment を使ってみよう
ABC2012 Springの資料 → no title
GDD 2011 Japanの資料 → Fragment を使ってみよう
第3回名古屋 Android勉強会 Fragment基礎講座/ハンズオンの資料 → Google Drive Viewer
当日の資料 → Fragment の利用パターン

メモとか

TED - Google Play の Android アプリとInstagram - Google Play の Android アプリを題材にフラグメントの使い方とか設計とかを考えます。

TED
- タブの切替をスワイプで行います。TabHost+ViewPager+Fragmentのパターン。スワイプするとFragmentが切り替わるようにします。
- さらに入れ子になっているタブも切り替わります。
- ListFragment+TabHostでタブ部分もスクロール出来るようになります。タブはListViewのaddHeaderViewでやる。addHeaderViewかどうかを見分けるのは、スクロールバーが動くかどうかでわかります。
- Fragmentで画面を切り替えることによって、Activityを少なくすることが出来ます。Activityの画面遷移よりFragmentでの画面遷移の方が早いのでユーザビリティ的に良いです。
- Fragmentを使いまわすようにしていると、レイアウトを変更したい場合に、修正する箇所が少なくなるので、色々試行錯誤するのも簡単になります。StepByStepでやりましょう。
Instagram
- 下タブの切り替えをFragmentで行なっています。Activity１つでほとんどの画面に対応しています。唯一プロフィール編集だけが別Activtyになっています。
- Fragmentを使いまわすと統一感が出ます。
- 特にListFragmentは使いまわしやすいです。使い回しのパターンは2通りで、Loaderを切替えて使いまわすパターンと、URLを切替えて使いまわすパターンです。Loaderを切り替えるのは、同じデータ・表現だが、取得元が異なる場合に使うのが良いです。例えば、コンテントプロバイダから取得するのと、ネットワークの外から取得する場合などです。URLを切り替えるのは、同じネットワーク越しでもパラメータ等が異なる場合、例えばTwitterのタイムラインと検索とかそういうのだと思います。
まとめ
- Fragmentを使うのが最近の傾向です。乗り遅れるなかれ。
- ActivityとFragmentの使い分けは難しいですが、TEDがやっているように、ナビゲーションに1つのActivityと複数のFragmentで画面遷移をして、コンテンツそのものを表示するActivityは分けると言った感じになるかと思います。
- 使い回しはListFragmentからやっていきましょう、やりやすいです。その時に、Loaderを使うと良いです。

スモールスクリーンむけUIデザインパターン

資料

当日の資料 → スマホデザインパターンなう

メモとか

AndroidとかたぶんHTML5のモバイルアプリでも使えるUIのデザインパターンについてです。デザインパターンとガイドラインは別のものです。

iOSのネイティブアプリのガイドラインはかなりガラパゴスです。ボタンがひとつしかないからだと思いますが、戻るボタンとかを自分で入れていかないといけないのは結構つらいですね。

サイト紹介
- Design | Android Developers
- Android Interaction Design Patterns | 今回の元ネタ
Drill down navigation
- iOSによくあるような画面遷移をしながら階層構造を潜っていくアレです。
- 階層構造が深すぎるものは鬱陶しく感じてしまうので、注意が必要です。特にiOSでは上部の戻るボタンを何度も押さないといけないのが難点ですね。
- タブレットの場合は、左側のメニューから右に詳細を出していく感じですかね。
- 使用例 → ShopSavvy Barcode Scanner - Google Play の Android アプリ
Dashboard
- スタートアップ画面とかに出るアレです。
- どんな機能があるのかわかりやすいのが特徴です。
- 必ず1画面挟むことになるので、鬱陶しく感じることもあるし、アイコンとかに何か一工夫が欲しいところです。LinkedInは見せ方がうまいですね。最近のヒットアプリで使ってるのはあまり無い気がします。
- 使用例 → Evernote - Google Play の Android アプリ, Google+ - Google Play の Android アプリ, ページが見つかりません
Action Bar
- 重要な機能を教えるためのアレです。
- 画面上部にあって見つけやすいですね。メニューキーを押さなくても見てわかります。
- ボタンが小さいと押しにくいし、アイコンのみで表現しなければならないので、アイコンで機能がわかるようにしないと辛いところで、デザインを頑張らないといけません。
- 使用例 → Google+ - Google Play の Android アプリ, マップ - Google Play の Android アプリ, Touchnote ポストカード - Google Play の Android アプリ
Segmented Control
- タブっぽいアレです。でもタブじゃない。
- データの並び替えや絞り込みのToggle的な位置づけで使われたりします。
- タブじゃないので、画面内の表示するデータの種類を切り替える用途では使わないようにして、タブを利用しましょう。picplzはつか方間違ってる気がします。
- 使用例 → Allrecipes.com Dinner Spinner - Google Play の Android アプリ, クックパッド - Google Play の Android アプリ
Expandable List
- 階層化したリストで同じ画面内で開いたり閉じたりするアレです。
- 開くのは1つのみのパターンといくつでも開けるパターンがありますが、見比べたり、どこにあるか探しちゃうような場合があるので、トグル的に他のを閉じるのはやめた方がいいかもです。
- 1つのリスト内のデータが多い場合には、開いたり閉じたりするのが大変なので、データ量を考えて実践するべきです。
- 使用例 → jigbrowser+ ウェブブラウザ - Google Play の Android アプリ
Tabs
- アレです。
- 分野が違うものを切り替える場合に使います。
- 選択肢が沢山あると困りものです。3つくらいに絞れる場合に使いましょう。テキスト（＋アイコン）なので、端的な表現の単語を考えないとダメです。
- 使用例 → Amazon モバイル Androidアプリ - Google Play の Android アプリ, Skype - Google Play の Android アプリ
Carousel
- 部分的に横スライドするマキです。
- 狭いスペースで沢山の情報を提供したい時に使います。
- 横スライドするって気が付かないことがあるのが玉に瑕です。左右に矢印をつけたりすることになるかも知れません。どこが端っこかわからないかも知れません。
- 使用例 → Allrecipes.com Dinner Spinner - Google Play の Android アプリ, Amazon モバイル Androidアプリ - Google Play の Android アプリ
ダイアログとか
- 状況を伝えてくれるアレです。
- モーダルで、ユーザに手を止めて判断して欲しい場合に使います。削除していい？とか、規約に同意する？とかそういうのです。
- モーダレスで、ユーザが手を止めて確認する必要はないけど、○○したよーと伝えるために使います。トーストとかですね。
- 使用例 → Simeji（日本語入力キーボード） - Google Play の Android アプリ, Google+ - Google Play の Android アプリ