架空のカフェの店舗で使うモバイルオーダーアプリをデザインしていきます。動画では他シリーズの「UI IDEA」の動画内で作ったUIを元にパターンを作っていきます。
Figmaがあればこちらからコピーしてパターンを作成することができます。
自分で作成したラフをベースにパターンを作っていくことでも勧められます。やりやすい方を選びましょう。
パターンを出した方が良い理由<br>①UIの成功確率が上がる<br>②失敗しても次の行動が早い<br>パターンを出すと作る量が増えるので必然的にグラフィックを作るスキルや判断するスキルが伸びやすいというのもあります。
パターンの出した方<br>①対象の画面をパーツごとに分類する<br>②パーツごとにパターンを出す<br><br>あると良い知識<br>①Materialデザインでコンポーネントを知る<br>②有名アプリで実践的な応用UIを知る<br><br>パターンの出し方を解説しています。画面の目的別でもパターンは作れますが、今回は目的は定まった状態での出し方の話をしています。
UIの基本パターンが書かれているマテリアルコンポーネントの見方を解説します。
全てを1度に覚える必要はありません。必要な時に見に来れるように内容を把握しておくと、実際に自分がUIを作る時、また見る時に便利です。
ぜひ1度目を通して、基本的なUIコンポーネントを把握しておきましょう。
参考UIの調べ方
①類似サービスを調べる
②同じモデルのサービスを調べる
③テンション上がるのを調べる
基本UIの視点で応用や実践しているサービスを見るとより高い解像度で参考になると思います。
■ 動画内で参考にしているUIをまとめた図はこちらから
基本コンポーネント&参考UI
ヘッダーは基本的に「ナビゲーションとアクション」の2つを表すパーツです。
今回の重要なポイントは「店舗を選択できる感」を出すことかなと思って作っていました。
iOSのパターンはヘッダーではないですが、ページの階層トップでしっかりタイトルを示すスタイルが特徴です。
下の階層になるとヘッダーが出てきたりします。
■ 動画内で参考にしているUIをまとめた図はこちらから
基本コンポーネント&参考UI
フィルターのパターンはそこまで多くはないですが、情報を並列に表示するのによく使われるパターンです。
情報を隠すと基本的に観ている人に気づかれにくくなるので、整理はしやすいですが機能させようとすると注意が必要です。
■ 動画内で参考にしているUIをまとめた図はこちらから
基本コンポーネント&参考UI
ここは写真を最初にはめてやってますが、写真の統一感がないとあんまり良い感じには見えないですね・・・・
今は機能性を推して設計していますが、ビジュアルにこだわる際は写真にも反復性を持たせてください。
作りながらあーでもこーでもないとやってみました。<br>ホームUIを作る上では1番参考になるのかなと思っています。
みなさんも正解はないのでいろいろ考えてパターンをまとめてみてください。
ビジュアルを詰めるシリーズの時にあらためて、ビジュアルと機能性が1番良い表現を考えたいと思います。
■ 店舗選択画面、参考UIのデータ
■ ”このUIを改善したパターン出します"
・なぜやるとよいのか
1. スキルが上がる<br>
2. UIのパターンにつながる.しらみつぶし
3. 何となく作らずにロジックでやるので、ビジュアルをコントロール力をつけられる
・どうやってやるのか
1. フローを書いて必要な要素をまとめる
2. 要素ごとにできることをアイデア出し
3. 対応ラフを書く
■ 店舗選択画面、参考UIのデータ
基本コンポーネント&参考UIリンク
■ Material Design - Search
https://material.io/design/navigation/search.html#usage
■ HIG - Search Bar
https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/
■ 店舗選択画面、参考UIのデータ
基本コンポーネント&参考UIリンク
□ 動画で使っている資料
https://figma.fun/r28Beu
□ 作成したデザインをみる
https://figma.fun/JP6TVv
動画を見た/手を動かして気づいたことなどはブログなどにまとめておきましょう。
言語化するとデザインをコントロールする力が上がります。
□ 改善前のUI
https://figma.fun/kGe3Ki
□ 改善後のUI
https://figma.fun/f8YLPV
