見出し画像

ツリー構造 vs. セミラティス構造

UIの構造設計を行う際には、コレクションの設計でツリー構造とセミラティス構造の違いを意識するとそれぞれの特徴を活かした形を作りやすくなります。

ツリー構造

ツリー構造の説明図
ツリー構造

ツリー構造 (tree) とは、ある要素から見た親要素の数が必ず一つで、子要素が0もしくは複数個の階層型をしています。ただし、ルートとなる要素には親要素が存在しません。ちょうどフォルダとファイルのような関係のものです。

ツリー構造はさまざまなところで目にすることができます。コンピュータのファイルシステムのほか、政府や企業の組織図だったり、物や建物の構造を分解するとツリーの形が現れます。人間は物事をツリーでまとめると構造を把握しやすくなるので、散らばった情報をまとめる手段の一つとしてツリー構造を検討すると良いでしょう。

ツリー構造の欠点は、親要素を一つしか持つことができない点です。
(※これは利点と捉えることもできるかもしれません。)

例えば本を分類別に棚に整理したいとなったときに、何を基準にしてまとめるのが適切でしょうか? タイトル順、著者順、テーマ順、年代順、発行国順、言語順などさまざまな分類方法を検討できます。しかし採用できるのは一つのみです。なぜなら、親要素は一つしか持つことができないので、例えば五十音順にしたら「あ」から始まる本は「あ」行グループの棚にしか所属させられません。

あるものを複数の親に所属させて配置を検討するには物理的にどうしても限界が生じます。この場合は間接的な目録を採用して情報レベルで索引を複数個用意するのが無難かもしれませんが、いずれにしろどれか一つの構造を採用して運用まで含めての広い検討が必要です。

物理的な配置にとらわれにくいソフトウェアの場合はもう少し柔軟に考えることも可能です。ある画面ではタイトル順、別の画面では種類順、それを1クリックで切り替え可能というようなUIもソフトウェアなら容易に実装できます。

ここから先は

1,218字 / 1画像
コンテンツが増えていくと価格も少しずつ上がっていきます。ご興味があるなら早い方がお得かもしれません。

usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート(デザインパターン解説)を収録しています。新…

この記事が気に入ったらサポートをしてみませんか?