Product Design Wiki

コレクションとシングル

シングルとコレクションは、アプリケーションにおける「ビュー」のパターンです。
OOUIデザインの文脈で使われています。

「ビュー」とは、ユーザーが実際に画面上で目にするひとまとまりの情報表示領域のことです。
オブジェクトはビューを通して画面上に表現され、ユーザーに知覚されます。

そして、ビューは大きく「コレクション」と「シングル」に分類することができます。

コレクション

コレクションとは、ひとつのビューの中に同種のオブジェクトを複数並べて表示するものです。
代表的なUIとしては、リストやカードを用いたグリッドレイアウトなどが挙げられます。

例:メールアプリにおける「受信ボックス」。ビューの中に、複数の「メール」オブジェクトが並んでいます。

シングル

シングルは、ひとつのビューでオブジェクトひとつ分を表示するものです。
通常はコレクションよりも多くの属性を表示します。

例:メールアプリにおける「メール詳細」。本文や宛先などが、受信ボックスよりも詳細に表示されます。

ビューとレイアウトの設計

ビューの設計時には、オブジェクトに対してコレクションとシングルのふたつのビューを設けることが一般的です。
多くのアプリケーションでは、各オブジェクトの一覧画面がコレクション、詳細画面がシングルにあたります。

コレクションとシングルをレイアウトする際、それぞれを別の画面に分割する方法もありますが、デスクトップアプリケーションなど広い面積が使用できる場合、領域を分割して1つの画面内に配置することも可能です。

メールアプリの例

コレクションとシングルを別の画面に分割する場合
メールの一覧と詳細をそれぞれ別の画面に配置する。

コレクションとシングルを1つの画面内に配置する場合
横長の画面を左右に分割している。左側にメールの一覧、右側に本文などの詳細が配置されている。

参考