So erstellen und warten Sie atomare Designsysteme mit Pattern Lab 2

Die Vorteile von UI-Designsystemen sind mittlerweile bekannt. Sie führen zu kohärenteren, konsistenteren Benutzererlebnissen. Sie beschleunigen den Arbeitsablauf Ihres Teams und ermöglichen es Ihnen, mehr Dinge zu starten und dabei enorm viel Zeit und Geld zu sparen . Sie schaffen ein gemeinsames Vokabular zwischen den Disziplinen, was zu einem kooperativeren und konstruktiveren Arbeitsablauf führt.

Sie erleichtern das Testen von Browsern, Geräten, Leistung und Zugänglichkeit. Und sie dienen als solide Grundlage, auf der Sie im Laufe der Zeit aufbauen können, und helfen Ihrem Unternehmen, sich leichter an die sich ständig verändernde Weblandschaft anzupassen.

Um diese Systeme zu erstellen, müssen wir eine Musterbibliothek in Markdown einrichten. Wir müssen unsere Schnittstellen in kleinere Teile zerlegen, aber wir müssen gleichzeitig sicherstellen, dass diese Teile zusammenkommen, um ein schönes und funktionales Ganzes zu bilden. „Atomic Design“ ist ein hilfreiches mentales Modell, das uns dabei hilft, und Pattern Lab ist eine Suite von Tools, die dabei helfen, diese atomaren Designsysteme zum Leben zu erwecken.

Weiterführende Literatur zu SmashingMag:

• Musterbibliotheken auf die nächste Stufe bringen
• Intelligente Responsive-Design-Patterns
• Ein umfassender Überblick über Living Style Guide Tools
• Lernen Sie inklusive Front-End-Designmuster kennen
  

Nach über zwei Jahren harter Arbeit freuen wir uns, Pattern Lab 2 ankündigen zu können! Pattern Lab 2 wurde komplett neu konzipiert und ist eine Open-Source-Suite von Tools, die Ihnen und Ihrem Team dabei helfen , durchdachte UI-Designsysteme zu erstellen und zu pflegen . Im Kern handelt es sich um einen statischen Site-Generator, der Muster zusammenfügt und es Ihnen ermöglicht, mit dynamischen Daten zu entwerfen.

Einige Highlights der neuen Version sind:

• Ein komplett neu strukturierter Kern, der mehr Sprachen, Templating-Engines und Datenformate unterstützt
• Unterstützung von Markdown für die Musterdokumentation
• Hinzufügen von YAML-Unterstützung sowie JSON zum Verwalten dynamischer Daten
• Plugins zur Erweiterung und Verbesserung der Funktionalität von Pattern Lab
• Eine thematisch anpassbare, erweiterbare, neu gestaltete Frontend-Benutzeroberfläche

Vor allem aber wurde Pattern Lab 2 so konzipiert und gebaut, dass Ihr Team es in jeder Phase Ihres Designsystemprozesses effektiv nutzen kann, von Anfang an bis hin zu seiner langfristigen Wartung.

Musterlabor beim Projektstart

Ihr Team wurde damit beauftragt, eine neue Anwendung und ein zugrunde liegendes Designsystem zu erstellen. Es war einmal, dass sich die UX-Designer Ihrer Teams in einem Raum versteckt haben, um das Produkt durch monolithische, stark kommentierte Wireframes zu definieren. Nach der Genehmigung wurden sie an visuelle Designer weitergegeben, die dann Farbe, Typografie und Textur anwendeten, um die Wireframes zum Leben zu erwecken. Nachdem homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd schließlich genehmigt wurde, werden die Designs an die Frontend-Entwickler geschickt, die schnell in Tränen ausbrechen, da die Designs eine Menge unrealistischer Layouts und unwahrscheinlicher Benutzerinhalte enthalten (jeder Benutzername besteht nur aus 4 Zeichen – wie praktisch!) , und ein Potpourri aus Schriftarten und inkongruenten Designmustern.

Der Throw-over-the-Wall-Designprozess ist tot und vorbei. Zusammenarbeit, Iteration und schnelle Entwicklung sind unerlässlich, um diese sich ständig verändernde, vielfältige Weblandschaft zu bewältigen. Wir müssen so schnell wie möglich in den Browser einsteigen und Designs unter realen Variablen wie Reaktionsfähigkeit, Leistung, Ergonomie und Bewegung testen. Aus diesem Grund ist es wichtig, die Frontend-Entwicklung als zentralen Bestandteil des Designprozesses zu behandeln, und deshalb ist es so wichtig, dass Designer und Frontend-Entwickler eng zusammenarbeiten. Letztendlich arbeiten wir alle an der gleichen Benutzeroberfläche.

Wenn Sie am ersten Tag Ihres Projekts eine Instanz von Pattern Lab einrichten, können Sie eine gemeinsame Werkstatt – oder, wenn Sie so wollen, ein Labor – schaffen, das mit Design- und Entwicklungswerkzeugen, einem Wasserkühler, einem Whiteboard und einem Mikroskop ausgestattet ist. Es bietet Platz für jede Disziplin, um ihre Perspektive in das lebendige, atmende Designsystem einzubringen. Im wahrsten Sinne des Wortes kann Pattern Lab als Drehscheibe Ihres Designsystemprojekts dienen und die Notwendigkeit minimieren, übermäßig ausführliche Wireframes, rot umrandete statische Kompositionen und andere klobige statische Artefakte zu erstellen.

