Επανασχεδιασμός της γλώσσας συστήματος εικονιδίου τύπου αρχείου της Adobe

Στην ομάδα του Adobe Design Brand, δημιουργούμε branding για όλα τα επιτραπέζια, κινητά και web προϊόντα μας. Ένα επώνυμο στοιχείο μπορεί να είναι οτιδήποτε από τα δύο λογότυπα λογότυπων προϊόντων που βλέπετε στην αποβάθρα σας στην οθόνη εκκίνησης και τα εικονίδια μέσα στην εμπειρία του χρήστη του ίδιου του προϊόντος.

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

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

Προσδιορισμός του θέματος

Πολλοί πελάτες ενδέχεται να μην συνειδητοποιήσουν ότι η Adobe διαθέτει περισσότερα από 100 προϊόντα και υπηρεσίες σε τρία σύννεφα: Creative Cloud, Cloud Document και Cloud Experience.

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

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

  • .PSD για Photoshop,
  • .AI για το Illustrator, ή
  • .INDD για το InDesign

Ωστόσο, τα περισσότερα από τα προϊόντα μας μπορούν να εισάγουν και να εξάγουν μια ποικιλία δευτερευόντων τύπων αρχείων (για παράδειγμα, μόνο το Photoshop έχει πάνω από 120 διαφορετικά εικονίδια τύπου αρχείου που αντιστοιχίζονται στο μητρώο του).

Για βελτιστοποίηση για διαφορετικές απαιτήσεις του λειτουργικού συστήματος, τα εικονίδια τύπου αρχείου πρέπει επίσης να διαχωριστούν με το χέρι σε 10 διαφορετικά μεγέθη και στη συνέχεια να παραδοθούν ως ένα σύνολο rasterized .PNG που συσκευάζονται σε .ICNS (Mac) και .ICO (Windows) αρχεία.

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

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

Βήμα 1: Έλεγχος και διερεύνηση

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

Οι ασυνέπειες ήταν παντού και ήταν πιθανότατα αποτέλεσμα δύο παραγόντων:

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

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

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

Ένα απόσπασμα της παλιάς αρχιτεκτονικής τύπων αρχείων που οργανώθηκε από την οικογένεια προϊόντων.

Στη συνέχεια, κατηγοριοποιήσαμε τους τύπους αρχείων ανά λειτουργία, όπως "Εικόνα", "Ήχος", "Κωδικός" και "3D". Συνήθως ένα εικονίδιο τύπου αρχείου θα περιέχει μια μεταφορά που μιλάει στην κύρια λειτουργία του (π.χ. Ο τύπος αρχείου HTML θα χρησιμοποιήσει τη μεταφορά για να δηλώσει ότι η λειτουργικότητά του σχετίζεται με κωδικό ή κωδικοποίηση).

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

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

Ένα στιγμιότυπο μερικών από τις παλαιές δευτερεύουσες μεταφορικές μορφές αρχείου.

Βήμα 2: Σκίτσο και σχεδίαση

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

  1. Μόνο οι κύριοι τύποι αρχείων θα αποκτήσουν τη σύνδεση του χρώματος του λογότυπου προϊόντος. Για παράδειγμα, το. PSD θα είναι μπλε και θα είναι πορτοκαλί.
  2. Δημιουργήστε μια ουδέτερη παλέτα για τους δευτερεύοντες τύπους αρχείων που υποστηρίζονται από πολλαπλές εφαρμογές. Για παράδειγμα, το Photoshop και το Illustrator θα χρησιμοποιούσαν το ίδιο εικονίδιο τύπου .PNG αρχείου, αντί να έχει το καθένα τη δική του μοναδική έκδοση του εικονιδίου μέσω της ένωσης χρωμάτων μάρκας.
  3. Δημιουργήστε μια κύρια βιβλιοθήκη των μεταφορικών τύπων αρχείων για να διατηρείτε τα εικονίδια συνεπή και να αποφύγετε την προσαρμογή των στοιχείων για περιθώρια.
Ανάλυση των στοιχείων του παλιού εικονιδίου τύπου αρχείου.

Ξεκινήσαμε να σχεδιάζουμε με αυτό το νέο πλαίσιο.

Ένα στιγμιότυπο των πρώτων σκίτσων της διαδικασίας.

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

Η εξέλιξη του εικονιδίου τύπου αρχείου της Adobe.

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

