web-dev-qa-db-ja.com

マスター/マスター/詳細アプローチ? (別名、要約されたデータへのアプローチ方法)

皆にとって素晴らしい日。

私は基本的にTo-Doリストであるアプリケーションを設計しようとしています。これはもちろん、ある程度のマスター/詳細(タスクのリストと各タスクの詳細)を提供します。

このアプリケーションが提供する追加機能は、すべてのタスク間の依存関係を表示するグラフになります。そしてここに課題があります:この生成されたグラフは一般的なリストのマスタービューとして役立つので、それも表示する必要があります。

したがって、私は2つのセクションを持っています。マスターの概要、マスターリスト(追加/削除機能付き)、詳細ビューです。

自然に使用できる方法で流れるようにこれらをどのように設計できますか?

これは私がこれまで持ってきたものであり、私にとって本当の意味のあるものに近いものではありません。

mockup

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

このマスター/マスター/詳細のニーズに対する適切なアプローチは何ですか?それとも、master-master-detailなどはありませんか?

更新:Izhakiのフィードバックの後、2番目の反復をまとめました。ここで、上部パネルは常に実際に表示されるものです。リストとグラフの概要です。詳細パネルは、詳細を編集するために必要に応じて非表示または表示になるため、より一般的なマスター詳細アプローチになっています。

mockup

bmmlソースをダウンロード

3
Alpha

このようになります。

まず、dataとそのviewを区別します。タスクlistの場合、1セットのデータとそれを表示する2つのビューがあります-データが変更された場合、両方のビューを更新する必要があります。

次に、次の3つの一般的なIAの概念を検討します(私はお気に入りの用語を使用していますが、他の用語についても言及しています)。

  • 一意のコンポーネント-システムに1回だけ表示されるコンポーネント(通常はページ)。たとえば、 プライバシーポリシーページ です。
  • Listingコンポーネント(別名カタログ、レコード、アイテム、ギャラリー)-類似したアイテムのコレクションをリストするコンポーネント。これらは通常テンプレートを含み、エントリはデータベースから読み込まれます。たとえば、すべての男性用Tシャツを掲載しているサイトの a page
  • レコードコンポーネント(別名アイテム、製品)-多くのレコードから1つのレコードを表示するコンポーネント。通常、単一のデータベースレコード(および場合によってはその関連付け)のデータを入力するテンプレートページ。たとえば、特定のTシャツを表示しているサイトの a page です。

これであなたのケースでは、2つのビュー(リストとグラフ)を持つ単一のデータセット(タスク)があり、どちらもリストコンポーネントの形式です。これは一般的です-リスト形式とマップ形式の両方で近くの駅を表示する旅行情報アプリのようです。

次に、タスクの詳細パネルで表示されるレコードコンポーネント(タスク)もあります。

現在のデザインで目立つのは、次の視覚的な階層を作成することを選択したことです。

  • 左ペイン
    • タスク(リストビュー)。
  • 右ペイン
    • タスク(グラフビュー)。
    • タスクの詳細。

以下の構造を採用することが非常に合理的であると思われる場合。

  • 左ペイン
    • タスク(リストビュー)。
    • タスク(グラフビュー)。
  • 右ペイン
    • タスクの詳細。

言い換えると、グラフを右(リストビューがある場所)に移動して、 ゲシュタルトの法則 を利用します。

ユーザーが両方のビューを同時に表示することが重要な場合は、左側のパネルを上部と下部に分割する必要があります。そうでない場合は、それぞれをタブに配置できます。

また、タスクの詳細パネルを永続的に表示することは、ユーザーにとってどれほど重要かを考慮してください。おそらく、ホバー時にポップオーバーボックスに追加の詳細を表示し、ダブルクリック時にのみフォーム自体を表示できますか?

4
Izhaki