マガジンのカバー画像

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

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

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

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

usagimaru

マウスポインタの作用点

マウスポインタは矢印や手などのアイコンで表示されますが、いずれかの1dotの点が実際のマウスポインタとして振る舞い、残りの部分は人間が理解しやすいようにするための飾りです。 この1dotを作用点と呼ぶとすると、マウスポインタの表現として先端もしくは中心点となるようなところを作用点に割り当てるのが妥当と言えます。ユーザーのメンタルモデルを考えた時に、どこに作用点があれば自然と感じられるかを吟味します。 例えば矢印なら鏃の先端、人差し指なら人差し指の先端、虫眼鏡（ズーム）なら

usagimaru

テキストの編集方式

直接操作方式テキストが常に編集可能である場合や、直接的に編集を行いたい場合には、直接操作方式を採用すると良い。テキスト内容は常に変更される可能性が高いため（不安定）、そのような性質のテキストコンテンツに向いている。 編集モードで包んでいない場合には、書き換えられたテキスト内容は即時にデータベースに反映する（モードレスを保つ）。 間接操作方式編集内容の保存や破棄といった編集モードを提供したい場合には、間接操作方式にする。例えばプロフィール編集画面など。 そのほか、ツール

usagimaru

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

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

usagimaru