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

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

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

Σε αυτήν την ανάρτηση, σκοπεύω να καλύψω όλα όσα πρέπει να γνωρίζετε Σχέδιο UX , συμπεριλαμβανομένων των ακόλουθων σημείων:

• Εισαγωγή στο UX Sketching και wireframes
• Βάσεις, εργαλεία και τεχνικές του UX Sketching
• Διευκρινίστε τα σκίτσα με σημειώσεις, σχολιασμούς και αριθμούς
• Συμβουλές και κόλπα για UX Sketching
• Μίνι-μέθοδοι σχεδιασμένες για τη βελτίωση της ποιότητας και της παραγωγικότητας
• Όλα όσα πρέπει να γνωρίζετε για το Wireflows
• Ένας γρήγορος οδηγός για το UX Sketching Flow

Σχέδιο UX είναι μια διαδικασία δύο βημάτων

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

• Δημιουργία ιδεών

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

• Λεπτομέρεια και βελτίωση

Βήμα προς βήμα, επιλέγετε μερικές ελπιδοφόρες παραλλαγές και αρχίζετε να επεξεργάζεστε τις λεπτομέρειες, με αποτέλεσμα ορισμένες ιδέες να καταστούν ακατάλληλες.

Σχέδιο UX Υ Πλαίσια καλωδίων : Εισαγωγή και ταξινόμηση

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

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

Τόνισα τους ακόλουθους τύπους σκίτσων:

• Το Σκίτσο: Αρχικές Ιδέες

Αυτά είναι αρχικά σκίτσα. Οι λεπτομέρειες χαμηλότερου επιπέδου είναι αισθητές. Αντιμετωπίζεται περιορισμένος αριθμός χρωμάτων.

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

s corp c corp llc σύγκριση

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

• Wireframe: Προδιαγραφή, Λεπτομερής Φάση

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

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

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

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

• Σχέδιο οπτικού σχεδιασμού

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

• Στοιχεία ή ανάλυση στοιχείων

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

Τα στοιχεία, ακόμη και τα πιο απλά, πρέπει να έχουν μια κατάσταση. ένα κουμπί που μπορεί να πατηθεί που έχει ένα μπλοκ κειμένου που μπορεί να είναι κενό ή όχι. Όσο πιο περίπλοκο είναι, τόσο περισσότερα κράτη έχει.

Ξεκινώντας με τα Βασικά

• Προετοιμάστε τα εργαλεία σας - Βρείτε το πιο βολικό μέρος, ένα μεγάλο τραπέζι με αρκετό χώρο. Πιάσε άφθονο χαρτί και χρησιμοποιήστε μερικά μολύβια και μαρκαδόρους.
• Θέρμανση - Για να είστε έτοιμοι, προτείνω να σχεδιάσετε μερικές γραμμές, κύκλους, βασικά πρότυπα και εικονίδια.
• Ορίστε τους στόχους σας - Αποφασίστε τι θέλετε να σχεδιάσετε. Ορίστε τον στόχο σας και αποφασίστε ποια ιστορία πρέπει να πείτε. Προσδιορίστε το επιθυμητό επίπεδο λεπτομέρειας. Αποφασίστε εάν είστε έτοιμοι να τραβήξετε μαζικά.
• Καθορίστε τι θα είναι το κοινό σας - Εάν το κάνετε μόνοι σας, μην ανησυχείτε για το πώς φαίνεται το σκίτσο σας. Ωστόσο, εάν η πρόθεσή σας είναι να δείξετε το σχέδιό σας σε έναν πελάτη, φροντίστε να αφιερώσετε επιπλέον χρόνο στην εργασία για να προσθέσετε περισσότερες λεπτομέρειες στο σκίτσο σας.
• Ορίστε ένα χρονικό πλαίσιο - Αφού αποφασίσετε το χρόνο που θέλετε να αφιερώσετε στο σκίτσο, ας πούμε 30 λεπτά, θα σας βοηθήσει να εστιάσετε στην εργασία. Τώρα, είστε έτοιμοι και μπορείτε να ξεκινήσετε:

