Ο απόλυτος οδηγός σχεδίασης διεπαφής χρήστη

Περιεχόμενο

• 01. Επιλέξτε την τυπογραφία σας
• 02. Επιλέξτε τη σωστή παλέτα
• 03. Σύνδεσμοι και κουμπιά στυλ
• 04. Δημιουργήστε τα στοιχεία σας
• 05. Εγγράψτε και συνεργαστείτε

Τι είναι ο σχεδιασμός διεπαφής χρήστη; Μια καλύτερη ερώτηση θα ήταν, τι πραγματικά συμβαίνει στο σχεδιασμό μιας διεπαφής χρήστη; Αισθητική? Ευχρηστία; Προσιτότητα? Ολα τους? Πώς συνδυάζονται όλοι αυτοί οι παράγοντες για να επιτρέψουν τη βέλτιστη εμπειρία χρήστη και ποιος πρέπει να έρθει πρώτος;

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

01. Επιλέξτε την τυπογραφία σας

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

Ωστόσο, η καλά σχεδιασμένη τυπογραφία μπορεί ακόμα να είναι αισθητικά ικανοποιητική. Το ασπρόμαυρο Helvetica (ή μια παρόμοια γραμματοσειρά) μπορεί να είναι ομορφιά μετά από λίγες απλές τυπογραφικές βελτιώσεις. Με βελτιώσεις, εννοούμε τροποποίηση του μεγέθους της γραμματοσειράς, του ύψους γραμμής, της απόστασης γραμμάτων και ούτω καθεξής - όχι της γραμματοσειράς ή του χρώματος του κειμένου.

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

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

Όσον αφορά την αναγνωσιμότητα και την αναγνωσιμότητα, το ελάχιστο αποδεκτό μέγεθος γραμματοσειράς όπως ορίζεται από τις Οδηγίες προσβασιμότητας περιεχομένου Ιστού WCAG 2.0 είναι 18pt (ή έντονα 14pt). Το καλύτερο μέγεθος γραμματοσειράς που χρησιμοποιείται εξαρτάται σε μεγάλο βαθμό από την ίδια τη γραμματοσειρά, αλλά είναι σημαντικό να προσέχετε την οπτική ιεραρχία και πώς αυτό το μέγεθος βάσης διακρίνεται από περιλήψεις και επικεφαλίδες (π.χ. h1>, h2>, h3>).

Με το εργαλείο επιλογής σχεδίασης διεπαφής χρήστη (θα χρησιμοποιούμε το InVision Studio), δημιουργήστε μια σειρά επιπέδων κειμένου (Τ) και, στη συνέχεια, προσαρμόστε όλα τα μεγέθη για να συσχετιστούν με το ακόλουθο πρότυπο:

• h1>: 44 εικονοστοιχεία
• h2>: 33 εικονοστοιχεία
• h3>: 22 εικονοστοιχεία
• p>: 18 εικονοστοιχεία

Με το InVision Studio (και όλα τα άλλα εργαλεία σχεδίασης διεπαφής χρήστη), αυτό γίνεται προσαρμόζοντας τα στυλ χρησιμοποιώντας τον πίνακα Inspector στη δεξιά πλευρά.

Στη συνέχεια, επιλέξτε τη γραμματοσειρά σας, αλλά προσέξτε γιατί αυτό που μπορεί να παρατηρήσετε με κάποιες γραμματοσειρές είναι αυτό 18px ρ> και 22 εικονοστοιχεία h3> δεν φαίνεται τόσο διαφορετικό. Έχουμε δύο επιλογές: τροποποιήστε τα μεγέθη γραμματοσειρών ή εξετάστε διαφορετική γραμματοσειρά για επικεφαλίδες. Πηγαίνετε με το τελευταίο εάν προβλέπετε ότι το σχέδιό σας θα είναι βαρύ κείμενο.

Εχε στο νου σου οτι:

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

Υψος γραμμής

Το βέλτιστο ύψος γραμμής διασφαλίζει ότι οι γραμμές κειμένου έχουν αρκετή απόσταση μεταξύ τους για να επιτύχουν αξιοπρεπή επίπεδα αναγνωσιμότητας. Αυτό γίνεται όλο και περισσότερο αναγνωρίζεται ως «πρότυπο». Το εργαλείο ελέγχου φάρων της Google το προτείνει ακόμη και ως μη αυτόματο έλεγχο (ή ακόμη και ως επισήμανση εάν το κείμενο περιέχει συνδέσμους που ενδέχεται να είναι πολύ κοντά μεταξύ τους ως αποτέλεσμα του μη βέλτιστου ύψους γραμμής).

