web-dev-qa-db-ja.com

ラジオボタンの複数のセットが相互に排他的であることをどのように示しますか?

ユーザーが場所から表示するカメラを選択して、そのカメラから画像を読み込むことができるパネルがあります。 1つのカメラと1つの場所からのみ画像をロードできます。このため、ラジオボタンを使用しました。場所ごとに有効なエントリは1つだけです。ただし、ラジオボタンの個々のグループも相互に排他的です。

以下に例を示します。最初の場所のカメラ1が選択されます。最初の場所からカメラ2を選択すると、カメラ1ボタンが飛び出します。別の場所からカメラを選択した場合にも表示されます。

enter image description here

接続を提案するためにボタンを物理的にグループ化しましたが、どうすればよいのか、または個別のグループも相互に排他的であることを示す必要があるのか​​わかりません。ただし、別のオプションを選択するとボタンが視覚的に飛び出すので、インターフェースの使用からは明らかです。

11
Ben Brocka

行が選択されていることを示すために行の色を変更するのはどうですか?このような:

enter image description here

次に、別のリストにあるカメラを変更するたびに、行全体の変更も確認します。

6
Matt Rockwell

あなたは今のところ良い仕事をしていると思います。しかし、私は1つの強力な提案をします:番号付けを再開しないでください。これは、名前空間の分離を示しています。これは、選択の分離も意味します。

enter image description here

同じリストとレイアウトを使用するが、リスト全体で順番にカメラに番号を付けると、-eachリストから1つのカメラではなく、リストから1つのカメラを選択するという概念を強化するのに役立ちます。

6
Myrddin Emrys

これが私のワイヤーフレーム化されたアイデアです: Complex Radio Buttons

各カメラの情報は好きなだけ含めることができますが(このスケッチではIDは省略しています)、同じような情報をグループ化して、各ボタンが基本的に特定のカメラのストーリーを説明するようにしています。 、それがどこにあるか。

すべてのボタンを同じ重みで配置し、位置を使用してそれらをフレーム化することにより、1)相互排他性をもう少し直感的にし、2)ポイント1を損なうことなく、それらの関係を保持します。

このように配置されたボタンの複数の行を使用する場合、複数の行にまたがって位置を分割することを恐れないでください。

3
Taj Moore

目のアイコンのように、関連付けられたカメラが「現在表示されている」ことを示すアイコンを表示する列を追加できます。その列の他のすべての行は空白になりますが、アイコンが選択された行から選択された行にジャンプすると、ライブカメラとアイコンの関連付けが明確になります。

1
Todd Sieling

設計を簡略化するために、アクティブな場所にないカメラボタンのカメラボタンオプションを非表示にすることができます。

非アクティブな場所には、「この場所を表示」というラベルの付いたボタンが1つあり、ホバーすると、ボタンを「カメラの表示:」というラベルに変換できます。さらに、カメラごとに1つのボタン(複数のカメラの場合のみ)。

1
Pau Giner

ベン、問題はカメラを交換した瞬間にあるようです。その時点で、ユーザーは古いカメラが動作していないことを確認する必要があります。そのための解決策は、レイアウト(好ましくは上部)のどこかにアクティブなカメラを明確に呼び出すことです:"場所MO、カメラ:3 "。そうすれば、カメラを変更すると、カメラのリストのどこにいても、変更されたことが一番上に表示されます。

ところで、私はこれが私が書いた方法で最良の解決策ではないことを知っていますが、おそらくこれに似た何かがあると役立つかもしれません。

(さらに、選択したカメラのボタンを「アクティブ」のテキストと色で接続できます)

enter image description here

1

インターフェースは同じに保ちますが、カメラのラベルを変更して、場所への参照を組み込みます。したがって、「1」は「A place-1」になります。

0
Jon White

私の508帽子をかかえて、答えに関連付けられたラベルが付いたラジオボタンを使用してみませんか?ラジオボタンを表示することで、ユーザーに単一のアイテムを選択する必要があることを伝えます。

0
Mike Hill