Abstraktion des Microsoft Outlook-Entwurfsprozesses

Wie Abstract die Organisation und Zusammenarbeit von Dateien in unserem Designteam verbesserte

Bildbeschreibung: Eine Auswahl der UI-Komponenten aus unserem Design-System.

Als Designer habe ich verschiedene Tools für die Dateispeicherung und die Teamkommunikation verwendet, aber keines war sehr robust. Ich kann mir unzählige Male vorstellen, in denen ich eine Datei verloren habe oder Stunden damit verbracht habe, nach dem aktuellsten Design von jemandem zu suchen - kostbare Zeit und Energie zu verschwenden.

Entwickler haben seit einiger Zeit Versionskontrollsysteme wie Git, aber ähnliche Mechanismen für Designer waren bisher nicht verfügbar.

Abstract ist ein Tool, das unseren Designern hilft, bei Projekten zusammenzuarbeiten. Es bietet unserem Team eine zentrale Drehscheibe für unsere Konstruktionsarbeit und hilft uns, Konstruktionskomponenten und -dateien zu verwalten und zu warten. Designer importieren Sketch-Dateien einmal in Abstract, und dann öffnen wir die Dateien einfach von dort aus.

Vor einigen Jahren haben Miles und Victor begonnen, Abstract im Outlook-Team zu verwenden, und es wurde seitdem in Designteams von Microsoft übernommen. In diesem Beitrag werde ich erläutern, wie wir Abstract verwenden und Ihnen unsere Dateistruktur, den Zusammenführungsprozess, die Dateiverwaltungspraktiken und einige Bereiche unseres Prozesses mitteilen, von denen wir glauben, dass sie verbessert werden könnten. Dieser Prozess funktioniert für ein großes Team, aber wir sind noch am Herausfinden und würden gerne erfahren, wie wir dies verbessern können.

Entwerfen der Dateistruktur eines Projekts

Unsere Projekte sind nach Plattformen unterteilt: Android, iOS, Mac, Web und Universal (Mail und Kalender unter Windows 10). Innerhalb dieser Projekte sind unsere Dateien in verschiedene Bereiche unserer App unterteilt. Im Folgenden finden Sie ein Beispiel für unsere iOS-Dateistruktur in Abstract, in der wir unsere Dateien in Abschnitte wie "iOS UI-Kit", "Mail" und "Kalender" unterteilen, damit die Dateien schnell ausgeführt werden.

Zunächst ist Start Here eine Datei für neue Designer und externe Partner. Es enthält Informationen zu unseren Entwurfsprinzipien, zur Verwendung von Abstract, zum Exportieren von Assets sowie einige Tipps und Tricks zur Verwendung von Sketch-Plugins.

Hier starten Datei

Als nächstes ist UI-Kit die Sketch-Bibliothek, die alle unsere Komponenten, Typografien, Symbole und Farben enthält. Alle Bildschirme in den Designdateien verwenden verknüpfte Symbole aus dieser Bibliothek.

Das UI-Kit ist in zwei Seiten unterteilt - eine für Symbole und eine für alle Aufkleber der Designkomponenten. Letzteres enthält detaillierte Informationen zu jedem Element und ein intuitives Layout, sodass wir schnell finden können, wonach wir suchen.

Die iOS UI-Kit-Datei enthält sowohl einen Aufkleber mit Komponenten als auch die Symbole selbst

Die restlichen Dateien stellen verschiedene Teile der App dar - Onboarding, Mail, Kalender, Suche, Einstellungen und mehr. Durch das Trennen der Kategorien vermeiden wir langsame Dateien und Verzögerungen bei der Arbeit. Dies ist auch beim Zusammenführen von Designs von Vorteil, da wir beim Erstellen neuer Funktionen häufig nur bestimmte Teile der App berühren müssen, was wiederum weniger Konflikte zur Folge hat

Schritt für Schritt durch den Designprozess

Der erste Schritt besteht darin, eine Verzweigung zu erstellen, die alle Skizzendateien im Master aufnimmt und ein Replikat erstellt. Stellen Sie sich vor, Sie duplizieren einen Ordner. Um den Zweig zu identifizieren, weisen wir dem Teil, an dem wir arbeiten, ein einfaches Etikett zu, und fügen den entsprechenden Titel nach dem Etikett hinzu. Wir verwenden normalerweise Bezeichnungen wie „Feature“, „Kit“ oder „Exploration“, um das Projekt zu beschreiben. Bei Outlook sind wir aufgefordert, neue Ideen auszuprobieren und alles zu ändern, was unserer Meinung nach verbessert werden kann. In diesem Fall verwenden wir ein Tag wie "Exploration". Diese Labels geben anderen Teammitgliedern einen gewissen Kontext und helfen ihnen, herauszufinden und zu verstehen, was wir sind arbeiten an. Das Erstellen einer Verzweigung ist ein großer Vorteil, da mehrere Designer an denselben Dateien arbeiten und sie später wieder in den Master einbinden können.

Beispiel für die Beschriftung von Zweigen

Im neuen Zweig erstelle ich eine neue Datei aus Abstract heraus. Ich benenne die Datei so etwas wie "Arbeiten", damit andere wissen, wo sich die neuesten Iterationen befinden. Dann kann ich Zeichenflächen aus anderen Dateien in diese kopieren - es hilft, einen Ablauf zu visualisieren oder einen vorhandenen Bildschirm zu ändern.

