web-dev-qa-db-ja.com

モジュールタブとナビゲーションタブの相互作用

私は現在、さまざまなビュー/コンテンツがたくさんあるエンタープライズWebサイトで作業しています。

ナビゲーションとしてtabsを選択し、各タブには新しいビューがあります。さらに、これらすべてのタブをmodulesおよびナビゲーションのためにmodule tabsを選択しました。

参照用に最初の画像を確認してください

enter image description here

私がここで直面している問題は、上部の矢印がセカンダリタブでは機能しているように見えますが、プライマリでは、矢印が使用されている場合、トップレベルのタブが移動するため、ユーザーはコンテキストを見逃します。

そして私が試した別のオプションは、トップレベルのタブの最後にもっと多くを置くことでした。

参照用に最初の画像を確認してください

enter image description here

しかし、この相互作用がどのように見えるかはわかりません

例-ユーザーがドロップダウンからタブ9を選択した場合、ユーザーはタブ1に戻る方法

enter image description here

したがって、ここでも矢印が必要であり、オプション1とオプション2が混在するため、間違いと思われます。

これに他の解決策があるかどうか教えてください。

これはサイトでの表示ですenter image description here

3
Harshith

mockup

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

同じ問題がすでに以前に提起されていました。プライマリモジュールを水平タブとして、セカンダリモジュールを垂直タブとして扱うことについてはどうですか?

アイデアを伝えるためだけに、非常に大まかなモックアップを追加しました。設計から、ユーザーは残りのプライマリモジュールを表示するために詳細ボタンをクリックする必要があります。したがって、ユーザーがプライマリモジュール間を頻繁に移動する必要がない場合は、ユーザーがプライマリモジュールの初期コンテキストを設定し、ユーザーがセカンダリモジュール間を移動できるようにするオプションを提供できます。

注意:モックアップでプライマリモジュールを選択する方法は、正しいオプションではない場合があります。アイデアを伝えるためだけに上げました。

3
William Gilbert

垂直ナビゲーション

垂直(別名「サイドバー」)ナビゲーションは、製品の片側に沿って永続的なサイトまたはアプリケーション構造を表示する方法です。

タブとは異なり、カテゴリの数が少なくない場合やユーザーがカスタマイズできる場合(メールクライアントのフォルダーやタグなど)は、垂直方向のナビゲーションが適しています。使い慣れていて柔軟性があり、場所を取らないため、「安全な」ナビゲーションパターンと見なされます。他に明確な選択肢がない場合によく使用されます。

あなたの場合

「タブ」で垂直スペースの一部を、「サブタブ」で水平スペースの一部を使用してみることができます。下に添付されている画像とよく似ています。 vertical space with "Tabs" and Horizontal Space with "Sub Tabs"

1
Mehul Shah

なぜあなたがタブにそれほど固執しているのかはわかりません。複数のレイヤーのナビゲーションタブがあると、混乱し、イライラし、ナビゲートが困難になります。

私は最近、メガサイトのナビゲーションを調査しており、トップナビゲーションバーのこの気の利いた例が私の研究で浮かび上がりました。 https://www.fold3.com/image/10985207

ユーザーが選択したページを閲覧しているときに画面スペースをあまりとらず、ユーザーがナビゲートしたいときにきちんと折りたたまれます。

多分これはあなたの問題に対する直接の答えではないかもしれませんが、私はそれがより良い解決策を刺激することを望みます。

1
RobbyReindeer

...私も複雑なダッシュボードで作業していて、同じ問題に何度も遭遇したため、タブ要素を垂直方向に折りたたまれたネストされたドロップダウン要素に変えました。

編集:利用可能なすべてのピクセルを使用する必要があるという懸念について-ユーザーがナビゲートする必要がある場合、ユーザーは現在の画面に何が表示されているかを気にしません。彼らは簡単にそこに行きたいだけです。誰もあなたのメニューを操作するつもりはありません(多くの人がそうしたいと思っていますが!)。それらが既に使用されているもの(および上記で提案したもの)よりも簡単なものはありません。ネストされたドロップダウン。

edit2:私は反対票を投じるに値しますが、あなたがもう一度尋ねる前に、あなたが求めたものが得られませんでした。

これをチェックしてください。トップメニューの「タブ」スタイルを削除すると、スクロールアウトしても「コンテキスト外」にならず、「タブスタイル」が表示されなくなることになります。

enter image description here

0
scooterlord

選択したtadから最も遠いタブを最小化できます。

初期

|*tab 1*|tab 2|tab 3|tab 4|tab 5|tab 6|t.|t.|t.|

タブ5が選択されました

|t.|t.|tab 3|tab 4|*tab 5*|tab 6|tab 9|tab 8|t.|
0
esbenab