アプリの画面遷移構造とメニューアイコン
ハンバーガーメニューとケバブメニューの違いや、ボトムタブバーの使い分けを教えてください。 よく行く先が5つ以下ならハンバーガーよりボトムタブバーを使い、ケバブは項目単位の操作だけに使うのが基本です。
ユーザーが画面の間をどう行き来するかを決める要素です。アプリの骨組みなので、最初に決めます。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
ボトムタブバー
Bottom tab bar
よく行く場所3~5個を画面下部に固定する
ドロワー
Navigation drawer
横からスライドして出る全体メニュー
無限スクロール
Infinite scroll
末尾に着くと続きを読み込み続ける
ページネーション
Pagination
1、2、3とページ番号で分けて見せる
パンくずリスト
Breadcrumb
ホーム > カテゴリ > 商品のように現在位置を示す経路
ハンバーガー
Hamburger menu
横線3本。全体メニューを開く
ケバブ
Kebab menu
縦の点3つ。その項目に対する追加操作
ミートボール
Meatball menu
横の点3つ。ケバブの横向き版
ワッフル・ベント
Waffle / Bento menu
点や四角が9個。他のアプリ・サービスへ移動する
使い方
- よく行く先が5つ以下なら、ハンバーガーよりボトムタブバーが向いています。隠したメニューは押されにくくなります。
- ケバブは「この行に対する操作(編集・削除)」にだけ使います。画面全体のメニューに使うと混乱します。
- 無限スクロールの画面にはフッターを置きません。ずっと押し出されて、押せなくなります。
- 終わりのある一覧(検索結果・注文履歴)には、ページネーションか[もっと見る]ボタンが向いています。
コピーして使うプロンプト
アプリの基本構造
モバイルアプリの基本構造を作ってください。 - ボトムタブバー(Bottom tab bar)4つ: ホーム、検索、保存、マイページ。現在のタブはアイコンと文字の両方を強調。 - 一覧の項目ごとに右側へケバブメニュー(Kebab menu)。押すと編集・削除が入ったボトムシート(Bottom sheet)を表示。 - ホームのフィードは無限スクロール(Infinite scroll)、検索結果は[もっと見る]ボタン方式。
参考にした投稿: @uxwoodytips, @uxwoodytips