Klingt toll, oder? Sehen wir uns an, wie Sie Pattern Lab am ersten Tag Ihres Projekts starten können.

Pattern Lab 2 gibt es sowohl in PHP- als auch in Node-Varianten. Teams, wählen Sie Ihr Abenteuer! Einige Projekte ergeben eine klare Tech-Stack-Wahl. Andere hängen von Teamfähigkeiten oder Umweltpräferenzen ab. Unabhängig von der Plattform ist Pattern Lab 2 bereit, Ihnen und Ihrem Team bei der Zusammenarbeit beim Aufbau Ihres neuen Anwendungs- und Designsystems zu helfen. Welche Plattform Sie auch wählen, wissen Sie, dass Pattern Lab mit beiden Versionen nahezu identische Ergebnisse liefert – ähnlich wie Autos verschiedener Marken und Modelle Sie alle zum selben Ziel bringen.

Pattern Lab installieren

Sobald die entsprechenden Voraussetzungen installiert sind, können Sie Pattern Lab installieren. Schauen wir uns an, wie man Pattern Lab Node installiert, aber denken Sie daran, dass PHP-Anweisungen ebenfalls verfügbar und ähnlich sind.

Navigieren Sie in Ihrem Terminalfenster zu einem Verzeichnis, in dem Sie Pattern Lab installieren möchten. Geben Sie dann die folgenden Befehle ein:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Wenn Sie fertig sind, gulp patternlab:serve

Durch Ausführen von npm install werden die neuesten Abhängigkeiten heruntergezogen, und gulp patternlab:serve generiert und hostet Pattern Lab selbst und öffnet das Frontend in Ihrem Standardbrowser. Und wenn Sie das Git-Repository nicht direkt klonen möchten, können Sie alternativ die neueste Version herunterladen und dann die Schritte 2 und 3 ausführen.

Mit Pattern Lab in Betrieb hat Ihr Team jetzt eine zentrale Anlaufstelle, um Ihr bald einzurichtendes Designsystem zu entwerfen, zu entwickeln und zu überprüfen.

Das Dateisystem von Pattern Lab

Pattern Lab kompiliert alles, was sich im Ordner /source Ihres Projekts befindet, in statische HTML-Dateien, die sich im Ordner /public befinden. Diese Ausgabe kann dann einzeln oder innerhalb des Styleguide-Frontends angezeigt oder konsumiert werden. Werfen wir einen Blick auf das Dateisystem von Pattern Lab und was in source/ enthalten ist:

• _annotations/ – wo Ihr Team lebendige Anmerkungen definieren kann, um Ihre UI-Dokumentation zu unterstützen
• _data/ - wo sich die globalen Daten befinden, die zum Rendern Ihrer Muster verwendet werden.
• _meta/ - wo sich die Informationen zu <head> und foot (die alle Ihre Muster stützen) befinden.
• _patterns/ - wo sich Ihre Muster, Musterdokumentation und musterspezifischen Daten befinden.
• css - wo sich Ihre Stylesheets befinden können
• images - wo sich Ihre Bilder befinden können
• js - wo sich Ihr Javascript befinden kann

Es ist erwähnenswert, dass Pattern Lab Ihnen keine Frontend-Konventionen oder Produktionsabhängigkeiten aufzwingt. Wie Sie Ihre Ordner strukturieren und welche Technologien Sie wählen, liegt ganz bei Ihnen. Wenn Sie Ihren Ordner /stylesheets anstelle von /css nennen möchten, tun Sie dies! Möchten Sie Sass verwenden? Hübsch! Liebe jQuery? Toll! Hasse es? Das ist auch in Ordnung! Pattern Lab existiert einfach, um Ihre Muster zusammenzufügen und allen Frontend-Entscheidungen, die Sie treffen, aus dem Weg zu gehen. Sie können sogar konfigurieren, wie Ihre Assets verwaltet werden, während sie von source/ nach public/ werden.

Wählen Sie Ihr eigenes Abenteuer: Namenskonventionen und Konfiguration

Atomares Design ist ein hilfreiches mentales Modell, um über die Konstruktion von UI-Designsystemen nachzudenken, aber es ist sicherlich kein starres Dogma. Es ist wichtig, eine Nomenklatur zu wählen, die Ihrem Team hilft, die gleiche Sprache zu sprechen und gemeinsam großartige Arbeit zu leisten.

Die Namenskonventionen von Pattern Lab sind, wie die meisten Aspekte der Software, vollständig konfigurierbar. Während patterns/ Ordner von Pattern Lab standardmäßig auf „Atome“, „Moleküle“, „Organismen“, „Vorlagen“ und „Seiten“ eingestellt sind, können Sie sie nach Herzenslust ändern, entfernen oder hinzufügen. Wenn wir beispielsweise die Taxonomie des Predix-Designsystems von GE nachbauen würden – die aus Prinzipien, Grundlagen, Komponenten, Vorlagen, Funktionen und Anwendungen besteht – würden wir das Verzeichnis /source/_patterns/ von Pattern Lab wie folgt strukturieren:

 /00-Principles/ /01-Basics/ /02-Components/ /03-Templates/ /04-Features/ /05-Applications/

Pattern Lab ist so konzipiert, dass es sich Ihrem Arbeitsablauf anpasst, nicht umgekehrt.

Gestaltungsrichtung festlegen

