Εκπαιδευτικά Σκετς

"Blockframing" και 31 ελεύθερες διατάξεις σχεδίασης με σκίτσο που χρησιμοποιούν το Auto Layout από την εφαρμογή Anima

Ναι, μπορείτε να τα κατεβάσετε. Ναι, δωρεάν.

Σημείωση από τον Jon: Υπάρχει ένα δωρεάν αρχείο που μπορείτε να κατεβάσετε κοντά στο κάτω μέρος αυτής της ανάρτησης, αλλά αν μπορείτε να διαθέσετε 7 λεπτά (σύμφωνα με το Medium), νομίζω ότι θα μάθετε ένα πράγμα ή δύο! Απολαμβάνω!

Αληθινή συζήτηση

Η μόνη φορά που δημιουργώ ποτέ "πραγματικό" wireframes είναι όταν προσπαθώ να δείξω μια δροσερή διαδικασία πυροβόλησε στο Dribbble ...

... και ποτέ δεν έχω δείξει δροσερά στιγμιότυπα επεξεργασίας στο Dribbble.

Εσύ, δεν είμαι καλός στα καλώδια!

Πάντα με ενθουσιασμό και καταλήγω να προσθέτω πολύ μεγάλη λεπτομέρεια, και αυτό που υποτίθεται ότι είναι ένα γρήγορο wireframe καταλήγει να είναι έξι ώρες nitpixeling ™ για τέλεια padding, υπέροχα περιθώρια και τυπογραφία βιβλίων.

Έτσι δεν ... Δεν είμαι πραγματικά τόσο καλός στα wireframes.

Αλλά αυτό στο οποίο είμαι καλός είναι η παρενόχληση.

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

Αποκλεισμός ... πλαισιώνοντας;

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

Μαντέψτε αυτή την εφαρμογή!

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

Με τον προσδιορισμό των μεγαλύτερων περιοχών του χρώματος παραπάνω, εδώ το Facebook εκπροσωπείται ως ομαδοποιημένο πλαίσιο:

Εξασφαλίζω ότι το 99% από εσάς θα μπορούσε να μου είπε τι app ήταν χωρίς συμβουλές. Το άλλο 1% από εσάς είναι 87 ετών.

Με το καταπληκτικό plugin Auto Layout από το Anima App, μπορώ ακόμη και να σας δείξω πώς θα έπρεπε να συμπεριφέρεται το περιεχόμενο της σελίδας όταν αλλάζει το μέγεθος του προγράμματος περιήγησης ... τι είναι σταθερό ... τι είναι ρευστό ... και τι είναι κυμαινόμενο:

Το κεντρικό δοχείο του Facebook παραμένει σταθερό πλάτος και επιπλέει στο κέντρο, ενώ το ρεύμα συνομιλίας κολλάει στα δεξιά.

Πότε να χρησιμοποιήσετε τη λειτουργία Fragmentation

Το πλεονέκτημα του blockframing είναι ότι μπορείτε να το κάνετε σε κάθε φάση της διαδικασίας σχεδιασμού του προϊόντος:

  1. Πριν (αρχικός σχεδιασμός)
  2. Κατά τη διάρκεια (νέων λειτουργιών)
  3. Μετά (Ένδειξη Αποκαλύψεων)

Πριν από το σχεδιασμό (αρχική σχεδίαση)

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

Το blockframing δεν αντικαθιστά την συμβατική κορνίζα.

Προσωπικά βρίσκω λεπτομερή σύρματα με ψευδο κείμενο, σύνορα ενός pixel και εικόνες "placeholder" "X" που αποσπούν την προσοχή. Και αν τους βρω να αποσπάσουν την προσοχή τους (όπως κάποιος ξέρει να τα διαβάσει), τότε ο πελάτης μπορεί επίσης.

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

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

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

Κατά τη διάρκεια του Σχεδιασμού (Νέες δυνατότητες)

Ας υποθέσουμε ότι έχετε ήδη αποστείλει το προϊόν και ότι σχεδιάζετε νέα χαρακτηριστικά. Με αυτό το σημείο, υπάρχουν δεκάδες καθιερωμένα μοτίβα και το οπτικό στυλ είναι πολύ καλά καθορισμένο. Ίσως έχετε ακόμα ένα πλήρες σχέδιο σχεδιασμού όπως το UX Power Tools στη θέση του!

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

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