Για άλλη μια φορά, το WCAG μας βοηθάει με αυτό, δηλώνοντας ότι τα ύψη γραμμής πρέπει να είναι 1,5 φορές το μέγεθος της γραμματοσειράς. Έτσι, στο εργαλείο σχεδίασης διεπαφής χρήστη στην περιοχή "Γραμμή" (ή παρόμοιο), πολλαπλασιάστε απλώς το μέγεθος της γραμματοσειράς με - τουλάχιστον - 1,5. Για παράδειγμα, εάν το κύριο κείμενο είναι 18 εικονοστοιχεία, τότε το ύψος της γραμμής θα είναι 27 εικονοστοιχεία (18 * 1,5 - μπορείτε επίσης να εκτελέσετε τη λειτουργία μαθηματικών απευθείας στον Επιθεωρητή). Και πάλι, να είστε προσεκτικοί - αν το 1,6x αισθάνεται καλύτερη εφαρμογή, χρησιμοποιήστε 1.6x. Να θυμάστε ότι διαφορετικές γραμματοσειρές θα παράγουν διαφορετικά αποτελέσματα.

Είναι πολύ νωρίς για να σκεφτούμε τη χρήση πραγματικών δεδομένων στο σχεδιασμό μας, αλλά, τουλάχιστον, πρέπει ακόμα να χρησιμοποιήσουμε κάπως ρεαλιστικά δεδομένα (ακόμη και lorem ipsum). Το InVision Studio διαθέτει μια εγγενή εφαρμογή πραγματικών δεδομένων για να μας βοηθήσει να δούμε πώς μπορεί να μοιάζει η τυπογραφία μας.

Διάστημα παραγράφων

Η απόσταση των παραγράφων δεν είναι στυλ που μπορούμε να δηλώσουμε χρησιμοποιώντας το Inspector του InVision Studio. Αντ 'αυτού, θα πρέπει να ευθυγραμμίσουμε μη αυτόματα τα επίπεδα χρησιμοποιώντας τους Έξυπνους οδηγούς (⌥). Παρόμοιο με το ύψος γραμμής, ο μαγικός πολλαπλασιαστής είναι 2x (διπλάσιο από το μέγεθος της γραμματοσειράς). Για παράδειγμα, εάν το μέγεθος της γραμματοσειράς είναι 18 εικονοστοιχεία, τότε θα πρέπει να υπάρχει τουλάχιστον διάστημα 36 εικονοστοιχείων προτού οδηγήσετε στο επόμενο μπλοκ κειμένου. Η απόσταση των γραμμάτων πρέπει να είναι τουλάχιστον 0,12.

Ωστόσο, δεν χρειάζεται να ανησυχούμε για αυτό μέχρι να αρχίσουμε να δημιουργούμε στοιχεία.

Κοινόχρηστα στυλ

Εάν το εργαλείο σχεδίασης διεπαφής χρήστη το υποστηρίζει (το InVision Studio δεν το κάνει ακόμη), εξετάστε το ενδεχόμενο να μετατρέψετε αυτά τα τυπογραφικά στυλ σε "Κοινόχρηστα στυλ" για να τα επαναχρησιμοποιήσετε γρήγορα διασφαλίζοντας ταυτόχρονα την οπτική συνέπεια. Αυτό επιτυγχάνεται συνήθως μέσω του Επιθεωρητή.

02. Επιλέξτε τη σωστή παλέτα

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

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

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

01. Εντελώς
Η προσθήκη Stark είναι συμβατή με το Sketch και το Adobe XD και σας βοηθά να ελέγξετε την αντίθεση χρωμάτων και να προσομοιώσετε την τύφλωση χρωμάτων απευθείας από τον καμβά. Η υποστήριξη για το Figma και το InVision Studio έρχονται πολύ σύντομα.
02.Χρωματιστά
Τα χρώματα είναι ένα σύνολο 90 συνδυασμών χρωμάτων που έχουν την κατάλληλη ποσότητα αντίθεσης χρώματος για να ικανοποιήσουν τις Οδηγίες WCAG 2.0 - μερικές από αυτές καταφέρνουν ακόμη και να πληρούν το πρότυπο AAA.
03. Έργο A11y
Το A11y Project είναι ένας τεράστιος κόμβος για όλα τα πράγματα που σχετίζονται με την προσβασιμότητα. Περιλαμβάνει πόρους, εργαλεία, συμβουλές, φροντιστήρια και δημιουργείται από τον κατασκευαστή του Stark plugin και λαμβάνει χρηματοδότηση από το InVision.