Schon in den ersten Tagen oder Stunden eines Projekts hat jeder etwas zu Ihrem Pattern Lab beizutragen. Dies ist eine Zeit, um zu erforschen, Dinge herauszufinden und eine Ausrichtung zu schaffen. Jede Rolle führt unterschiedliche Aktivitäten durch, aber ihre Ausgabe und Eingabe sind verknüpft. Jeder bläst einen separaten Reifen des Fahrzeugs auf, der Sie alle an Ihr Ziel bringt.

Lo-Fidelity IA in Pattern Lab definieren

Zu Beginn der UX-Designarbeit gehört die Bestimmung der Informationsarchitektur der Anwendung. Anstatt sofort nach High-Fidelity-Wireframe-Tools zu greifen, die dazu neigen, Layouts und technische Funktionen voreilig zu definieren, ist es besser, Lo-Fi-Skizzen zu erstellen, die festlegen, was auf einem bestimmten Bildschirm und in welcher allgemeinen Reihenfolge passiert. Diese Arbeit kann in Form von Serviettenskizzen, Listen mit Aufzählungszeichen oder Tabellenkalkulationen erfolgen. Da Pattern Lab grundlegendes Markup unterstützt, ist es möglich, diese Inhaltsreferenzdiagramme schnell und sofort in den Browser zu übersetzen. Für die Neugestaltung der Pittsburgh Food Bank haben wir jede Vorlage mit diesem Ansatz ausgeblendet.

Der Homepage-Template-Code, zu finden in /source/_patterns/templates/homepage.mustache , sieht also so aus:

 {{> organisms-header }} <div class="fpo">Mission Statement</div> <div class="fpo">Campaign</div> <div class="fpo">Get Help</div> <div class="fpo">Give Help</div> <div class="fpo">Learn</div> {{> organisms-footer }}

Wir fügen ein Kopf- und Fußzeilenmuster ein und stubsen dann einfach den Inhalt aus, den wir auf dieser Seite einschließen möchten.

Erfassen von visuellen Designentscheidungen

Frühe visuelle Designarbeit beinhaltet die Erforschung von Typografie, Farbpaletten und anderen Aspekten der visuellen Marke. In der Vergangenheit haben sich Designer vielleicht auf die Erstellung von High-Fidelity-Desktop-zentrierten Photoshop-Modellen gestürzt, Designer haben jetzt hilfreiche Tools wie Stilkacheln, Typecast und Elementcollagen, um die visuelle Designrichtung festzulegen, ohne auf vorzeitige High-Fidelity-Kompositionen zurückgreifen zu müssen.

Wenn Entscheidungen über Farbpaletten und Schriftartpaare getroffen werden, kann Pattern Lab die Ergebnisse dieser Designentscheidungen erfassen und sicherstellen, dass das Design- und Entwicklungsteam nicht unbeabsichtigt 50 Graustufen erzeugt.

Frontend Prep Chef im Pattern Lab werden

Und dann gibt es Frontend-Code. In diesen frühen Phasen eines Projekts könnten Frontend-Entwickler versucht sein, still zu sitzen und darauf zu warten, dass die Designer eine Richtung vorgeben, bevor sie sich in den Code stürzen. Aber diese Art des Denkens führt dazu, dass Designer und Entwickler nicht synchron zueinander sind und eine echte Zusammenarbeit verhindert wird.

Wie Vorbereitungsköche in einem Restaurant haben Entwickler eine riesige Chance, an der Vorbereitung der Muster und des Codes zu arbeiten, die letztendlich das endgültige Designsystem werden. In den frühen Tagen des Projekts können Entwickler damit beginnen, Muster zu erstellen und Assets in Pattern Lab zu importieren, um die Dinge frühzeitig einzurichten, damit Designer und Entwickler mehr Zeit damit verbringen können, tatsächlich zusammenzuarbeiten, um die Benutzeroberfläche zu entwerfen und zu erstellen.

Farbpaletten, echter Text und Layout müssen noch festgelegt werden, aber das sollte Entwickler nicht davon abhalten, die Strukturen zu erstellen, die die Inhalts-Drahtgitter unterstützen. Nehmen Sie zum Beispiel ein Heldenmuster:

Dieses Muster enthält andere Muster, was eine leistungsstarke Möglichkeit darstellt, kleinere Schnittstellenelemente in immer größere Strukturen zu integrieren. Hier ist das Markup für block-hero.mustache :

 <a href="{{ url }}" class="c-block-hero"> {{> atoms-hero-img }} <h2 class="c-block-hero__headline">{{ headline.medium }}</h2> </a><!-- end c-block--hero-->

Der Code mit doppelten geschweiften Klammern ( {{}} ) ist ein Moustache-Vorlagencode, der es uns ermöglicht, dynamische Inhalte zu definieren und Muster ineinander einzufügen. Beispielsweise weist der Code {{> atoms-hero-img }} Pattern Lab an, nach einem Atom namens „Hero-Img“ zu suchen und es in das Muster aufzunehmen. Die Hero-Einheit selbst kann dann in komplexere Muster eingebunden werden, indem dieselbe Include-Konvention verwendet wird, indem Folgendes verwendet wird: {{> molecules-hero }} .

Dieser russische Verschachtelungspuppenansatz zum Einfügen von Mustern ermöglicht es Ihrer Codebasis, schön und TROCKEN zu bleiben, was bedeutet, dass wenn Sie eine Bearbeitung an einem bestimmten Muster vornehmen, überall dort, wo dieses Muster enthalten ist, automatisch aktualisiert wird. Dadurch bleiben Ihre Designs und Ihre Codebasis synchron und konsistent. Und obendrein kann dieser kontinuierliche Aufbau von Mustern in kurzer Zeit nahezu vollständige Schnittstellen hervorbringen!

