UIビジュアル基礎 TRY6 UI構造を意識してリデザインしよう！
お題
リデザインするポイント
①階層の関係
②UI基本構造
③モードチェンジ
お題スライド
今回のリデザインはこちら！
所感
UIビジュアル基礎 TRY6 完了
【作業時間】
動画視聴 90分
デザイン 120分
リデザイン 20分
【所感】
階層構造の理解はこれまでの勉強で身に付いてきていることを感じた。概ね解答動画とのズレはなかった。
モードとモーダルの概念は理解が進んでいるが、未だに難しい
モードとモーダルの作成をしていないために理解が難しい部分もあるはず。作成していく中で理解を深めていく。
スマホを使うなかで、モードとモーダルを意識できるようになってきた。共通項を自分なりに把握して実践していけるようにしたい。
【反省点】
YouTubeの動画作成画面を参考にすることで手早く作成することができたものの、似たり寄ったりの画面になってしまった。
⇒似たり寄ったりの画面になってしまうのは仕方がないが、全く同じにならないようにしていく。コンテンツの選択中の背景色をグレーにしてしまった。
⇒グレーは際立ってないけど、大丈夫かな？と思いながら選んでいた。白背景色にするかグレーにするかのパターンを出した方がよいリデザインでは、背景色で階層構作るように工夫・アイコンをアクションのところに配置・アクションのとこに配置したアイコンの説明・概要文が小さく視認性を上げるなどの対応をした。
平面の”階層”表現について
ポイント
平面の中に凹凸を設計、使いやすいUIを作る1歩に～！
階層構造を知るメリット
情報構造でわかりやすく伝える
ボタンなど押しやすさに繋がる
強弱の設計ができる
昔と現代のUIの違い
昔のUIの階層 生活にある”物質”の表現を使い、操作方法に気付かせる
・現代のUIの階層 階層を色や形でUIを表現する
階層についての参考
UIを構成する3ブロックを知ろう
ポイント
UI構成のブロックを知るとこのUIどこに配置する？といった悩みが消えていく
3つの要素
ナビゲーション
コンテンツ
アクション
①ナビゲーション
基本的に上か下かに配置されている
ページ全体を覆える位置にある→ページ全体に作用する
ページのタイトル名も、ナビゲーションの役割の1つ→見落としがちな人が多い
②コンテンツ
ページの軸
ユーザーはコンテンツを見に来ることが目的
③アクション
ナビゲーションの中にあることが多い
アクションが作用するコンテンツ近くに配置することが基本
アクションが何に作用するかわかりやすくなるため、コンテンツの近くに配置する
シャドウの基本
質問：シャドウはボタンにつける？
シャドウは階層の表現
押せるものにはシャドウを使うことがある →シャドウの表現＝出っ張り
背景色で階層表現が出来ている場合もある
必ずしもつけなくても良い
使い分けはUIや全体のデザインによって変化する
ボタンと背景色の表現によって、変化する
→背景色によってはボタンが全体にかかってしまう可能性もあることを考慮する
質問：フォーカスしているボタン以外のボタンにシャドウは？
・悪いわけではないが、なくても良い
→無しで表現する方法があるなら減らす。情報量を減らすために
・全体的なバランスもみて付けると良い
質問：影の付け方のバランスは？
ヘッダー、フッターに影をつけることが多い →ヘッダー、フッターは階層構造が上にあるためシャドウをつける
→シャドウではなく、ボーダーで表現することもある階層の上下で付け方を考えていく
シャドウも情報量の1つ。付けすぎると野暮ったい印象になる
モードと遷移 "←"と"×"の違い
刷り上がりアニメーションの違い
下からの刷り上がり
別の概念を呼び出す
横からの刷り上がり
階層構造の表現
遷移とモードの違いを知りましょう
ポップインの遷移で、今表示している画面に別の画面を重ねて表示する動きの時は
「× 閉じる(キャンセル)」が妥当。
階層が下のページなどに移動するときは「＜,←戻る」などで１個上の階層に戻るのが通常です。
基本的に”バックナビゲーション”は１つ前の画面に戻る動作であることを覚えておきましょう💡
✖ キャンセルの挙動
キャンセル＝現在の画面を閉じること
階層構造になっている場合（親→子）になっていれば、スライドで遷移する
階層構造が下であれば『＜戻る』が妥当（すり上がる画面）
モーダルなどの画面を閉じるとき
例
ホームー投稿ー投稿詳細
投稿と投稿詳細はモーダルなどで画面を表示させる。
キャンセルが続いてもOK。すり上がった画面を閉じるから
＜ 戻るの挙動
階層構造が下がった所から、戻るときなどに使う
質問での答え
モードを閉じる時
キャンセル（モードをキャンセル
×（モーダルを閉じる）
戻る（モード前に戻る）
階層ページの移動で前のページに戻る
＜（矢印） + 戻る
完了→次の画面
モーダルとモードについて
モード
何のタスクをする？の状態のこと
－ユーザーに行動してほしいタスクがある受動的な状態
タスクごと、集中させたいものを切り替える状態
モードが終了したら、前の画面に戻す
例：Twitterホーム⇒投稿ボタン⇒投稿モード
投稿モード⇒戻る⇒元のページに戻る
モーダル
アクションするときに活用
－投稿・アップロードなど
－インプットのフォームなど特定タスクを行うための表示
ある特定の構造にフォーカスさせるために出現するページ
別のタスクに集中させたいときに別でページを表示する概念
今の動作から、別の操作内容に集中させるため強制させる表示を開く概念
モーダルはサービスが持っているデータだったら、何でもOK
必要性
複雑性を回避するために使えるUIパターン/超基本
理解は難しいが、設計力を上げるためには重要
参考
モードレス・ユーザーインターフェース
モードレスとは
解説
概要：階層と構造がキモ！
今回の修正箇所は、UIの「階層」と「構造」にまつわる部分をあえて指定しています。
まずはなんとなくそういうもんか、で大丈夫なので、こういう概念があることを体験しておきましょう〜！
完全理解はさまざまなサービス見ながらパターンを蓄積しながら、自分でも手を動かす量を増やしていくと良いです💡
見どころ
『基本3要素』と『階層』で整ったレイアウトを作られる
ナビとアクションとコンテンツでレイアウトを考えよう
①UI3要素と配置
主語と動詞で関係性を考える：アクションとナビ導線の配置
アクションと対象の関係で配置しよう
『作成』 ⇒サービス全体
『フィルター』⇒コンテンツ
『通知』 ⇒サービス全体の通知
②階層
ヘッダー⇒ナビ⇒コンテンツの順番の階層になっている
コンテンツを目立たせるために、コンテンツリストの背景色を白にして際立たせる
③ポップアップUI
モード『投稿』＝アクションがメイン
この記事が気に入ったらサポートをしてみませんか？