it-swarm.com.de

wie man eine kompakte Benutzeroberfläche für Listen erstellt

Ich mache eine App mit 2 Listen im Hauptbildschirm, und der für die 2 Listen zugewiesene Speicherplatz ist gleich. Es sind also nur 5 Elemente für jede Liste sichtbar.

enter image description here

Ich denke an eine Verbesserung, um mehr Elemente für jede Liste sichtbar zu machen. Mögliche Lösungen:

Lösung 1: Verwenden Sie ein Widget mit Registerkarten, um die 2 Listen anzuzeigen. Die 2 Listen teilen sich den gleichen Platz und es ist nur 1 Liste sichtbar und eine andere wird ausgeblendet.

Lösung 2: Verwenden Sie einen Toolbox-Stil : enter image description here

Meine Frage ist : Ich denke, weder Lösung 1 noch Lösung 2 sind eine gute Wahl. Gibt es eine andere Möglichkeit, dies zu tun? und ist der "toolbox" -Stil heutzutage angemessen? Ich möchte keine App wie die Technologie des letzten Jahrhunderts erstellen.

5
Mason Zhang

Ich würde mich zur Tabs-Lösung beugen. Im Moment verwenden Sie viel vertikalen Raum, und wenn zwei Listen übereinander liegen, ist die Anzeige schwierig. Stellen Sie sich vor, Sie haben diese beiden Toolboxen aus Ihrem Beispiel übereinander.

Der Ansatz mit Registerkarten spart Platz und ermöglicht es Ihnen, einige coole Dinge zu erledigen, z. B. kleine Hinweise im Apple-Stil auf der Registerkarte, die die Anzahl neuer oder wichtiger Elemente in dieser Registerkarte anzeigen. Sie müssen nicht einmal per se "Tabulatoren" sein - nur Schaltflächen, die den Status des Bedienfelds unter ihnen umschalten.

3
kylomylo

Meine endgültige Lösung für diese Frage: Seiten mit Registerkarten, aber mit einem anderen Stil. Scheint viel besser als altes Design.

enter image description here

enter image description here

2
Mason Zhang

Ein Akkordeon ist nützlich, wenn Sie mehr als zwei Listen haben und zwischen diesen wechseln möchten. Sie haben nur zwei Listen, also denke ich, dass Akkordeon ein bisschen übertrieben ist.

Warum sie nicht einfach nebeneinander stellen?

enter image description here

2
Rahul

Das habe ich mir ausgedacht:

  • Erstellen Sie es wie eine normale Navigation, genau wie Sie es mit einem iPhone oder der mobilen Standardnavigationsmethode von Jquery tun.
  • Verwenden Sie eine kleine Bildlaufleiste in den beiden Listen.
  • Erstellen Sie ein Raster und verwenden Sie nur Symbole, um Platz zu sparen.
1
Tony Bolero