web-dev-qa-db-ja.com

「ソーシャルスタイル」データのマスター/詳細UIの例

ユーザーが、高レベルのパターンから低レベルの詳細まで、さまざまなレベルで複雑な相互接続されたシステムを探索できるインターフェースの例を探しています。

マッピングの世界では、これはさまざまな方法で対処されており、地理データはベースデータレイヤーです。ズームインまたはズームアウトすると、ドリルインしたり、より広範で小さなサムネイルマップを表示したりすることができます。サイドバーペインやコンテキスト内バルーンにより、個々のマップ機能を調べたり、データオーバーレイスイッチを使用してデータ属性を追加および削除したりできます。

ソーシャルスタイルのデータのウェブに同様のパターンを適用することに興味があります。通常、ネットワークまたは配線スタイルのブロック図で表されます。

ここにいくつかの興味深い例があります:

  • LinkedInMaps はエレガントなWebアプリですが、私のニーズには単純すぎます(1桁または2桁多い複雑さを想像してください)。
  • クロスプラットフォームグラフエディター yEd ははるかに複雑であり、2つの異なる図を使用して同じノードを表示する方法は、危険なネットワークグラフを明確にするのに役立ちます(ノードとエッジが非常に不快に表示されるのは私の欠点です) 、アプリではありません): enter image description here
  • SkyデータセットをオンにしたGoogle Earthでは、星座や星雲を表示する深さと複雑さのため、地理/社会線が少しぼやけています。 enter image description here

私は興味を持っている:

  1. この一連の例を一般的に展開します(ソースがスタンドアロンアプリ、Webアプリ、産業用コントローラーアプリなど)。どのようなバリエーションがありますか?

  2. 関連するライブWebアプリケーションです。このようなものをWebに実装するのは難しいため、パフォーマンスと技術的な制限がUXに大きな影響を与える可能性があります。

よろしくお願いします。この質問を改善できるかどうか、またどのように改善できるかを教えてください。

5
peteorpeter

Walrus によって生成される例は、単に驚くべきものです。

セイウチは、非常に大きな木を処理するために私が見た中で最高です。また、インタラクティブに実行したいものに対しては絶望的に遅くなるだけでなく、Webアプリではありませんが、「トップレベル」を缶詰の画像として提供することもできます。次に、サブセットに到達すると、インタラクティブな方法を使用できます。

3DはWebで管理可能になりつつあります( Google Body を参照)。 3Dは大きな木に本当に役立ちます。GPUを使用できることで、求めるパフォーマンスを得ることができます。たとえば、再レンダリングはCPUではなくGPUによって行われるため、特定の基準に一致するサブセットの色を変更すると、非常に高速になる場合があります。 WebGLは、Webの技術的な制限を回避しようとする方法です。

2
James Crook