Android Designの超約+コメント PATTERNS編

Android Designシリーズ最終回、PATTERNS編。

http://developer.android.com/design/patterns/index.html

 

■4.0の新しいこと

 

・ナビゲーションバー

ボタン+ステータス。タブレット用の

 

・アクションバー

何度もでてるのでパス

 

・マルチペイン・レイアウト

タブレットとまで使う、2画面同時に表示するやつ。HTMLのフレーム的な。

 

・セレクション

複数選択時・文字選択時など、アクションバーに表示されるようになった

 

 

■ジェスチャー

http://developer.android.com/design/patterns/gestures.html

新しい話とくになし。普通。

 

 

■アプリの遷移の概念

http://developer.android.com/design/patterns/app-structure.html

アプリによって異なるが、基本として、トップレベル・カテゴリー・詳細の3段階。

 

・トップレベル

トップ画面は、初めて使うユーザー・なれているユーザーどちらにとっても好ましいものにしてください。

マーケット画面では、app,music,books,moviesのコンテンツがあることを伝え、おすすめの表示、アクションバーから検索できることなどがすぐわかるようになっています。

 

・トップのアクションバーで考えること

・アイコンとタイトル出す(当たり前..)

・ビュー切り替えがある場合、アクションバーで。

・新規作成的な機能があるなら、アクションバー右。

・検索できるアプリの場合、検索アイコン。

 

・カスタム、デザイン

アプリ内で、アクションバーをカスタムしてデザインしてしまうことはOK。
上の画面は標準にのっとった形で発展される例。ガチガチにこれ守れじゃないってことね

 

・カテゴリ(第2階層)

一覧系。基本的に詳細へのインデックス。
でもアプリ次第なので随時考えるもの。 上はマーケット。

下はYoutube。これもインデックス。

 

 

まとめ

・スタート画面は有用な情報を表示する

・アクションバーはUIの統一に利用を

・タブ(フリック可能)を利用して、情報の階層を浅くしてください。
(すぐ目的にたどりつけるように)

・操作するアプリの場合は複数選択の実装を

・フリックできる情報はチラ見せなども考えて簡単にアクセスできる(わかりやすいように)

 

詳細画面はもうアプリ次第なんじゃないですかね?

 

 

■ナビゲーション

http://developer.android.com/design/patterns/navigation.html

なんかUPだのBACKだのめんどくさく見えますが、要は

・アクションバー左のロゴ部分はTOPに戻る

・戻るボタンは単に1画面戻る

・画面内でフリップで情報かえてるのは、画面遷移とはみなさない。

・通知バーとかから、直で詳細画面にいくことはある(当たり前)

 

こんだけなんじゃないでしょうか。これを把握した上で上のURLの画像みればスムーズ。
上のロゴクリックしたらTOPっていうのもWEBサイトの概念なので、抵抗なさげ。

 

 

■アクションバー

・新規作成とか、検索とか、アプリ内での共通UIとしての利用

・アプリ内でのビュー変更のUI(タイトル下らへんのアレ?)

・あまり用いられない機能へのサポート(テキストのコピーとかの補助とか?)

・そのアプリ内のテーマとしての表現

 

・要素の解説

1.アプリアイコン。

第2階層以下ではトップへ戻るボタンのUI「<」を。

2.画面名。

ビューの切り替えがある場合ここで。ない場合はなにもアクションなし。
(標準的UIで違う機能をつけないルール)

3.アクションボタン

4.メニュー

 

・画面サイズによって変化

画面サイズによって(横に短い携帯・縦画面時)、アクションバー右側を分離して下に移動させるとかアリ。

でも下タブUIするなってあったのとはどうなるんだ?ボタンならいいのか?よくわからんとこ。

↓はアクションバーを分割して、タブの場合の構成

これを見るとボタン類は下でいい気もする。

 

contextual action bar (CAB) 