Οι τρεις τύποι χρώματος

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

• Ένα χρώμα παρότρυνσης για δράση (επίσης το κύριο χρώμα μάρκας)
• Ουδέτερο σκούρο χρώμα (καλύτερο για στοιχεία UI ή σκοτεινή λειτουργία)
• Για όλα τα παραπάνω, μια ελαφρώς ελαφρύτερη και πιο σκοτεινή παραλλαγή

Αυτό επιτρέπει τα εξής:

• Η σκοτεινή λειτουργία θα είναι εύκολα εφικτή
• Το χρώμα CTA μας δεν θα συγκρούεται ποτέ με άλλα χρώματα
• Σε οποιοδήποτε σενάριο θα είμαστε σε θέση να τονίσουμε και να αποσυμπιέσουμε

Ρυθμίστε την παλέτα σας

Με το εργαλείο σχεδιασμού διεπαφής χρήστη της επιλογής σας, δημιουργήστε έναν αρκετά μεγάλο πίνακα γραφικών (πατήστε Α) για κάθε χρώμα (με το όνομα «Μάρκα», «Ουδέτερο / Φως» και «Ουδέτερο / Σκούρο»). Στη συνέχεια, σε κάθε πίνακα γραφικών, δημιουργήστε επιπλέον μικρότερα ορθογώνια που εμφανίζουν τις πιο σκούρες και ελαφρύτερες παραλλαγές του χρώματος, καθώς και τα ίδια τα άλλα χρώματα.

Θα θεωρούσαμε ελαφρώς ελαφρύτερο και σκοτεινότερο ως 10% επιπλέον λευκό και 10% επιπλέον μαύρο αντίστοιχα. Όταν τελειώσετε, εμφανίστε ένα αντίγραφο των τυπογραφικών στυλ σε κάθε πίνακα γραφικών. Το χρώμα αυτών των επιπέδων κειμένου πρέπει να είναι ουδέτερο φως, εκτός από τον πίνακα ουδέτερου φωτός όπου πρέπει να είναι ουδέτερο σκοτάδι.

Αντίθεση

Στη συνέχεια, θα πρέπει να ελέγξουμε τα χρώματα μας για βέλτιστη αντίθεση χρώματος. Υπάρχει μια ποικιλία εργαλείων που μπορούν να το κάνουν αυτό, για παράδειγμα το πρόσθετο Stark για το Sketch και το Adobe XD ή το Contrast για macOS - ωστόσο, μια διαδικτυακή λύση όπως το Contrast Checker ή το Color Contrast Checker θα είναι μια χαρά.

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

03. Σύνδεσμοι και κουμπιά στυλ

Μέγεθος

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

Μια δοκιμή οπτικής απόδοσης είναι μια δοκιμή χρηστικότητας που χρησιμοποιείται για να προσδιοριστεί εάν οι στόχοι βρύσης φαίνεται να έχουν δυνατότητα κλικ. Συγχρονίστε το σχεδιασμό από το Studio στο Freehand (⌘⇧ ΣΤ), στείλτε το URL που προκύπτει στους υπεύθυνους δοκιμών και ζητήστε τους να περιβάλλουν τα στοιχεία που πιστεύουν ότι μπορούν να κάνουν κλικ.

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

Γενικά, συνιστούμε το κείμενο κουμπιού να δηλώνεται ως 18px (ίδιο με το κύριο κείμενο), αλλά ότι τα ίδια τα κουμπιά έχουν τρεις παραλλαγές σε μέγεθος:

• Κανονικός: 44px σε ύψος (στρογγυλεμένες γωνίες: 5px)
• Μεγάλο: 54px σε ύψος (στρογγυλεμένες γωνίες: 10px)
• Πολύ μεγάλο: 64px σε ύψος (στρογγυλεμένες γωνίες: 15px)

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

Βάθος

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

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

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

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

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

Θυμηθείτε να επαναλάβετε αυτό το βήμα για κάθε artboard. Μην συμπεριλάβετε τα επώνυμα κουμπιά CTA στον πίνακα γραφικών επωνυμίας - αργότερα θα καλύψουμε τι συμβαίνει όταν ορισμένοι συνδυασμοί δεν λειτουργούν.

04. Δημιουργήστε τα στοιχεία σας

Τα στοιχεία είναι μια τεράστια εξοικονόμηση χρόνου και όλα τα εργαλεία σχεδίασης διεπαφής χρήστη προσφέρουν αυτήν τη δυνατότητα (π.χ. στο Sketch, ονομάζονται σύμβολα). Στο Studio μπορούμε να δημιουργήσουμε στοιχεία επιλέγοντας όλα τα επίπεδα που πρέπει να αποτελούν το στοιχείο και χρησιμοποιώντας το ⌘κ συντομώτερος δρόμος.

