Σχεδιασμός εικονογραφήσεων για μικρές οθόνες

Όταν συνέντευξη με τον Λιφτ, ένα από τα τελευταία που ζήτησαν ήταν "Είστε βέβαιοι ότι θα είστε ευτυχείς; Έχω δει την δουλειά σου και είναι λεπτομερές σαν σκατά. Δουλεύουμε στα τηλέφωνα. Έχετε σκεφτεί ποτέ πόσο μικρή οθόνη τηλεφώνου είναι; "

Γέλασα, εκτίμησα το συναίσθημα και αποδέχτηκα τη δουλειά δύο φορές πιο σκληρά - με ένα διασκεδαστικό dont-you-worry-about-me-I-can-draw-οπουδήποτε * συσκευασμένο σε κάθε υπογραφή.

¶Όλα.

Η απεικόνιση για μικρές οθόνες είναι δύσκολη.

Το πρώτο πράγμα που έκανα ήταν να προσπαθήσω να ψάξω για τα δικά μου blind spots - ξέρω πώς να το περιγράψω για προϊόντα και η μάρκα Lyft είναι βασικά η μάρκα μου (περισσότερα αυτοκίνητα, λιγότερα butts, για τώρα) - αλλά οι κινητές συσκευές ως η κύρια πλατφόρμα, είναι άγνωστη περιοχή. ΑΣΤΕΪΣΜΟΣ. Σκέφτηκα τελείως ότι θα μπορούσα να το καταλάβω με ωμή δύναμη και μια γενική κατάσταση - συνήθως-work-out-for-me στάση. ΑΛΛΑ το δεύτερο πράγμα που έκανα ήταν να προσπαθήσω να ψάξω για τα δικά μου τσιμπήματα, έβλεπα το διαδίκτυο για τυχόν συμβουλές για την απεικόνιση για μικρές οθόνες. Και έπειτα το τρίτο, το τέταρτο και το δέκατο πράγμα που έκανα ήταν να περιτριγυριστώ το διαδίκτυο για προτάσεις για απεικόνιση για μικρές οθόνες.

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

Ας ξεκινήσουμε με ένα αυτοκίνητο (duh).

Τι μπορούμε να μάθουμε από το σχεδιασμό των εικονιδίων

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

Χρησιμοποιήστε καθολικές ενδείξεις

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

Έτσι, υπάρχει ένας τόνος ανθρώπων που είναι πραγματικοί ενήλικες τώρα, οι οποίοι δεν θυμούνται να σπρώχνουν τις στοίβες των δισκέτρων για να βγάλουν ένα αντίγραφο του Lemmings για το όγδοο χρόνο, αλλά ξέρουν ότι το εικονίδιο της δισκέτας σημαίνει ότι σώσει . Μια απεικόνιση μιας δισκέτας, ωστόσο, wtf είναι αυτή; γιατί έκανες χρώμα στο εικονίδιο αποθήκευσης; Ενώ η αρχή είναι η ίδια, το επίπεδο της αφαίρεσης αλλάζει καθώς μετακινείτε από εικονίδιο σε εικονογράφηση. Τα εικονίδια είναι σύμβολα. Οι εικονογραφήσεις είναι σκηνές. Και οι δύο υπάρχουν μέσα στο προϊόν για να σας βοηθήσουν να κινηθείτε γρήγορα και να καταλάβετε καλύτερα το προϊόν. Και οι δύο θα σας επιβραδύνουν μόνο αν προσπαθήσετε να εισαγάγετε νέες έννοιες.

Θέματα περιβάλλοντος

Δίνουμε ετικέτες εικονιδίων επειδή θέλουμε να προσθέσουμε περιεχόμενο. για να διδάξουμε στο χρήστη τι σημαίνει αυτό το εικονίδιο για εμάς (ώστε να το χρησιμοποιήσουμε χωρίς την ετικέτα αργότερα (διαβάστε: όταν είμαστε διάσημοι)). Τα εικονογραφήματα έχουν ήδη ένα πλαίσιο. Συνυπάρχουν με το UI και αντιγράφουν, ως μέρος ενός προϊόντος που ο χρήστης ήδη κατανοεί. Συγκεντρώνουμε αυτοκίνητα (... και τροχοί και καθίσματα και δρόμους ...) στο Lyft, διότι, ναι, έχουμε πολλά να πούμε για τα αυτοκίνητα - αλλά και επειδή ο χρήστης είναι ήδη έτοιμος να περιμένει και να αναγνωρίζει αυτοκίνητα. Όπως και ναι, εάν σχεδιάσουμε μια πατάτα, τελικά θα καταλάβουμε τι είναι, αλλά απαιτεί επιπλέον συμβουλές και περισσότερες λεπτομέρειες, για να πούμε ναι, το είδατε σωστά, κάναμε στην πραγματικότητα μια πατάτα. Ο χρήστης βρίσκεται ήδη στη μέση εκεί όταν κρατάτε τις εικονογραφήσεις μέσα στον τομέα του προϊόντος και θα αναγνωρίζετε τα αντικείμενα / ενέργειες πιο γρήγορα, ακόμα και αν μειώνετε το επίπεδο λεπτομέρειας αρκετά ώστε να ικανοποιείτε τις τεχνικά οριζόμενες: γελοία μικρές απαιτήσεις μεγέθους τηλεφώνου.

