見出し画像

UI構造

階層

平面な画像上で階層の関係を伝えることが大切。
分かりやすい、使いやすいUIに直結。
背景の色だったり、シャドウだったりで表現する。
明るい方が手前、暗い方が奥と認識する性質を活用する。

状態の切り替え

状態の切り替え時は、
モーダルで表示させる。

親子関係にはなく、
別の状態、別のモード。

UIの3要素

UIを構成している3つの要素
・ナビ
・コンテンツ
・アクション

これらは、
ページ全体にも該当するし、
コンテンツ内などにも該当する。

これらが把握できていると、
配置に迷うことが少なくなる。

アクションに関しては、
「何に対するアクションなのか」が明確に伝わるように、
『何に』の近くに配置することが重要。
ページ全体に対するアクションなのか?
コンテンツの一部に対するアクションなのか?


いいなと思ったら応援しよう!