1. Σχεδιάστε τα σύνορα - Σχεδιάστε τα καρέ, ένα πρόγραμμα περιήγησης ή ένα παράθυρο τηλεφώνου, ένα μέρος της διεπαφής και ούτω καθεξής.
2. Προσθέστε τα πιο βασικά ή μεγαλύτερα στοιχεία - Μενού, υποσέλιδο, κύριο περιεχόμενο.
3. Προσθήκη λεπτομερειών - Προσθέστε σχετικές λεπτομέρειες, αλλά διατηρήστε τις απλές σε αυτό το στάδιο.
4. Προσθήκη σχολιασμών και σημειώσεων - Αυτά είναι απαραίτητα μόνο εάν σκοπεύετε να μοιραστείτε τα σκίτσα σας. Ωστόσο, μπορεί να είναι χρήσιμα, ακόμα κι αν το κάνετε μόνο για προσωπική χρήση.
5. Εναλλακτικές Σκίτσο - Έχετε κάποιες εναλλακτικές λύσεις.
6. Επιλέξτε την καλύτερη λύση - Διάλεξε την καλύτερη επιλογή.
7. Προσθέστε το Shadow και το Bevel - Αυτό είναι ιδιαίτερα σημαντικό κατά την κοινή χρήση. Προσθέστε μια σκιά για να κάνετε το σκίτσο σας πιο οπτικά εντυπωσιακό, κάτι που είναι σημαντικό αν σκοπεύετε να το μοιραστείτε με μέλη της ομάδας ή πελάτες.
8. Αποθηκεύστε το Σκίτσο - Τραβήξτε μια φωτογραφία ή τοποθετήστε τη σε ένα φάκελο. Έχω κάποιους δίσκους χαρτιού στο τραπέζι σκίτσων μου.
9. Μερίδιο - Χρησιμοποιώ μία από τις ακόλουθες μεθόδους κοινής χρήσης: * Σαρώστε τα σκίτσα μέσω Evernote και παρέχει έναν μόνιμο σύνδεσμο για άλλα μέλη της ομάδας ή άλλους ενδιαφερόμενους. * Τραβήξτε μια φωτογραφία και ανεβάστε την InVision . * Αντιστοιχίστε και ανεβάστε εικόνες σε Realtimeboard . * Ή απλώς στείλτε μια φωτογραφία ανά ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ .
10. Ελέγξτε σκίτσα και προσθέστε σημειώσεις - Ξεκουραστείτε και μετά επιστρέψτε στα σκίτσα σας, μετά από λίγο. Κοιτάξτε τους ξανά. Το σκίτσο εξακολουθεί να έχει νόημα για εσάς; Ένα καλό σκίτσο πρέπει να είναι εύκολο να ακολουθηθεί.

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

Αποσαφήνιση σκίτσων με πρόσθετα στοιχεία

Βρείτε ή σχεδιάστε ένα κατάλληλο σκίτσο και, στη συνέχεια, προσθέστε τις ακόλουθες λεπτομέρειες:

1. Τίτλος - Μερικές φορές η προσθήκη τίτλου είναι καλή επιλογή. Γράψτε μια περιγραφή και ημερομηνία, εάν είναι απαραίτητο, στο επάνω μέρος του σχεδίου. Αυτός ο τίτλος θα σας βοηθήσει να καταλάβετε τι κοιτάζετε και επίσης εάν το σκίτσο είναι σχετικό ή όχι. Αυτό είναι ιδιαίτερα χρήσιμο εάν έχετε πολλά σκίτσα ή τα παρουσιάζετε σε άλλα άτομα.

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

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

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

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

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

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

   s corporation vs c corporation llc

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

Πιο συγκεκριμένες συμβουλές και κόλπα

