web-dev-qa-db-ja.com

テーブルの行が選択されているときに、その行の追加情報を表示する

私が開発しているアプリには、ある種のマスター/詳細アプローチを利用するテーブル/リストがあります。メインテーブルの行を選択すると、その下の2番目のテーブルに「子」アイテムが入力されます。

ただし、使用しているグリッドコントロールの機能に気づきました。メイングリッドに「詳細」を表示する機能inline 、選択した行のすぐ下。例えば:

Example usage of the RowDetailsTemplate property of DataGrid

注:上記のスクリーンショットは私のアプリのnotです。これはインターネットで見つけた例にすぎないので、 mそれに関する特定のコメントには本当に興味がない。ありがとう。)

私は不思議に思っていましたこのパターンのUI設計ガイドラインを知っている人はいますか?パターンには一般的に同意された名前さえありますか?

いくつかの考え:

  • 詳細パネルが高すぎると(それが何であれ)壊れると考えられますが、他に注意すべき点はありますか?
  • デザインを乱雑にすることなく、マスター/詳細の関係をより明確にするために適用できるスタイリングさえありますか?
  • このパターンが使用されている良い例を見たことがありますか?

誰かが参考文献を持っている場合、またはヒントだけでも、私はそれを聞いてみたいです。

7
Mal Ross

Quinceのパターンライブラリによると、これは ローカルズーム と呼ばれ、 データヒント を表示するパターンに関連しています。ユーザーの観点からは、テーブルの行がナビゲーションに使用される通常のアコーディオンとそれほど変わりません。

あなたの例では、展開されたセクションとそれが属する行との関係が少し明確に示されます。色を使用すると、行が住所部分を含む他のすべての要素よりも目立ちますが、住所と選択した列が一緒に属していることは明らかです。

6
Marielle

行をクリックすると、別のペインで行の横に詳細が表示されるパターンを使用しました。スクリーンショットを提供することはできませんが、サイドバイサイドモードのOutlookプレビューウィンドウに似ています。

ご指摘のとおり、新しい情報を表示するときに、ユーザーのフォーカスを過度に乱さないことが重要です。余分な情報を比較的少なくすることは、彼らが彼らの方位を保つのを助けるでしょう。微妙なアニメーションを使用して、アコーディオンが開いているときに目を誘導することも、一致する色やシェードを使用する場合と同様に役立ちます。

詳細がどの行にあるかを明確にすることも重要です。あなたの場合、選択の色の明るい色合いで住所の詳細に色を付けると、この詳細が下のセルではなく上にあるセルに適用されることが明確になります。境界線を使用して、ページの中に「少し」設定したり、他の方法で周囲の領域から離したりすることもできます。

列が混在し、詳細が表示された大きなテキストボックスもあります。これは少し奇妙なことですが、慎重に処理すれば、それほど混乱を招くことはないでしょう。現在、列の境界線は大きなテキストボックスを貫通しており、その下から再開されています。

1
Alex Feinman

これが良いパターンかどうかはわかりません。行を選択すると、その下に新しいセクションが表示され、詳細情報が表示されます。行の選択を解除すると、セクションが非表示になります。その行の下の行が上下に移動します。行の動きが多すぎて何かが起こっていて、行が上下に移動して新しい情報がその間に表示されてから消えているように思えます。

テーブルの隣の詳細セクションはどうですか?テーブルの行はあちこちに移動しません。詳細情報は常に同じエリアにあります。あなたの目はそれほど気が散ることはありません、そしてそれはいつも詳細がどこにあるかを知ることを期待しています。

0
Tony_Henrich