Αυτό μπορεί να διαρκέσει μόνο 10 λεπτά, αλλά θα μπορούσα ακόμα πιθανότατα να καταλάβω έναν τρόπο να σπαταλάω 7 ώρες παρακολουθώντας βίντεο γάτας.Άσχετο: πάντα σκέφτομαι το Cinnabon ™ όταν ακούω τη λέξη kanban. Ugh, τόσο νόστιμο.Ποιος είναι κάτω για 19 ίσια επεισόδια Parks & Recreation ???

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

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

Μετά το Design (Concept Reveal)

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

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

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

Στο σπίτι μου, θα υπήρχαν Twinkies και Hot Dogs κάτω από αυτούς τους ασημένιους θόλους. Αριστοκρατικό, σωστά;

Δείτε πώς θα παρουσιάσουμε το YouTube:

Πλήρες φραγμό! Δεν παρουσιάζουμε ακόμη υψηλή πιστότητα. Αρχίζουμε ακριβώς την ιστορία μας.

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

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

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

Εδώ κάνουμε παύση για να απευθυνθούμε στην περιοχή του βίντεο και στα χειριστήρια αναπαραγωγής. Μπορούμε να μείνουμε εδώ για 15 λεπτά μιλάμε για το πώς όλα λειτουργούν ... και αυτό είναι εντάξει! Shoutout στον Pablo Stanley και την εκπληκτική σειρά του

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

Τα βίντεό σας κάνουν πολύ καλά, Pablo! Συγχαρητήρια! Κοιτάξτε όλους αυτούς τους συνδρομητές

Τέλος, φτάνουμε στο "Σχετικά βίντεο" και στην ενότητα. Σε μια συνομιλία με έναν πελάτη, πιθανότατα θα μιλήσαμε για τον τρόπο με τον οποίο καταγράφεται αυτή η λίστα και πώς προτεινόμενα βίντεο όπως αυτά θα βοηθήσουν τους χρήστες να μετατραπούν σε BLACKHOLE YOUTUBE VIDEOS ΓΙΑ ΤΙΣ ΕΠΟΜΕΝΕΣ ΠΕΜΠΤΕΣ ΩΡΕΣ.

Όχι ότι αυτό μου συνέβη ποτέ ...

Παρακολουθώ πολλά βίντεο από το BuzzFeed και αυτός ο τύπος Tiny Tim Bradbury κάνει μερικά ξεκαρδιστικά βίντεο.

Μόνο αφού ολοκληρώσουμε την αποκάλυψη κάθε τμήματος, θα δείξουμε ολόκληρη τη διεπαφή:

Τάδα! Υποστηρίζει τη σχεδίαση στο YouTube. Δείχνει καλά!

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

Ugh, έτσι πού είναι τα ελεύθερα πράγματα;

Εντάξει εντάξει.

Το Auto Layout είναι ένα φοβερό εργαλείο και η νέα λειτουργία τους "stacks" μοιάζει με συμπεριφορές CSS flexbox μέσα στο Sketch.

Είναι ντοπα. *

* Για τους μη Αμερικανούς, το "dope" σημαίνει πραγματικά πολύ δροσερό.
Το dope σημαίνει επίσης ηρωίνη ... αλλά όχι σε αυτήν την περίπτωση. Η αυτόματη διάταξη δεν είναι ηρωίνη.

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

Μπορείτε να πάρετε όλες τις 30+ μορφές FUH FREE δεξιά κάτω από εδώ. Θα σας κοστίσει μηδενικά δολάρια αν δεν θέλετε να χρηματοδοτήσετε ένα Chipotle burrito ¯ \ _ (ツ) _ / ¯

(Σχετικά: Ξέρατε ότι υπήρχε ένα burrito emoji; Είναι άγρια ​​λεπτομερής.)

Εντάξει, αλλά πραγματικά για αυτή τη φορά, εδώ είναι ο φάκελος:

Ρίξτε μια ματιά!

Ενα τελευταίο πράγμα…

Τέλος, πρόσφατα ενημέρωσα το UX Power Tools για να δουλέψω με το Auto Layout, οπότε τώρα είναι ακόμη πιο γρήγορο στη χρήση! Νομίζω ότι θα το σκάψετε. Εάν ενδιαφέρεστε, μπορείτε να διαβάσετε περισσότερα για αυτό εδώ.

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

Ακολουθήστε το UX Power Tools στο Twitter
Ακολούθησέ με στο τουίτερ