Οι καλύτεροι σύντροφοι του σχεδιαστή του UX για σκίτσο

Μια εργαλειοθήκη γεμάτη αποτελεσματικότητα

Μέχρι τώρα, νομίζω ότι μπορούμε όλοι να συμφωνήσουμε ότι το Sketch είναι το καλύτερο εργαλείο σχεδιασμού στην αγορά. Εκτός από την προσφορά ενός από τα πιο απλά μοντέλα αλληλεπίδρασης που έχω βιώσει ποτέ (άλλαξα από το Fireworks στο Sketch κυριολεκτικά μια μέρα στην άλλη όταν πήρα το πρώτο μου MacBook το 2014 ... ήταν μια σκοτεινή ώρα στις μέρες των Windows μου, αλλά σίγουρα χτισμένο χαρακτήρα).

Μέρος της υιοθέτησης του Sketch οφείλεται επίσης στην ευκολία ενσωμάτωσής του σε άλλες εφαρμογές τρίτου μέρους και στην προσέγγιση των ανοικτών όπλων σε plugins.

Υπάρχει μια θάλασσα εργαλείων και plugins. Αυτό δεν θα είναι μια εξαντλητική λίστα (μπορείτε να χρησιμοποιήσετε το google.com γι 'αυτό). Αντ 'αυτού, θεωρώ ένα φανταστικό μείγμα εργαλείων για τους σχεδιαστές UX (δηλαδή, οι σχεδιαστές επικεντρώθηκαν περισσότερο στην επεκτασιμότητα, τη διαδικασία, την επικοινωνία και λιγότερο στον οπτικό πειραματισμό και την κινούμενη εικόνα).

Sketch πιο γρήγορα και πιο αποτελεσματικά

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

Sketch Runner από τον Roy van Rooijen (και ομάδα!)

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

Μετονομάστε τα επίπεδα από τον Rodrigo Soares

Το χρησιμοποιώ όλη την ώρα. Μαζική μετονομασία στρώματα, ή να βρείτε και να αντικαταστήσετε. Για τον ατελείωτα οργανωμένο σχεδιαστή, είναι απαραίτητο.

Craft από την InVision

Χρησιμοποιώ κυρίως Craft Data για να τραβήξω δείγματα δεδομένων και το Craft Sync για να πιέσω mockups στο InVision ώστε να μπορούν να προβληθούν χρησιμοποιώντας το Inspect (περισσότερα για αυτό αργότερα).

Nudg.it από τον Anthony Collurafici

Αν χρησιμοποιείτε ένα πλέγμα 8-px για εσάς (που θα έπρεπε), τότε χρειάζεστε απολύτως αυτό το εργαλείο. Σας επιτρέπει να αλλάξετε τις μικρές και μεγάλες αυξήσεις για το σκίτσο (οι προεπιλογές είναι 1px και 10px, αντίστοιχα). Πηγαίνουν τις ημέρες που θα ήμουν SHIFT-Arrow Δεξιά, έπειτα βέλος αριστερά + βέλος αριστερά για να μετακινήσετε ένα αντικείμενο προς τα δεξιά από 8px. Δεν μπορώ να σκεφτώ ένα πιο απλό εργαλείο που μου έσωσε τόσα πολλά ενοχλητικά κλικ στο Sketch από αυτό.

Αυτόματη διάταξη από την εφαρμογή Anima

Όταν το Sketch κυκλοφόρησε νέες συμπεριφορές για ομαδοποίηση, ήταν ένα lifesaver για όσους χρειάζονται να δώσουν απάντηση στο mockup. Το μεγαλύτερο μειονέκτημα είναι ότι οι συμπεριφορές αυτού του ελέγχου είναι κάπως ασαφείς. Το Auto-Layout επιδιορθώνει αυτό με ένα εύχρηστο plugin που σας βοηθά να δημιουργήσετε προσαρμοσμένες διατάξεις

Μοιραστείτε με τους Ενδιαφερόμενους

Marvel by Marvel

Αυτό γίνεται γρήγορα το αγαπημένο μας. Όλοι γνωρίζουν το InVision σε αυτό το σημείο, οπότε θα επικεντρωθούμε σε αυτήν την εφαρμογή. Μερικές βασικές διακρίσεις εδώ είναι ότι μπορείτε να κάνετε τα σχέδιά σας δημόσια σε μια βιτρίνα ή να δούμε τη δουλειά άλλων σχεδιαστών. Έχει επίσης μια εφαρμογή AppleTV για την προβολή εφαρμογών tvOS. Πολλοί σχεδιαστές εξακολουθούν να μην σχεδιάζουν σε αυτό το μέσο αλλά αλλάζουν γρήγορα.

Δείτε αυτό το έργο εδώ.

Ταχύτερη Χάραξη Ανάπτυξης

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

Zeplin από Zeplin

Αγαπά την ομάδα και την υποστήριξη αυτής της εφαρμογής. Με λίγα λόγια, σκότωσε το spec του UI. Εξάγετε πίνακες τέχνης από το Σκίτσο που θέλετε να θέσετε στη διάθεση των προγραμματιστών και συγχρονίζεται σε μια κοινή διεύθυνση URL. Οι προγραμματιστές μπορούν να κάνουν κλικ σε οποιοδήποτε γραφικό στοιχείο και να αποκτήσουν σχεδόν κάθε ιδιότητα (περίγραμμα, χρώμα, γραμματοσειρά κλπ.) Με το αντίστοιχο CSS. Zeplin έξυπνα παραμένει έξω από το HTML που είναι πολύ δύσκολο να παρεκκλίνει από ένα σχέδιο UI.

Επιθεώρηση InVision από InVision

Αυτό έχει σχεδόν την ίδια λειτουργικότητα με τη Zeplin, αλλά λειτουργεί ως επέκταση του προϊόντος πρωτοτύπου InVision. Είναι ωραίο που ταιριάζει στη σουίτα, αλλά σας προειδοποιώ ότι μοιράζεται το αρχείο σκίτσων προέλευσης και μέσω του κουμπιού "Λήψη περιουσιακών στοιχείων" στην επάνω δεξιά πλευρά, το οποίο είναι πιθανώς ένας διαχειριστής για όσους θεωρούν ιδιωτικά τα αρχεία προέλευσης.

Ζήστε το περιβάλλον εργασίας σας

Η βασική απόφαση για να κάνετε είναι πόσο πολύπλοκη θέλετε το κινούμενο σχέδιο σας. Παρουσιάζω δύο επιλογές εδώ για το απλό και πιο προηγμένο. Επίσης, σημειώστε ότι απομακρύνομαι από το πλήρες λογισμικό κινουμένων σχεδίων όπως το After Effects και το Flash (lol jk) που δεν είναι καλά ενσωματωμένα στη ροή εργασίας του design product.

Αρχή από τον Daniel Hooper

Η αρχή είναι μια πολύ φιλική προς το Σκίτσο διεπαφή για την προσθήκη απλών κινήσεων και μεταβάσεων στο σχεδιασμό σας. Απαιτεί ότι τα στρώματά σας ομαδοποιούνται και ονομάζονται καλά γιατί εισάγονται στην αρχή με αυτά τα ονόματα και ο έλεγχος των αντικειμένων είναι πολύ πιο εύκολο με καλά ονόματα ... ΣΥΜΒΟΥΛΕΣ ΣΥΜΒΟΥΛΩΝ.

FramerJS από την ομάδα Framer

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

Διαχείριση πόρων

IconJar

Υπάρχουν κάποιες άλλες εναλλακτικές λύσεις στην αγορά όπως το Lingo by Noun Project, αλλά αυτό είναι φθηνότερο και λειτουργεί σαν γοητεία . Το IconJar σας επιτρέπει να διαχειριστείτε εύκολα τα εικονίδια και, ως μπόνους, μπορείτε να ρίξετε γραμματοσειρές και να δημιουργήσετε SVG για κάθε glyph. Αυτό σημαίνει ότι μπορείτε να ρίξετε μια γραμματοσειρά εικονιδίων και να πάρετε όλους τους χαρακτήρες ως μεμονωμένα σύμβολα και όχι να χρειαστεί να χρησιμοποιήσετε τα οδυνηρά cheatsheets. Όλο και περισσότεροι σχεδιαστές εικονιδίων κάνουν τα εικονίδια τους συμβατά με το IconJar από το κουτί, πράγμα που σημαίνει ότι τα τεράστια εικονίδια θα οργανωθούν χωρίς καμία προσπάθεια.

Απλά οι πόροι σας

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

Εικόνες

  • Εικονίδια υλικού Google - για έργα MD, αυτό είναι το κύριο σετ.
  • Nova Icons - μια μεγάλη επέκταση σετ εικόνων με μια MD-αίσθηση.
  • Πυρήνα - ποικιλόμορφο και αυξανόμενο σύνολο εικόνων που έρχεται ως μητρική εφαρμογή που σας δίνει έλεγχο της ακτίνας, του χρώματος και του μεγέθους.
  • Magicons - ένα μικρότερο σετ αλλά εξαιρετικό ως βάση για τις περισσότερες εφαρμογές.

Γραμματοσειρές

Η επιλογή γραμματοσειρών για το UI Design δεν είναι ακριβώς η χειρουργική επέμβαση πυραύλων, επειδή πρέπει να διαλέξετε ένα ευανάγνωστο και ευανάγνωστο sans-serif, το οποίο πρέπει να λειτουργεί σε κουμπιά, ετικέτες, κεφαλίδες κλπ. Θα αποφύγω την εμφάνιση των TypeKit γραμματοσειρών εδώ επειδή , ειλικρινά, υπάρχουν πάρα πολλές λεπτές παραλλαγές των γραμματοσειρών που ταιριάζουν στο λογαριασμό. Οι δωρεάν γραμματοσειρές Google παρακάτω θα λειτουργούν συνήθως για τα περισσότερα από τα έργα σας.

  • Roboto - αυτή είναι μια μεγάλη γραμματοσειρά αλλά πολύ δεμένη με το υλικό σχεδίασης, οπότε μπορεί να είναι δύσκολο να το χρησιμοποιήσετε εκτός των έργων που βασίζονται σε MD.
  • Open Sans - Η πιο ευέλικτη γραμματοσειρά της δέσμης. Αυτό συμβαίνει εδώ και χρόνια και δεν δείχνει κανένα σημάδι επιβράδυνσης. Έχει πολλά βάρη για όλες τις ανάγκες σας σε UI.
  • Lato - Δεν το χρησιμοποιώ για κάθε είδους σχεδίαση, επειδή έχει μερικά αδύνατα εγκεφαλικά επεισόδια που δεν αποδίδουν πάντα καλά. Είναι όμως κομψό και μπορεί να είναι εξαιρετικό για επικεφαλίδες με διαφορετική γραμματοσειρά που χρησιμοποιείται για τα στοιχεία ελέγχου UI.
  • Cabin - Σχεδόν τόσο ευέλικτο όσο το Open Sans και όχι σχεδόν πανταχού παρόν.
  • Montserrat - δεν είναι τόσο ευέλικτο, αλλά το χρησιμοποιώ συχνά για wireframes. Είναι ιδανική για έννοιες ή εφαρμογές με πιο ήπια αίσθηση.
  • Nunito - μια νέα γραμματοσειρά από την Google που μοιάζει με μια δωρεάν έκδοση της Proxima Nova Soft με την πρώτη ματιά
  • Jaldi - αρκετά στυλ για να δώσετε στο UI σας κάποια φαντασία. Παρέχει επίσης καλά σε μικρά μεγέθη.

Πτερύγιο. Ας ελπίσουμε ότι είναι προφανές ότι αυτό δεν είναι εξαντλητικό. Αυτά είναι μόνο οι αγαπημένες μας εφαρμογές για Sketch ενώ εργαζόμαστε σε UX Power Tools. Αν θέλετε να προσθέσουμε περισσότερα, θα δοκιμάσουμε το plugin ή την εφαρμογή σας για $ 65K, ή όση και αν είναι μια νέα τιμή Tesla

Όταν δεν είμαι στο Medium, δουλεύω σε εργαλεία Σκίτσο σε UX Power Tools για να σας κάνει έναν καλύτερο, πιο αποδοτικό σχεδιαστή. Ακολουθήστε μας στο Twitter @uxpowertools. Ακολουθήστε και εμένα εάν το πνεύμα σας κινεί!