web-dev-qa-db-ja.com

あるテーブルの内容が別のテーブルの選択された行に基づいていることを明確にする方法は?

2つのグリッドスタイルテーブルのダイアログがある場合、左側のテーブルの選択された行が右側のテーブルに入力されるものであることを視覚的に示す最善の方法は何ですか?私が考えることができる最も良いのは、テーブル間の矢印ですが、テーブル間の仕切りがドラッグ可能である(テーブルは、指定されたスペースを満たすようにサイズ変更されます)ので、矢印が言うように感じます "この方法でドラッグ」または「この側を折りたたむ」。

私は常に選択された行の隣にある矢印を検討しましたが、通常は表示されているよりも多くの行があり、矢印の配置を計算するのは少し面倒かもしれません。

他の誰かが目にする明らかな解決策はありますか、または私は弾丸を噛んで矢印と一緒に行くべきですか?

14
trycatch

矢印は必要ありません。次のように色で遊ぶことができます(これは概念の証明にすぎません。灰色を、テーマに合った好きな色に変更できます)。

enter image description here

別の簡単な方法:

enter image description here

14

WindowsエクスプローラーとMacintoshファインダーは、何年も前からこの種のパターンを使用しており、確立されています。したがって、これを使用するのにも良い方法かもしれません。

小さな矢印は、OSXのさらなるコンテンツを示します。右側の最後の行は、最後にマークされたアイテムのプロパティの詳細ビューです。そのフォルダーの場合は、このフォルダーのコンテンツが表示されます。

Windows 7では、下部に詳細ビューがあり、右側に選択した画像のプレビューがあります。ウィンドウにアクティブな選択(中央の行/濃い青)と非アクティブな選択(左の行/中央の項目「Bilder」)があることに注意してください。したがって、詳細ビューがどのビューに関連しているかが常にわかります。

精神的なトリックはスクロールバーだと思います。そして、最初の空白の2行目。スクロールバーにより、すべての行が独自のエンティティになり、アイテムをクリックすると、右側の次の行のコンテンツを切り替えることができます。これは依存関係を示しています。

enter image description here

ソース http://www.ovalnets.de/

enter image description here

ソース: http://www.tippscout.de

5
FrankL

行と右側のテーブルを同じ色で強調表示します。

table selecting table

選択した行のすぐ横にある、説明した矢印も機能しますが、ここでいくつかの回答で得られるこれらのグラフィカルな例よりも少しわかりにくいです。

ドラッグ可能な仕切りの場合:カーソルを変更したり、マウスオーバーでその領域にドラッグ可能な「ハンドル」を表示したりするために、ここにあるテーブル間の領域を使用します。

編集: GUIの周りの選択にすでに特定の色またはフレームを使用している場合は、この種類の選択をその選択モデルの拡張にしてみてください。たとえば、ボタンを選択するとボタンに緑のフレームが追加され、ここでのスケッチでは青の行が青に変わるだけでなく、その緑のフレームも表示されます。こうすることで、右側のアイテムを選択すると、緑色の枠が表示されます。逆に、選択したときにGUIアイテムが青色に変わったら、テーブルの関係をフレームでマークします。

4
JOG

矢であろうとなかろうと、私はあなたが弾丸を噛み、リンケージのある種の視覚的インジケータを使用する必要があると思います。テーブルが互いに独立してスクロールできる場合、これは簡単です。そのため、常に「親」アイテムを画面上に保持できます。

mockup

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

アプリケーションについて詳しく教えてください。たぶん、2テーブル構成よりも良い解決策があるでしょう。

編集:ユースケースについて説明したことを踏まえて、2つのテーブルからなるビューが最適ではない可能性があることを繰り返し説明します。 iPadとOS X Lionの「連絡先」を見てください。これは2つのペインの設定で、左側にリストビュー、右側にリンクされたペインがあり、リストビューでの選択に関するすべての詳細が表示されます(個人的には、左と右のリンクをより明確にすることができると思います):

iOS Contacts App

最も重要なことは、インターフェイス(またはそのプロトタイプ)を実際のユーザーでテストすることです。特に、これがユーザーが毎日または毎時間操作するアプリである場合、アプリケーションの使いやすさと「人間工学」について強い意見が出ます。

2
Daniel Newman

2番目のグリッドがポップアップとして表示され、最初のグリッドを背景にぼかしながら、同じフォーム内に素敵なアニメーションが表示されます。

2
Hohinhime

これは、検索結果のプレビューを表示するために使用した方法です。

enter image description here

この方法の利点は、これが選択された結果の値にうまく対応し、クリーンであることです。

2
Mervin

私はそもそもグリッドの大ファンではありません。私は彼らが虐待されて真実が語られると思います、あなたは通常フォーマットされたリストを使うことによってより多くの情報密度を提供することができます。とは言え、いずれかの方法で配置と一緒にキャレットインジケーターを使用して、ここで表示されているものがそこで選択したものに関連していることを示します。

0
Michael Brown