【学習記録】オブジェクト指向UIデザイン:第3章 実践プロセス2
前回のまとめ👇👇👇
前回の実践編の続きです。
今回はビュー(画面)とナビゲーション(画面動詞の関係性)を作っていきます。
実践プロセス2:ビューとナビゲーションの検討
0.言葉の定義
ビュー:画面
ナビゲーション:ビューとビューの呼び出し関係
基本のビュー形式を検討する
ビューの種類は下記の2つ。
コレクション
シングル
画面を考えるときは、各オブジェクトごとに「コレクション」と「シングル」のビューを与える。
一般的な人の行動は、身の回りの眺める→近寄って詳細を確認する。これに倣ったのが「コレクション」と「シングル」のビュー。
メインオブジェクトに「コレクション」と「シングル」のビューを与える
コレクションビューからシングルビューを呼び出す流れを示すには、コレクション→シングルといった形で矢印で繋げる。
一旦すべてのメインオブジェクトに、上記の作業を機械的に行う。ただし、
最終的にはシングルビューを省略する場合もある。
例)1つのメインオブジェクトに対し、属しているサブオブジェクトが少ないケース(サブオブジェクトの一覧だけで事足りる場合)
ただし、この作業段階でシングルビューを削除するか否かの判断はしなくてOK。
また、コレクションビューを省略する場合もある。
例)アカウント情報。アプリケーションの中に1つしか存在しないような情報は、コレクションビューで一覧を表示する必要がない。(アカウント情報内に各種設定が存在する場合は、コレクションビュー→シングルビューである必要はある)
ただし、アカウントの管理者が複数のアカウント情報を管理するケースなどはこれに当てはまらない(シングルビューが必要)。
コレクションビューとシングルビューの呼び出し関係を検討する
オブジェクトの抽出時に特定したメインオブジェクト同士のつながりと、メインオブジェクトの多重性を手がかりに、さらにナビゲーションとしての呼び出し関係を深ぼる。(多重性来た!!)
例)組と生徒の関係
組は、生徒に対して多重性を持つ(組には複数の生徒が属している)
組(シングルビュー)→生徒(コレクションビュー)→生徒(シングルビュー)のナビゲーションが生まれる
生徒は、組に対して多重性を持たない(生徒は一つの組にしか属すことが出来ない)
生徒(シングルビュー)→組(シングルビュー)のナビゲーションが生まれる。
生徒(シングルビュー)→組(コレクションビュー)は生まれない。
参照可能性…互いに関係するオブジェクトの間で、それぞれの多重性に従って参照される状態にある、ということ。
通常は、特定のオブジェクトのシングルビューが参照元となる。参照先は多重性の有無で変わる。多重性がある場合:もう一方のコレクションビューが参照先となる。(組シングル→生徒コレクションの例が該当)
多重性がない場合:もう一方のシングルビューが参照先となる。(生徒シングル→組シングルの例が該当)
ただし、すべての参照可能性をUIとして実装する必要はない。あくまで画面を想定しながら、必要なものを実装する。
メインオブジェクトの中から、ルートナビゲーション項目を選定する
ルートナビゲーションは、アプリケーションにおける最上位のナビゲーションである。特に重要なメインオブジェクトを選定するが、基準としては下記の通り。
アプリケーションを使用する際に、指向の起点となりうるオブジェクト
アプリケーションを「機能」ではなく「もの」がなれんでいるイメージで捉える
動詞ではなくオブジェクトを並べる
オブジェクトの語尾に「管理」「一覧」「閲覧」「確認」「紹介」「参照」「登録」「情報」「編集」などの動詞を付与しない(冗長になるため)
ルートナビゲーションをタップした時、そのオブジェクトのコレクションビューが表示されるもの(※コレクションビューが省略されている場合はこれに該当しない)
また一方で、下記のようなオブジェクトは優先順位を下げる。
特定のオブジェクトからしか呼び出されないオブジェクト
ユーザーが参照する頻度が低いもの
所感や気付きなど
前回の実践プロセス1のまとめにて、「多重性っていきなりなんだんだ!!」と言ってましたが、実践プロセス2でちゃんと出てきました。ナビゲーションの検討に必要なんですね〜。目的が分かるとスッキリします。
今回私が作ろうとしているアプリは、メインオブジェクトが少ないので、ルートナビゲーションの項目選定が若干悩ましいな、と感じました。
前提として、ルートナビゲーション(以下、タブと同義とします)には動詞を並べないようにしようとのことでしたが、これはオブジェクトがたくさんある場合に有効なのかな、と個人的解釈をしました。
根拠としたのはGoogleフォトのアプリです。実際に見てみると、ナビゲーションの項目は「フォト」「検索」「共有」「ライブラリ」など、検索と共有という動詞は含まれていたためです。(あとは、Instagramなんかでも「(写真の)投稿」とかありますよね)
でもこれは厳密には「Bottom App Bar」であって別物かしら…?(また迷走)この辺はまた、マテリアルデザインを読んで見ようと思います。
ちなみにHIG(GoogleマテリアルデザインのiOS版)においては、タブ内にアクションを置くことをNGとしているようでした。
その他、参考にしたもの
この記事が気に入ったらサポートをしてみませんか?