Αγγίξτε για να Αποσπάστε

Σχεδιασμός προσιτών καταπακτών διαφυγής για modals

Ας μιλήσουμε για μεγάλες αποδράσεις. Δεν είναι μαγικό όπως οι χειροπέδες του Houdini ή το bifrost του Thor, αντίθετα πολύ συνηθισμένο - μια διαδραστική εικόνα που αφαιρεί τα ενοχλητικά αναδυόμενα παράθυρα από το επιθυμητό περιεχόμενο. Αν οι modals, οι διαλόγοι, τα αναδυόμενα παράθυρα ... ό, τι θέλετε να τους ονομάσετε είναι ένα απαραίτητο κακό για παροδικό περιεχόμενο, πρέπει να δημιουργήσουμε προσβάσιμες καταπακτές διαφυγής.

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

Το κοινό πρότυπο ux για e-x-iting είναι αρκετά απλό, βλέπετε τι έκανα εκεί; Η ιστορία του [x] χρονολογείται από το σχεδιασμό ηλεκτρονικών υπολογιστών της δεκαετίας του 1970. Είναι η πρώτη εμφάνιση του μενού Atari TOS - μια λίστα ενεργειών που συνδέονται με γράμματα και σύμβολα πληκτρολογίου. [x] ήταν η εντολή για την έξοδο. Στη συνέχεια χρησιμοποιήθηκε από το NeXT, το οποίο ενέπνευσε τα Windows, και έγινε το πρότυπο σύμβολο για να κλείσει με τη μαζική υιοθέτηση των Windows παγκοσμίως το 1995. Όλα αυτά σημαίνει ότι δεν χρειάζεται να ανακαλύψουμε τον τροχό εδώ, χρησιμοποιήστε το σύμβολο ο καθένας σε όλο τον κόσμο περιμένει.

Προσβάσιμο σχέδιο

Θα ξεκινήσουμε με τα βασικά στοιχεία - το [x] θα πρέπει να παρέχεται πάντα, ακόμα και αν ο χρήστης μπορεί να αγγίξει το φόντο, να σπρώξει ή να χρησιμοποιήσει το εγγενές κουμπί πίσω για να απορρίψει και το modal.

Εικονίδιο εναντίον γραμματοσειράς

Σχεδιάστε ένα εικονίδιο, αντί να χρησιμοποιήσετε μια τυπογραφική επιστολή, που είναι σύμφωνη με το υπόλοιπο σετ εικονογραφίας. Θα πρέπει να γίνει σαφώς κατανοητό ως [x] με τα τέσσερα εξαρτήματα σαφώς διαχωρισμένα. Προσωπικά προτιμώ τον σχεδιασμό γωνίας 90 ° και ρυθμίζω το βάρος ώστε να ταιριάζει με το σετ.

Υψηλή αντίθεση έναντι Χαμηλή

Το χρώμα του θα πρέπει να είναι ουδέτερο και να ικανοποιεί την αναλογία αντίθεσης 4: 1. Σίγουρα, τα αναδυόμενα παράθυρα εκτελούν αστρονομικά καλύτερα όταν το [x] είναι μόλις ασπρόμαυρο γκρι, αλλά αυτό, οι φίλοι μου, είναι αυτό που ονομάζουμε σκοτεινό μοτίβο. Κάνοντας το [x] ελάχιστα ορατό, υποκινούμε τον χρήστη να κάνει την κύρια ενέργεια κάνοντας υποχρεωτική τη διαφυγή. Αυτό οδηγεί σε μια απογοητευμένη βάση χρηστών και ψευδώς θετικά για την επιχείρηση.

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

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

  • Αν το εικονίδιο και ο περιέκτης βρίσκονται κάτω από το ελάχιστο μέγεθος στόχου βρύσης (48x48dp / pt), χτίστε το στόχο βρύσης να είναι μεγαλύτερο από τα γραφικά του κουμπιού και μην το επικαλύπτετε με άλλα διαδραστικά στοιχεία.
  • Εάν αυτό το εικονίδιο ζει μέσα σε μια διαδραστική μπάρα, όπως η πλοήγηση στην κεφαλίδα, τότε η γραμμή δημιουργεί ήδη αυτό το εύκαμπτο χώρο για εσάς.

Τοποθέτηση

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

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

Διαμόρφωση θέσης

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

Κάτω από το Κέντρο

[x] Τοποθέτηση

Εσωτερικά εναντίον επικαλύψεων έναντι εξωτερικών

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

Η επικάλυψη επικαλύπτει το modal. Το σπάσιμο της συνεχούς γραμμής καλεί την προσοχή στο [x], αλλά έρχεται με ένα ξεχωριστό στυλ σχεδίασης που προσθέτει οπτική πολυπλοκότητα και αισθάνεται λιγότερο εξευγενισμένο.

Το εξωτερικό εμφανίζεται έξω από το modal. Αυτό καθαρίζει το σχεδιασμό του modal, ωστόσο το [x] θα μπορούσε να συγχέεται με το UI κάτω.

Δεξιά vs Αριστερά. Εικόνες από τον Meg Robichaud

Τέλος (Δεξιά) Η τοποθέτηση του [x] στη δεξιά πλευρά είναι καλύτερο για δεξιόστροφες εφαρμογές αντίχειρων και δεν ευθυγραμμίζεται με τη στατική εικονογραφία.

Έναρξη (Αριστερά) Η τοποθέτηση του [x] στην αριστερή πλευρά ακολουθεί το τρέχον μοντέλο πλοήγησης, αλλά αυξάνει το κατακόρυφο ύψος του τρόπου λόγω της εγγύτητάς του με την εικονογραφία αριστερά ευθυγραμμισμένη και είναι ένας επιπλέον στόχος για μεγάλα τηλέφωνα.

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

Βέλτιστη ρύθμιση

Βάζοντας τα πάντα μαζί τώρα - η τρέχουσα βέλτιστη ρύθμισή μας είναι ένα κατώτατο ευθυγραμμισμένο modal με ένα περιορισμένο, εικονογραφικό [x] στην εσωτερική, πάνω δεξιά.

Μόνο κείμενο, εικόνα και εικονίδιο

Τελευταίες σκέψεις

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

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