Επιλέξτε Clear over Clever

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

Έτσι, όπως ναι, το μισό τζιπ μου, το μισό SUV, το μισό IDK-I-cant-πραγματικά-λέει-αυτοκίνητα-εκτός-I-just-added-things-μου άρεσε φαίνεται δροσερό ΚΑΙ είμαι πολύ σίγουρος όλων των ειδών τα τεχνικά σούπερ τζιπ υπάρχουν (ακόμα και μερικά με αναπνευστήρες), αλλά στοχεύουμε σε αυτό που σκέφτεται ο μέσος άνθρωπος όταν περιγράφουν ένα σύγχρονο τζιπ, εκτός από τις δημιουργικές ελευθερίες για τις διαφημιστικές πινακίδες.

Τι μπορούμε να μάθουμε από το σχεδιασμό τύπου

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

Απλοποιήστε (περισσότερο από ό, τι θέλετε)

AKA serifs δημιουργούν μόνο θόρυβο κάτω από 10pt? η αντίθεση μεταξύ παχών / λεπτών που χάθηκαν κάτω από 10pt

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

Οι σιλουέτες είναι τα πάντα

Η περίπτωση τίτλου AKA είναι πιο ευανάγνωστη από ό, τι όλα τα ανώτατα όρια

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

Επίσης, μην κάνετε αυτό που περιέχεται σε ένα κύκλο πράγμα, τουλάχιστον σε μικρά μεγέθη, γιατί: σιλουέτες

Εξέγερση όλων

Τα AKA εκτεταμένα γράμματα και οι ανοιχτοί μετρητές αυξάνουν την αναγνωσιμότητα

Εντάξει ό, τι μόλις κάνατε, κάντε περισσότερα. Επεκτείνετε τις άκρες όλων των σιλουέτες σας, αυξάνοντας τα διαστήματα μεταξύ καθενός από τα στοιχεία. Τόσο πολύ που φαίνεται κάπως χαζή όταν την ανεβάσετε. Στον τύπο, φορτώνουμε με τις λεπτομέρειες - τεντώστε το i, σκουπίστε το m, τραβήξτε έξω κάθε ανασηκωτή / descender που μπορούμε να βρούμε - για να σας βοηθήσει να αναγνωρίσετε τις μορφές των γραμμάτων από απόσταση. Στην εικονογράφηση ακολουθούμε τις άκρες και τις αναλογίες. Επικεντρωθείτε στην κλιμάκωση των αντικειμένων που μας βοηθούν να προσδιορίσουμε καλύτερα την εικόνα και τις άκρες δημιουργίας για να υποδείξετε πού ξεκινούν. Οι δύο τροχοί κάνουν πολύ περισσότερα για να πουν το Jeep από το ράφι οροφής πάντα, έτσι ώστε να μπορούν να πάρουν το μισό αυτοκίνητο για όλα όσα μου νοιάζει.

Φως για να πάρει μεγαλύτερο? Σκούρο για να πάρει μικρότερο

Ο αντίστροφος τύπος AKA μειώνει την αναγνωσιμότητα

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

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

Κάνοντας το έργο IRL

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

Get Ruthless: Χρειάζεται πραγματικά μια εικόνα; (πιθανώς όχι)

Γεια σου, ακούστε, (προϊόν) εικονογράφηση είναι ένας ανεμιστήρας εδώ. Όπως, θα ήμουν σίγουρα σίγουρα burgers slingin 'εάν y'all δεν μου επέτρεψε να αξιοποιήσει τα τηλέφωνά σας όλη την ημέρα. Αλλά, όπως και εγώ, μερικές φορές νιώθω σαν να οφείλω το προϊόν να σχεδιάζει μια συγγνώμη. Ξέρω ότι σας μίλησα για να χρησιμοποιήσετε εικονογράφηση. Όπως, ακούστε το meg: η εικόνα είναι δροσερή! .. αλλά δεν εννοούσα ότι πρέπει να το χρησιμοποιήσετε σε Every. Μονόκλινο. Οθόνη.

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

Εικόνες και εικονογραφήσεις σε ολισθαίνουσα κλίμακα

