Android Design ざっくりレビュー
•
2 likes•1,522 views
Android端末で画面設計を行うにあたり要点を押さえておくべく、Google社公式の設計ガイドライン "Android Design"で必要そうな部分をピックアップしました（口頭で話すこと前提の資料なので、これだけだとわかりにくい部分があるかと思いますが）
Recommended
More Related Content
Viewers also liked
Similar to Android Design ざっくりレビュー
Similar to Android Design ざっくりレビュー (20)
Android Design ざっくりレビュー
- 3. はじめに：デザイン原則 3
- 4. はじめに：デザイン原則 4
- 5. はじめに：デザイン原則 5
- 6. スタイル：タイポグラフィ 6
- 7. スタイル：タッチフィードバック Android UI要素のほとんどはタッチフィードバックを内蔵している 何が起こるかを⽰示す スクロール領領域を⽰示すために （サムネイルのスワイプでサムネイル消去→薄くする） 境界線を設ける 7
- 8. スタイル：測定基準とグリッド このトピックに関してはマイクロソフトのガイドラインのほうが親切切です h,p://msdn.microso4.com/ja-‐jp/library/windows/apps/hh465415.aspx ミスタップ率率率 ターゲットサイズのガイドライン 8
- 9. パターン：アプリの構造 トップレベル ビュー カテゴリビュー （必要であれば） 詳細・編集 ビュー 9
- 10. パターン：アプリの構造 トップレベルビュー コンテンツを全⾯面に置く ナビゲーションのためにアクションバーを⽤用意する アプリのためにアイデンティティを作る 10
- 11. パターン：アプリの構造 カテゴリビュー カテゴリや情報の塊を⾒見見せるためにタブを使う • カテゴリが密接に • スクロールするタブ 関連しない場合は • カテゴリが⼀一般的・ 固定タブ 予測可能・密接に関 • 異異なる機能をすぐ 連している場合 に切切り替えられる • 項⽬目は5-‐7個程度度に ように 階層を⾶飛び越えさせる（⾳音楽アプリ） 複数のアイテムに操作が⾏行行えるようにする 11
- 12. パターン：アプリの構造 詳細・編集ビュー レイアウト • 詳細ビューでユーザがやりたいこ とを考え、それに沿ったレイアウ トにしてください • コンテンツに没頭することが必要 な場合、コンテンツをフルスク リーンで表⽰示し、ナビゲーション を「消灯」する 詳細ビュー間の移動ナビゲーションを設ける Gmailアプリはスワイプしてメッセージを切切り替えられる ギャラリーアプリはスワイプで画像を切切り替えられる 12
- 13. パターン：ナビゲーション 2つの「戻る」（Back と Up） Backキー Upキー • Backキーはどの画⾯面にも⽤用意、Upキーは下層のみ⽤用意 • BackキーとUpキーはほぼ同じ動作をするが、Upキーがアプリ内にとどまるのに対し、Backキーはホーム 画⾯面や異異なるアプリにも戻る • 階層的でない場合にもUpキーは⽤用いる。その場合の動作はBackと同様（ウィザードとか？） • ビューの切切り替えはUpとBackに影響しない（操作履履歴はそのまま） 13
- 14. パターン：ナビゲーション 2つの「戻る」（Back と Up） これはビューの切切り替えなので “3 details” これは画⾯面の切切り替えなの Upについて、本カテゴリの場合は本 でBackを押した場合、”list” に戻る で “2 details” でBackを押し トップに戻るUpを、映画カテゴリの場 た場合、”1 details” に戻る 合は映画トップに戻るUpを⽤用意する 14
- 15. パターン：アクションバー • Androidアプリで最も重要な構成要素 • 4つの⽬目的 • 重要なアクションに⽬目⽴立立っていて、予想しやすい⽅方法でアクセスできる • アプリ内で⼀一貫したナビゲーションを提供し、アプリ内でのビューの切切り替えをサポートする • めったに使われないアクションに対して、アクションオーバーフロー（？）を提供し、複雑さを減らす • アプリケーションにアイデンティティを与える専⽤用のスペースを提供する 1. アプリアイコン • 最上位階層以外ではUp⽤用のアイコンを表⽰示すること 2. コントロールビュー • ビューの切切り替え（データを複数の⾒見見せ⽅方で⾒見見せる）が⾏行行えるようにする • ここでドロップダウン（スピナー）を提供するかタブを設ける 3. アクションボタン • 最重要アクションを⾒見見せる • 収まらない場合はアクションオーバーフローに⾃自動的に移される 4. アクションオーバーフロー • あんまり使われないアクションを置いておく 15
- 16. パターン：アクションバー 画⾯面回転への対応 分割アクションバーの概要 縦置きの場合にアクションバーを分割する 1. メインアクションバー 2. トップバー • ビューを素早く切切り替えられるようにするため にタブかスピナーを⽤用意 3. ボトムバー • アクションとアクションオーバーフローを⽤用意 16
- 17. パターン：アクションバー コンテキストアクションバー • 特定のサブタスクの間、既存のアクションバーに重 なる形で現れる⼀一時的なアクションバー • データやテキストを操作するタスクでよく使われる 17
- 18. パターン：アクションバー アクションバーの要素 タブ 固定とスクロール可能なものがある スピナー タブよりスピナーが向いている場合 • タブバーのために貴重な領領域を使いたくない • ビューを頻繁に切切り替えない 18
- 19. パターン：アクションバー アクションバーの要素 アクションボタン • どのボタンがよく使われるか想像してみて • Gmailではこんな感じのボタンが使われているよ 優先度度をつけるためにFITの原則を使おう F ― Frequent(頻繁に使われるか？) • ユーザがはこの画⾯面を10回開く時に、7回はこのアクションを使いますか？ • このアクションは何度度か連続して使いますか？ • このアクションを⼊入れないようにして、毎回余分なステップを踏むのは⼤大変ですか？ I ― Important(重要か？) • それは超クールか、ウリになる点なので必ず⾒見見つけてほしいものですか？ • それがほんとうに必要ですか？レアなケースを楽にするためのようなものではないですか？ T ― Typical(典型的か？) • それは類似したアプリでも⼀一般的に⼤大切切なアクションとされていますか？ • そのアクションがアクションオーバーフローへ隠れたとしたらユーザは驚くでしょうか？ 上記のいずれかに該当したら、アクションボタンに⼊入れるのは適切切です。 そうでないとしたら、アクションオーバーフローに⼊入れましょう。 19
- 20. パターン：アクションバー アクションバーの要素 アクションオーバーフロー • あまり使われないアクションへのアクセスを提供 • ハードメニューキーを持たないスマホでのみ、ボタンが表⽰示される。ある機種ではメニューキーを 押した時にアクションオーバーフローが表⽰示される どのくらいのボタンがアクションバーに⼊入るか？ • 画⾯面密度度（dp）による • スマホだとアクションボタンは2,3個程度度 ◯ アクションボタン ＝ オーバーフローアイコン 20
- 21. パターン：⽣生粋のAndroidアプリになるために 他のOSの要素を持ってきちゃダメ 他のOS独⾃自のアイコンを持ってきちゃダメ 下部にビュー切切り替えタブバーを使わないで アクションバーアイコンに戻り先の “ > ” を使わないで ラベルを付けたUpキーを使わないで • タブは最上段におこう • 分割アクションバーでは下段も • プラットフォーム全体で “>” は 使う可能性がある 使わないようにしているため • ユーザが瞬発的に戻れるように • 「ビューの切切り替え」と「アク するため ション」を混同しないようにこ うしている 21
- 22. UI部品たち タブ グリッドリスト • 割愛 • 画像の集合みたいなデータを表⽰示するときに便便利利 • 何回出てくれば気が済むんすか • 垂直型と⽔水平型の２種類がある • 途中で要素を⾒見見切切れさせてスクロール⽅方向を⽰示唆する リスト 1. セクション分割線（リスト内容のグループ化） 2. ラインアイテム（項⽬目ごとを区切切る） ラベル付きグリッドリスト 22
- 23. UI部品たち ボタン テキスト欄 • 境界線のある・なしの2種類 • 1⾏行行⼊入⼒力力と複数⾏行行⼊入⼒力力の2種類がある • アイコンのみ、テキストのみ、アイコン＋テキスト • テキスト欄をタップすると、カーソルとキーボードが表⽰示される • 基本的に内容があふれたらカーソルが（右や下の⾏行行に）勝⼿手に移動 • ⼊入⼒力力内容に応じたキーボードを使おう • 基本は境界線ありのパターン • ⼤大きめのボタンと⼩小さめのボタン • ⼤大きめのボタンは「決定」などフォームの外側に配置し、⼩小さめの ボタンは「住所に変換」など他のコンテンツと並べて⽤用いる シークバーとスライダー • ⼤大したこと書いてないのでノーコメント • 境界線なしのパターンはこんな感じ • ビジュアル的にあまりうるさくしたくない場合に 23
- 24. UI部品たち フィードバック スイッチ プログレスバー チェックボックス • 進捗具合がわかっている場合 • 進捗を⽂文字で⽰示さないこともできる ラジオボタン アクティビティバーとアクティビティサークル • 進捗具合がわからない場合 トグルスイッチ（ON/OFFスイッチ） 24
- 25. UI部品たち ダイアログ アラート 1. オプションのタイトル領領域 • タイトルバーのある・なしの2種類 2. コンテンツ領領域 • あるバージョンはハイリスクな操作に限定し、ほどほどに使おう 3. アクションボタン • 内容はわかりやすく簡潔に（短く鋭く愛をこめて）アクションボタ • 否定を左に、肯定を右に ンとの関係が明確にわかるように よくあるダイアログの例例 トースト • 軽いフィードバック • 例例えばメール書いてる時に新着メール→「メールを下書きに保存し ておきました」 • ⼀一定時間経つと勝⼿手に消える ポップアップ • ユーザに１つ選択してもらうダイアログの軽いバージョン • キャンセルなどはない。選択か枠外タッチで元に戻れる 25
- 26. UI部品たち ピッカー • 上下⽮矢印タッチ以外にキーボードやスワイプジェスチャでも操作できる • インラインでも使えるけど、きちんと⼤大きな画⾯面を確保するのが最適 • ⽇日付と時間のピッカーもあります 26
- 27. リソース ステンシル アクションバー⽤用アイコン まとめて ダウンロード 標準フォント（Roboto） 標準カラーパレット 27