Οθόνες Skeleton: Πότε να τις χρησιμοποιείτε αντί για Spinners
Τι είναι οι οθόνες σκελετού, όταν κερδίζουν τα spinners, πώς να τις σχεδιάσετε ώστε να ταιριάζουν με πραγματικό περιεχόμενο και πώς να τις ζωντανέψετε χωρίς να βλάψετε την απόδοση ή την προσβασιμότητα.
Core Takeaway
Μια οθόνη σκελετού είναι ένα σύμβολο κράτησης θέσης που μοιάζει με wireframe που δείχνει τη διάταξη του περιεχομένου κατά τη φόρτωση. Χρησιμοποιήστε το για πλήρεις σελίδες και λίστες με προβλέψιμο σχήμα. χρησιμοποιήστε ένα spinner για μικρές περιοχές ή άγνωστο περιεχόμενο και πραγματική πρόοδο για μεγάλες εργασίες. Κάντε τον σκελετό να ταιριάζει με την πραγματική διάταξη, ώστε να μην αναπηδά τίποτα όταν φθάνει το περιεχόμενο.
Τι είναι η οθόνη σκελετού
Το Nielsen Norman Group ορίζει μια οθόνη σκελετού ως ένα σύμβολο κράτησης θέσης για μια σελίδα φόρτωσης που μιμείται τη διάταξη με μια απεικόνιση που μοιάζει με wireframe. Χρησιμοποιείται για φορτώσεις πλήρους σελίδας και μειώνει τον αντιληπτό χρόνο φόρτωσης, επειδή οι άνθρωποι βλέπουν τη δομή αυτού που έρχεται αντί για μια κενή περιοχή.
Πότε να χρησιμοποιήσετε ποια
Αντιστοιχίστε την ένδειξη με το περιεχόμενο και την αναμονή:
- Σκελετός: φορτώνει σελίδα ή λίστα όπου είναι γνωστή η διάταξη, όπως ροές, κάρτες και προφίλ.
- Spinner: μικρές περιοχές, κουμπιά ή περιεχόμενο του οποίου το σχήμα δεν μπορείτε να προβλέψετε.
- Γραμμή προόδου: μεγάλες εργασίες που μπορείτε να μετρήσετε, όπως μεταφορτώσεις και εξαγωγές.
- Τίποτα: πολύ γρήγορες αποκρίσεις, όπου μια ένδειξη τρεμοπαίζει μόνο.
Σχεδιάζοντας έναν καλό σκελετό
Χρησιμοποιήστε τις πραγματικές διαστάσεις του στοιχείου, ώστε η σελίδα να μην μετατοπίζεται κατά την άφιξη του περιεχομένου, γεγονός που προστατεύει επίσης τη βαθμολογία σας αθροιστική αλλαγή διάταξης. Διατηρήστε τα σχήματα απλά (μπλοκ για εικόνες, γραμμές για κείμενο), χρησιμοποιήστε γκρι χαμηλής αντίθεσης και αντικαταστήστε κάθε σύμβολο κράτησης θέσης με πραγματικό περιεχόμενο μόλις είναι έτοιμο αντί να περιμένετε τα πάντα.
Ζωντανοί σκελετοί
Το NN/g σημειώνει ότι ορισμένοι σκελετοί περιλαμβάνουν ένα παλμικό ή αστραφτερό κινούμενο σχέδιο για να σηματοδοτήσει ότι το σύστημα εξακολουθεί να λειτουργεί. Διατηρήστε το αργό και διακριτικό, κινήστε την αδιαφάνεια ή έναν μετασχηματισμό αντί για τις ιδιότητες διάταξης και σταματήστε το όταν είναι ενεργοποιημένη η μειωμένη κίνηση. Δώστε στην περιοχή φόρτωσης μια προσβάσιμη ετικέτα, όπως "Φόρτωση αποτελεσμάτων".
Κλειδί Principles για να θυμάστε
- Οι σκελετοί δείχνουν τη διάταξη του επερχόμενου περιεχομένου και μειώνουν την αντιληπτή αναμονή
- Χρησιμοποιήστε τα για προβλέψιμες φορτώσεις σελίδων και λιστών. κλωστήρες για μικρές ή άγνωστες περιοχές
- Ταιριάξτε τις πραγματικές διαστάσεις για να αποφύγετε τη μετατόπιση της διάταξης
- Διατηρήστε τη λάμψη απαλή και σταματήστε τη για μειωμένη κίνηση
- Επισημάνετε τις περιοχές φόρτωσης ετικετών για προγράμματα ανάγνωσης οθόνης
Συχνές Ερωτήσεις
Πηγές
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev