私が開発しているアプリには、ある種のマスター/詳細アプローチを利用するテーブル/リストがあります。メインテーブルの行を選択すると、その下の2番目のテーブルに「子」アイテムが入力されます。
ただし、使用しているグリッドコントロールの機能に気づきました。メイングリッドに「詳細」を表示する機能inline 、選択した行のすぐ下。例えば:
(注:上記のスクリーンショットは私のアプリのnotです。これはインターネットで見つけた例にすぎないので、 mそれに関する特定のコメントには本当に興味がない。ありがとう。)
私は不思議に思っていましたこのパターンのUI設計ガイドラインを知っている人はいますか?パターンには一般的に同意された名前さえありますか?
いくつかの考え:
誰かが参考文献を持っている場合、またはヒントだけでも、私はそれを聞いてみたいです。
行をクリックすると、別のペインで行の横に詳細が表示されるパターンを使用しました。スクリーンショットを提供することはできませんが、サイドバイサイドモードのOutlookプレビューウィンドウに似ています。
ご指摘のとおり、新しい情報を表示するときに、ユーザーのフォーカスを過度に乱さないことが重要です。余分な情報を比較的少なくすることは、彼らが彼らの方位を保つのを助けるでしょう。微妙なアニメーションを使用して、アコーディオンが開いているときに目を誘導することも、一致する色やシェードを使用する場合と同様に役立ちます。
詳細がどの行にあるかを明確にすることも重要です。あなたの場合、選択の色の明るい色合いで住所の詳細に色を付けると、この詳細が下のセルではなく上にあるセルに適用されることが明確になります。境界線を使用して、ページの中に「少し」設定したり、他の方法で周囲の領域から離したりすることもできます。
列が混在し、詳細が表示された大きなテキストボックスもあります。これは少し奇妙なことですが、慎重に処理すれば、それほど混乱を招くことはないでしょう。現在、列の境界線は大きなテキストボックスを貫通しており、その下から再開されています。
これが良いパターンかどうかはわかりません。行を選択すると、その下に新しいセクションが表示され、詳細情報が表示されます。行の選択を解除すると、セクションが非表示になります。その行の下の行が上下に移動します。行の動きが多すぎて何かが起こっていて、行が上下に移動して新しい情報がその間に表示されてから消えているように思えます。
テーブルの隣の詳細セクションはどうですか?テーブルの行はあちこちに移動しません。詳細情報は常に同じエリアにあります。あなたの目はそれほど気が散ることはありません、そしてそれはいつも詳細がどこにあるかを知ることを期待しています。