1. Μην ανησυχείτε για την ποιότητα - Μην κοιτάς τα σκίτσα στο Dribble. πρόκειται για κάτι τελείως διαφορετικό. Λάβετε υπόψη ότι ο κύριος σκοπός των σκίτσων είναι να σας βοηθήσει να σκεφτείτε καθαρά, να βρείτε καλύτερες λύσεις και να εξοικονομήσετε χρόνο.
2. Πρακτική - Για να ξεκινήσετε, μπορείτε να δοκιμάσετε να σχεδιάσετε μερικές εφαρμογές. Ανοίξτε μια εφαρμογή ιστού ή για κινητά και προσπαθήστε να αντιγράψετε την οθόνη, περιγράφοντας τα στοιχεία στις σημειώσεις. Όταν έχετε ελεύθερο χρόνο, πρακτική σχεδίαση βασικών δομικών στοιχείων του σχεδίου σας. Σε γενικές γραμμές, η πρακτική κάνει τέλεια. Με την πάροδο του χρόνου, θα γίνει μέρος του σχεδιαστή εσωτερικών χώρων σας.
3. Αγορά φακέλου - Συνήθως, δεν δουλεύω από το γραφείο μου, αλλά από καφέ ή από το σπίτι μου. Τα σκίτσα σε χαρτί είναι επιρρεπή σε ζημιές, οπότε αγοράστε ένα απλό συνδετικό για να τα διατηρήσετε ασφαλή και υγιή.
4. Πάρτε εργαλεία μαζί σας όπου κι αν πάτε - Αυτό διασφαλίζει ότι μπορείτε να αποτυπώσετε την ιδέα σας σε χαρτί ανά πάσα στιγμή, διαφορετικά ενδέχεται να χάσετε την ιδέα ή να μην μπορείτε να την θυμηθείτε λεπτομερώς. Φέρνω πάντα ένα σημειωματάριο, μερικά φύλλα και μολύβια Α4.
5. Μοιραστείτε με άλλους - Είναι πολύ σημαντικό να συμπεριλάβετε άλλους ανθρώπους και να επικοινωνείτε με την ομάδα. Η συμπερίληψη άλλων και η λήψη των σχολίων τους, ιδιαίτερα νωρίς στη διαδικασία, βοηθά στην εξοικονόμηση χρόνου και πόρων μακροπρόθεσμα. Μπορείτε επίσης να ενθαρρύνετε τους άλλους να σχεδιάσουν το δρόμο όπου βλέπουν ότι ο σχεδιασμός μπορεί να πάει.
6. Δίσκοι χαρτιού - Σκεφτείτε να τοποθετήσετε δίσκους χαρτιού στο τραπέζι εργασίας σας. Για παράδειγμα, έχω τρία: Για άμεσες εργασίες, για σκίτσα, καθαρά φύλλα χαρτιού.
7. Πειραματιστείτε και προσαρμόστε - Οι προτάσεις μου βασίζονται στην εμπειρία μου. Με την πάροδο του χρόνου θα βρείτε αυτό που σας ταιριάζει καλύτερα. ποιες μεθόδους, ποια ακολουθία βημάτων, ακριβώς τι γεμίζει το δημιουργικό σας δυναμικό. Αλλά θα φτάσετε σε αυτό το σημείο μόνο εάν δοκιμάζετε συνεχώς κάτι νέο, επομένως είναι σημαντικό να πειραματιστείτε με διαφορετικές μορφές, στυλ και να δοκιμάσετε νέα πρότυπα.
8. Χρησιμοποιήστε πρότυπα - Τα πρότυπα εξοικονομούν χρόνο και λαμβάνουν έμμεσα υπόψη τους περιορισμούς μορφοποίησης, δίνοντάς σας περισσότερο χρόνο για να εστιάσετε σε αυτό που είναι σημαντικό.

Πρόσθετες μίνι-μέθοδοι για τη βελτίωση των σκίτσων σας

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

1. Δημιουργήστε έναν πίνακα σκίτσων - Ένα από τα μεγαλύτερα οφέλη από τη χρήση μολυβιού και χαρτιού, αντί για ένα ψηφιακό εργαλείο σκίτσων, είναι ότι μπορείτε να το κολλήσετε σε έναν τοίχο. Όλοι στην ομάδα μπορούν να δουν και να συμμετάσχουν (αν και προτείνω να κάνω συνεδρίες κριτικής). * Θα δείτε τα σκίτσα μόνοι σας, και αυτό θα τονώσει τη σκέψη σας και θα σας επιτρέψει να εστιάσετε στον στόχο, όχι να απομονώσετε μέρη, αλλά σε ολόκληρο το σύστημα. Αυτές οι αλληλεπιδράσεις μεταξύ των τμημάτων και του τρόπου που ταιριάζουν μεταξύ τους. * Δημιουργήστε τον πίνακα σκίτσων - επισυνάψτε τα σκίτσα του λευκού πίνακα. Εάν δεν υπάρχει πίνακας στο γραφείο σας, μπορείτε να χρησιμοποιήσετε διπλή ταινία ή κολλώδεις σημειώσεις για να κολλήσετε τα σκίτσα σας στον τοίχο. Εάν δεν θέλετε να τα κολλήσετε στον τοίχο, μπορείτε να χρησιμοποιήσετε ένα μεγάλο κομμάτι χαρτόνι. Συνιστώ να χρησιμοποιήσετε έναν πίνακα σκίτσων, καθώς είναι ένα από τα καλύτερα εργαλεία σχεδίασης.

2. Χρησιμοποιήστε έναν πίνακα - Ο πίνακας είναι ένα εξαιρετικό εργαλείο σχεδίασης. Έχει πολλά πλεονεκτήματα: Είναι περιεκτικό. είναι εύκολο για άλλα μέλη της ομάδας να συμμετάσχουν στη συζήτηση και στο σχέδιο. Ακόμα κι αν οι ιδέες τους δεν συμβαδίζουν με το σχεδιασμό, μπορείτε να καταλάβετε τον τρόπο σκέψης τους και θα σας βοηθήσει να κατανοήσετε ο ένας τον άλλον.
   * Οι σελιδοδείκτες δεν σας επιτρέπουν να επικεντρωθείτε στις λεπτομέρειες, πρέπει να σκεφτείτε τα γενικά πράγματα. Τα σκίτσα δίνουν χώρο για ερμηνεία.
   * Ένας πίνακας είναι εύκολο να καθαριστεί και να διορθωθεί. * Υπάρχει πολύς χώρος και μπορείτε εύκολα να σκεφτείτε τη ροή του συστήματος. * Μπορείτε να επισυνάψετε σκίτσα, εκτυπώσεις και υλικά αναφοράς χρησιμοποιώντας μαγνήτες.

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

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

5. Χρησιμοποιήστε το Evernote για σάρωση - Το Evernote είναι ένα εξαιρετικό εργαλείο σχεδίασης. Εκεί μπορείτε να έχετε και να μοιραστείτε τα σκίτσα σας, να δημιουργήσετε θέματα και να χρησιμοποιήσετε ετικέτες για να οργανώσετε τα σκίτσα σας. Οι δυνατότητες της λειτουργίας 'Scanner' είναι ιδιαίτερα εντυπωσιακές. Βάζετε το σκίτσο σας μπροστά και το σαρώνει, οπότε λαμβάνετε ένα αντίγραφο του σκίτσου σας. Στη συνέχεια, μπορείτε να προσκαλέσετε τους συναδέλφους σας στο Evernote και να τους δώσετε τον σύνδεσμο για τη σημείωσή σας. Επειδή υπάρχει μια εφαρμογή για τηλέφωνα και tablet, μπορείτε πάντα να έχετε τα σκίτσα σας διαθέσιμα.

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

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

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

Φυσικά, αν έχετε ένα δισκίο και γραφίδα θα είναι ακόμα πιο εύκολο.

Wireflow: Σχηματικό του συστήματος ροής διακλάδωσης

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

Το Wireflow, ή αυτό που σχεδιάζετε και ο τρόπος που συνδέεται, μπορεί να οργανωθεί σύμφωνα με τις ακόλουθες προσεγγίσεις:

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

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

1. Χαρτογράφηση γενικών και υψηλού επιπέδου - Κάντε ένα γρήγορο σκίτσο αλλαγών στην οθόνη και σχεδιάστε τη συνολική διαδρομή της χρήσης του προϊόντος. Εδώ μπορείτε να συμπεριλάβετε κάποιο πλαίσιο και, προαιρετικά, μπορείτε να δείξετε την αλληλεπίδραση των χρηστών. Για παράδειγμα, μια υπηρεσία ηλεκτρονικών αγορών είναι ένα κάπως μακρύ ταξίδι, το οποίο μπορεί να περιλαμβάνει πολλά βήματα: Πώς βρήκε ο χρήστης το κατάστημα, τα βήματα που έκανε για να βρει το προϊόν, πώς πληρώνει και ούτω καθεξής.

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

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

