マガジンのカバー画像

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

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

#モードレス

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

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

フローティングビューとモードの設計

このアーティクルでは、いわゆる「モーダル(ビュー)」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー(Floating view)」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと