オブジェクト指向UIの設計ステップ - ビューとナビゲーションの検討

前書き

今回はビュー同士の呼び出しの関係性について考えていきます。
オブジェクト指向UIにおいて、オブジェクトはアプリケーション内の複数のビューに表示されます。

わかりやすい例でいくと、例えば、生徒名簿をアプリの場合、「生徒」というオブジェクトは「生徒一覧」や「生徒の詳細ページ」に表示されます。
その他にも、成績を管理する「成績一覧」、部活を管理する「部活の所属生徒一覧」などがあります。

基本のビューの形式

オブジェクトの用いたビューの作成において、「コレクションビュー」と「シングルビュー」があり、下記のような認識となります。

「コレクションビュー」とは、複数のオブジェクを集合として表すもの。（下記イメージの左のUI）
「シングルビュー」とは、単数のオブジェクトを表すもの。（下記イメージの右のUI）

アプリケーションの画面構成を考える際、オブジェクトごとにコレクションとシングルビューを準備することから始まる。

メインオブジェクトの「コレクション」と「シングル」のビューについて考える

ビューの基本構成を知るために、メインオブジェクトを「コレクションビュー」と「シングルビュー」について例を出します。

冒頭でも例で説明した、生徒名簿アプリの場合、機械的にメインオブジェクトから各ビューを洗い出出すと、
下記のように各メインオブジェクト「コレクション」と「シングル」ビューの関係性となります。

また、この名生徒名簿アプリに関する、「オブジェクトの抽出」は下記で解説しております。
※参照：オブジェクトの抽出について

この時、シングルビューとコレクションビューのどちらかを省略する場合もあります。

・シングルビューの省略

例えば、ポケモンのバッグをイメージするとわかりやすいです。

「アイテム（持ち物）」オブジェクトとして、コレクション画面で表示されており、UIの下部に詳細情報が表示されるデザインとなっております。

コレクション内に「アイテム（持ち物）」の詳細情報を表示することで、「シングルビュー」が省略するということもできます。
省略するかどうかは、プロダクトの方向性やレイアウト面積などによって変わります。

・コレクションビューの省略

例えば、ポケモンの「ボックス」をイメージした場合、下記のようになります。

ボックスというオブジェクトがあり、ボックス自体は複数存在します。
また、ボックス内には捕まえたポケモンが格納されている状態です。

上記の例においては、「ボックス」にアクセスした時、初期で表示されるのは「特定のボックス」が表示されます。
ということは、ポケモンのボックスは「コクションビュー」を省略し、「シングルビュー」が適用されている状態ということがわかる。

コレクションビューとシングルビューの呼び出しの関係

次にコレクションビューとシングルビューの呼び出しを整理していきます。
メインオブジェクトである「組」と「生徒」用いて、ビュー同士の関連性を表現すると下記になります。

メインオブジェクト同士の繋がりから「参照可能性」を導き出して、呼び出しの関係性を定義することが可能です。
上記の場合、「生徒（シングル）」から「組（コレクション）」と「生徒（コレクション）」が参照されないことがわかります。
※「生徒（シングル）」から「組（コレクション）」と「生徒（コレクション）」は直接の関連性を持たないので、参照する意味を持ちません。

ルートナビゲーション項目選定の原則

ルートナビゲーションを選定する際は、「メインオブジェクト」の中から抽出して、ルートナビゲーションに配置する項目を選定します。
また、ルートナビゲーションとは、アプリケーションにおける、最上位のナビゲーションを指します。

学校における生徒から見て、特に重要なオブジェクトを選ぶとが大切です。
下記が項目選定の際に特に重要な注意事項となります。

• ルートナビゲーションのには、メインオブジェクトから特に重要なものを並べる。
• ユーザーがアプリケーションを使用する上で、最初に思い浮かべるオブジェクトを選定
• アプリケーションは「機能」ではなく「もの」が並んでいるイメージ
• 動詞ではなくオブジェクト名を用いる。
• オブジェクト名の語尾に管理・一覧・確認のような言葉は使わない。
• ルートナビゲーションを選択すると、そのオブジェクトの「コレクションビュー」が表示されること。