マガジンのカバー画像

UI設計ビジュアライズノート集

15
本
usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート（デザインパターン解説）を収録しています。新しい投稿も随時追加していきます。
コンテンツが増えていくと価格も少しずつ上がっていきます。ご興味があるなら早い方がお得かもしれません。
¥800
運営しているクリエイター
usagimaru

#構造設計

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

UIの構造設計を行う際には、ツリー構造とセミラティス構造の違いを意識すると、それぞれの特徴を活かした形を作りやすくなります。 ツリー構造ツリー構造 (tree structure) とは、ある要素から見た親要素の数が必ず一つで、子要素が0もしくは複数個の階層型をしています。ただし、ルートとなる要素には親要素が存在しません。ちょうどフォルダとファイルのような関係のものです。 ツリー構造はさまざまなところで目にすることができます。コンピュータのファイルシステムのほか、政府や企

usagimaru

ナビゲーション設計の基本／ボトムアップ型設計とトップダウン型設計

ナビゲーションの基本パターンとその設計一覧－詳細（List-Detail） UIのナビゲーション設計では、「一覧 → 詳細」を基本とする構造で組み立てることで、整ったナビゲーションを表現しやすくなります。一覧とは、ビュー表現でいうリスト、カラム、カルーセル、メニューなどのコレクション表現全般です。詳細とは、コレクションに羅列される個々の単体オブジェクトの表現です。 ナビゲーション設計に先立ち、情報の塊をコンテンツと見立てて概念定義に着手しておくと効果的です。 不要なら

usagimaru

アプリケーション中心設計 vs. ドキュメント中心設計

アプリケーション設計の（UIとしての）アーキテクチャには、主にアプリケーション中心設計（Application-Centric Design）とドキュメント中心設計（Document-Centric Design）の二つの型があります。アプリケーションの初期設計の段階においては、これらの特徴の違いを意識して構造設計に反映することが大切です。

usagimaru