web-dev-qa-db-ja.com

サブナビゲーション項目の非常に長いリストを含むページをレイアウトする方法は?

内部にナビゲーションがあるこれらのいくつかのページがありますが、一部のページでは、アイテムの数が非常に多くなっています。一部のページでは、ナビゲーション項目の数が少ないです。

ナビゲーションの長いリスト(左側に小さな白い長方形のボックス)があるものについては、以下を参照してください。

enter image description here

現在、アイテムは3行に分割されていますが、これは非常に乱雑に見えます。ナビゲーションの長いリストがあるページには、ドロップダウンがより良いアプローチですか?短いリストを持つものは通常のナビゲーションとしてリストされますが、長いリストを持つものはドロップダウンとしてリストされるため、少し矛盾があるかどうかを考えています。

これにアプローチするより良い方法はありますか?

3
catandmouse

これを解決するつもりです。これが私が提案したものです:


提案されたサブナビゲーション


mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

直接リンクとドロップダウンメニューの組み合わせを使用して、一貫性を維持できます。理想的には、ドロップダウンメニューは、「アップロード、印刷...」などの定期的なアイテム/アクション用に予約する必要があります。直接リンクは、ユーザーにとってより重要なパスを表示します。

1
adamsoh

このサブナビゲーションのコンテンツを正確に把握せずに、適切なソリューションを提供することは困難です。もっと情報を提供していただければ幸いです。

とにかくここにあなたが考慮したいと思うかもしれないいくつかの基本的なアイデアがあります:

  • 長い名前の代わりにアイコンを使用する
  • 左側の垂直ナビゲーション
  • 自分で提案したドロップダウンもオプションで、複数列のドロップダウンもあります。
0
Julian

「メガメニュー」の組み合わせを調査し、各セクションのナビゲーションをフッターにリストします。このようにして、ユーザーが上から下に読んで、特定のセクションのさまざまなページに移動すると、下のフッターを使用して次のページに移動できます。

フッターには、各セクションが水平方向にリストされ、レベル2のサブページが以下にリストされます。

0
Dsign

なんらかの検索ボックスを追加しても問題ないと思います。経験豊富なユーザーは必要なものを入力するだけで、一致するナビゲーションアイテムのみがポップアップ表示されます。

あなたの質問が強調しているように、私たちは常に完璧な世界に住むことはできません。ナビゲーションのポイントが多い場合があります。私はこれをコンシューマーとエンタープライズの両方のコンテキストで処理する必要があり、機能するシンプルなソリューションを見つけたと言ってうれしいです。

メインナビゲーションについては、実績のある水平トップバーまたはタブを使用します。サブセクションについては、左側に垂直に積み重ねられたナビゲーションを使用します。これにより、サブセクションが(トップメニューと比較して)見つけやすくなり、十分な不動産が提供されます。

一部のコンテキストでは、その左側の列を引き継いで「フォーカスモード」に入ります。完全なサブナビゲーションに戻るには、ユーザーは階層の1つ上のレベルに移動するだけで済みます。

0
plainclothes