すべてのストアには既にトップメニューがあります。
問題は
ボトムに何を配置するかです。
Bottom navigationはモバイル標準になっています。顧客はそれを期待します。しかし成功はそれをすべての場所に追加することではなく、そこに属するもの、そして実際に機能する場所に配置することを決定することです。このガイドは、その決定を正しく行うのに役立ちます。
安全な領域はデバイスによって異なります
iOSノッチ、Androidジェスチャーバー、ランドスケープモードはすべて画面の実部分を要求します。ボトムのメニューはこれらのハードウェアの現実と共存する必要があります、それらと戦うのではなく。
Bottom navigationはコンテンツと競合します
ボトムにバーを配置すると、商品画像またはカートに追加ボタンを表示できる領域が予約されます。間違った配置はスクロールをより困難にするか、重要なアクションを隠します。
特定数のアイテムでのみ機能します
5アイテムのナビゲーションバーは使用可能です。7アイテムは混雑します。8以上は使用不可です。そこに実際に属するもの、すべてが適合するわけではないことを決定する必要があります。
他のナビゲーションと共存します
ほとんどのストアはトップヘッダーとドロワーメニューを保持します。Bottom navigationはそれらを置き換えません — それは層を重ねます。これら3つを機能させるには計画が必要です。
効果的なモバイルナビゲーションは、ボトムの3〜5スロットに最も重要な宛先を配置し、デバイスの安全領域を尊重し、トップメニューとドロワーと連携して機能します — 重複なし。
ホーム、ショップ、検索、カート、アカウント — 標準セット
ほとんどのモバイルストアはこれら5つで落ち着きます。ホームはあなたをすぐに戻します。ショップはカタログです。検索は訪問者が特定のアイテムを見つけるのを支援します。カートとアカウントは取引です。これら5つを超えるもの通常は、何かが属しないことを意味します。
モダンフォンの安全領域を尊重します
iOS ホームインジケーターとAndroidジェスチャーゾーンはパディングを必要とします。バーは多少上に移動して、使用可能で触覚的に保ちます。ジェスチャーまたはOSコントロールの背後に隠れていません。
ポートレートとランドスケープで機能します
ランドスケープモードは垂直スペースが少なくなります。設計されたボトムバーは優雅に縮小するか、レイアウトを壊したり読みにくくなることなくアイテムを積み重ねます。
ヘッダーとドロワーとレイヤー化
トップヘッダーはブランディングと高速検索のために残ります。ドロワーは深いカテゴリーを保持します。ボトムバーはそれらを橋渡しします — メニューを開くことなく、最も使用されるページへの高速アクセス。
特定のストアタイプをスキップします
すべてのストアがBottom navigationの恩恵を受けるわけではありません。単一商品ショップ、最小限のカタログを持つラグジュアリーブランド、デスクトップ中心のストアはそれを必要としないかもしれません。最初にあなたのトラフィックパターンを知ってください。
ストアのトラフィックと目標を監査
分析を確認します。モバイルユーザーはどのページを最もよく訪問しますか。あなたのビジネスで最も重要なアクションは何ですか。5つの宛先をボトムバーに当てはめます — さらにはありません。
ターゲットしている安全領域の設計
顧客が最も多く使用するスマートフォンを決定します。ノッチとジェスチャーバーのパディングを計画します。ランドスケープモードをテストします。数分の計画は後でモバイル摩擦を保存します。
Navi+でBottom navigationを設定
目的地、アイコン、色を選択します。Navi+は安全領域、ブレークポイント、デバイス検出を自動的に処理します。数分で公開してライブになります。
安全領域インセットが含まれます
iOSノッチ、Dynamic Island、Androidジェスチャーナビゲーションに自動的に調整します。推測なし、あらゆるデバイスタイプで機能します。
ランドスケープモードに適応
ユーザーがスマートフォンを回転させるとき、ボトムバーは縮小して再流れます。レイアウトは使用可能なままで、混雑または隠れることはありません。
他のUIとの正しい層化
固定ヘッダー、ドロワーメニュー、ポップオーバーと連携して機能します。z-indexの競合またはオーバーラップなし。
スロット管理
明確なビジュアルスロットは、重要なものを正確に配置するのに役立ちます。未使用スロットは空のままです — 強制フィラーアイテムなし。
マルチマーケット準備
異なる言語と地域ナビゲーションパターンに自動的に適応します。バーはあらゆる市場で読み可能なままです。
パフォーマンスへの影響なし
軽量なCSSとHTMLです。JavaScriptのオーバーヘッドなし、ライブラリの膨張なし。ストアはいぜんのように高速に読み込みます。
トップレベルのページがすべての画面の下部の表示バーに住むとき、より多くの訪問者がそれらを使用します。カテゴリーが閲覧されます。アカウントがチェックされます。ウィッシュリストが使用されます。顧客がInstagramとAmazonから既に知っているパターンはストアでも同じくらい良く機能します。
無料でインストール。5 分以内でライブ。テーマの編集は不要です。