5 Πρακτικές λύσεις για την παραγωγή ευαίσθητων πινάκων δεδομένων

Εικονογράφηση από τον Dominik Korolczuk

Εργάζομαι σαν Senior UI & UX Designer για App'n'roll - μια εταιρεία κατασκευής επιχειρήσεων με έδρα τη Βαρσοβία.

Όπως ίσως γνωρίζετε, ο σχεδιασμός του σήμερα απαιτεί τη φροντίδα διαφόρων τύπων οθονών και μεγεθών, έτσι ώστε οι σχεδιαστές πρέπει να καταστήσουν τα αποτελέσματα της δουλειάς μας όσο το δυνατόν πιο ανταποκρινόμενα. Αυτό μπορεί να προκαλέσει κάποια προβλήματα, ειδικά όταν πρόκειται για την τοποθέτηση τεράστιου όγκου δεδομένων σε στενές διεπαφές κινητού τηλεφώνου.

Ο λόγος για τον οποίο αποφάσισα να μοιραστώ μαζί σας τις λύσεις είναι το γεγονός ότι τα συνηθέστερα πράγματα με τα οποία αντιμετώπισα ήταν πίνακες δεδομένων.

Πώς να τοποθετήσετε έναν ευρύ πίνακα δεδομένων σε κινητές οθόνες χωρίς να χάσετε το σκοπό και την αναγνωσιμότητα;

Βρήκα 5 κοινές λύσεις για τη διαχείριση των πινάκων δεδομένων σε ευρείες οθόνες όπως smartphones ή tablet σε κάθετη λειτουργία. Μπορείτε να το χρησιμοποιήσετε αμέσως στην καθημερινή εργασία σας ως σχεδιαστής - ας πάμε!

Μικραίνω

Ο πιο απλός, είναι απλά να κόβουμε περιττές στήλες και να κρατάμε τον πίνακα συνοπτικό αφήνοντας τα κρίσιμα δεδομένα μόνο. Το παρακάτω παράδειγμα δείχνει τον ιστότοπο του Bloomberg με μόνο 4 από 9 στήλες στην προβολή για κινητά.

Πηγή: https://www.bloomberg.com/markets/stocks/futures

Εφαρμόσιμος

  • κάθε είδους δεδομένα
  • διάφορους τύπους περιεχομένου

Πλεονεκτήματα

  • εύχρηστος
  • εύκολο να αναπτυχθεί
  • απλότητα

Μειονεκτήματα

  • περιορισμένο χώρο για την παρουσίαση δεδομένων
  • πρέπει να παραιτηθούν από ένα μέρος των δεδομένων

Αν δεν θέλετε να αποθέσετε κανένα από τα δεδομένα σας, οι άλλες λύσεις ίσως είναι πιο κατάλληλες για εσάς.

Κινητός

Αυτή η λύση δεν ανταποκρίνεται αρκετά, αλλά είναι εύκολη στη χρήση και γρήγορα στην ανάπτυξη. Πρόκειται απλώς για χρήση χειρονομίες για να μετακινηθείτε σε όλο το τραπέζι οριζόντια.

Μετακινούμενος πίνακας δεδομένων που ανταποκρίνεταιΠηγή: https://codepen.io/karks88/pen/jGrjdW/

Εφαρμόσιμος

  • για ευρείς πίνακες (3-8 στήλες)
  • για σύντομα τραπέζια (συνιστάται να διατηρείτε όλο το ύψος του πίνακα πάνω από την πτυχή)

Πλεονεκτήματα

  • εύκολο να αναπτυχθεί
  • εύχρηστος

Μειονεκτήματα

  • όχι για μεγάλες ποσότητες περιεχομένου
  • ο μύθος δεν είναι ορατός μετά την κύλιση

Πρόσθετα

  • λειτουργία εστίασης για να επισημάνετε ολόκληρη τη σειρά για να βεβαιωθείτε ότι εξετάζουμε τα σωστά δεδομένα κατά την κύλιση
  • στήλες φίλτρων - απόκρυψη και εμφάνιση συγκεκριμένων στηλών

Συρρίκνωση

Αυτή η λύση ανταποκρίνεται πλήρως, όλα είναι ορατά χωρίς κύλιση και οι στήλες πλοηγούνται με χειρονομίες. Η κύρια στήλη (μύθος) μπορεί να καθοριστεί σε ένα σημείο έτσι δεν χάνουμε το πλαίσιο των δεδομένων.

