Μια ροή εργασίας βασισμένη σε στοιχεία για σκίτσο

Ο τρόπος με τον οποίο αλλάζουμε το σχεδιασμό αλλά και τα εργαλεία μας.

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

Την περασμένη δεκαετία, οι σχεδιαστές άρχισαν να επαναξιολογούν την προσέγγισή τους και στρέφονταν προς μια ροή εργασιών βασισμένη σε συστατικά. Το Photoshop εισήγαγε τα έξυπνα αντικείμενα (μπορεί να "τοποθετήσει" άλλα αρχεία του Photoshop σε PSD). Αυτή η νέα δυνατότητα επέτρεψε στους σχεδιαστές να μοιραστούν μια κεντρική έκδοση ενός στοιχείου, χωρίς να ανησυχούν για την ύπαρξη διπλότυπων αυτού του στοιχείου στα αρχεία τους. Δυστυχώς, αυτό ποτέ δεν μετατράπηκε πραγματικά σε μια ροή εργασίας σε όλες τις ομάδες σχεδιασμού - ήταν κάτι περισσότερο από μια εξαίρεση από έναν κανόνα.

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

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

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

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

Πρωτόγονα

Χρωματιστά

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

Στυλ κειμένου και στυλ επιπέδου

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

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

Συστατικά

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

ΕΠΙΠΕΔΟ 1: Ίδρυμα

Τα σύμβολα επιπέδου 1 δεν περιλαμβάνουν άλλα σύμβολα. Είναι το χαμηλότερο επίπεδο στη στοίβα των εξαρτημάτων μας.

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

ΕΠΙΠΕΔΟ 2: Μπλοκ χαμηλότερου επιπέδου

Τα σύμβολα επιπέδου 2 συνδυάζουν πρωτόγονα και σύμβολα επιπέδου 1.

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

ΕΠΙΠΕΔΟ 3: Μπλοκ μεσαίου επιπέδου

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

  • Sidebars: Λίστες κελιών, μπορεί να χρησιμεύσουν ως πλοήγηση
  • Κύριοι τομείς περιεχομένου: Τα πάντα από ένα πλέγμα έργων έως μια λεπτομέρεια δέσμευσης, συμπεριλαμβανομένων ενεργειών, τίτλου, περιγραφής, προεπισκόπησης και σχολίων
  • Εφαρμογές κεφαλίδων: Wayfinders, βοηθώντας τους ανθρώπους να γνωρίζουν πού βρίσκονται μέσα στην εφαρμογή, μείγμα ετικετών κειμένου και εικονίδια
  • Modals: Ενέργειες, επιβεβαιώσεις ενέργειας, πλήρεις ροές ...

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

ΕΠΙΠΕΔΟ 4: Συνθέσεις

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

Πώς θα αλλάξει ο σχεδιασμός;

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

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

Η οικοδόμηση προϊόντων υψηλής ποιότητας είναι μια ομαδική προσπάθεια και όλοι μας εδώ στην Abstract είναι ενθουσιασμένοι που παίζουν κρίσιμο ρόλο στην εξέλιξη αυτής της διαδικασίας.

Η περίληψη είναι αυτή τη στιγμή σε Ιδιωτικό Alpha. Δουλεύουμε προς μια Δημόσια Βήτα στα τέλη του 2ου τριμήνου. Η ανατροφοδότηση από τους δοκιμαστές μας ήταν απίστευτα χρήσιμη καθώς βελτιώσαμε τις ροές και βελτιώσαμε τη συνολική εμπειρία. Περισσότερο από ποτέ, πιστεύουμε ότι είναι πλέον η ώρα οι σχεδιαστές να έχουν την κατάλληλη υποδομή για να τονίσουν την αξία του σχεδιασμού. Νέες προσκλήσεις βγαίνουν κάθε εβδομάδα. Σας ευχαριστούμε για την υποστήριξη και την ενθάρρυνσή σας. Ανυπομονούμε να κάνουμε μαζί εκπληκτικά πράγματα.

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