web-dev-qa-db-ja.com

レスポンシブでデュアルリストを表示する方法

Webアプリケーションでデュアルリストを表示しています。デスクトップビューとモバイルレスポンシブビューがあります。

スペースが少ないため、モバイルリストでデュアルリストを2列に並べて表示することはできません。

だから代替ソリューションを期待しています...

ここで私が試したものを添付しています...

enter image description here

ここに私はサンプルデスクトップ画面を添付しています：

enter image description here

ユーザーはアイテムを選択したいので、右側の「上下」ボタンを使用して、選択したリストからアイテムを下から上、上から下に移動できます。
それが私が二重リストにアプローチした理由です。

interaction-designdesign-patternsguidelinesresponsive
4
B.Sadashiv

「作業」リストを基礎として提供し、必要な場合にのみすべてのアイテムをリストに表示することをお勧めします。 2つのアクションを分離して、2つのリストの混乱を避けます。

  1. リストを見ながら注文する
  2. リストの内容を変更する

そのため、アイテムの追加から始めるのではなく、リストの現在の状態から始めて、ユーザーがアイテムを注文できるようにします。アイテムを追加または削除するには、ユーザーは2番目の画面に移動して、利用可能なアイテムの概要を表示し、必要なものを選択します。新しいリストの場合は、最初に追加/削除画面を表示し、その後、状況は上記のようになり、次の例に示すようになります。

リストを表示して注文するための画面：
enter image description here

アイテムを選択する画面：
enter image description here

1
jazZRo

選択した状態をリスト自体に表示した方がいいでしょう。そうすれば、ユーザーに必要な情報を提供するリストが1つだけ必要になります。

このソリューションは、アイテムをタップしてオンまたはオフにして選択または選択解除できるだけでなく、アイテムを選択しながらアイテム間をより効率的に移動できるため、いくつかの追加の利点を提供します（デスクトップでは、毎回選択ボタンに移動する必要があります）。

もう1つの利点は、選択されていないものをより明確に確認できることです。これは、デュアルリストデザインでは不可能なことです。

リストは次のようになります。ここで、xは選択された状態の通信を表し、リスト項目自体がトグルトリガーになります。 1つのリスト内のすべての情報と対話要素：

[x] item 1
[ ] item 2
[x] item 3
[x] item 4
[ ] item 5
[ ] item 6
[x] item 7

質問の更新を反映するように更新します。

1つのリストでこれを行うことができます。リスト内のアイテムの順序は、リストがマージされるかどうかにかかわらず、同じ意味を持ちます。たとえば、上記のリストを次のように並べ替えることができます。

[x] item 1
[x] item 7
[x] item 4
[ ] item 2
[x] item 3
[ ] item 5
[ ] item 6

リスト項目をドラッグ可能にするだけです

0
Toni Leigh