全幅ドロップダウンvsモバイルの左サイドバー
私はレスポンシブなWordpressテーマを作成するというかなり早い段階にいます。基本的な固定ヘッダーバーがあり、現在左側のナビゲーションパネルで作業しています。 KDE Kirigami HIGからのインスピレーション。
固定ヘッダーバーは既に応答しています。会社の名前が消え、会社のロゴが小さな画面の中央に表示されます。左側にハンバーガーメニューがあり、ハンバーガーメニューボタンをクリックしない限り、ナビゲーションデバイスは常により大きなデバイスに表示されます（将来）。
私はそれをテストしたとき、モバイルのナビゲーションバーのブレークポイントの作業をまだ開始していませんでしたが、モバイルのメニューのように見えました。
比較のために、モバイルメニューの私のオリジナルのモックアップ：
使いやすさの観点から、メニューを上からドロップダウンするのと、左からスライドさせるのには、どのような長所と短所がありますか？頭に浮かぶいくつか：
ドロップダウンの長所：
- どうやらプログラミングが簡単
- ナビゲート中にメインコンテンツを表示したままにします
ドロップダウンの短所：
- デスクトップデザインと一致していません
- 右からスワイプで開くことができない（メニューボタンは左上にあり、スワイプしない右利きの人には不向き）
- ページのメインコンテンツとそれほど区別されていない
左メニューの長所：
- Android Material DesignおよびKDE Kirigami designに類似）
- 一般的なモバイルウェブサイトのデザイン
- スワイプに役立つ
左メニューの短所：
- 垂直スペースの非効率的な使用
左メニューを使用（サイドドロワー）
それぞれの観察結果の理由を説明します
ドロップダウンの長所：
どうやらプログラムしやすいこれは使いやすさとは関係なく、これは実装の問題です。これを構築するためにどのようなリソースがあるかはわかりますが、ユーザーの観点からは、これは問題ではありません。
ナビゲート中にメインコンテンツを表示したままにするこれは、アイテム数が少ない場合に当てはまります。しかし、一般的に言えば、アイテムの数が多い場合、シナリオは同じかそれより悪くなります。左側のメニューは何をすべきかについてのアフォーダンスを提供しますが、キャンバス全体をカバーするメニューは、誤ってメニューボタンに触れた一部のユーザーを混乱させる可能性があります
ドロップダウンの短所：
デスクトップデザインとの一貫性がありませんこれがまさにポイントです。モバイルはデスクトップと同じではないため、一貫性を保つためにデスクトップクローンを強制するのではなく、モバイル向けに構築されたエクスペリエンスを提供する必要があります。現状では、色、フォント、画像などを使用することで一貫性を実現できます。しかし、ハンバーガーメニューがある場合、ユーザーは一貫性にかかわらず、その要素が期待どおりに機能することを期待します（これは正しくありません）。両方のオプションは等しく "不整合"であり、それがアイデアです
右にスワイプして開くことができない（メニューボタンは左上にあり、スワイプせずに右利きの人には不適切）これは使用しない非常に良い理由ですあなたが言ったように、このバージョン。
ページのメインコンテンツとそれほど区別されていない正確。これは、あなたがこれをプロだと思ったときに私が上で述べたことに関連しています
左側のメニューの長所：
Android Material Design and KDE Kirigami design に似ています）これは巨大なプロです！
モバイルサイト共通デザイン同上！
スワイプを助長します私はそれをよりよく言うことができませんでした！
左メニューの短所：
垂直スペースの効率的な使用が少ないまったく逆です。 キャンバス外またはsidedrawerメニューのアイデアは、一時的に中断することですユーザーが実行する必要のあるタスクに焦点を合わせるためのフロー（例：移動するページを選択）。そのタスクが実行されると、メニューが消え、何が起こったか、新しい場所に移動するために何をしたかについての手掛かりが表示されます。要素は完全にoff canvasであるため、垂直方向のスペースはまったく影響を受けません
そして、これらはあなた自身の観察に基づく理由のほんの一部です。さらに多くの機能があります（たとえば、スワイプしてメニューを閉じるのではなく、画面全体で親指を横切ります！）。
しかしながら...
アイテムが4つしかなく、それ以上にならないことがわかっている場合は、常にそれらを表示し、非表示のメニューを忘れることをお勧めします 悪い方法でのUX