このシリーズでは「ナビゲーション」について学んでいきます。 「ナビゲーション」とは主にUIが設計するデジタル空間の道案内の役割を果たします。
ページ構造と読んだり、UIフローと呼ぶものなどと関わりがあります。シリーズでは”よくやってしまう間違いUI”を題材にして、ナビゲーションを学んでいきます。
解説だけでなく、実際によくないUIを題材にして進んでいきます。 成功事例の解説を聞いてわかった気になるのを防ぐのが目的です。なので、動画を観ながら”なぜこのUIがダメなのか？”を考えて視聴しましょう。
動画の中では『リデザインチャレンジ』もできます。ぜひ余裕がある方はダメなUIデータを元に、何がダメなのか？を言語化しながらUIのリデザインにチャレンジしてみてください。知るだけでなく具体化してみて初めて習得できます。
https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?node-id=48%3A1522
この動画では「グローバルナビゲーション」の基本を習得します。 「グローバルナビゲーション」とはアプリでもデスクトップのサービスでも、その全体像を把握する要になる概念です。サービスであれば、提供したい価値を体験するために必要な情報などへ導くための導線になります。
今回は以下のUIをリデザインしていきましょう。 ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう！
▽リデザインして欲しい素材
※Figma以外の方はスクショなどで対応していただけたらと思います🙏
▽ ダメUIのプロトタイプ
動画でお題の解答をチェックしましょう。
お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。
今回のお題解答のFigma URLは以下になります〜！
▽解答Figma
この動画では「階層」の基本を習得します。 「階層」は全てのページ構造の基本です。今回は階層の理解を深めるとともに、普段無意識に操作している階層に関わるUIにフォーカスを当てていきます。
なぜこの位置にこのUIがよくあるのか？どういう意味があるのか？をしっかり動画を観て理解してください。
今回は以下のUIをリデザインしていきましょう。 ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう！
▽改善して欲しいデザインの素材
▽ ダメUIのプロトタイプを見る
動画でお題の解答をチェックしましょう。
お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。
今回のお題解答のFigma URLは以下になります〜！
▽解答Figma
この動画では「モーダル」の移動に関する基本を習得します！「モーダル」はめちゃくちゃわかりづらいです。笑 ただ、階層の移動との違いを含めて解説していきます。基本的にはアクションで用いることが多く、”複雑なタスクを集中してやってもらう”ためのものになります。
今回は以下のUIをリデザインしていきましょう。ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう！
https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?node-id=5%3A2230
アクション＝モーダルというわけではないです！実例を踏まえつつ、アクションの設計を学んでいきましょう。
動画でお題の解答をチェックしましょう。
お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。
今回のお題解答のFigma URLは以下になります〜！
▽解答Figma