Συρραπτικός πίνακας δεδομένων ανταποκρίσεωνΠίνακας οδηγού μεγεθών στη διεύθυνση http://massimodutti.com

Εφαρμόσιμος

  • για σύντομες στήλες
  • για σύντομα τραπέζια
  • χρήσιμο όταν αλλάζετε στήλες σε σειρές

Πλεονεκτήματα

  • εύχρηστος
  • ο μύθος είναι ορατός όλη την ώρα

Μειονεκτήματα

  • για σύντομα δεδομένα μόνο

Πρόσθετα

  • οι καρτέλες που αντιπροσωπεύουν τις στήλες μπορούν να χρησιμοποιηθούν για γρήγορη πλοήγηση

Μεταμορφώθηκε

Είναι μια αλεξίσφαιρη λύση για τις πιο δύσκολες εργασίες. Ο βασικός κανόνας είναι η κατάρρευση των σειρών των τραπεζιών σε ξεχωριστές κάρτες.

Μετασχηματισμένο παράδειγμα πίνακα ανταποκρινόμενων δεδομένωνhttps://elvery.net/demo/responsive-tables/ (Όχι πια πίνακες)

Εφαρμόσιμος

  • ένα τεράστιο ποσό δεδομένων
  • διάφορους τύπους περιεχομένου

Πλεονεκτήματα

  • χρήσιμο με ένα τεράστιο όγκο δεδομένων και το μέγεθός του
  • την ικανότητα να καταρρέουν και να αποκρύπτουν ορισμένα δεδομένα
  • μια ευέλικτη μορφή παρουσίασης δεδομένων

Μειονεκτήματα

  • επαναλαμβανόμενα ονόματα στηλών
  • δύσκολο να συγκρίνουμε συγκεκριμένα δεδομένα μεταξύ των σειρών

Πρόσθετα

  • δυνατότητα φιλτραρίσματος και ταξινόμησης του περιεχομένου με ευκολία
  • δυνατότητα να διαιρέσει το περιεχόμενο σε ξεχωριστές σελίδες

Συγκρίνοντας

Αυτός συνδέεται στενά με το μετασχηματισμένο παράδειγμα, αλλά αξίζει να εξηγηθεί περισσότερο. Αυτή η λύση μπορεί να είναι πολύ χρήσιμη όταν θέλουμε να συγκρίνουμε τις στήλες. Για παράδειγμα, μια προσφορά ή λειτουργίες του προϊόντος.

Είναι επίσης παρόμοιο με το Σύμπτυξη που περιγράψαμε παραπάνω, αλλά είναι έτοιμο για μεγαλύτερο όγκο δεδομένων. Το μόνο που χρειάζεται να προσθέσουμε είναι η εύκολη πλοήγηση σε όλο το τραπέζι, εμφανίζοντας μόνο δύο στήλες τη φορά.

Συγκρίνοντας πίνακα δεδομένωνΠηγή: http://vizio.com

Εφαρμόσιμος

  • διάφορους τύπους περιεχομένου
  • μεγάλες ποσότητες δεδομένων

Πλεονεκτήματα

  • εύκολο να συγκρίνετε τις στήλες
  • χρήσιμο στο ηλεκτρονικό εμπόριο
  • βοηθούν στη λήψη αποφάσεων γρηγορότερα

Μειονεκτήματα

  • βλέπετε μόνο δύο στήλες τη φορά
  • απαιτεί πρόσθετη πλοήγηση

Τελική σκέψη

Ο τύπος της λύσης που επιλέγετε εξαρτάται κυρίως από το είδος των δεδομένων που έχετε. Μια καλή πρακτική είναι η στενή συνεργασία με έναν πρωτοπόρο προγραμματιστή να επιλέξει την πιο λογική λύση όσον αφορά την κατανάλωση χρόνου και τις τεχνικές απαιτήσεις που απαιτούνται για την εφαρμογή.

Αν βρείτε αυτό το άρθρο χρήσιμο παρακαλώ μην διστάσετε να το μοιραστείτε. Πάω να γράψω περισσότερα στο μέλλον. Εάν έχετε ερωτήσεις ή θέλετε να μου δώσετε κάποια σχόλια, παρακαλώ σχολιάστε παρακάτω.