Διαχωρισμός περιεχομένου

Καθιέρωση ιεραρχίας περιεχομένου με διαχωριστικές γραμμές

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

Τύποι περιεχομένου

Ας ξεκινήσουμε με τρεις βαθμούς διαχωρισμού απλού στατικού περιεχομένου:

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

Διαδραστικότητα

Οι διαχωριστές αυξάνουν τη δυνατότητα μιας λίστας να γίνεται αντιληπτή ως ευαίσθητη επειδή δημιουργεί ένα οπτικό δοχείο γύρω από το διαδραστικό κείμενο σε σχέση με το μέγεθος του στόχου βρύσης. Είναι επίσης σύνηθες να χρησιμοποιήσετε ένα βέλος για να ενισχύσετε την κλήση για δράση στο iOS, αλλά όχι στο Android.

Διαχωριστικά vs Καμία

Οπτικό σχέδιο

Έχετε περισσότερες επιλογές από απλές, χρηστικές γραμμές. Μια σύγχρονη εταιρεία επίπλων θα μπορούσε να χρησιμοποιήσει μια μετατόπιση στο χρώμα του φόντου, ενώ ένας κατασκευαστής ρολογιών πολυτελείας θα μπορούσε να χρησιμοποιήσει περισσότερο διακοσμητικά και filigree. Τι είναι σωστό για τη μάρκα σας;

Κύρια σημεία του ελέγχου

Εάν κάνετε με γραμμές (έτσι δεν έχουμε - καμία κρίση), εδώ είναι μερικοί παράγοντες που πρέπει να θυμάστε:

Διαχωριστικά αντικειμένων

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

Ξεκινήστε το ένθετο

Τόσο το HIG της Apple όσο και το υλικό σχεδίασης προτείνουν διαχωριστές στοιχείων που ευθυγραμμίζονται με την αρχή του κειμένου στην αρχική πλευρά (το αριστερό για τις γλώσσες LTR.) Πιστεύω ότι το κάνουν αυτό για να δώσουν στον οπτικό χώρο τις εικόνες, αλλά δεν μου αρέσει η ασυνεπής γραμμή διαχωριστή δείχνει όταν μια ενιαία οθόνη αποτελείται από εικονικά και απλά στοιχεία λίστας κειμένου. Κάνει την ομάδα των στοιχείων λίστας με εικονίδια να αισθάνεται πιο συνδεδεμένη από την ομάδα χωρίς.

Έχοντας το διαχωριστικό στοιχείο ξεκινά πάντα από το ίδιο ένθετο δίνει την ψευδαίσθηση μιας πιο συνεπούς διάταξης.

Περιεχόμενο εναντίον κειμένου

Τέλος ένθετο

Για διαλογικά στοιχεία, και οι δύο συνιστούν διαιρέτες στοιχείων που πηγαίνουν στην άκρη της οθόνης στην τελική πλευρά (το δικαίωμα για τις γλώσσες LTR.) Για στατικά στοιχεία το Android συνιστά να εισάγετε. Πιστεύω ότι το κάνουν αυτό για να οριοθετήσουν σαφώς μεταξύ στατικών και διαδραστικών στοιχείων, αλλά αμφισβητώ αν ο χρήστης είναι συντονισμένος σε μια τόσο μικρή διαφορά και φέρνει ασυμμετρία στην οθόνη που μπορεί να μην είναι επιθυμητή.

Η τοποθέτηση τόσο των διαδραστικών όσο και των στατικών διαχωριστών δημιουργεί μια πιο συμμετρική και σταθερή διάταξη.

Περιεχόμενο εναντίον άκρου άκρου

Εξαιρέσεις

Υπάρχουν μερικές εξαιρέσεις για τον ίσο διαιρούμενο στοιχείο διαιρέτη:

  • Τα κουμπιά έχουν διαιρέτες στοιχείων πλήρους πλάτους για να ξεχωρίζουν από τα στοιχεία της λίστας, ειδικά σε modals.
  • Τα συνδεδεμένα στοιχεία λίστας ευθυγραμμίζουν το διαχωριστικό στην αρχή του τύπου για να μην σπάσει το συνδεδεμένο εικονίδιο «σπονδυλική στήλη».
  • Οι μονές λίστες με εικόνες μπορούν να ευθυγραμμίσουν το διαιρέτη στην αρχή του τύπου για να δώσουν στην εικόνα περισσότερο χώρο όταν είναι ο μόνος τύπος στοιχείου λίστας στην οθόνη.
Κουμπιά, Συνδεδεμένες λίστες και Ενιαίες λίστες με εικόνες

Τμήματα Διαχωριστικά

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

Ομαδοποιημένες κεφαλίδες και υποσέλιδα λίστας που ζουν εκτός του περιεχομένου λίστας στο παρασκήνιο, όπως συνιστά η HIG, τα αποσυνδέει οπτικά. Έχω δει εφαρμογές όπου το υποσέλιδο της πρώτης λίστας μπερδεύεται με το υποκεφάλαιο στο δεύτερο - oof!

Είμαι ισχυρός υποστηρικτής για την ομαδοποιημένη κεφαλίδα να επισυνάπτεται στην κορυφή της λίστας και για να συμπεριληφθεί το περιεχόμενο υποσέλιδου στο σχετικό στοιχείο λίστας ή ως κείμενο λεπτομέρειας ως μέρος της κεφαλίδας αν αυτό αφορά ολόκληρη τη λίστα. Αυτό δημιουργεί μια πιο εκδοτική εμφάνιση «κάρτας» με σαφή ιεραρχία και ομάδες περιεχομένου.

Ομαδοποιημένη κεφαλίδα και περιγραφή, εντός και εκτός

Είμαι Linzi Berry, επί του παρόντος υπεύθυνος συστημάτων σχεδιασμού στο Lyft. Νιώθω ιδρωμένος για τις λεπτομέρειες, ώστε να μην χρειαστεί. Παρακαλώ εγγραφείτε!