Ärmel hochkrempeln

Die Informationsarchitektur nimmt Gestalt an, die anfängliche ästhetische Ausrichtung ist festgelegt und im Pattern Lab werden entstehende Muster ausgelöscht. Jetzt kann das Team nun gemeinsam ernsthaft in die Entwicklung des Interface-Design-Systems eintauchen. Lassen Sie uns besprechen, wie Sie mit Pattern Lab einen vagen Orientierungssinn in ein schönes, funktionales, durchdachtes und vollständiges Designsystem verwandeln können.

Entwerfen mit dynamischen Daten

Ein wichtiges Konzept des atomaren Designs sind die Unterschiede zwischen Vorlagen und Seiten. Vorlagen definieren die zugrunde liegende Inhaltsstruktur einer Benutzeroberfläche, während Seiten spezifische Instanzen dieser Vorlagen sind, die diese Inhaltsstruktur durch echte repräsentative Inhalte ersetzen. Beides ist notwendig, um Inhaltsparameter zu dokumentieren und gleichzeitig die Entwurfsmuster in Aktion zu zeigen und mit echten Inhalten zu füllen.

Eine der leistungsstärksten Funktionen von Pattern Lab ist die Möglichkeit, verschiedene repräsentative Inhalte in Ihre UI-Muster einzufügen, um sicherzustellen, dass sie mit der dynamischen Natur Ihrer Inhalte umgehen können. Was ist, wenn Ihr Benutzer kein Profilbild hochlädt? Was ist, wenn der Benutzer 13 Artikel in seinem Einkaufswagen hat und nicht 2 Artikel? Was ist, wenn eines dieser Produkte 14 mögliche Variationen hat? Was ist, wenn der Titel des Blogposts 400 Zeichen enthält? Benutzer zurückgeben? Erstbenutzer? Was ist, wenn der Artikel keine Kommentare enthält? Oder was ist, wenn es sieben Ebenen verschachtelter Kommentare hat? Was ist, wenn wir eine dringende Nachricht auf dem Dashboard anzeigen müssen, wenn ihr Konto gehackt wird? Mit Pattern Lab können Sie Daten manipulieren, um eine beliebige Anzahl verschiedener UI-Zustände und Varianten einer beliebigen Vorlage auszudrücken.

Seitenspezifische Daten

Anfangsdaten in Pattern Lab werden in einer Datei namens /source/_data/data.json gespeichert, die die Daten enthält, die Muster anfänglich verbrauchen, um in den Styleguide- und Vorlagenansichten angezeigt zu werden. Ihre standardmäßige data.json könnte etwa so aussehen:

 { "headline" : { "short" : "Lorem ipsum dolor sit (37 characters)", "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)" }, "url": "#", "imgHero" : { "src": "../../images/fpo_hero-opt.png", "alt": "Hero Image" }, "imgLandscape" : { "src": "../../images/fpo_16x9-opt.png", "alt": "Landscape Image" }, "mediaList": [] }

Sie können diese Datenelemente in Ihren Mustern referenzieren (d. h. {{ headline.short }} in ein Muster einfügen), um Ergebnisse wie die folgenden zu erzielen:

Auf Seitenebene möchten wir diese Graustufenbilder und den Lorem-Ipsum-Platzhaltertext durch echten Inhalt ersetzen. Um dies zu erreichen, erstellen wir direkt neben /source/_patterns/pages/homepage.mustache eine neue Datei mit dem Namen homepage.json , in der wir die in `data.json definierten Anfangsdaten überschreiben können. Das könnte etwa so aussehen:

 "imgHero" : { "src": "../../images/sample/hero-forest.jpg", "alt": "Forest" }, "headline" : { "medium" : "Track your hikes. Challenge your friends. Get out there and start exploring." }, "toutList" : [ { "url": "link.pages-blog-detail", "headline": { "short" : "Best winter hikes around the world" }, "imgLandscape" : { "src": "../../images/sample/tout-winter-hiker.jpg", "alt": "Hiker with back pack walking in snow" } }, { "url": "link.pages-login", "headline": { "short" : "Sign in to view your dashboard" }, "imgLandscape" : { "src": "../../images/sample/tout-leaves.jpg", "alt": "Green Leaves" } }, { "url" : "link.pages-about", "headline": { "short" : "Learn about our mission" }, "imgLandscape" : { "src": "../../images/sample/tout-mountains.jpg", "alt": "Mountain" } } ]

Dies führt zu einer Benutzeroberfläche, die wie folgt aussieht:

Pseudo-Muster

Unsere Designsysteme müssen flexibel sein und sich an die Realität der Inhalte anpassen, die in unseren Anwendungen leben. Wir müssen gleichzeitig die besten Fälle, die schlimmsten und alles dazwischen berücksichtigen.

Das Ausdrücken dieser UI-Variationen in statischen Designtools ist eine Übung in Sachen Langweiligkeit und Redundanz, was erklären könnte, warum sie selten entworfen werden. Aber die Pseudomuster-Funktion von Pattern Lab ermöglicht es uns, (manchmal wilde) verschiedene Szenarien mit nur wenigen Änderungen an unseren Daten zu artikulieren.

Nehmen wir an, wir erstellen eine Wanderungs-Tracking-App, deren Dashboard eine Liste mit Wanderstatistiken anzeigt: erklommene Höhe, Anzahl der gewanderten Wege, zurückgelegte Schritte und so weiter. Für einen aktiven Benutzer, der ständig Inhalte in die App eingibt, könnte die Benutzeroberfläche etwa so aussehen:

In /source/_patterns/pages/dashboard.json würden unsere Daten etwa so aussehen:

 { "blockFeature":{ "number":"4,500", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"100", "label":"Progress: 100%" } }, "tileList":[ { "number":"16", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"20", "label":"Progress: 20%" } }, { "number":"500", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"40", "label":"Progress: 40%" } }, { "number":"62,500", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"60", "label":"Progress: 60%" } }, { "number":"94,300,843", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"80", "label":"Progress: 80%" } } ], ... }

Mit diesen Daten ist Pattern Lab in der Lage, die Benutzeroberfläche mit der Fülle generierter Inhalte dieses Benutzers zu füllen.

Dieses Szenario ist jedoch möglicherweise nicht allzu häufig. Auf jeden ehrgeizigen Benutzer, der sich die Zeit nimmt, jedes Feld auszufüllen und jede verfügbare Anwendung zu verbinden, gibt es wahrscheinlich Dutzende Gelegenheitsbenutzer, die nicht alle Lücken ausfüllen und alle Funktionen der App nutzen. An einem Punkt auf der Reise jedes Benutzers ist die Benutzeroberfläche für sie völlig neu! Lassen Sie uns diese wichtigen Variationen mit der Pseudo-Pattern-Funktion von Pattern Lab artikulieren.

In unserem /source/_patterns/pages/ können wir ein neues Pseudo-Muster mit dem Namen dashboard~new-user.json . Dadurch wird eine weitere Instanz der Seite erstellt, die alle Daten von „ dashboard.json “ erbt, uns aber auch ermöglicht, die Daten weiter zu ändern oder zu erweitern. Im Fall von dashboard~new-user.json können wir Datenbits überschreiben, um zu demonstrieren, wie eine neue Benutzererfahrung aussehen könnte:

Und hier sind die Daten, die wir der Datei hinzufügen, um diese Benutzeroberfläche zu erstellen:

 { "blockFeature":{ "styleModifier":"featured", "number":"0", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Let's go on a hike and climb in elevation", "overlayAction":"Find a Hike" } }, "tileList":[ { "number":"0", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"What National Parks have you visited?", "overlayAction":"Find a National Park" } }, { "number":"0", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Been on a hike recently?", "overlayAction":"Log Your First Hike" } }, { "number":"0", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Trying to stay healthy?", "overlayAction":"Track Calorie Count" } }, { "number":"0", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Counting steps?", "overlayAction":"Connect Your Fitbit" } } ] }

Indem wir einige der Werte in dashboard.json “ überschreiben, können wir den Inhalt ändern und bestimmte Muster ein-/ausschalten.

In einem anderen Fall müssen wir möglicherweise zeigen, wie die Benutzeroberfläche aussieht, wenn es ein Sicherheitsproblem oder ein anderes Problem mit dem Konto des Benutzers gibt. Wir können das dashboard~hacked.json erstellen, um die folgende Benutzeroberfläche zu erstellen:

Die meisten Daten aus dashboard.json bleiben gleich, aber wir fügen Folgendes hinzu, um die Fehlermeldung zu erstellen:

 { "alert" : { "alertClass" : "error", "alertText" : "On May 22nd, hackers from a hidden underground tunnel somewhere in Siberia hacked our servers and compromised all of our sensitive data. <a href='#'> Please reset your password immediately!</a>" } }

Musterparameter

Bei der Verwendung von Pattern Lab kann es vorkommen, dass vollständige Pseudomuster erforderlich sind, wie oben dargestellt. Aber manchmal müssen Sie möglicherweise nur einen einzelnen Datenwert innerhalb eines Musters optimieren oder überschreiben, während der Rest den anderen dynamischen Anzeigemustern überlassen wird. Für diese Fälle sind Musterparameter das Werkzeug Ihrer Wahl. Musterparameter sind ein einfacher Mechanismus zum Ersetzen von Variablen in einem enthaltenen Muster. Sie sind darauf beschränkt, Variablen im eingeschlossenen Muster und nur das eingeschlossene Muster zu ersetzen. Betrachten Sie diesen Auszug aus der Detailvorlage:

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

Dazu gehört auch der Abschnitt Medienlistenmuster.

 <section class="c-section"> {{# sectionTitle}} <h2 class="c-section__title">{{ sectionTitle }}</h2> {{/ sectionTitle }} {{> organisms-media-list }} {{# textButton }} {{> atoms-text-button }} {{/ textButton }} {{# overlay }} {{> molecules-overlay }} {{/ overlay}} </section><!--end section-->

Wie wir gelernt haben, werden {{sectionTitle}} sowohl für die Datenblöcke „latestPosts“ als auch „featuredPeople“ aus allen vorhandenen Companion-.json-Dateien mit /source/_data/data.json als globalem Fallback ausgefüllt. Wir fügen ein einzelnes Muster jedoch mehrmals ein und möchten möglicherweise schnell eindeutige Daten für jedes Muster bereitstellen, ohne diese Schlüssel in unserer .json-Datei erstellen zu müssen. Wir können die enthaltenen Abschnittsmedienlisten wie folgt ändern:

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list(sectionTitle: "The latest from the moleskine") }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list(sectionTitle: "Staff Hikers") }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

Diese beiden Organismen verwenden nun beim Rendern die hier definierte sectionTitle Variable. Pattern-Parameter sind leistungsfähig, werden aber nur von den PHP- und Node-Moustache-PatternEngines unterstützt. Andere Vorlagensprachen bieten bessere Lösungen für dieses Problem. Schauen Sie sich die Dokumentation an, um die vollständigen Skinny-Parameter-Parameter zu lesen.

styleModifikatoren

Oft möchten Sie stilistische Varianten desselben Musters anzeigen, z. B. farbige Social-Media-Schaltflächen oder Komponentenzustände. styleModifiers sind eine Erweiterung der Kurzschrift include-Syntax und stellen zusätzliche Klassen für ein Muster bereit. Vorausgesetzt, Sie erstellen ein Musterblock block-media mit {{ styleModifier}} innerhalb des Klassenattributs:

 <a href="{{ url }}" class="c-block-media c-block-media--{{ styleModifier }}"> <div class="c-block-media__media"> {{> atoms-square:c-block-media__img }} </div> <div class="c-block-media__body"> <h2 class="c-block-media__headline">{{ headline.short }}</h2> <p class="c-block-media__excerpt">{{ excerpt.medium }}</p> </div><!-- end c-block-media__body --> </a><!-- end c-block-media -->

Wenn Sie dieses Muster mit einem Doppelpunkt nach dem Namen einfügen, wird der styleModifier festgelegt:

 {{> molecules-block-media:fullBleed }}

würde ein Anchor-Tag wie dieses ergeben:

 <a href="path/to/url" class="c-block-media c-block-media--fullBleed">

styleModifiers können kombiniert werden, um mehrere Klassen bereitzustellen, wobei Pipe (|) als Trennzeichen verwendet wird.

 {{> molecules-block-media:fullBleed|is-lazyLoaded }}

Zwischen Pseudomustern, Musterparametern und styleModifiers macht es Pattern Lab einfacher, manchmal sehr unterschiedliche UI-Variationen zu demonstrieren, während die zugrunde liegende Codebasis dabei trocken bleibt.

Mit Stil iterieren

Ein Schlüsselelement eines musterbasierten Workflows besteht darin, Iterationen zu berücksichtigen und zu erkennen, dass sich Muster und das Design weiterentwickeln werden. Die Teile formen das Ganze, das Ganze die Teile, und als Ergebnis dieses Prozesses entsteht das zusammenhängende System von Komponenten.

Eine weitere natürliche Folge dieses Prozesses ist, dass sich der Produktionspunkt viel früher aus den Händen von UX- und visuellen Designern in die Hände von Frontend-Entwicklern verlagert. Anstatt viel kostbare Zeit mit der Erstellung einer Unmenge von High-Fidelity-Kompositionen und detaillierten Wireframes zu verschwenden, kann die Designarbeit von statischen Dokumenten in den Browser verlagert werden, wo sich Ihr Team schneller mit den Realitäten des Webs auseinandersetzen kann.

Mit Pattern Lab als Wasserstelle für das gesamte Team können Designer besser verstehen, wie sich Entscheidungen in einem Bereich auf andere Bereiche auswirken.

Viewport-Tests mit ish.

Es ist wichtig, dass sowohl unsere Komponenten als auch unsere Seiten über das gesamte Auflösungsspektrum hinweg flexibel sind. Backen eines Werkzeugs zum Ändern der Größe von Ansichtsfenstern wie ish. in eine Musterbibliothek stellt sicher, dass jedes Element bei jeder Bildschirmgröße schön aussieht und funktioniert. Wenn wir uns die Zeit nehmen, vollständig flexible Muster zu erstellen, werden wir uns besser auf eine Zukunft vorbereiten, in der Elementabfragen und Webkomponenten vollständig ausgereift sind (wir können es kaum erwarten!).

Indem diese Viewport-Tools direkt in die Frontend-Umgebung integriert werden, können sich Designer und Entwickler in Pattern Lab zusammendrängen, um zu bestimmen, wo Haltepunkte in das Design eingefügt werden sollen. Darüber hinaus können Kunden, QA und andere Kollegen bestimmte Bereiche lokalisieren, in denen die Benutzeroberfläche aus irgendeinem Grund auseinanderfällt.

Startbereit

Das Projekt entwickelt sich gut, aber bevor es in die Welt eingeführt werden kann, müssen die Dinge gestrafft, browser- und geräteübergreifend getestet und ordnungsgemäß dokumentiert werden. Lassen Sie uns darüber sprechen, wie Pattern Lab Ihnen dabei helfen kann, Ihren Designsystemcode und Ihre Dokumentation für die Prime Time vorzubereiten!

Zugängliche Musterdokumentation

Einige Muster können sich als selbstdokumentierend darstellen, aber ein Muster erfordert oft einen gewissen Kontext oder zusätzliche Informationen, um die Dinge kristallklar zu machen. Dinge wie Definitionen. Nutzungsrichtlinien, Überlegungen, Ressourcen und Beispielbilder können und sollten ihren Weg in die Musterdokumentation finden. Die Dokumentation von Pattern Lab 2 verwendet Markdown mit YAML-Frontmaterie, um diese Dokumentation zu erstellen. Die Markdown-Datei begleitet das Muster (z. B. muss media-object.md direkt neben media-object.mustache stehen) und kann wie folgt formatiert werden:

 --- title: Utility Colors --- The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

Markdown-Dokumentation bedeutet, dass IAs, visuelle Designer, Inhaltsstrategen, Geschäftsleute usw. leichter zu einer lebendigen Dokumentation beitragen können. Produktbesitzer könnten sogar Funktionshinweise für neue Muster einfügen, bevor das Muster überhaupt erstellt wurde. Es sind Verbesserungen geplant, um die Musterdokumentation leistungsfähiger zu machen und Pattern Lab zu einem immergrünen Ort für Ihr Team zu machen.

Abstammung für einfachere Qualitätssicherung

Wenn Sie sich verschiedene Muster in einer Bibliothek ansehen, kann der fehlende Kontext es schwierig machen, zu erkennen, wo sie tatsächlich verwendet werden. Das Definieren und Beschreiben von Mustermerkmalen ist eine Sache, aber es besteht die Möglichkeit, zusätzliche Kontextinformationen zu Ihren UI-Mustern bereitzustellen.

Dank der russischen Verschachtelungspuppennatur von Pattern Lab kann es anzeigen, aus welchen Mustern eine bestimmte Komponente besteht, und auch zeigen, wo dieses Muster im Designsystem verwendet wird.

Dank dieser Funktion verfügen Designer und Entwickler über Kontextinformationen, die sich als nützlich erweisen, wenn sie Qualitätssicherung durchführen und/oder Änderungen am Designsystem vornehmen. Wenn wir Änderungen an einem bestimmten Muster vornehmen wollten, wie z. B. die Verdoppelung der Bildgröße oder das Hinzufügen eines zusätzlichen Textelements, wüssten wir sofort, welche Muster und Vorlagen erneut getestet und einer QA unterzogen werden müssten, um sicherzustellen, dass die Änderungen nicht beeinträchtigt werden . The lineage feature also helps point out unused or underutilized patterns so that teams can weed them out of the pattern library.

Showing Progress with Pattern States

Taking the concept of pattern lineage a step further, you and your team can keep track of each pattern's progress and how it affects the whole system. Pattern Lab's pattern state feature can track progress of a pattern from development, through review, to completion. With pattern states, you'll always be able to answer “Are all the patterns that comprise this template complete?”

To give your pattern a state, you add a state to the frontmatter in that pattern's documentation file. Zum Beispiel:

 --- title: Block Media state: inreview --- The media block consists of...

Applying this status will present the pattern state in a couple places across Pattern Lab.

It's important to note that the state of a pattern can be influenced by the patterns it contains. Flagging a pattern like {{> molecule-media-block }} as inreview will cause a ripple effect anywhere that pattern is included. This helps identify bottlenecks that need addressed in order to bring your design system home.

You can create your own pattern states that match your team's workflow. These methods of understanding the state of your patterns can help larger teams keep track of the airplane as it's being built and flown at the same time.

Maintaining An Effective Design System

"The biggest existential threat to any system is neglect." – Alex Schleifer, Airbnb

There is a very real risk that despite your team's best intentions, your carefully-crafted design system and pattern library will slip into oblivion. “Never!” you exclaim, but unfortunately design system efforts fall into a state of disrepair for a number of reasons:

• The level of effort required to keep pattern code up to speed with applications' code bases is too high
• The pattern library is thought of as mere documentation rather than as housing a living, breathing system.
• The team fails to make the design system a key part of their workflow, and instead lets their process devolve into a series of hotfixes and ad hoc changes.
• One discipline serves as gatekeepers to the pattern library, preventing it from becoming a helpful resource for every discipline
• The pattern library isn't visible or attractive
• Many other factors (lack of funding, technology mismatches, lack of governance model, and more)

As Nathan Curtis rightly says, making a design system isn't just another project, but rather a product meant to serve your organization's sites and apps. To create a system that serves your organization for years to come, your UI design system needs to be properly maintained, serve as an essential resource for the organization to keep coming back to, and continue to be a core part of your team's design and development workflow.

Pattern Lab has always been an effective tool for creating UI design systems, but has historically lacked in the maintenance department. Thankfully, that's all changed with Pattern Lab 2. The new version has many features that helps you successfully document and maintain your pattern libraries while continuing to serve as a key tool in your pattern-driven design and development process.

Seeking the Holy Grail

It's critical to reduce the amount of effort and friction required to keep both your pattern library and production environments up to date. The Holy Grail of design systems is an environment where changes to patterns in a design system are automatically updated in both the pattern library and production environments.

The Holy Grail is often accomplished by using a frontend templating language to serve as the bridge between your pattern library and production environments. Pattern Lab 2's architecture now makes it possible to choose the templating engine that's right for your particular environment. As a result, you're able to get closer to achieving the Holy Grail. For instance, the team at Phase2 Technology have successfully integrated Pattern Lab 2 into their Drupal builds so that their clients' pattern libraries and production builds are always in step with one another.

“By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!”

– Evan Lovely, Phase2 Technology

Currently Pattern Lab 2 supports the popular Mustache and Twig templating engines, but the decoupled nature of Pattern Lab 2's editions (more on these in a bit) means that you can power Pattern Lab using the templating engine of your choice.

A Helpful Resource

Your pattern library and accompanying style guide should be something that your team comes back to reference again and again. While it may not make sense to immediately surface code snippets and pattern usage information during the initial design and development process, design system users will find themselves reaching for these things as they apply the design system to actual applications. Pattern Lab 2 now has more advanced config options that let you switch on pattern info by default to become a more helpful documentation and reference tool.

In order for your design system to thrive across your entire organization, it should be approachable and attractive. Pattern Lab 2 allows you to create your own custom front page for the component library, and also skin Pattern Lab's (intentionally bare bones) default UI to better serve your brand.

Doing It All Again

There are some teams that need only to set up and maintain a single design system, but many of us work on multiple projects for multiple clients. Wouldn't it be great to start new design system projects from a setup that's tuned to your workflow and tool choices?

Pattern Lab 2 has been re-architected to achieve just that. No longer is Pattern Lab a standalone tool, but rather it's an ecosystem built atop a core library. These changes will also make it easier for the Pattern Lab team to push out new features.

Pattern Lab-Editionen

Mit Editionen können Teams und Agenturen all die Dinge bündeln, die ihre einzigartigen Workflows mit Pattern Lab unterstützen. Eine Edition kann zum Ausgangspunkt für alle Ihre Projekte werden, während Teams Funktionen teilen und aktualisieren. Die Node-Version von Pattern Lab verwendet npm, um separate Komponenten einzubinden, während die PHP-Version Composer verwendet, um Ihnen zu helfen, Ihre Projekte auf einfache und standardisierte Weise zu starten.

Pattern Lab-Kern

Core ist der Kern von Pattern Lab und ermöglicht alle anderen Funktionen. Da Core eigenständig ist, kann ein Team mit den neuesten Pattern Lab-Funktionen aktualisieren und auf dem neuesten Stand bleiben, ohne den Rest seines Projekts zu unterbrechen.

StarterKits

Haben Sie einen zuverlässigen Satz von Boilerplate-Code, mit dem Sie jedes Projekt beginnen? Vielleicht ein gemeinsamer Satz grundlegender Muster, Sass-Mix-Ins und JavaScript-Bibliotheken, die Ihre bevorzugten Tools sind? Ein StarterKit eignet sich perfekt, um diese Assets zu einer Standardlösung zu bündeln, die sicherstellt, dass jedes Projekt mit dem richtigen Fuß beginnt.

Es gibt bereits mehrere Starterkits, mit denen Sie Ihr Projekt starten können, egal ob Sie nach einem leeren Anfang suchen, mit einer Demo beginnen, die die Funktionen von Pattern Lab zeigt, oder mit einem beliebten Framework wie Bootstrap, Foundation oder Material Design beginnen. Und Sie können Ihr eigenes erstellen, das vollständig versioniert werden kann, sodass sich das StarterKit Ihres Teams zusammen mit Ihren Tools weiterentwickeln kann.

Der Import eines Starterkits ist nach der Installation nur wenige Tastendrücke entfernt. Letztendlich wird diese Funktion in eine Post-Installationsphase eingebaut, wie es für Pattern Lab PHP über Composer der Fall ist.

StyleguideKits

StyleguideKits sind das Frontend von Pattern Lab. Wir nennen dies „Der Betrachter“. StyleguideKits ermöglichen Agenturen und Organisationen die Entwicklung benutzerdefinierter, gebrandeter Pattern Lab-Benutzeroberflächen, um ihre Muster zu präsentieren.

PatternEngines

PatternEngines sind die Templating-Engines, die dafür verantwortlich sind, Muster zu parsen und sie in HTML umzuwandeln. PatternEngines geben Pattern Lab Core die Flexibilität, viele verschiedene Arten von Vorlagensprachen zu rendern. Zu den aktuellen PatternEngines gehören Moustache und Twig, weitere wie Handlebars und Underscore befinden sich in der Entwicklung. Und nichts hindert Sie daran, Pattern Lab um eine weitere Templating-Engine zu erweitern.

Plugins

Plugins ermöglichen es Entwicklern, Pattern Lab Core und andere Teile des Ökosystems zu erweitern. Beispielsweise verfügt die PHP-Version von Pattern Lab über eine Reihe von Plugins wie Browser Auto-Reload, Data Inheritance und Faker. Die Architektur von Pattern Lab ermöglicht es Entwicklern, Daten in verschiedenen Phasen zu ändern, ihre eigenen Befehle oder Musterregeln hinzuzufügen oder das Front-End zu ändern, um die Funktionen von Pattern Lab zu ändern und zu erweitern

„Mein Vortrag“ ansehen

Probieren Sie Pattern Lab 2 aus und machen Sie mit

Das Erstellen von mustergesteuerten Benutzeroberflächen und ausgefeilten Designsystemen ist wichtiger denn je. Pattern Lab 2 ist gut ausgestattet, um atomare Designsysteme zu erstellen und zu warten, und kann als Drehscheibe für Ihr Designsystem in jedem Schritt des Arbeitsablaufs Ihres Teams dienen.

Wenn Ihr Team beschließt, Pattern Lab 2 herunterzuladen und auszuprobieren, würden wir uns freuen, von Ihnen zu hören! Beteiligen Sie sich an der Unterhaltung, indem Sie Fragen zu Gitter stellen, Probleme öffnen, wenn Sie mit etwas zu kämpfen haben, und dabei helfen, neue Funktionen vorzuschlagen und zu diskutieren.

Und wenn Sie mit Pattern Lab 2 coole Sachen machen, teilen Sie bitte Ihre Erkenntnisse! Styleguides.io hat über 150 Beispiele für Musterbibliotheken, also fügen Sie Ihr Musterlabor der Mischung hinzu. Das Schöne an Web- und Open-Source-Projekten ist, dass die gesamte Community von Ihren Erfahrungen lernen und auf diesem Wissen aufbauen kann.

Wir sind gespannt, was für tolle Sachen du kreierst!