右クリックメニュー的なもの。選択したものに対して表示されるとか、テキスト選択時にアクションとして表示されるとか。

これはブラウザとGmailでのアクションバーの変化。

・選択されたものに対してのメニュー

・データ選択時に表示

・バックボタンでキャンセル

 

・アクションボタン

アクションボタンの配色はシンプルに。

アクションバーに入れるかどうかの選定は、ユーザーがよく使うものかどうか(Frequent)、重要かどうか(Important)、代表的なものかどうか(Typical

 

 

■タブレット用レイアウトや画面回転

http://developer.android.com/design/patterns/multi-pane-layouts.html

いろいろ説明されてますが、画面サイズや回転によって適したレイアウト対応できるから考えてみるといいよ、的な話。

 

 

■スワイプ

http://developer.android.com/design/patterns/swipe-views.html

詳細みるのに使ったり、タブ間の遷移に使ったり。

 

 

■セレクション

http://developer.android.com/design/patterns/selection.html

長押しの機能が変わった。いままではメニュー出していた(わかりにくいから使われなかった・実装されないことも多かったし)が、OS3から選択する機能になった。Gmailアプリとかで確認を。

選択時はアクションバーでアクションのボタンを。複数選択できないなら長押しに機能を作るなって。

 

 

 ■通知

http://developer.android.com/design/patterns/notifications.html

・通知するべきもの

時刻によるもの。カレンダーのイベントなど

メッセージ着信など、今起こっているもの

 

・通知するべきじゃないもの

重要度が低いもの
(自分に関係ないもの・ドキュメントを保存しましたとか・アプリが回復できるエラーとか・ユーザーがどうしようもないもの・)

 

 

・デザインガイドライン

各要素は上の画像みたまんま。
セカンダリアイコンは何のアプリからの通知か知らせる意味があるので忘れないように。

下は、同じアプリから同じような通知を何度もしないようにする例。できるだけまとめる。

 

・アプリ開いた後は通知を消すこと

 

・ダイアログとトーストとの違い

 

ダイアログなどは、そのアプリが開いている時に出すもの。

唐突になるのでユーザーに理解されにくい。

 

 ■互換性

http://developer.android.com/design/patterns/compatibility.html

ここでは主にメニューがどう なるかの話。

・4.0からのメニュー

アクションバー右側に3点ボタンがつきます

 

 

・物理ボタンがある機種において

メニューボタンは下からリストで表示

 

・旧バージョンのアプリの挙動

メニューボタンは下から表示(旧バージョンと同様)

 

 ■Pure Android

http://developer.android.com/design/patterns/pure-android.html

複数のプラットフォームにアプリを出すことはよくありますが、プラットフォームによってUIは異なります。
一度デザインすれば全てに、という発想は危険。そのOSのユーザーには理解できない可能性あり。
(ゲーム系はそもそも自由にデザインしてるので例外になること多い)

上はAndroid、iPhone,Windows phone7の比較。

上はアイコン比較。標準に沿った上でデザインを。

 

・下タブを使わない

標準ダイヤラーの比較。
下タブは下にある戻る・ホームなどのボタンと押し間違いも起こりやすいので使い勝手の問題がある。
ハードウェアキーの機種だとあんまり気にならなかったんだけどね。これ。

 

・ iPhone風戻るボタンを使わない

その位置には、AndroidではTOPに戻る(UP)ボタンがあるので、同じ位置にあって機能が異なるということになってしまう。

標準にのっとった上でデザインを。

 

・行の左右で設定ラベル・内容を表示しない

そもそも設定を右に遷移して行って、また戻るという遷移はAndroidではしてないので、右に>マークがあるのはおかしいことになる。
ただいま設定されているものがわからないのはわかりにくい。対策としては設定ラベルの下にリード的にいまの設定出すとかになるんじゃなかろーか。Androidの設定画面のこの下の階層ではそうなってるし。

 

 
Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です