Erstellen Sie eine Arbeitsdatei

Eine in Abstract geöffnete Skizzendatei enthält ein schwebendes Dialogfeld mit der Option Vorschau und Festschreiben. Es spart Arbeit auf dem Server und ermöglicht anderen im Team, alle Änderungen zu sehen. Das Festschreiben wirkt sich nicht auf den Master aus, sondern aktualisiert nur den Zweig. In meinem Team befolgen wir gerne die allgemeine Regel, einmal am Tag zu arbeiten. Bevor ich Änderungen festschreibe, füge ich eine Beschreibung der vorgenommenen Änderungen hinzu. Ich habe immer Zugriff auf jede Änderung, daher kann ich bei Bedarf eine Änderung rückgängig machen oder die vorherigen Versionen einer Datei durchsehen.

Täglich festschreiben

Sobald ein Design fertig ist, ist es an der Zeit, die Ebenen aufzuräumen und das Design mit den Masterdateien zusammenzuführen. Vergewissern Sie sich, dass die Ebenennamen korrekt sind und die Reihenfolge den Bildschirmangaben entspricht (von oben nach unten). Dies sollte für jeden Bildschirm wiederholt werden. Ich kann entweder einen neuen Zweig mit der Bezeichnung [Kit] erstellen und die neuen Bildschirme in die entsprechende Datei kopieren oder diese Bildschirme mit den neuesten Bibliothekskomponenten von Grund auf neu erstellen. Der Grund, warum ich eine neue Datei starte, besteht darin, nur die Hauptbildschirme zum Master zu bringen. Ich kann den alten Zweig im Abstract-Archiv später immer wieder besuchen. Dies ist etwas zeitaufwendig und hält uns davon ab, Features regelmäßiger zusammenzuführen. Wir würden uns freuen, von allen zu hören, die Vorschläge zur Verbesserung des Zusammenführungsprozesses haben.

Unten sehen Sie eine Demonstration, wie Sie eine Verzweigung erstellen und mithilfe der UI-Komponenten aus der Bibliothek Bildschirme in unserer App entwerfen können. Diese Kombination aus Abstract und unserer Komponentenbibliothek ermöglicht es uns, schnell und effizient zu arbeiten und dem Team vollständige Transparenz und Sichtbarkeit zu verleihen. Wir arbeiten mit denselben Dateien und unsere neuen Dateien stehen allen zur Verfügung.

Bildbeschreibung: Erstellen von Outlook-Bildschirmen mithilfe unserer UI-Komponenten.

Bevor ich die Schaltfläche zum Zusammenführen auswähle, kann ich eine Überprüfung von jedem im Team anfordern. Wir achten auf verknüpfte Symbolebenen, korrekte Benennungen, doppelte Symbole und Änderungen in der Bibliothek. In der Regel hinterlassen die Überprüfer ihre Kommentare im Kommentarbereich der Zusammenfassung oder auf bestimmten Zeichenflächen, sodass alles am selben Ort bleibt. Sobald die Überprüfungen abgeschlossen sind, führen wir das Design zusammen und archivieren den alten Zweig.

Best Practices für die Wartung

Mein Team ist mitverantwortlich für die Aktualisierung des Kits und ich arbeite daran, die Sketch-Dateien fehlerfrei zu halten und das Kit kontinuierlich zu verbessern und zu aktualisieren. Dies gilt insbesondere für Betriebssystemaktualisierungen oder größere Überarbeitungen des Designs.

Designer können jederzeit Feedback zu den Kits geben, Probleme ansprechen oder Gespräche über mögliche Verbesserungen anstoßen. Wir verfolgen dieses Feedback in einer GitHub-Ausgabe, sodass jeder Zeit hat, einen Beitrag zu leisten. Im Folgenden finden Sie ein Beispiel für die Arten von Feedback, die wir für das UI-Kit aufgezeichnet haben, einschließlich des Entfernens doppelter Symbole und des Hinzufügens von Farbüberschreibungen zu allen Symbolen.

Ein Github-Problem, um Probleme mit dem UI-Kit zu verfolgen

Unser Prozess- und UI-Kit wurde von den Designteams von Microsoft als offener und kollaborativer Ansatz angenommen. Während sich Fluent Design auf Mobilgeräten weiterentwickelt, sehen wir gemeinsame Elemente in Microsoft-Produkten.

Wir lernen immer noch und suchen ständig nach Möglichkeiten, unseren Prozess zu verbessern. Wir würden gerne hören, wie andere Teams Abstract in ihrem Entwurfsprozess einsetzen, und Vorschläge, wie wir uns verbessern können.

Zögern Sie nicht, Ihre Ideen in den Kommentaren zu teilen .

Um mit Microsoft Design auf dem Laufenden zu bleiben, folgen Sie uns auf Dribbble, Twitter und Facebook oder nehmen Sie an unserem Windows Insider-Programm teil. Wenn Sie sich unserem Team anschließen möchten, besuchen Sie aka.ms/DesignCareers.

Geschrieben mit und der Hilfe von Miles Fitzgerald und dem Outlook-Team.