4. Καταστάσεις οθόνης - Σχεδιάστε την οθόνη ή τις καταστάσεις των στοιχείων (ένα παράδειγμα μπορεί να είναι ένας διάλογος μεταφόρτωσης αρχείων). Σε αυτήν την περίπτωση, για παράδειγμα, η οθόνη θα έχει τις ακόλουθες καταστάσεις: * Κενό * Ένας χρήστης παίρνει το αρχείο στην ενεργή περιοχή * Το αρχείο φορτώνει * Το αρχείο φορτώνει * Υπάρχει σφάλμα

UX Sketching Flow: Ένας γρήγορος τρόπος καθοδήγησης

Η διαδικασία σχεδιασμού συρμάτινης ροής είναι παρόμοια με εκείνη του κορνίζα . Πολλά βήματα είναι παρόμοια ή ίδια, αλλά υπάρχουν σημαντικές διαφορές:

Ορίστε τι πρέπει να σχεδιάσετε - Αποφασίστε ακριβώς τι πρέπει να σχεδιάσετε (π.χ. η γενική ιστορία ή ένα κομμάτι του σχεδίου σας). Θέλετε να δημιουργήσετε διαφορετικές επιλογές ή να σκεφτείτε βαθιά τις λεπτομέρειες ενός ταξιδιού; Αποφασίστε εάν πρόκειται να δείξετε τα σκίτσα σας σε κάποιον άλλο ή όχι.

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

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

πόσο αξίζει η βιομηχανία ομορφιάς στις ΗΠΑ

Καθορίστε την προσέγγισή σας και κάντε ένα γενικό σκίτσο σε χαρτί.

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

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

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

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

Σκεφτείτε εναλλακτικές ροές - Αναλύστε την ιστορία, σχεδιάστε μια εναλλακτική ροή και δημιουργήστε ένα σκίτσο.

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

Φρουρά - Δημιουργήστε ένα ψηφιακό αντίγραφο του σκίτσου.

Μερίδιο - μοιραστείτε το σκίτσο (όπως από, μέσω Evernote ή Οραματισμός ).

Βασικές συμβουλές και κόλπα για το UX Sketching Flow

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

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

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

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

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

Χρησιμοποιήστε πρότυπα - Προσπαθήστε να χρησιμοποιήσετε πρότυπα. Θα εξοικονομήσουν χρόνο και θα σας επιτρέψουν να δημιουργήσετε υψηλής ποιότητας πρωτότυπα με δυνατότητα κλικ.

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

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

• Γραμμές ακολουθώντας την κατεύθυνση του φωτός - Αυτό δεν φαίνεται πάντα όμορφο, αλλά μπορείτε να χρησιμοποιήσετε διαβάθμιση και να μεταφέρετε αντικείμενα σε διαφορετικά 'ύψη'

• Υπογραμμίστε ορισμένα μέρη με πιο σκούρο χρώμα (μόνο το κουμπί ή το κάτω μέρος ή τη δεξιά πλευρά)

• Χρησιμοποιώντας το Pro-δείκτης (ή το αντίστοιχό του στην εφαρμογή που χρησιμοποιείτε για να σχεδιάσετε)

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

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

Συνδυάζοντας τα όλα μαζί - Τα βασικά στοιχεία, κουμπιά, κουμπιά επιλογής και αναπτυσσόμενα Αποτελούνται από βασικά στοιχεία. Μόλις μάθετε να σχεδιάζετε αυτά τα στοιχεία, μπορείτε συνδυάστε τα σχεδιάστε σύνθετα μπλοκ και εξαρτήματα.

Να τελειωσει

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

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

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

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

Σχετίζεται με: Η τέχνη του ουσιαστικού σχεδιασμού UX