it-swarm.com.de

So zeigen Sie die doppelte Liste in Responsive an

Ich zeige eine doppelte Liste in der Webanwendung. Es verfügt über eine Desktop-Ansicht und eine mobile Reaktionsansicht.

Da wir wissen, dass wir die doppelte Liste 2 Spalten in der mobilen Ansicht aufgrund des geringeren Speicherplatzes nicht nebeneinander anzeigen können.

Erwarten Sie also alternative Lösungen ...

Hier füge ich hinzu, was ich versucht habe ...

(enter image description here

Hier füge ich einen Beispiel-Desktop-Bildschirm hinzu:

(enter image description here

Wenn der Benutzer ein Element auswählen möchte, kann er es mit den Schaltflächen "Auf und Ab" auf der rechten Seite von unten nach oben und von oben nach unten aus der ausgewählten Liste verschieben.
Das ist der Grund, warum ich mich der doppelten Liste genähert habe.

4
B.Sadashiv

Es ist besser, die "Arbeits" -Liste als Grundlage bereitzustellen und die Liste nur bei Bedarf mit allen Elementen anzuzeigen. Es gibt zwei Aktionen, die ich trennen und Verwechslungen zwischen den beiden Listen vermeiden würde:

  1. Bestellen Sie Artikel, während Sie die Liste anzeigen
  2. Ändern Sie den Inhalt der Liste

Beginnen Sie also nicht mit dem Hinzufügen von Artikeln, sondern mit dem aktuellen Status der Liste und ermöglichen Sie den Benutzern, Artikel zu bestellen. Um Elemente hinzuzufügen oder zu entfernen, wechseln Benutzer zu einem zweiten Bildschirm, in dem sie einen Überblick über die verfügbaren Elemente haben und auswählen, was sie benötigen. Zeigen Sie im Falle einer neuen Liste zuerst den Bildschirm zum Hinzufügen/Entfernen an. Danach ist die Situation wie oben angegeben und im folgenden Beispiel dargestellt:

Ein Bildschirm zum Anzeigen und Ordnen der Liste:
enter image description here

Ein Bildschirm zum Auswählen von Elementen:
enter image description here

1
jazZRo

Wäre es nicht besser, den ausgewählten Status in der Liste selbst anzuzeigen? Auf diese Weise benötigen Sie nur eine Liste, die dem Benutzer die benötigten Informationen liefert.

Diese Lösung bietet einige zusätzliche Vorteile, da Sie nur auf ein Element tippen oder es deaktivieren können, um es auszuwählen oder die Auswahl aufzuheben, und Sie effizienter zwischen Elementen wechseln können, während Sie sie auswählen (auf dem Desktop gibt es keine müssen jedes Mal zu den Auswahltasten wechseln).

Ein weiterer Vorteil ist, dass Sie auch viel klarer sehen können, was nicht ausgewählt ist, was mit einem Dual-List-Design nicht möglich ist.

Ihre Liste könnte ungefähr so ​​aussehen, wobei x eine ausgewählte Statuskommunikation darstellt und die Listenelemente selbst die Umschaltauslöser sind. Alle Informations- und Interaktionselemente in einer Liste:

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

Aktualisieren, um die Aktualisierung der Fragen widerzuspiegeln.

Sie können dies immer noch in einer Liste tun. Die Reihenfolge der Elemente in der Liste hat immer noch die gleiche Bedeutung, unabhängig davon, ob die Listen zusammengeführt werden oder nicht. Sie können beispielsweise die obige Liste wie folgt neu anordnen:

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

Machen Sie einfach die Listenelemente ziehbar

0
Toni Leigh