web-dev-qa-db-ja.com

階層データのツリービューの最新の代替手段

これと同様の質問が他にもありますが、どの解決策も私の問題領域に実際には適合しません。 ブレッドクラム および ドリルダウンメニュー は解決策ではありません。だから、さらに面倒なことなく:

  • 設計上の問題は、アプリケーションスペースの3分の1を占める構成パネルです。
  • デスクトップアプリケーションです(Webではなく、モバイルではありません)。
  • 構成グループには、表示/管理する必要がある子アイテムを含むファイルがあります
  • 検索機能はありますが、ファセットはありません
  • タッチスクリーンとの互換性が必要
  • 1/3幅の構成パネルは、2/3幅のアプリケーション領域に直接影響します。ユーザーは、構成の選択の影響をライブで確認する必要があります。

設計上の問題に関するすべては、タッチスクリーンを除いて、ツリービューが必要であることを示唆しています。開発チームのモックアップで アコーディオンパターン を使用しようとしましたが、実際の状況では機能しませんでした。一度に複数のサブグループを開く必要があります。

より要求された詳細:

  • 典型的な深さ:4レベル
    • 構成セクション
    • グループ
    • ファイル
    • 記録
  • 最悪の場合の現実世界の深さ:5-6レベル(グループはサブグループを持つことができます)
  • ファイルごとの一般的なレコード:10秒
  • ファイルあたりの最悪のレコード:100秒
  • 構成セクション:4

注:ユーザーが要求した場合にのみ、ファイルレベルの表示を選択する場合としない場合があります。これにより、心配する必要のある最大深度が減少し、一部の構成セクションでは邪魔になります。

検索はこのダイアログの重要な部分になりますが、実際には他に方法はありません。ただし、ファセット検索用の不動産や、まだ階層の一部ではない明らかなファセットはありません。ブレッドクラムはソリューションのpartにすることができますが、最も多くのレコードがある領域では、同時に隣接するグループを開く必要があります。

16
Berin Loritsch

ツリービューは好きではありませんが、実際には最も適切なウィジェットである場合があります。

ツリービューを作成する前に、タブレット向けに再設計できるかどうかについて検討する価値があります。


1。ツリービューの問題

  • 通常、ドロップダウンアイコンは小さすぎます。タブレットはもちろんのこと、デスクトップでもクリックしにくい( フィットの法則 を参照)。
    • Ideaアイコンを大きくできますか?
  • 深いツリー階層は多くの水平方向のスペースを占めるため、クリッピングまたは水平方向のスクロールが発生し、ユーザーにとって苛立たしいものです。
    • 幸いなことに、このコントロールの画面スペースの3分の1をインテリジェントに割り当てているので、これで問題が少し少なくなります。
    • Ideaより小さなインデントと行折り返しを使用して、水平方向のスペースバジェットを維持できますか?
  • ツリーに多くのノードがある場合、ユーザーが階層の奥深くで混乱するのは簡単です。
    • Ideaインジケーターを使用して、現在の階層のレベルを示すことはできますか?

2。設計スケッチ

上記のアイデアを組み込んだアプローチの1つを次に示します。

enter image description here

  • タッチフレンドリーのための大きなアイコン
  • アイコンは行の高さが2倍を超えるため、長い行をボックスからオーバーフローさせるのではなく、一度に折り返すことができます。
  • 狭いインデント
  • 先頭の.期間インジケーターを使用して階層のレベルを表示
  • 検索/フィルター/その他の上部ツールバー

これはあなたのニーズに合うかもしれませんし、そうでないかもしれませんが、私は既存のコントロールを時代遅れであると見なす前にそれを近代化する可能性を検討することは常に役立つと思います。

私の最後の提案は次のとおりです。エンタープライズアプリケーションの場合、目標は通常、最も効果的なインターフェースではなく、最も効果的なインターフェースを設計することです。 1。

15
tohster

上部の階層的なプルダウン
州、郡、市を検討する

最初に私が見るすべては状態です
州を選択した後、右側にある郡を選択すると、その州の郡のみが表示されます
その後の都市

一部の郡に教区がある場合は、市の前に教区にしてください。

テキサス
テキサスハリス
テキサスハリスヒューストン

州を変更すると、郡が最初からやり直します

1
paparazzo