Πάντα έχω δυσκολευτεί να αποφασίσω ποια εικονίδια θα έπρεπε να ζουν. Μέρος του συστήματος ή μέρος του περιεχομένου; Εμπνευσμένο από τον τύπο ή από τις εικονογραφήσεις; Τα παιδιά των διαζευγμένων γονιών, σίγουρα, μπορούν να διασχίσουν τα σύνορα για τις αργίες και τα Σαββατοκύριακα, αλλά πρέπει να υπολογίσουμε σε ποιο σχολείο θα τα βάλουμε, ξέρεις; Όταν εργάζεστε σε μεγάλες οθόνες, τους έβαλα με τον τύπο. Με αρκετό περιθώριο για τη συνεχή χρήση ετικετών και μεγάλων τετραγώνων κειμένου που χρησιμοποιούν εικονίδια για να βοηθήσουν στην ανάλυση - είναι ασφαλές να υποθέσουμε ότι τα εικονίδια θα ζουν συχνότερα κατά μήκος παράλληλου κειμένου σε παρόμοια μεγέθη. Εν τω μεταξύ, η απεικόνιση μπορεί να πάρει, σαν ολόκληρη την οθόνη. Όταν εργάζεστε σε μικρές οθόνες, ωστόσο, οι εικόνες είναι, το μαντέψατε: μικρό. Και στην πραγματικότητα, τα εικονίδια είναι αρκετά μεγάλα, για τα εικονίδια ούτως ή άλλως (είναι περισσότερο για να χτυπήσουν, να μην αναλύσουν και οι άνθρωποι απλά δεν μπορούν να δουν τις οθόνες του τηλεφώνου τους καλά, όπως αποδεικνύεται). Αυτό που προσπαθώ να πω εδώ είναι ότι ήρθε η ώρα να αλλάξουμε τα σχολεία. Σχεδιάζοντας για τον ιστό, οι εικονογραφήσεις ξεχωρίζουν ως ένα μοναδικό περιεχόμενο, πέφτουν τακτοποιημένα σε μικρά / μεσαία / μεγάλα και σπάνια προσεγγίζουν το μέγεθος ή το πλαίσιο ενός εικονιδίου. Σχεδιάζοντας για κινητά, τα εικονίδια και οι εικόνες συχνά ζουν στο δοχείο ίδιου μεγέθους, αλλάζοντας μόνο ανάλογα με τις ανάγκες της ροής. Δημιουργώντας ένα στυλ απεικόνισης που ρέει ομαλά από εικονίδιο σε εικονογράφηση και πάλι πίσω, βοηθά να διασφαλιστεί ότι εκείνη η εικόνα που χρησιμοποιείτε στον περιορισμένο χώρο αισθάνεται σαν να είχε σχεδιαστεί να είναι εκεί.

Όπως το Flubber: τεντώσιμο, πτυσσόμενο, πολύ ιξώδες

Ναί. Επανεξεδίωσα ξανά το flubber για να γράψω αυτό. Τι? Όταν εργάζεστε σε μικρές οθόνες, οι περιορισμοί μεγέθους είναι ΠΡΑΓΜΑΤΙΚΟΙ. Στην ιδανική περίπτωση, θα συνεργαστείτε με τους σχεδιαστές για να επιλέξετε τον καλύτερο τρόπο να συμπεριλάβετε εικονογραφήσεις. ρεαλιστικά σπάνια παίρνετε την πρώτη επιλογή. Οι χώροι που κατανέμονται για απεικόνιση είναι γενικά προκαθορισμένοι και συχνά είναι περιορισμένοι κάθετα ή οριζόντια. Λαμβάνοντας αυτό υπόψη κατά την τοποθέτηση των δομικών στοιχείων για το στυλ απεικόνισης και σχεδιάζοντας έτσι ώστε να χωράει εύκολα σε οποιοδήποτε δοχείο (και να μην περιορίζεται από πιο ρεαλιστικές ανθρώπινες αναλογίες), σας δημιουργεί την επιτυχία σε μικρά μεγέθη.

Μισώ συγγραφικά συμπεράσματα. Ελπίζω ότι αυτό βοηθά! ️ Θα ήθελα απλώς να επαναλάβω τα πράγματα που είπα ήδη ούτως ή άλλως και ποιος έχει χρόνο γι 'αυτό;

ΥΣΤΕΡΟΓΡΑΦΟ. Προσλαμβάνουμε ανώτερους σχεδιαστές προϊόντων και συστημάτων. Με πιάσε.

* Δεν μπορώ να κάνω σούπερ, αφού μου ζητείται να κάνω χωρίς ένα δισκίο wacom, με κάνει να αισθάνομαι ναυτία