Ένα στιγμιότυπο της Βάσης Δεδομένων Icon Spectrum της Adobe.

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

Μια μελέτη σχετικά με τη χρωματική αντίθεση στο σκοτεινό UI.

Βήμα 3: Επεξεργασία και οριστικοποίηση

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

Και στις δύο οθόνες υπολογιστών Mac και Windows, έπρεπε να υπολογίσουμε τα εικονίδια που εμφανίζονται στις προβολές Λίστας έναντι Πλέγματος σε διάφορους συντελεστές κλίμακας (το 16χλμ είναι το μικρότερο μέγεθος μέχρι το μέγιστο έως 512px). Υπήρξε επίσης το ζήτημα του φωτός έναντι του σκοτεινού UI, όπως στο "Πρόσφατα στοιχεία" ή "Spotlight Search" στην επιφάνεια εργασίας Mac. Στη συνέχεια, εξετάσαμε πού εμφανίζονται τα εικονίδια τύπου αρχείου στα δικά μας προϊόντα, όπως στον Πίνακα περιουσιακών στοιχείων, στο παράθυρο διαλόγου "Περιηγητής μέσων" και στην οθόνη υποδοχής κατά την πρώτη εκκίνηση μιας εφαρμογής.

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

Ένα απόσπασμα των διαφόρων πλαισίων στα οποία εμφανίζονται τα εικονίδια τύπου αρχείου.

Το τελευταίο βήμα ήταν να εξετάσουμε τα εικονίδια τύπου αρχείου που εφαρμόζονται στο UI των υπηρεσιών ιστού και κινητής τηλεφωνίας μας, όπως οι Adobe Acrobat και Creative Cloud Libraries. Δεδομένου ότι οι υπηρεσίες αυτές διοικούνταν και από διαφορετικές ομάδες σχεδιασμού, έπρεπε να συντονίσουμε με πολλούς ανθρώπους το σχέδιό μας να αναθεωρήσουμε το σύστημα σχεδιασμού τύπου αρχείου.

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

Βήμα 4: Σχεδιάστε μια νέα ροή εργασιών

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

Χρειαζόμασταν επίσης έναν καλύτερο τρόπο για την κατάρτιση αυτών των rasterized .PNG σε αρχεία .ICNS (Mac) και .ICO (Windows). Στο παρελθόν, χρησιμοποιήσαμε την προσθήκη IconBuilder από το IconFactory με τα πρότυπα Fireworks. Ωστόσο, με τη νέα ροή εργασίας θέλαμε μια πιο ευέλικτη λύση που θα ικανοποιούσε τις ανάγκες μας: πρωτίστως τη δυνατότητα μεταφοράς και απόθεσης οποιουδήποτε συνόλου αρχείων .PNG και η εφαρμογή να εκπέμπει αυτόματα τα αρχεία .ICO και .ICNS στα σωστά μεγέθη.

Μετά από την αναζήτηση ενός τρίτου κατασκευαστή, αποφασίσαμε ότι ήταν καλύτερο να συνεργαστούμε με τους μηχανικούς μας για να δημιουργήσουμε μια εσωτερική εφαρμογή προσαρμοσμένη στις ανάγκες μας. Δημιούργησαν ένα καταπληκτικό εργαλείο που ονομάσαμε καπετάνιος Icon, το οποίο είναι ο μεταγλωτιστής που χρησιμοποιήσαμε για να συσκευάσουμε όλα τα νέα μας εικονίδια τύπου αρχείου. (Ενώ το Icon Captain βρίσκεται ακόμα σε εσωτερική έκδοση beta, οι μηχανικοί μας ελπίζουν να το μοιραστούν στο GitHub στο εγγύς μέλλον, ώστε να μπορούν να χρησιμοποιηθούν από την κοινότητα των προγραμματιστών!)

Τον εσωτερικό μεταγλωττιστή .ICO και .ICNS της Adobe.

Βήμα 5: Εφαρμογή

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

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

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

Τα νέα εικονίδια τύπου αρχείου της Adobe ζουν στο λειτουργικό σύστημα.

Οι μικρές αλλαγές μπορούν να κάνουν μεγάλη διαφορά

Στην ομάδα μας, χρησιμοποιούμε συχνά τη μεταφορά του δέντρου μπονσάι για να περιγράψουμε το έργο που κάνουμε.

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

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