Χρήση εξαρτημάτων

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

Αυτό δεν σημαίνει ότι πρέπει να σχεδιάσουμε πολλά στοιχεία ή να είμαστε έτοιμοι για οποιοδήποτε πιθανό σενάριο, αλλά αυτό σημαίνει ότι πρέπει να υιοθετήσουμε μια στάση «Τι γίνεται αν;».

Για παράδειγμα, εάν το wireframe μας απαιτεί ένα στοιχείο 3x1, αλλά γνωρίζουμε ότι το περιεχόμενο δεν έχει τεθεί σε πέτρα, μια μικρή σκέψη μπορεί να μας κάνει να αναρωτηθούμε: «Τι γίνεται αν αυτά τα στοιχεία καταλήξουν να είναι 4x1;». Ο κανόνας είναι: σχεδιασμός μόνο για τις ανάγκες των χρηστών που υπάρχουν ήδη, αλλά προσπαθήστε να κάνετε λύσεις σχετικά ευέλικτες. Διαφορετικά, θα καταλήξουμε με κάποιο πολύ ακατάστατο «χρέος σχεδιασμού» αργότερα.

Τώρα μπορούμε να επαναχρησιμοποιήσουμε αυτό το στοιχείο σύροντάς το στον καμβά από τις Βιβλιοθήκες> Έγγραφο στην αριστερή πλευρά, αν και λάβετε υπόψη ότι αυτή η ροή εργασίας μπορεί να διαφέρει ανάλογα με το εργαλείο διεπαφής χρήστη.

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

Όπως κάναμε με τα τυπογραφικά μας στυλ, χρώματα και κουμπιά, πρέπει να θυμόμαστε να οργανώνουμε προσεκτικά τα στοιχεία μας.

Χρησιμοποιώντας τους κανόνες μας

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

Σωστά. Επομένως, αυτή θα ήταν μια ιδανική ευκαιρία για να δημιουργήσετε ένα στοιχείο - συγκεκριμένα, έναν συνδυασμό κεφαλίδας + κειμένου + κουμπιού. Παρατηρήστε πώς έχω δημιουργήσει ένα σκηνικό κάρτας ουδέτερου φωτός για να επιτρέψω τη χρήση του κουμπιού επωνυμίας. Ομοίως, το πεδίο ουδέτερης φωτεινής μορφής (τα πεδία φόρμας είναι συνήθως λευκά λόγω του νοητικού μοντέλου που είναι ιστορικά συνώνυμο με έντυπες φόρμες) δεν φαίνεται καταπληκτικό στο ουδέτερο ανοιχτό φόντο, ώστε να μπορούν να χρησιμοποιηθούν μόνο στο ουδέτερο σκούρο φόντο - είτε άμεσα είτε μέσα ένα ουδέτερο σκοτεινό συστατικό. Έτσι κάνουμε το σχεδιασμό μας ευέλικτο, τηρώντας τους κανόνες μας και διατηρώντας τη συνέπεια.

Δοκιμή στρες

Στην ιδανική περίπτωση, ο γρηγορότερος και πιο αποτελεσματικός τρόπος εξασφάλισης αντοχής στο σχεδιασμό μας είναι να το δοκιμάσετε με άγχος. Η δοκιμή ενός σχεδίου σημαίνει ότι είναι σκληρή. Ας υποθέσουμε ότι έχουμε μια πλοήγηση με X ποσότητα nav αντικειμένων, επειδή αυτή ήταν η απαίτηση. για να διασφαλίσετε πραγματικά ευελιξία, δοκιμάστε να αλλάξετε αυτές τις απαιτήσεις προσθέτοντας περισσότερα στοιχεία πλοήγησης ή, για να ρίξετε πραγματικά ένα κλειδί στα έργα, δοκιμάστε επίσης να προσθέσετε ένα στοιχείο πλοήγησης με υψηλότερη οπτική ιεραρχία από τα άλλα. Οι κανόνες μεγέθους, τυπογραφίας και χρώματος επιτρέπουν κάτι τέτοιο; Ή για να προσφέρουμε τη βέλτιστη χρηστικότητα χρειαζόμαστε έναν άλλο κανόνα;

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

05. Εγγράψτε και συνεργαστείτε

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

Χρώματα

