Πώς να χρησιμοποιήσετε μοτίβα σχεδίασης UI
Τα σχέδια σχεδίασης είναι οι βέλτιστες λύσεις στα κοινά προβλήματα σχεδιασμού. Καθώς τα κοινά προβλήματα χτυπούνται γύρω από μια κοινότητα και επιλύονται, συχνά προκύπτουν κοινές λύσεις. Τελικά, τα καλύτερα από αυτά ανυψώνονται πάνω από το din, αυτοπροσδιορίζονται και γίνονται εκλεπτυσμένα μέχρι να φτάσουν στην κατάσταση ενός σχεδίου.
Δεν θα ήθελα να κάνω μια σχεδίαση patern μια τάση στον σχεδιασμό ιστοσελίδων, τα σχέδια σχεδιασμού φαίνεται να είναι περισσότερο για να εξετάσουμε το πώς τα κοινά σχέδια ταξινομούνται στην εκ των υστέρων, αντί να σφυρηλατήσουν νέα επικράτεια ή κοιτάζοντας όπου τα πράγματα κατευθύνονται.
Πώς θα πρέπει να προσεγγίσετε τα μοτίβα σχεδίασης του UI;
Χρησιμοποιούμε σχέδια σχεδιασμού όλη την ώρα, αν δεν είστε εξοικειωμένοι με αυτούς, ίσως δεν έχετε συνειδητοποιήσει ότι είναι όλοι γύρω σας.
Τι γίνεται με το κλασικό παράδειγμα του να έχεις υπερβολικό περιεχόμενο για προβολή σε μια σελίδα; Στρέφουμε την προσοχή μας στο 'Tabs', ένα μοτίβο σχεδιασμού που μας επιτρέπει να εξυπηρετούμε όλο το περιεχόμενο που θέλουμε, χωρίς να εξαφανιστεί ο χρήστης σε μια θάλασσα συνδέσμων.
Τα τυπικά οφέλη για τη χρήση σχεδίου σχεδίασης περιλαμβάνουν:
- παρουσιάζοντας αρχάριους πώς να χρησιμοποιήσουν τις βέλτιστες πρακτικές στον σχεδιασμό ιστοσελίδων.
- να μάθουν να προσαρμόζονται στην συλλογική κατανόηση των σχεδιαστών.
- επιτρέποντας την καλύτερη επικοινωνία, μειώνοντας τον κίνδυνο που σχετίζεται με άγνωστες επιλογές.
- μειώνοντας τον απαραίτητο χρόνο και κόστος για τη διεκπεραίωση συγκεκριμένων εργασιών.
- αποφεύγοντας τον χαμένο χρόνο για την οικοδόμηση κάτι που έχει χτιστεί πριν.
- δίνοντας στον χρήστη μια εμπειρία που είναι εξοικειωμένη και έμπειρη με (τη φύση των σχεδίων).
Στο παραπάνω παράδειγμα βλέπουμε Clicky Media χρησιμοποιώντας δύο πολύ δημοφιλή σχέδια σχεδιασμού σήμερα:
- Το Navicon - ένα παγκόσμιο σύμβολο για το μενού, γνωστό και ως πλοήγηση στον ιστότοπο, γίνεται όλο και πιο δημοφιλές στον σύγχρονο σχεδιασμό ιστοσελίδων, αλλά έχει ήδη πλήρως προσαρμοστεί στις κινητές συσκευές.
- Parallax Scrolling - ένα μοναδικό μοτίβο σχεδίασης που δίνει τη δυνατότητα σε μία ιστοσελίδα, με έναν εύκολο στη χρήση μηχανισμό κύλισης, αλλά περιλαμβάνει επίσης μια λίστα από sprites background που δίνουν στη σελίδα μια ζωντανή αίσθηση.
Παρόλο που τόσο το μενού Navicon όσο και το γενικό μενού στην κορυφή της σελίδας μοιράζονται παρόμοιες επιλογές - θα ήταν πολύ ενοχλητικό να συμπεριλάβουμε όλους τους συνδέσμους στην ίδια γραμμή κεφαλίδας - γίνεται σαφές ότι οι μικρές επιλογές μπορούν να κάνουν μεγάλη διαφορά.
Εδώ πρέπει να σκεφτείτε όταν αξιολογείτε ένα σχέδιο σχεδίασης και προσαρμόστε το στις δικές σας ανάγκες:
- Περίληψη προβλημάτων: ποιο πρόβλημα χρήστη επιλύετε; Μείνετε συγκεντρωμένοι, και φράση σαν μια ιστορία χρήστη - σε μια μόνο πρόταση.
- Λύση: πώς έχουν λύσει άλλοι αυτό το πρόβλημα; Μερικά στοιχεία σε λεπτομέρειες περιλαμβάνουν την πλοήγηση των χρηστών (συμπεριλαμβανομένων των συντομεύσεων), τη λήψη πληροφοριών από τους χρήστες, την επεξεργασία δεδομένων και την ενσωμάτωση με άλλες υπηρεσίες ή εφαρμογές και την προβολή πληροφοριών και περιεχομένου (συμπεριλαμβανομένων των προεπιλογών).
- Παράδειγμα: υπέροχο, μπορείτε να μου δείξετε; Μερικές φορές είναι αρκετό ένα screenshot ή ένα mockup. άλλες φορές, οι ροές χρηστών και / ή πρόσθετες σημειώσεις είναι απαραίτητες για την σαφή επικοινωνία του σχεδίου.
- Χρήση: πότε πρέπει να χρησιμοποιείται αυτό το μοτίβο (όχι); Μερικά στοιχεία για την λεπτομέρεια περιλαμβάνουν την αρχιτεκτονική του προϊόντος, τη διάταξη διασύνδεσης, τις συσκευές, τη γλώσσα προγραμματισμού, την απουσία ή την ύπαρξη άλλων μοτίβων σχεδιασμού, τον τύπο χρήστη και τις περιπτώσεις πρωτογενούς χρήσης.
Απαιτείται πρακτική και πειθαρχία για να σκεφτείτε πρότυπα με αυτόν τον τρόπο αν δεν το έχετε κάνει ακόμη. Πάρτε το χρόνο να απαντήσετε σε αυτές τις ερωτήσεις κατά το σχεδιασμό του προϊόντος σας, διότι θα μπορούσε να σας βοηθήσει να εξοικονομήσετε πολύ χρόνο refactoring κάτω από το δρόμο όταν οι χρήστες και η ομάδα σας ζητούν παρόμοιες λεπτομέρειες.
Η άνοδος των εργαλείων UI
Τα μοτίβα σχεδιασμού του UI ήταν πάντα για να διευκολύνετε τον χρήστη να πλοηγεί στον ιστότοπο, την εφαρμογή ή το σύστημά σας. Αν ο χρήστης μάθει πώς να υποβάλει ένα σχόλιο για πρώτη φορά, είναι πιθανό να ξέρει αμέσως πώς να σας στείλει ένα μήνυμα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας τη φόρμα επικοινωνίας, είναι η ίδια επαναλαμβανόμενη έννοια της εισαγωγής πληροφοριών.
Τα τελευταία χρόνια, έχουμε δει μια τεράστια αύξηση στην αγορά εργαλείων UI. Ένα εργαλείο UI μπορεί να γίνει κατανοητό απλά ως ένα σύνολο γραφικών στοιχείων που σας επιτρέπουν να δημιουργήσετε μια πλήρως γραφική εφαρμογή από την αρχή. Το Bootstrap του Twitter είναι ένα τέλειο παράδειγμα μιας επιτυχημένης εργαλειοθήκης UI. Αυτές τις μέρες, ένα μεγάλο μέρος των σχεδιαστών ιστοσελίδων θα βασίζονται σε λειτουργίες Bootstrap για να διευκολύνουν τη δική τους ροή εργασίας. Κατά μία έννοια, δεν χρειάζεται να ανακαλύψουμε τον τροχό!
3 σχέδια σχεδιασμού UI για να θυμάστε
Με λίγα λόγια, τα σχέδια σχεδιασμού είναι λύσεις σε επαναλαμβανόμενα προβλήματα. Χρησιμοποιώντας μοτίβα μπορούμε να ξεπεράσουμε απλά προβλήματα διεπαφής χρήστη. Αν δίνουμε ιδιαίτερη προσοχή, παρατηρούμε ότι τα σχέδια είναι γύρω μας. Δεν υπάρχει τίποτα ιδιαίτερο για αυτό το συγκεκριμένο σχέδιο, είναι ο τρόπος με τον οποίο έχει εφαρμοστεί ότι είστε ενθουσιασμένοι!
Crystal Clear Calls-to-Action
Οι πιο απλές μορφές ιστού (και επίσης οι πιο συνηθισμένες) θα έχουν συνήθως ένα μόνο κουμπί που μπορεί να ενεργοποιηθεί: στην περίπτωση αυτή, 'Δημιουργία ιστοτόπου'. Είναι αρκετά αυτονόητο, το οποίο είναι το σημείο.
Πόσο πιο εύκολο θα μπορούσε να πάρει, έτσι; Πάντα πηγαίνετε για την εύκολη επιλογή, μην επανεφεύρετε τον τροχό απλά για να ξεχωρίσετε από το πλήθος.
Πλένεται στη διάσωση
Οι παράμετροι Breadcrumbs εμφανίζουν τη διαδρομή από την πρώτη σελίδα του ιστότοπου στην τρέχουσα θέση του χρήστη στην ιεραρχία σελίδας του ιστότοπου. Πρόκειται για μια δευτερεύουσα πλοήγηση που βοηθά τους χρήστες να κατανοήσουν την ιεραρχία και τη δομή της ιστοσελίδας. Οι breadcrumbs ξεκινούν με την αρχική σελίδα και τελειώνουν με τη σελίδα που βλέπετε αυτήν τη στιγμή.
Σε αυτό το παράδειγμα από Fares Farhan, βλέπουμε πώς χρησιμοποιεί ταυτόχρονα δύο σχέδια σχεδίασης UI. Πρώτον, έχει το μοτίβο καρτελών στην κορυφή και δεύτερο το μοτίβο πλοήγησης για το ψωμί στο κάτω μέρος. Συνδυάζοντάς τα μαζί σας κάνει μια πολύ ευχάριστη εμπειρία περιήγησης.
Η εγγραφή πρέπει να είναι εύκολη
Εκτός αν ζείτε κάτω από ένα βράχο, θα γνωρίζετε την κοινωνική εγγραφή. Η εγγραφή σε έναν ιστότοπο είναι ένα κοινό πράγμα που πρέπει να κάνετε και πρέπει να το κάνετε όσο πιο εύκολο και ευχάριστο γίνεται.
Αυτή είναι μια από τις αγαπημένες μου σελίδες εγγραφής τη στιγμή. Είναι το GitHub αρχική σελίδα και όπως μπορείτε να δείτε στο στιγμιότυπο ό, τι αντιπροσωπεύει η εταιρεία παρουσιάζεται σε λιγότερο από εκατό λέξεις. Έχετε επίσης τη δυνατότητα να εγγραφείτε εν κινήσει και η διαδικασία διαρκεί λιγότερο από ένα λεπτό για να ολοκληρωθεί. Θα λάβετε ένα μήνυμα ηλεκτρονικού ταχυδρομείου για την επαλήθευση του λογαριασμού σας, αλλά αυτό είναι κάτι που έχουμε συνηθίσει!
Τελικές λέξεις
Έχω χτίσει ιστοσελίδες για πάνω από οκτώ χρόνια και κατά τη διάρκεια αυτών των οκτώ ετών έχω συνειδητοποιήσει ότι η απλότητα είναι το κλειδί για πολλά προβλήματα σχεδιασμού.
Έχω καταλήξει στο συμπέρασμα ότι ακαταστασία στο σχεδιασμό, φουσκωμένο με περιττά στοιχεία και φόρμες είναι η πιο απογοητευτική εμπειρία που μπορείτε να βρείτε στο διαδίκτυο. Ναι, το σχέδιο είναι ακριβώς πώς λειτουργεί κάτι, οπότε γιατί να μην το λειτουργήσει σωστά; Το περιβάλλον χρήστη (UI) είναι εξαιρετικά σημαντικό για την επιτυχία της επιχείρησής σας ή της επιχείρησής σας.
Ο καλύτερος τρόπος για να διασφαλίσετε ότι σχεδιάζετε επιτυχημένους ιστότοπους είναι να μάθετε από και να χρησιμοποιείτε υπάρχοντα σχέδια σχεδίασης.