Απελευθέρωση της διαδικασίας σχεδιασμού του Microsoft Outlook

Πώς Abstract βελτίωσε την οργάνωση αρχείων και τη συνεργασία στην ομάδα σχεδιασμού μας

Περιγραφή εικόνας: Επιλογή των στοιχείων του UI από το σχεδιαστικό μας σύστημα.

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

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

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

Πριν από λίγα χρόνια, ο Miles και ο Victor ξεκίνησαν να χρησιμοποιούν το Abstrakt στην ομάδα του Outlook και από τότε έχουν υιοθετηθεί σε ομάδες σχεδίασης σε όλη τη Microsoft. Σε αυτήν την ανάρτηση, θα συζητήσουμε πώς θα χρησιμοποιήσουμε το Abstract και θα μοιραστούμε μαζί σας τη δομή του αρχείου, τη διαδικασία συγχώνευσης, τις πρακτικές συντήρησης αρχείων και ορισμένους τομείς της διαδικασίας που πιστεύουμε ότι θα μπορούσαν να βελτιωθούν. Αυτή η διαδικασία λειτουργεί για μια μεγάλη ομάδα, αλλά εξακολουθούμε να το υπολογίζουμε και θα ήθελα να ακούσω τρόπους που θα μπορούσαμε να βελτιώσουμε αυτό.

Σχεδίαση δομής αρχείου ενός έργου

Τα έργα μας χωρίζονται από πλατφόρμες - Android, iOS, Mac, Web και Universal (Mail και Ημερολόγιο στα Windows 10). Μέσα από αυτά τα έργα τα αρχεία μας χωρίζονται σε διάφορα τμήματα της εφαρμογής μας. Ακολουθεί ένα παράδειγμα της δομής του αρχείου iOS μέσα στο Abstract όπου διαχωρίζουμε τα αρχεία μας σε τμήματα όπως "iOS UI-Kit", "Mail" και "Calendar" για να διατηρήσουμε γρήγορα τα αρχεία.

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

Αρχή Αρχείο εδώ

Στη συνέχεια, το UI-Kit είναι η βιβλιοθήκη Sketch, η οποία περιέχει όλα τα στοιχεία, την τυπογραφία, τα εικονίδια και το χρώμα. Όλες οι οθόνες στα αρχεία σχεδιασμού χρησιμοποιούν συνδεδεμένα σύμβολα από αυτήν τη βιβλιοθήκη.

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

Το αρχείο iOS UI-Kit περιέχει τόσο ένα αυτοκόλλητο φύλλο εξαρτημάτων, όσο και τα ίδια τα σύμβολα

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

Βήμα προς βήμα στη διαδικασία σχεδιασμού

Το πρώτο βήμα είναι να δημιουργήσετε ένα υποκατάστημα, το οποίο θα λαμβάνει όλα τα αρχεία Sketch στο master και θα δημιουργεί ένα αντίγραφο. Σκεφτείτε το σαν να αντιγράφετε ένα φάκελο. Για να προσδιορίσουμε το υποκατάστημα, αναθέτουμε μια απλή ετικέτα στο κομμάτι στο οποίο εργαζόμαστε, προσθέτοντας τον κατάλληλο τίτλο μετά την ετικέτα. Χρησιμοποιούμε συνήθως ετικέτες όπως "Χαρακτηριστικό", "Κιτ" ή "Εξερεύνηση" για να περιγράψουμε το έργο. Στο Outlook, ενθαρρύνουμε να δοκιμάσουμε νέες ιδέες και να αλλάξουμε οτιδήποτε νομίζουμε ότι μπορεί να βελτιωθεί - τότε χρησιμοποιούμε μια ετικέτα όπως η "Εξερεύνηση". Αυτές οι ετικέτες δίνουν στα άλλα μέλη της ομάδας κάποιο πλαίσιο και βοηθούν τους να βρουν και να καταλάβουν τι είμαστε που εργάζονται για. Η δημιουργία ενός υποκαταστήματος είναι ένα τεράστιο πλεονέκτημα, επειδή σημαίνει ότι πολλοί σχεδιαστές μπορούν να δουλέψουν στα ίδια αρχεία και αργότερα να τα συγχωνεύσουν ξανά στον κύριο.

Παράδειγμα επισήμανσης υποκαταστημάτων

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

Δημιουργήστε ένα αρχείο

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

Δέσμευση καθημερινά

Μόλις ολοκληρωθεί ο σχεδιασμός, ήρθε η ώρα να τακτοποιήσετε τα στρώματα και να συγχωνεύσετε το σχέδιο με τα κύρια αρχεία. Βεβαιωθείτε ότι τα ονόματα των επιπέδων είναι ακριβή και ότι η σειρά ακολουθεί αυτό που βλέπετε στην οθόνη (από πάνω προς τα κάτω). Αυτό πρέπει να επαναλαμβάνεται για κάθε οθόνη. Μπορώ είτε να δημιουργήσω ένα νέο κλάδο με την ονομασία [Kit] και να αντιγράψω στις νέες οθόνες στο κατάλληλο αρχείο είτε μπορώ να ξαναδημιουργήσω αυτές τις οθόνες από το μηδέν χρησιμοποιώντας τα πιο πρόσφατα συστατικά της βιβλιοθήκης. Ο λόγος για τον οποίο ξεκίνησα ένα νέο αρχείο είναι να φέρω μόνο τις κύριες οθόνες στον κύριο. Μπορώ πάντα να επανεξετάσω το παλιό υποκατάστημα στο αρχείο αφηρημένων αργότερα. Είναι λίγο χρονοβόρα και μας αποθαρρύνει από τη συγχώνευση χαρακτηριστικών πιο τακτικά. Θα θέλαμε να ακούσουμε από οποιονδήποτε έχει προτάσεις για τη βελτίωση της διαδικασίας συγχώνευσης.

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

Περιγραφή εικόνας: Δημιουργία οθονών του Outlook χρησιμοποιώντας τα στοιχεία UI μας.

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

Βέλτιστες πρακτικές συντήρησης

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

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

Ένα ζήτημα Github για την παρακολούθηση των προβλημάτων με το UI-kit

Η διαδικασία και το UI-kit μας έχουν αγκαλιαστεί από τις ομάδες σχεδιασμού σε όλη τη Microsoft καθώς σχεδιάζουμε με μια πιο ανοικτή και συνεργατική προσέγγιση. Καθώς το Fluent Design εξελίσσεται σε κινητά, θα δούμε κοινά στοιχεία μέσω των προϊόντων της Microsoft.

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

Μπορείτε να μοιραστείτε τις ιδέες σας στα σχόλια .

Για να παραμείνετε ενημερωμένοι με τη Microsoft Design, ακολουθήστε μας στο Dribbble, στο Twitter και στο Facebook ή να συμμετάσχετε στο πρόγραμμα Windows Insider. Και αν σας ενδιαφέρει να συμμετάσχετε στην ομάδα μας, κατευθυνθείτε στο aka.ms/DesignCareers.

Γραπτή με και τη βοήθεια του Miles Fitzgerald και της ομάδας του Outlook.