it-swarm.com.de

Entwerfen Sie Muster oder Strategien für komplexe oder große Tabellendaten in Mobiltelefonen

Ich möchte eine Tabelle mit 4/5 Spalten und möglicherweise 100 Zeilen (wie derzeit in der Desktop-App) auf Smartphones anzeigen. Die Tabellenzellen sind auch editierbar. Jetzt möchten wir diese Desktop-App auf Smartphones (Android/IOS) portieren. Dies ist die am besten optimierte Methode, um dies auf Smartphones anzuzeigen.

** Ich bin sicher, dass viele Leute inzwischen auf dieses Problem gestoßen sind. Gibt es Muster oder Lösungen für die Anzeige derart großer Datenmengen (bearbeitbar) auf Smartphones?.

19
carora3

Die erste Frage, die Sie sich beim Entwerfen für Mobiltelefone stellen sollten, lautet: "Müssen Benutzer in der Lage sein, unterwegs dieselben Aktionen auszuführen, die sie an ihren Arbeitsstationen ausführen?" Die zweite Frage, die Sie stellen sollten, lautet: "Können alle diese Aktionen bequem auf allen Mobilgeräten ausgeführt werden?"

Wenn Sie mit Tabellen mit 100 Zeilen arbeiten, bedeutet dies mindestens 7-8 Bildschirme auf einem Mobiltelefon. Das ist nicht bequem, besonders wenn Sie möchten, dass sie bearbeitet werden können. Die Bearbeitung muss irgendwie aufgerufen werden, was normalerweise durch Tippen erreicht wird. Der empfohlene Zielbereich ist 9 mm , sodass Ihre gesamte Tischhöhe bis zu 900 mm betragen kann. (90 cm/0,9 m/35,4 in/2,95 ft).

Löschen Sie daher die Bearbeitungsfunktionen und führen Sie eine Art Paginierung und Filterung ein, um die Benutzerfreundlichkeit zu verbessern.

Es gibt auch eine ähnliche Frage: Wie sollen große Tabellenspalten in einem responsiven Design behandelt werden? und Sie können nach anderen mobilen Tabellen Fragen suchen, um weitere Ideen und Lösungen zu erhalten.

31
dnbrv

Filament Group bietet den besten Ansatz für die Verwaltung von Tabellen im Responsive Design , auf den ich gestoßen bin.

Sie haben viele andere Muster und Techniken, um unterschiedliche Bildschirmgrößen zu unterstützen.

Zusätzliches Detail:

Die Muster/Skripte, die unter dem obigen Link verfügbar sind, ermöglichen die Darstellung von Tabellendaten in unterschiedlichen Bildschirmgrößen. Durch Identifizieren der Spalten, die in kleineren Größen verwaltet werden sollen, und Bereitstellen der Mittel zum Aktivieren zusätzlicher Spalten wird der primäre Fokus, den die Daten darstellen, beibehalten.

Bearbeiten:

Die Filament Group hat eine Javascript-Bibliothek namens TableSaw veröffentlicht, die ihre reaktionsschnellen Tabellenrecherchen/-empfehlungen implementiert.

10
Adam Fellowes

Ich hatte das gleiche Problem und wir haben eine Lösung gewählt, die wir bei CSStricks gesehen haben.

http://css-tricks.com/responsive-data-table-roundup/

Sie haben dort unterschiedliche Ansätze:

  1. Zeigen Sie die vollständige Tabelle an und bieten Sie einen Link an, um sie in einer lesbaren Größe anzuzeigen.
  2. Konvertieren Sie es in ein Kreisdiagramm
  3. Machen Sie es vertikal (dies ist das, was wir wählen)
  4. Der Filamentgruppenansatz (Auswahl der Felder, die Sie sehen möchten)
  5. Ziemlich ähnlich zu 3
7
Marina