第3レベルのナビゲーション選択を改善する方法
スクリーンショットに示すように、レスポンシブなダッシュボードWebアプリがあります。左側のナビゲーションメニューには2つのレベルのナビゲーションがあり、3番目のレベルの上部には青いタブストリップが表示されています。青いタブのタブに気づいていないユーザーもいます。どんな変化がそれをより顕著にするかもしれませんか？現在、レイアウトに大きな変更を加えたくない。おそらく色やスタイルが変わるのでしょうか？
おそらくかなり多くのことがここで起こっています-他のものよりも効果のあるものもありますが、例えば：
- 青の帯の色は、その色である理由がないようです。
- パンくずリストと左側のナビゲーションに使用される色には一貫性がありません。設定アイコンはパンくずリストで白、左ナビゲーションで灰色。ユーザーはパンくずリストでクリーム色、左ナビゲーションで濃い灰色になります。
- 暗い場合は、左側のナビゲーションで徐々に選択範囲を広げるために明るいボックスが徐々に表示されることを期待します。たとえば、通常は非常に濃い灰色になり、設定は中間灰色になり、ユーザーは再び暗い灰色ではなく明るい灰色になります。
- 同じものに強く関連しているものは同じ色である必要があります
- 2つのブルーを含め、一般的に色が多すぎるようです。
- 青い背景の白いテキストは、テキストを目立たせるために太字にする必要があることがよくあります。 [デフォルト]タブは実際には無効になっています。
可能な変更-それらのほとんどは自分でかなり微妙です！
- Demo Companyの背景を左ナビゲーションのメインカラーと同じに変更します。これにより、他の場所で使用されていない色が取り除かれます。
- ブレッドクラムの3番目の項目をクリームではなく、ライトグレー（おそらく[列]および[エクスポート]ボタンと同じ）に変更します。
- 左ナビゲーションの[ユーザー]項目を同じライトグレーに変更します。
- ブルーストリップを同じライトグレーに再度変更します。これにより、すべての「ユーザー」参照が一緒に関連付けられ、あたかもここにいるユーザーはそこにいるユーザーと同じであり、これらは[ユーザー]セクションに属するタブです。
- ストリップ上-おそらく両方のタブに下線を引くが、選択したタブを太字にするだけでなく、太い線で下線を引く。
- オレンジ色の下線は、他の場所で選択できる色として認識されていない限り使用しないでください（ページの他の場所では使用されていません）。
- 下線をストリップの下に低くしないでください-ラベルの近くに置きます
- ストリップでは、フォアグラウンドカラーを使用して、パンくずリストと左ナビゲーションのユーザーセクションと同じ色に合わせます。
- アイコンの色について一貫している。
- 左ナビゲーションの展開/折りたたみ矢印を大きくして、設定が開いていることを明確にします-以前は明確ではありませんでした
- 選択した「ユーザー」アイテムのラベルを折りたたむ-選択したタブのラベルと一致します。
ここまでで、ナビゲーションの色の数を少しわかりやすいパレットに減らしました。関連する側面を結び付け、一般的にナビゲーションのパッチの外観を整え、整然とした構造にし、いくつかの色を変更しただけです。もちろん、ブルーストリップエリアに関連する変更を行うこともできますが、それは話の一部にすぎません。
これらすべてを組み合わせた効果は、以下のようなものになるでしょう。左ナビゲーションとコンテンツの間に垂直ストリップを追加して、[ユーザー]ボタンをタブストリップに物理的に接続しました。