Το πρώτο βήμα είναι να αποθηκεύσετε όλα τα χρώματα στο δείγμα «Χρώματα εγγράφων» εάν δεν το έχουμε κάνει ήδη - αυτό θα τους διευκολύνει στην πρόσβαση όταν χρειαστεί να τα εφαρμόσουμε στο σχέδιό μας.Για να το κάνετε αυτό, ανοίξτε το widget επιλογής χρωμάτων από το Inspector, επιλέξτε «Έγγραφα χρώματος» από το αναπτυσσόμενο μενού και, στη συνέχεια, κάντε κλικ στο εικονίδιο + για να προσθέσετε το χρώμα στο δείγμα. Αυτό λειτουργεί με τον ίδιο τρόπο στα περισσότερα εργαλεία διεπαφής χρήστη.

Κοινόχρηστες βιβλιοθήκες

Στη συνέχεια, πρέπει να μετατρέψουμε το έγγραφό μας - πλήρες με τυπογραφικά στυλ, χρώματα, κουμπιά, κοινόχρηστους χώρους και βασικά στοιχεία - σε κοινόχρηστη βιβλιοθήκη.

Ουσιαστικά αυτό σημαίνει ότι κάθε στοιχείο πρέπει να είναι ένα συστατικό, ακόμα κι αν αποτελείται από ένα μόνο στρώμα. Κάντε κλικ στο κουμπί + ‌ στην αριστερή πλευρά της πλαϊνής γραμμής βιβλιοθηκών και, στη συνέχεια, εισαγάγετε αυτό το έγγραφο σε ένα νέο έγγραφο. Αυτό είναι σωστό: το έγγραφό μας είναι πλέον βιβλιοθήκη και είναι έτοιμο να χρησιμοποιηθεί για το σχεδιασμό διεπαφών χρήστη με εγγυημένη συνέπεια.

Το InVision Studio είναι κάπως περιορισμένο, υπό την έννοια ότι δεν συγχρονίζεται ακόμα με το επίσημο εργαλείο διαχείρισης συστήματος σχεδίασης του InVision, αλλά είναι αρκετά εύκολο να φιλοξενήσει τη βιβλιοθήκη στο Dropbox για χρήση και ενημέρωση άλλων σχεδιαστών με την πάροδο του χρόνου. Όταν πραγματοποιείται μια αλλαγή (τοπικά ή απομακρυσμένα), κάθε αρχείο Studio που χρησιμοποιεί τη βιβλιοθήκη (και πάλι, τοπικά ή απομακρυσμένα) θα ρωτήσει εάν θέλετε να ενημερώσετε τα χρώματα και τα στοιχεία. Έτσι διατηρούνται οι βιβλιοθήκες σχεδιασμού σε όλες τις ομάδες.

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

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

Σχεδιασμός σε κλίμακα

Καθώς ένα σχέδιο επεκτείνεται, η διαχείριση γίνεται πιο δύσκολη. Υπάρχουν διάφορες προσαρμογές που μπορεί να θέλουμε να κάνουμε για να τη διατηρήσουμε αποτελεσματική και διατηρήσιμη, ειδικά επειδή το DSM του InVision δεν λειτουργεί ακόμα με το Studio.

Για παράδειγμα, μπορεί να θέλουμε να χρησιμοποιήσουμε επίπεδα κειμένου για να σχολιάσουμε τη βιβλιοθήκη μας ως μέσο εξήγησης των περιπτώσεων χρήσης διαφόρων στοιχείων. Για τα τυπογραφικά στυλ, θα μπορούσαμε ακόμη και να επεξεργαστούμε το κείμενο ώστε να είναι πιο περιγραφικό (π.χ. "h1> / 1.3 / 44px"). Αυτό το λέει h1>Το s πρέπει να είναι 44px και να έχει ύψος γραμμής 1,3.

Handoff σχεδίασης

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

Εάν ανησυχείτε για την αντιμετώπιση προβλημάτων και τη διαχείριση ενός ιστότοπου, βεβαιωθείτε ότι έχετε τη σωστή υπηρεσία φιλοξενίας ιστοσελίδων θα σας βοηθήσει, αλλά για το σύστημά σας σχεδίασης, το εργαλείο διανομής σχεδιασμού της InVision, Inspect, είναι το πράγμα που πρέπει να χρησιμοποιήσετε. Για να το χρησιμοποιήσουμε, κάνουμε κλικ στο κουμπί / Δημοσίευση στο InVision / InVision Studio, ανοίξτε το URL που προκύπτει και μετά αγγίξτε για να μεταβείτε στη Λειτουργία επιθεώρησης. Είναι πραγματικά βολικό.

Αυτό το περιεχόμενο εμφανίστηκε αρχικά στο περιοδικό net.