2つの関連リスト間の関係をより明確にする方法は？
2つの水平方向のリストがあります。1つは漢字（リストA）を含み、もう1つは選択した文字の分解（リストB）を含みます。現在、ユーザーが漢字またはコンポーネントをクリックすると、上の大きなボックスに表示されます。
問題はありませんが、さまざまなUIコントロール間の関係は明らかではありません。一般的に、それを示すための最良の方法は何ですか。
リストAのアイテムをクリックすると、リストBに関連情報が表示されますか？
リストAまたはBの項目をクリックすると、大きなボックスに詳細情報が表示されますか？
私はこれをあまりにも長く見ていて、それを改善する方法をまったく考えることができないと思いますので、どんな提案もいただければ幸いです。現在のUIは次のとおりです。
まず、リストAをリストBに視覚的に接続します。
次に、文字ボックスをリストAとリストBの両方の下に配置します。
そうすれば、つながりの階層が明確になります。
エリックスの答えは好きですが、空間的な関係を示すために少し視覚的に強調したいと思います。私の知る限り、これは漢字では重要だからです。
この投稿は、ericへのコメントとしてより適切ですが、コメントに画像を入れることができるかどうかはわかりません。
どういうわけか私はこれら2つのレベルで問題を抱え続けています。1つは実際には別のサブカテゴリであり、それらは同じに見えます。また、最初のレベルでキャラクターを選択し、次に2番目のレベル（最初のピース）でキャラクターを選択すると、そのキャラクターに戻りたい場合、選択したアイテムを選択する必要があります。
その前にではなく、キャラクターに焦点を合わせたときに、この分解ビューが必要なようです。だから私はそれを抽出して、キャラクターと一緒にウィンドウに配置しようとしました。
また、2つの行があるため、ユーザーは両方を選択する必要がありますが、最初の1つを選択した後でのみオプションを指定できます。
pS私もその大きな醜い再起動ボタンを縮めました：Sそれはまだ場違いに見えます
これが私の提案です：
選択ボックスのタイプごとに個別の「大」表示を検討することもできます。このようにして、分解された要素の1つに隣接する完全なキャラクターを同時に使用できます。
大きなディスプレイを使い続けたい場合は、Ericsが進んでいるところが好きですが、完全な文字またはを選択するオプションを自分に与えたい 列のブラウズパターン がニーズに正しく適合しないのはそのためです。代わりに、あなたが試すかもしれないのは、それぞれの完全な文字に対して一種の相互参照を作成することです：
Erics氏をさらに詳しく説明するには、物理的な接続も必要であり、視覚的なメタファーも変更する必要があります。
リストBを「吹き出し」に変換します。
次に、リストAとリストBの間のUI関係を明確に表示します。テキストフィールドのすべての空のスペースを取り除くと、視覚的にすっきりした関係になります。
キャラクターを指す小さな三角形のことを考えましたが、タイトルをどうするかわかりませんでした。また、（ここにすでにあるように）選択のための明確な識別がある場合に、私が見るのはいつも奇妙です。これは単なる個人的な意見です。
一番上のボックスで何も選択されていない場合は、一番下のボックスを非アクティブにしてみてください。 （またはそれを削除することもできますが、これもレイアウトによって異なります）。
アプリケーションの残りの部分がどのように見えるのかわからないので、要素の並べ替えを提案することはできません。
ビジュアルリンケージは、進むべき道です。高価なアプローチは、上位のキャラクターが下位のキャラクターに普及するアニメーションを作成することです。矢印は明確な視覚的接続を提供するので、おそらくほとんどの状況で十分です。
私にとって、文字がクリック可能かどうかは明らかではありません。穏やかな視覚的なヒントを与えることができれば、それがより明確になる可能性が高くなります。
下のボックスを非表示にし、文字をクリックしたときに展開すると、接続が示されます。ユーザーの進行状況を追跡し、視覚的なプレゼンテーションをそれに追従させると、それは明確になります。
この 画面レイアウトに関するスライドシェアプレゼンテーション は、確立されたパターンを使用して解決できる多くの例です。問題のマスター/詳細と列の参照を見てください。
西洋の読書パターンに合わせるために、リストボックスを上または左に配置することをお勧めします。したがって、ページをスキャンすると、最初にクリック可能なオプションが表示され、可能な操作が簡単にわかります。
編集：デスクトップまたはブラウザソリューションについては、投稿をもう一度読んでも、ブラウザのパターンよりもモバイルのパターンを探しているのかどうかわかりません。もしそうなら、この答えを気にしないでください。