Περιεχόμενο
Όταν ξεκίνησα την καριέρα μου, ήμουν σχεδιαστής ιστοσελίδων. Δούλευα στον σχεδιασμό ιστοσελίδων για τέσσερα χρόνια, ξεκινώντας από ιστότοπους μικρών επιχειρήσεων και τελικά μετακόμισα σε μεγαλύτερους πελάτες. Ανακάλυψα ότι δεν με ενδιέφερε η γραφιστική, ούτε εργάζομαι για μεγαλύτερα εμπορικά σήματα. Ενδιαφέρομαι περισσότερο για τα μοτίβα σελιδοποίησης, τον τρόπο που οι άνθρωποι αλληλεπίδρασαν με φόρμες και πράγματα όπως η αντιληπτή απόδοση, από το οπτικό σχέδιο μιας ιστοσελίδας.
Όταν παρακολουθούσα ταινίες sci-fi, κοίταζα τις διεπαφές. Και όταν έπαιζα βιντεοπαιχνίδια, θα παρατηρούσα τον τρόπο διαμόρφωσης των μενού. Εάν κάποιο από αυτά τα χαρακτηριστικά ακούγεται οικείο σε εσάς, μπορεί να είστε επίσης σχεδιαστής UI στην καρδιά.
Παραιτήθηκα από την εταιρεία μου και ξεκίνησα τη δική μου εταιρεία. Στη σελίδα μου στο LinkedIn, προσπάθησα να συνοψίσω τον νέο μου στόχο καριέρας: να κάνω το καλύτερο δυνατό λογισμικό. Έχουν περάσει τέσσερα χρόνια από τότε που ξεκίνησα ως ελεύθερος επαγγελματίας και το ταξίδι μου δεν έχει σταματήσει. Αυτές τις μέρες βοηθάω να λειτουργήσω μια μικρή εταιρεία σχεδιασμού UI που ονομάζεται Μόνο. Πρόσφατα καλωσορίσαμε το τέταρτο μέλος της ομάδας μας.
Σε αυτό το άρθρο θέλω να περιγράψω πώς είναι να είσαι σχεδιαστής διεπαφής χρήστη, συμπεριλαμβανομένου του τι ακριβώς απαιτεί η δουλειά, πού να βρεις τους καλύτερους μαθησιακούς πόρους και πώς να βελτιώσεις την τέχνη σου.
Τι κάνει ένας σχεδιαστής UI;
Θεωρώ ότι γενικά μπορείτε να χωρίσετε το έργο ενός σχεδιαστή διεπαφής χρήστη σε τέσσερις κατηγορίες. Επικοινωνείτε με τον πελάτη, ερευνάτε, σχεδιάζετε και σχεδιάζετε και επικοινωνείτε με τους προγραμματιστές. Ας ρίξουμε μια ματιά σε κάθε μια από αυτές τις φάσεις με περισσότερες λεπτομέρειες.
Επικοινωνία πελάτη
Η επικοινωνία με τον πελάτη έχει να κάνει με την κατανόηση του προβλήματος του πελάτη. Ο στόχος είναι να ασχοληθείτε με την επιχείρηση του πελάτη σας, οπότε η έναρξη ενός έργου αποτελεί συνήθως συζήτηση. Είναι καλό να μην γνωρίζετε πάρα πολλά για τον τομέα του πελάτη σας όταν ξεκινάτε - μπορείτε να δείτε την επιχείρησή του με νέο τρόπο, ενώ οραματίζεστε πιθανές σχεδιαστικές λύσεις.
Για να είστε καλός σχεδιαστής διεπαφής χρήστη, πρέπει να είστε σε θέση να σκεφτείτε τελικά μαζί με την επιχείρηση του πελάτη σας. Για παράδειγμα, ο πελάτης σας μπορεί να είναι αεροπορικός. Η δουλειά γι 'αυτούς θα σας κάνει τελικά αρκετά ενημερωμένους για αυτόν τον κλάδο. Έτσι, μια συμβουλή για τη δική σας ευτυχία εδώ είναι να επιλέξετε τις βιομηχανίες για τις οποίες εργάζεστε με σύνεση, ώστε να μην καταλήξετε να είστε ειδικός σε κάτι που δεν σας ενδιαφέρει ή δεν σας ενδιαφέρει.
Κατά τη διάρκεια ενός έργου, η επικοινωνία δεν σταματά. Ως σχεδιαστής, θα παρουσιάζετε τη δουλειά σας συνεχώς. Στην εταιρεία μας είμαστε μια απομακρυσμένη ομάδα, οπότε δεν έχουμε πολλές προσωπικές συναντήσεις. Αντ 'αυτού, κάνουμε μεγάλη χρήση της κοινής χρήσης οθόνης μέσω τηλεδιάσκεψης. Τα εργαλεία επικοινωνίας όπως το Skype και το Slack χρησιμοποιούνται καθημερινά.
Είναι χρήσιμο να συνδυάζονται σύγχρονες και ασύγχρονες μέθοδοι επικοινωνίας. Μια κλήση είναι μεγάλη αν χρειάζεστε πολλές πληροφορίες γρήγορα, αλλά πρέπει να είστε ταυτόχρονα κοντά. Θεωρούμε ότι το Slack είναι το «εικονικό ψυγείο νερού» και χρησιμοποιούμε το Basecamp για τη διαχείριση σύνθετων έργων σχεδιασμού. Όταν σχεδιάζουμε πρωτότυπα χρησιμοποιώντας HTML και CSS, χρησιμοποιούμε GitHub Issues για να συζητήσουμε άμεσα τον κώδικα.
Ερευνα
Εκτός από την επικοινωνία πελατών, θα κάνετε πολλή έρευνα. Αυτό μπορεί να περιλαμβάνει μελέτες πεδίου, εργαστήρια με τον πελάτη, ανάλυση του ανταγωνισμού ή καθορισμό στρατηγικής - ουσιαστικά, σχεδόν οτιδήποτε σας βοηθά να κατανοήσετε το πρόβλημα που αντιμετωπίζετε.
Η έρευνα είναι αυτό που ενημερώνει τις επιλογές σχεδιασμού σας. Είναι ένα άρθρο που διαβάσατε κάποτε ή αυτό το νέο πράγμα που μόλις κυκλοφόρησε η Apple. Όταν είναι ώρα να εξηγήσετε γιατί κάνατε μια συγκεκριμένη επιλογή σχεδίασης, η έρευνά σας σας υποστηρίζει.
Η έρευνα μπορεί να είναι πολύ ευρεία. Συχνά δοκιμάζω νέες συσκευές για ερευνητικούς σκοπούς ή εγγραφώ σε μια νέα εφαρμογή ιστού για να μελετήσω τη διεπαφή χρήστη της.
Σχεδιασμός και πρωτοτυπία
Ως σχεδιαστής, πιθανότατα θα αφιερώσετε το μεγαλύτερο μέρος του χρόνου σας κάνοντας δουλειά σχεδιασμού και πρωτοτύπου. Ένα σχέδιο σχεδίασης διεπαφής χρήστη μπορεί να προχωρήσει με οποιονδήποτε αριθμό τρόπων, από το σχέδιο, τον λεπτομερή σχεδιασμό έως την κωδικοποίηση.
Η μέθοδος που χρησιμοποιείτε εξαρτάται σε μεγάλο βαθμό από τον τύπο του έργου. Τι σχεδιάζεις; Είναι ιστότοπος ή προτιμάτε να το ονομάσετε εφαρμογή; Χρησιμοποιεί την εγγενή τεχνολογία; Είναι επανασχεδιασμός ή ξεκινάτε από το μηδέν;
Στην εταιρεία μας δεν υπάρχει σταθερή διαδικασία, αλλά τα περισσότερα έργα ακολουθούν την ίδια πρόχειρη σειρά: ξεκινούν με σκίτσα και σύρματα, πηγαίνουν σε λεπτομερή σχεδιασμό οπτικών και αλληλεπιδράσεων και τελειώνουν με ένα πρωτότυπο.
Ως σχεδιαστές, ξοδεύουμε πολύ χρόνο για να σκεφτούμε τα εργαλεία μας. Ενώ τα σπουδαία εργαλεία είναι σημαντικά, δεν είναι το πιο σημαντικό πράγμα. Το να είσαι ικανός να χρησιμοποιήσεις το Adobe Creative Suite και εφαρμογές όπως το Sketch είναι ισοδύναμο με το να μπορείς να χρησιμοποιήσεις ένα μολύβι για να σχεδιάσεις ή ένα πινέλο για να ζωγραφίσεις. Πρέπει ακόμα να φτιάξετε τον πίνακα.
Τούτου λεχθέντος, ένα υγιές ενδιαφέρον για τα εργαλεία είναι καλό. Μου αρέσει να δοκιμάζω νέα εργαλεία που μπορούν να με βοηθήσουν να γίνω πιο παραγωγικός. Το αγαπημένο μου εργαλείο επεξεργασίας φορέα είναι το Illustrator, αλλά το μεγαλύτερο μέρος της δουλειάς του οπτικού σχεδιασμού γίνεται στο Sketch αυτές τις μέρες. Άλλα μέλη της ομάδας έχουν αλλάξει σε νεότερα εργαλεία όπως το Affinity Designer.
Τα εργαλεία είναι μια πολύ προσωπική επιλογή. Όσο μπορούμε εύκολα να συνεργαστούμε, όλοι είναι ελεύθεροι να επιλέξουν το δικό τους. Για να είναι απλούστερο να μιλάμε για τα σχέδιά μας με πελάτες, κάνουμε πρωτότυπα με το InVision. Για πιο προηγμένα πρωτότυπα, ωστόσο, χρησιμοποιούμε HTML και CSS. Το εργαλείο που χρειάζεστε όλα εξαρτάται από τη δουλειά που θέλετε να κάνετε με αυτό.
Επικοινωνία προγραμματιστή
Ένα συχνά ξεχασμένο μέρος του έργου ενός σχεδιαστή UI είναι η επικοινωνία προγραμματιστή. Αυτές τις μέρες δεν μπορείτε να ξεφύγετε με την απλή αποστολή των σχεδίων σας στους προγραμματιστές και ελπίζοντας να εφαρμοστούν σωστά. Οι καλύτεροι σχεδιαστές γνωρίζουν ότι η πρόκληση δεν είναι η δημιουργία του σχεδιασμού, αλλά η επικοινωνία του - όχι μόνο στα ενδιαφερόμενα μέρη που πρέπει να δώσουν την έγκρισή τους, αλλά και στους προγραμματιστές που πρέπει να το εφαρμόσουν.
Η επικοινωνία ενός σχεδίου έρχεται σε πολλές μορφές: λεπτομερείς προδιαγραφές, παροχή στοιχείων, αναθεώρηση του σχεδιασμού από κοινού. Αυτό που έχει νόημα να παραδίδεται σε κάθε περίπτωση εξαρτάται σε μεγάλο βαθμό από το αν το έργο είναι εγγενές ή διαδικτυακή εφαρμογή.
Η παραδοσιακή προσέγγιση είναι η παράδοση στοιχείων δίπλα σε σχέδια οθόνης. Τα σχέδια οθόνης μπορούν να χρησιμοποιηθούν για να δουν πώς θα μοιάζει ο σχεδιασμός στο σύνολό του, ενώ τα στοιχεία είναι έτοιμα προς χρήση PNG και SVG εικονιδίων, επομένως οι προγραμματιστές δεν χρειάζεται να ασχοληθούν με έναν επεξεργαστή γραφικών.
Στην εταιρεία μας υποστηρίζουμε την παράδοση περισσότερων από αυτό. Χρησιμοποιούμε οδηγούς στυλ για να διατηρήσουμε τη συνέπεια στα σχέδιά μας. Όταν ασχολούμαστε με ένα έργο ιστού, παραδίδουμε λεπτομερή σύνολα HTML και CSS, τεκμηριωμένα ανά τεμάχιο, έτοιμα για εφαρμογή. Πιστεύω ότι ο σχεδιασμός σε κάθε φάση ανάπτυξης λογισμικού είναι ο μόνος τρόπος για να επιτύχω τον στόχο μου για τη δημιουργία λογισμικού παγκόσμιας κλάσης.
Ιστός έναντι εγγενών εφαρμογών
Όταν σχεδιάζετε μια εγγενή εφαρμογή για μια πλατφόρμα (π.χ. iOS ή Android), τείνετε να συμμορφώνεστε με ορισμένες οδηγίες. Όταν σχεδιάζετε για τον ιστό, δεν υπάρχει τόση καθοδήγηση. Αυτό που συμβαίνει συνήθως είναι ότι ο πελάτης σας έχει ένα σύνολο γραφικών οδηγιών για την επωνυμία του που καθορίζει πώς πρέπει να φαίνονται τα πράγματα.
Ωστόσο, αυτές οι οδηγίες τείνουν να είναι προσαρμοσμένες σε ιστότοπους μάρκετινγκ και αυτό που υπάρχει δεν οδηγεί πάντα σε καλές αποφάσεις διεπαφής χρήστη. Οι γραμματοσειρές τείνουν να επιλέγονται για λόγους μάρκετινγκ και όχι για λόγους αναγνωσιμότητας. Τα χρώματα μπορεί να είναι έντονα και εντυπωσιακά, κάτι που λειτουργεί σε μια διαφημιστική καμπάνια, αλλά όχι σε μια εφαρμογή που χρησιμοποιείτε καθημερινά. Αυτοί οι οδηγοί πρέπει να ερμηνευθούν.
Υπάρχουν μερικές οδηγίες διεπαφής χρήστη για τον Ιστό. Θα μπορούσατε να υποστηρίξετε ότι ο ιστός είναι ένα χωνευτήρι διαφορετικών στυλ. Εάν δημιουργείτε κάτι που μοιάζει περισσότερο με μια εφαρμογή παρά έναν ιστότοπο, πρέπει να γνωρίζετε για ευρέως χρησιμοποιούμενα πλαίσια όπως το Bootstrap και το ZURB Foundation. Το πλαίσιο ξεκινά να καθορίζει πώς θα φαίνονται τα πράγματα, επειδή δεν θέλετε να ανακαλύψετε ξανά τον τροχό. Και αυτό είναι πιθανώς καλό.
Στην εταιρεία μας, θέλουμε να χρησιμοποιήσουμε το Bootstrap. Παρέχει λογικά προεπιλεγμένα μεγέθη για κοινά στοιχεία διεπαφής χρήστη όπως κουμπιά, πίνακες δεδομένων και modals.
Στο σχεδιασμό ιστοσελίδων, περιορίζεστε περισσότερο από τις τεχνικές ικανότητες του διαδικτύου. Κάποτε ήταν ότι θα ήταν δύσκολο να εφαρμοστούν απλά οπτικά άνθη όπως στρογγυλεμένες γωνίες σε έναν ιστότοπο. Αυτές τις μέρες έχουν περάσει πολύ - τώρα μπορείτε να σχεδιάσετε διεπαφές χρήστη με πολλές σκιές, μεταβάσεις, κινούμενα σχέδια και ακόμη και 3D.
Ως σχεδιαστής, είναι πιο ρεαλιστικό να ελέγχετε τη διαδικασία και το σχεδιασμό στο πρόγραμμα περιήγησης. Δεν έχω δει πολλούς σχεδιαστές UI να αναλαμβάνουν τον προγραμματισμό UI μιας εγγενούς εφαρμογής, αλλά ένας σχεδιαστής που κάνει το HTML και το CSS μιας εφαρμογής ιστού είναι ένα συνηθισμένο συμβάν. Εάν μπορείτε να κωδικοποιήσετε τα δικά σας σχέδια, θα έχετε ένα πλεονέκτημα έναντι των μη κωδικοποιημένων συνομηλίκων σας και για μένα είναι ο μόνος τρόπος για να καταλάβετε πραγματικά πώς λειτουργεί ο ιστός.
Περιορισμοί στο Διαδίκτυο
Σύντομα θα ανακαλύψετε ότι δεν υποστηρίζονται όλα τα ωραία κόλπα που μαθαίνετε σε κάθε πρόγραμμα περιήγησης και αυτή είναι η πραγματικότητα του σχεδιασμού για τον ιστό. Είναι καλό να ακολουθείτε γνωστές αρχές όπως η προοδευτική βελτίωση, όπου φορτώνετε βελτιωμένο περιεχόμενο όποτε είναι δυνατόν, αλλά επίσης να σκεφτείτε πώς υποβαθμίζεται το περιεχόμενο.
Πρόσφατα, η «κοπή της μουστάρδας» έγινε δημοφιλής. Πρωταθλητής από την ομάδα ιστού του BBC, αυτό συνεπάγεται τη διάκριση μεταξύ «καλών» και «κακών» προγραμμάτων περιήγησης και παρέχει περιορισμένη εμπειρία στα «κακά» προγράμματα περιήγησης. Ωστόσο, λειτουργεί πραγματικά μόνο για ιστότοπους περιεχομένου.
Όσον αφορά τις εμπειρίες που μοιάζουν με εφαρμογές, πολλοί άνθρωποι περιορίζουν την υποστήριξη μόνο σε μερικά κορυφαία προγράμματα περιήγησης, για να διευκολύνουν την ανάπτυξη. Δυστυχώς, αυτό μας φέρνει πίσω στην κατάσταση του 1996 όπου χρειάζεστε ένα συγκεκριμένο πρόγραμμα περιήγησης για να δείτε περιεχόμενο.
Βελτίωση των δεξιοτήτων σας
Λοιπόν, πώς ενημερώνεστε με την ταχέως αναπτυσσόμενη βιομηχανία ιστού και βελτιώνετε το skillet σας; Ας δούμε μερικές διαφορετικές μεθόδους για την ενίσχυση των δεξιοτήτων σας ...
Γνώση πλατφόρμας
Ένα σημαντικό μέρος του οπλοστασίου ενός σχεδιαστή είναι η γνώση της πλατφόρμας. Πρέπει να γνωρίζετε για τα διάφορα λειτουργικά συστήματα και πώς τα χρησιμοποιούν. Ως σχεδιαστές, έχουμε την τάση να χρησιμοποιούμε Macs, αλλά είναι εύκολο να ξεχνάμε ότι η πλειονότητα των ατόμων εκεί έξω χρησιμοποιούν κουτιά Windows για να ολοκληρώσουν τη δουλειά τους.
Πιστεύω ότι μπορείτε να καταλάβετε πραγματικά κάτι μόνο εάν το χρησιμοποιήσετε μόνοι σας. Προτιμώ να χρησιμοποιήσω το Mac μου για το σχεδιασμό, αλλά ξοδεύω πολύ χρόνο για να παρακολουθήσω την εξέλιξη διαφόρων άλλων πλατφορμών. Έχω εγκαταστήσει αρκετά αντίγραφα των Windows στο Mac μου ως εικονικές μηχανές. Είμαι απασχολημένος με τη δοκιμή νέων εκδόσεων των Windows 10 χρησιμοποιώντας το Πρόγραμμα Insider της Microsoft για να δείτε τις διάφορες αλλαγές στη διεπαφή χρήστη.
Επίσης, αγοράζω τακτικά νέο υλικό για να δοκιμάσω πώς λειτουργεί. Αγόρασα ένα Apple Watch μόνο για να δοκιμάσω την πλατφόρμα. Στη συνέχεια το πούλησα γιατί ένιωθα ότι δεν πρόσθεσε τόσο πολύ στη ζωή μου.
Επιπλέον, το διαδίκτυο μπορεί να θεωρηθεί ως το δικό του λειτουργικό σύστημα. Εξελίσσεται συνεχώς, με νέες δυνατότητες να προστίθενται σε κάθε προμηθευτή προγράμματος περιήγησης κάθε εβδομάδα. Αξίζει να μάθετε για τις τεχνικές πτυχές των προγραμμάτων περιήγησης, ειδικά σχετικά με τις δυνατότητες CSS και γραφικών. Πρέπει να γνωρίζετε τι είναι το SVG και το WebGL και πώς μπορείτε να χρησιμοποιήσετε το Web Animations API.
Κάθε πλατφόρμα εξελίσσεται με την πάροδο του χρόνου και ως σχεδιαστής διεπαφής χρήστη είναι καθήκον σας να είστε ενημερωμένοι. Σε τελική ανάλυση, ό, τι σχεδιάζετε δεν ζει μεμονωμένα, αλλά αποτελεί μέρος ενός μεγαλύτερου οικοσυστήματος λογισμικού.
Επιστρέψτε στα βασικά
Αυτό που αγωνιζόμαστε σήμερα δεν είναι τόσο διαφορετικό από αυτό που αγωνιζόμασταν πριν από 20 χρόνια. Υπάρχει τόνος καλών συμβουλών στα βιβλία. Δοκιμάστε το Defensive Design for the Web από τους Jason Fried και Matthew Linderman και Don’t Make Me Think by Steve Krug για αρχάριους.
Εάν δεν ξέρετε για έννοιες όπως ο τρόπος και το οικονομικό κόστος, πρέπει να διαβάσετε. Πρέπει να είστε σε θέση να εξηγήσετε τι είναι ο νόμος του Fitts. Ο νόμος της εγγύτητας Gestalt; Αυτό είναι το ψωμί και το βούτυρο του σχεδιασμού UI.
Εμπνευστείτε από παιχνίδια και ταινίες
Ως σχεδιαστής UI, βασίζομαι σε άλλες πηγές έμπνευσης για να κάνω τη δουλειά μου. Βρίσκω μεγάλη έμπνευση στα παιχνίδια. Ορισμένα παιχνίδια είναι πολύ περίπλοκα και οι σχεδιαστές UI έπρεπε να λύσουν τα ίδια πολύπλοκα προβλήματα διεπαφής με τον σχεδιαστή UI που εργάζεται σε επιχειρηματικά έργα.
Τα παιχνίδια μπορούν επίσης να σημαίνουν τάσεις. Ο μινιμαλισμός που βρίσκεται στα μενού του Colin McRae Rally μου θυμίζει την κατεύθυνση του iOS7. Κατά κάποιο τρόπο, η σχεδίαση κινουμένων σχεδίων UI που είναι πλέον μοντέρνα εμφανίστηκε σε παιχνίδια πριν και χρόνια. Η μετάβαση από τον σκεομορφισμό σε γυμνά, λειτουργικά περιβάλλοντα και «επίπεδη σχεδίαση» ήταν εμφανής και στα παιχνίδια. Συγκρίνετε τη λήθη του 2006 με το Skyrim του 2011. Και τα δύο παιχνίδια είναι RPG στην ίδια σειρά, αλλά η διαφορά είναι εντυπωσιακή.
Οι φουτουριστικές διεπαφές σε ταινίες της Marvel όπως ο Iron Man αποτέλεσαν επίσης έμπνευση για μένα. Δεν είναι ακριβώς χρήσιμα παραδείγματα, αλλά με κάνουν να σκέφτομαι περισσότερο για τον υπολογιστή ως σύνολο. Θέλουμε ένα μέλλον οθονών ή θέλουμε να εξαφανιστούν οι οθόνες; Αυτή είναι πιθανώς μια καλή ερώτηση να θέσετε σε μια παμπ γεμάτη σχεδιαστές.
Μεγαλώνετε ως σχεδιαστής μέσω σκληρής δουλειάς, επιμονής, μιλώντας με τους συναδέλφους σας και διαβάζοντας πάρα πολλά. Πριν από περίπου ένα χρόνο διάβασα ένα κομμάτι στους New York Times για τους ανθρώπους που ήταν καλά στη δεκαετία του '80 που συνεχίζουν να ακονίζουν την τέχνη τους. Νιώθω ότι ξεκινάω μόνο. Τι γίνεται με εσάς;
