マガジンのカバー画像

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

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

#マウスポインタ

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

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

マウスポインタの作用点

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