Come realizzare e mantenere sistemi di progettazione atomica con Pattern Lab 2

I vantaggi dei sistemi di progettazione dell'interfaccia utente sono ormai ben noti. Conducono a esperienze utente più coese e coerenti. Accelerano il flusso di lavoro del tuo team, consentendoti di avviare più cose risparmiando enormi quantità di tempo e denaro nel processo . Stabiliscono un vocabolario comune tra le discipline, risultando in un flusso di lavoro più collaborativo e costruttivo.

Semplificano i test di browser, dispositivo, prestazioni e accessibilità. E servono come una solida base su cui costruire nel tempo, aiutando la tua organizzazione ad adattarsi più facilmente al panorama web in continua evoluzione.

Per creare questi sistemi, dobbiamo creare una Pattern Library in Markdown. Dobbiamo suddividere le nostre interfacce in parti più piccole, ma allo stesso tempo dobbiamo assicurarci che queste parti si uniscano per formare un insieme bello e funzionale. "Progettazione atomica" è un modello mentale utile che ci aiuta a fare proprio questo, e Pattern Lab è una suite di strumenti che aiuta a dare vita a questi sistemi di progettazione atomica.

Ulteriori letture su SmashingMag:

• Portare le librerie di modelli al livello successivo
• Modelli di design reattivi intelligenti
• Una panoramica approfondita degli strumenti della guida allo stile di vita
• Incontra modelli di progettazione front-end inclusivi
  

Dopo oltre due anni di duro lavoro, siamo felici di annunciare Pattern Lab 2! Totalmente reinventato, Pattern Lab 2 è una suite di strumenti open source per aiutare te e il tuo team a creare e mantenere sistemi di progettazione dell'interfaccia utente ponderati . Al suo interno, è un generatore di siti statici che unisce schemi e ti consente di progettare con dati dinamici.

Alcuni punti salienti della nuova versione includono:

• Un core completamente ristrutturato che supporta più linguaggi, motori di template e formati di dati
• Supporto di Markdown per la documentazione del modello
• Aggiunta del supporto YAML e JSON per la gestione dei dati dinamici
• Plugin per estendere e migliorare le funzionalità di Pattern Lab
• Un'interfaccia utente front-end con temi, estensibile e ridisegnata

Ma più di ogni altra cosa, Pattern Lab 2 è stato progettato e realizzato in modo che il tuo team possa utilizzarlo efficacemente durante ogni fase del processo del tuo sistema di progettazione, dall'inizio fino alla sua manutenzione a lungo termine.

Pattern Lab all'inizio del progetto

Il tuo team è stato incaricato di creare una nuova applicazione e un sistema di progettazione sottostante. C'era una volta, i designer UX dei tuoi team potrebbero essersi rintanati in una stanza per definire il prodotto attraverso wireframe monolitici e fortemente annotati. Una volta approvati, sarebbero passati ai visual designer che avrebbero quindi applicato colore, tipografia e texture per dare vita ai wireframe. Dopo che homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd è stato finalmente approvato, i progetti vengono inviati agli sviluppatori frontend, che sono subito scoppiati in lacrime poiché i progetti contengono una sfilza di layout non realistici, contenuti utente improbabili (ogni nome utente è di soli 4 caratteri, quanto è conveniente!) e un pot-pourri di facce di caratteri e modelli di design incongruenti.

Il processo di progettazione del lancio sul muro è morto e finito. Collaborazione, iterazione e sviluppo rapido sono essenziali per affrontare questo panorama web in continua evoluzione e diversificato. Dobbiamo entrare nel browser il prima possibile e testare i progetti in base a variabili del mondo reale come reattività, prestazioni, ergonomia e movimento. Ecco perché è fondamentale considerare lo sviluppo front-end come una parte fondamentale del processo di progettazione e perché è così fondamentale che i designer e gli sviluppatori front-end lavorino a stretto contatto. Alla fine della giornata, stiamo tutti lavorando sulla stessa interfaccia utente.

L'impostazione di un'istanza di Pattern Lab il giorno 1 del tuo progetto può creare un workshop condiviso, o un laboratorio, se lo desideri, dotato di strumenti di progettazione e sviluppo, un refrigeratore d'acqua, una lavagna e un microscopio. Fornisce un posto per ogni disciplina per contribuire con la propria prospettiva al sistema di progettazione vivente e respirante. In un certo senso, Pattern Lab può fungere da fulcro del tuo progetto di sistema di progettazione, riducendo al minimo la necessità di creare wireframe eccessivamente dettagliati, composizioni statiche con righe rosse e altri artefatti statici goffi.

Suona benissimo, vero? Vediamo come puoi avviare Pattern Lab il primo giorno del tuo progetto.

Pattern Lab 2 è disponibile in entrambe le versioni PHP e Node. Squadre, scegli la tua avventura! Alcuni progetti producono una chiara scelta di stack tecnologico. Altri si riducono alle competenze del team o alla precedenza ambientale. Qualunque sia la piattaforma, Pattern Lab 2 è pronto ad aiutare te e il tuo team a collaborare alla creazione della nuova applicazione e del sistema di progettazione. Qualunque sia la tua piattaforma scelta, sappi che con entrambe le versioni Pattern Lab produrrà risultati quasi identici, proprio come le auto di marche e modelli diversi ti portano tutte alla stessa destinazione.

Installazione di Pattern Lab

Una volta installati i prerequisiti appropriati, sarai pronto per installare Pattern Lab. Diamo un'occhiata a come installare Pattern Lab Node, ma tieni presente che anche le istruzioni PHP sono disponibili e sono simili.

Dalla finestra del tuo terminale, vai a una directory in cui desideri installare Pattern Lab. Quindi digita i seguenti comandi:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Una volta completato, gulp patternlab:serve

L'esecuzione npm install le ultime dipendenze e gulp patternlab:serve genererà e ospiterà autonomamente Pattern Lab, aprendo il frontend nel browser predefinito. E se non desideri clonare direttamente il repository git, puoi in alternativa scaricare l'ultima versione e quindi eseguire i passaggi 2 e 3.

Con Pattern Lab attivo e funzionante, il tuo team ha ora un hub per progettare, sviluppare e rivedere il tuo sistema di progettazione che sarà presto stabilito.

Filesystem di Pattern Lab

Pattern Lab compila tutto ciò che si trova nella cartella /source del tuo progetto in file HTML statici che risiedono nella cartella /public . Questo output può quindi essere visualizzato o consumato singolarmente o all'interno del frontend della guida di stile. Diamo un'occhiata al filesystem di Pattern Lab e a ciò che vive all'interno di source/ :

• _annotations/ - dove il tuo team può definire annotazioni viventi per rafforzare la documentazione dell'interfaccia utente
• _data/ - dove risiedono i dati globali utilizzati per rendere i tuoi modelli.
• _meta/ - dove risiedono le informazioni su <head> e foot (che ferma tutti i tuoi pattern).
• _patterns/ - dove risiedono i tuoi modelli, la documentazione del modello e i dati specifici del modello.
• css - dove possono risiedere i tuoi fogli di stile
• immagini - dove possono risiedere le tue immagini
• js - dove può risiedere il tuo javascript

Vale la pena sottolineare che Pattern Lab non impone convenzioni di frontend o dipendenze di produzione su di te. Come decidi di strutturare le tue cartelle e quali tecnologie scegli dipende totalmente da te. Se vuoi chiamare la tua cartella /stylesheets invece di /css , fallo! Vuoi usare Sass? Carino! Ti piace jQuery? Grande! Lo odi? Va bene anche quello! Pattern Lab esiste semplicemente per cucire insieme i tuoi modelli e per evitare qualsiasi decisione di frontend che prendi. Puoi persino configurare il modo in cui le tue risorse vengono gestite mentre viaggiano da source/ a public/ .

Scegli la tua avventura: convenzioni di denominazione e configurazione

Il design atomico è un modello mentale utile per pensare alla costruzione di sistemi di progettazione dell'interfaccia utente, ma non è certamente un dogma rigido. È importante scegliere una nomenclatura che aiuti il ​​tuo team a parlare la stessa lingua e a fare un ottimo lavoro insieme.

Le convenzioni di denominazione di Pattern Lab, come la maggior parte degli aspetti del software, sono completamente configurabili. Mentre patterns/ cartella Pattern Lab sono predefiniti su "atomi", "molecole", "organismi", "modelli" e "pagine, sei libero di modificare, rimuovere o aggiungere a tuo piacimento. Ad esempio, se dovessimo ricreare la tassonomia del sistema di progettazione Predix di GE, che consiste in Principi, Nozioni di base, Componenti, Modelli, Funzionalità e Applicazioni, struttureremmo la directory /source/_patterns/ di Pattern Lab in modo che sia la seguente:

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

Pattern Lab è progettato per conformarsi al tuo flusso di lavoro, non viceversa.

Stabilire la direzione del progetto

Anche durante i primi giorni o le prime ore di un progetto, ognuno ha qualcosa da contribuire al tuo Pattern Lab. Questo è un momento per esplorare, capire le cose e creare allineamento. Ogni ruolo svolge attività diverse, ma il loro output e input sono collegati. Ognuno sta gonfiando un pneumatico separato del veicolo che vi porterà tutti a destinazione.

Definizione di IA lo-fidelity in Pattern Lab

I primi lavori di progettazione dell'esperienza utente implicano la determinazione dell'architettura delle informazioni dell'applicazione. Piuttosto che cercare immediatamente strumenti wireframe ad alta fedeltà che tendono a definire prematuramente layout e funzionalità tecniche, è meglio creare schizzi lo-fi che stabiliscano cosa succede su uno schermo particolare e in quale ordine generale. Questo lavoro può assumere la forma di schizzi di tovaglioli, elenchi puntati o fogli di calcolo. Poiché Pattern Lab supporta il markup di base, è possibile tradurre rapidamente questi diagrammi di riferimento del contenuto nel browser. Per la riprogettazione della Pittsburgh Food Bank, abbiamo eliminato ogni modello utilizzando questo approccio.

Quindi il codice del modello della home page, che si trova in /source/_patterns/templates/homepage.mustache , è simile a questo:

 {{> 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 }}

Stiamo includendo un modello di intestazione e piè di pagina e quindi semplicemente eliminando il contenuto che prevediamo di includere in questa pagina.

Catturare le decisioni di progettazione visiva

I primi lavori di visual design implicano l'esplorazione della tipografia, delle tavolozze dei colori e di altri aspetti del marchio visivo. Storicamente, i designer potrebbero lanciarsi nella creazione di prototipi di Photoshop ad alta fedeltà e incentrati sul desktop, i designer ora hanno strumenti utili come riquadri di stile, Typecast e collage di elementi per stabilire la direzione del design visivo senza ricorrere a composizioni premature ad alta fedeltà.

Man mano che le decisioni vengono prese in merito a tavolozze di colori e accoppiamenti di caratteri, Pattern Lab può acquisire i risultati di tali decisioni di progettazione, assicurando che il team di progettazione e sviluppo non generi involontariamente 50 sfumature di grigio.

Diventare un Frontend Prep Chef in Pattern Lab

E poi c'è il codice frontend. In queste prime fasi di un progetto, gli sviluppatori di frontend possono essere tentati di stare fermi e aspettare che i designer trovino una direzione prima di immergersi nel codice. Ma questo tipo di pensiero mantiene i designer e gli sviluppatori non sincronizzati tra loro e impedisce che si verifichi una vera collaborazione.

Come gli chef di preparazione in un ristorante, gli sviluppatori hanno un'enorme opportunità di mettersi al lavoro preparando i modelli e il codice che alla fine diventeranno il sistema di progettazione finale. Nei primi giorni del progetto, gli sviluppatori possono iniziare a eliminare i modelli e importare risorse in Pattern Lab, impostando le cose in anticipo in modo che designer e sviluppatori possano dedicare più tempo a lavorare insieme per progettare e creare l'interfaccia utente.

Le tavolozze dei colori, la copia reale e il layout devono ancora essere stabiliti, ma ciò non dovrebbe impedire agli sviluppatori di impalcare le strutture che supportano i wireframe del contenuto. Prendi uno schema eroe, ad esempio:

Questo modello include altri modelli, che è un modo efficace per consumare elementi di interfaccia più piccoli in strutture sempre più grandi. Ecco il markup per 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-->

Il codice della doppia parentesi graffa ( {{}} ) è il codice del modello Moustache, che ci consente di definire contenuto dinamico e includere modelli uno dentro l'altro. Ad esempio, il codice {{> atoms-hero-img }} dice a Pattern Lab di cercare un atomo chiamato "hero-img" e di includerlo nel pattern. L'unità eroe stessa può quindi essere inclusa in schemi più complessi utilizzando la stessa convenzione di inclusione utilizzando quanto segue: {{> molecules-hero }} .

Questo approccio della bambola di nidificazione russa all'inclusione dei modelli consente alla tua base di codice di rimanere bella e ASCIUTTA, il che significa che se apporti una modifica a un modello particolare, ovunque quel modello sia incluso verrà aggiornato automaticamente. Ciò mantiene i tuoi progetti e la tua base di codice sincronizzati e coerenti. E per di più, questo continuo accumulo di schemi può produrre interfacce quasi complete in breve tempo!

Rimboccandoci le maniche

L'architettura dell'informazione ha iniziato a prendere forma, la direzione estetica iniziale è stata stabilita e gli schemi nascenti sono stati eliminati in Pattern Lab. Ora il team può ora dedicarsi collettivamente alla costruzione del sistema di progettazione dell'interfaccia sul serio. Discutiamo di come utilizzare Pattern Lab per trasformare un vago senso dell'orientamento in un sistema di progettazione bello, funzionale, ponderato e completo.

Progettare con i dati dinamici

Un concetto importante del design atomico sono le differenze tra modelli e pagine. I modelli definiscono la struttura del contenuto sottostante di un'interfaccia utente, mentre le pagine sono istanze specifiche di quei modelli che sostituiscono tale struttura del contenuto con un contenuto rappresentativo reale. Entrambi sono necessari per documentare i parametri del contenuto e allo stesso tempo mostrare i modelli di progettazione in azione e popolati con contenuti reali.

Una delle funzionalità più potenti di Pattern Lab è la possibilità di scambiare diversi contenuti rappresentativi nei modelli dell'interfaccia utente per garantire che possano gestire la natura dinamica dei tuoi contenuti. Cosa succede se il tuo utente non carica un'immagine del profilo? Cosa succede se l'utente ha 13 articoli nel carrello rispetto a 2 articoli? E se uno di questi prodotti avesse 14 potenziali variazioni? Cosa succede se il titolo del post del blog contiene 400 caratteri? Utente di ritorno? Utente per la prima volta? Cosa succede se l'articolo non contiene commenti? O che dire di quando ha sette livelli di commenti nidificati? Cosa succede se dobbiamo visualizzare un messaggio urgente sulla dashboard quando il loro account viene violato? Pattern Lab ti consente di manipolare i dati per esprimere un numero qualsiasi di vari stati dell'interfaccia utente e varianti di qualsiasi modello.

Dati specifici della pagina

I dati iniziali in Pattern Lab vengono archiviati in un file chiamato /source/_data/data.json , che contiene i dati che i modelli utilizzeranno inizialmente per essere visualizzati nella guida di stile e nelle viste modello. Il tuo data.json predefinito potrebbe assomigliare a questo:

 { "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": [] }

Puoi fare riferimento a questi dati nei tuoi pattern (ad esempio includendo {{ headline.short }} in un pattern) per ottenere risultati come questo:

A livello di pagina, vogliamo sostituire quelle immagini in scala di grigi e il testo segnaposto lorem ipsum con contenuti reali. Per fare ciò, creeremo un nuovo file accanto a /source/_patterns/pages/homepage.mustache chiamato homepage.json , dove possiamo sovrascrivere i dati iniziali definiti in `data.json. Potrebbe assomigliare a questo:

 "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" } } ]

Ciò si traduce in un'interfaccia utente simile a questa:

Pseudo-modelli

I nostri sistemi di progettazione devono essere flessibili e adattarsi alla realtà dei contenuti che risiedono nelle nostre applicazioni. Dobbiamo contemporaneamente tenere conto delle situazioni migliori, delle peggiori e di tutto il resto.

Esprimere queste variazioni dell'interfaccia utente negli strumenti di progettazione statici è un esercizio di noiosità e ridondanza, il che potrebbe spiegare perché sono progettati raramente. Ma la funzionalità pseudo-pattern di Pattern Lab ci consente di articolare (a volte selvaggiamente) diversi scenari con poche modifiche ai nostri dati.

Diciamo che stiamo realizzando un'app di monitoraggio delle escursioni la cui dashboard mostra un elenco di statistiche sulle escursioni: dislivello salito, numero di sentieri percorsi, passi effettuati e così via. Per un utente attivo che ha inserito costantemente contenuti nell'app, l'interfaccia utente potrebbe essere simile a questa:

In /source/_patterns/pages/dashboard.json , i nostri dati sarebbero simili a questo:

 { "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%" } } ], ... }

Con questi dati, Pattern Lab è in grado di popolare l'interfaccia utente con la ricchezza di contenuti generati da questo utente.

Tuttavia, questo scenario potrebbe non essere così comune. Per ogni utente ambizioso che si prende il tempo per popolare ogni campo e connettere ogni applicazione disponibile, è probabile che ci siano dozzine di utenti occasionali che non riempiono ogni spazio vuoto e sfruttano tutte le funzionalità dell'app. Del resto, a un certo punto del percorso di ogni utente, l'interfaccia è completamente nuova! Articoliamo queste importanti variazioni usando la funzione pseudo-pattern di Pattern Lab.

Nella nostra /source/_patterns/pages/ , possiamo creare un nuovo pseudo-pattern chiamato dashboard~new-user.json . Questo creerà un'altra istanza della pagina che eredita tutti i dati da dashboard.json , ma ci consente anche di modificare o estendere ulteriormente i dati. Nel caso di dashboard~new-user.json , possiamo sovrascrivere bit di dati per dimostrare come potrebbe essere una nuova esperienza utente:

Ed ecco i dati che stiamo aggiungendo al file per realizzare questa interfaccia utente:

 { "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" } } ] }

Sostituendo alcuni dei valori in dashboard.json siamo in grado di modificare il contenuto e attivare/disattivare pattern particolari.

In un altro caso, potrebbe essere necessario dimostrare l'aspetto dell'interfaccia utente quando si verifica un problema di sicurezza o qualche altro problema con l'account dell'utente. Possiamo creare lo pseudo-pattern dashboard~hacked.json per creare la seguente interfaccia utente:

La maggior parte dei dati da dashboard.json rimarrà la stessa, ma aggiungeremo quanto segue per creare il messaggio di errore:

 { "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>" } }

Parametri del modello

Ci sono momenti in cui si utilizza Pattern Lab che garantiscono pseudo-modelli completi, come illustrato sopra. Ma a volte potrebbe essere necessario modificare o sovrascrivere solo un singolo valore di dati all'interno di un pattern, lasciando che il resto venga gestito dagli altri pattern di visualizzazione dinamici. Per questi casi, i parametri del modello sono il tuo strumento preferito. I parametri del modello sono un semplice meccanismo per sostituire le variabili in un modello incluso. Si limitano a sostituire le variabili nel modello incluso e solo il modello incluso. Considera questo estratto del modello di dettaglio:

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

che include il modello di elenco dei media della sezione.

 <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-->

Come abbiamo appreso, {{sectionTitle}} sia per i blocchi di dati latestPosts che per le persone in primo piano verranno popolati da qualsiasi .json associato presente, con /source/_data/data.json come fallback globale. Tuttavia, stiamo includendo un singolo pattern più volte e potremmo voler fornire rapidamente dati univoci a ciascun pattern senza dover creare queste chiavi nel nostro .json. Possiamo modificare gli elenchi dei media della sezione inclusa come segue:

 ... <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--> ...

Questi due organismi useranno ora la variabile sectionTitle definita qui durante il rendering. I parametri dei pattern sono potenti, ma sono supportati solo da PHP e Node Moustache PatternEngines. Altri linguaggi per i modelli forniscono soluzioni migliori a questo problema. Dai un'occhiata ai documenti per leggere l'intero skinny sui parametri dei parametri.

modificatori di stile

Spesso ti ritroverai a desiderare di visualizzare varianti stilistiche dello stesso modello, come i pulsanti colorati dei social media o gli stati dei componenti. Un'estensione della scorciatoia include la sintassi, styleModifiers fornisce classi aggiuntive a un pattern. A condizione che tu costruisca un pattern block-media con {{ styleModifier}} all'interno dell'attributo class:

 <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 -->

Includere questo modello con due punti dopo il nome imposta styleModifier:

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

produrrebbe un tag di ancoraggio come questo:

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

styleModifiers possono essere combinati per fornire più classi, usando pipe (|) come delimitatore.

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

Tra pseudo-pattern, parametri di pattern e styleModifiers , Pattern Lab semplifica la dimostrazione di variazioni dell'interfaccia utente a volte molto diverse mantenendo la base di codice sottostante DRY nel processo.

Iterazione con stile

Un elemento chiave di un flusso di lavoro basato su modelli è accettare l'iterazione e riconoscere che i modelli e il design continueranno ad evolversi. Le parti daranno forma al tutto, il tutto formerà le parti e il sistema interconnesso di componenti emergerà come risultato di questo processo.

Un'altra conseguenza naturale di questo processo è che il punto di produzione passa dalle mani degli UX e dei visual designer alle mani degli sviluppatori frontend molto prima. Invece di sprecare molto tempo prezioso creando una sfilza di composizioni ad alta fedeltà e wireframe dettagliati, il lavoro di progettazione può passare da documenti statici a browser in cui il tuo team può affrontare prima le realtà del web.

Con Pattern Lab come abbeveratoio per l'intero team, i designer possono comprendere meglio come le decisioni prese in un'area influiscano su altre aree.

Viewport test con ish.

È importante che i nostri componenti, così come le nostre pagine, siano flessibili sull'intero spettro di risoluzione. Cottura di uno strumento di ridimensionamento della vista come ish. in una libreria di modelli assicura che ogni elemento abbia un aspetto e funzioni magnificamente a qualsiasi dimensione dello schermo. Prendersi il tempo necessario per creare modelli completamente flessibili ci preparerà meglio per un futuro in cui le query sugli elementi e i componenti Web saranno completamente maturi (non vediamo l'ora!).

Avendo questi strumenti di visualizzazione integrati direttamente nell'ambiente frontend, designer e sviluppatori possono stringersi attorno a Pattern Lab per determinare dove inserire i punti di interruzione nel progetto. Inoltre, i clienti, il controllo qualità e altri colleghi possono individuare aree specifiche in cui l'interfaccia utente va in pezzi per qualsiasi motivo.

Pronto per il lancio

Il progetto sta venendo bene insieme, ma prima che possa essere lanciato nel mondo, le cose devono essere rafforzate, testate su più browser/dispositivo e adeguatamente documentate. Parliamo di come Pattern Lab può aiutarti a preparare il codice e la documentazione del tuo sistema di progettazione per la prima serata!

Documentazione del modello accessibile

Alcuni modelli possono presentarsi come autodocumentanti, ma un modello spesso richiede un contesto o informazioni aggiuntive per chiarire le cose. Cose come definizioni. le linee guida sull'uso, le considerazioni, le risorse e le immagini di esempio possono e dovrebbero trovare la loro strada nella documentazione del modello. La documentazione di Pattern Lab 2 utilizza Markdown con YAML per creare questa documentazione. Il file markdown accompagna il pattern (ad esempio, media-object.md deve essere posizionato accanto a media-object.mustache ) e può essere formattato in questo modo:

 --- 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.

La documentazione di Markdown significa che gli IA, i designer visivi, gli strateghi dei contenuti, gli uomini d'affari, ecc. possono contribuire più facilmente alla documentazione vivente. I proprietari del prodotto potrebbero anche inserire note di funzionalità per nuovi modelli prima ancora che il modello venga creato. Sono previsti miglioramenti per rendere la documentazione dei modelli più potente, rendendo ulteriormente Pattern Lab uno spazio sempreverde per il tuo team.

Lineage per un QA più semplice

Quando si osservano vari modelli in una libreria, la mancanza di contesto può rendere difficile discernere dove vengono effettivamente utilizzati. Definire e descrivere le caratteristiche del modello è una cosa, ma c'è un'opportunità per fornire ulteriori informazioni contestuali sui modelli dell'interfaccia utente.

Grazie alla natura della bambola di nidificazione russa di Pattern Lab, può mostrare quali modelli compongono un dato componente e anche mostrare dove viene consumato quel modello nel sistema di progettazione.

Grazie a questa funzionalità, designer e sviluppatori dispongono di informazioni contestuali utili durante il QA e/o le modifiche al sistema di progettazione. Se volessimo apportare modifiche a un modello particolare, come raddoppiare le dimensioni dell'immagine o aggiungere un elemento di testo aggiuntivo, sapremmo immediatamente quali modelli e modelli avrebbero bisogno di essere testati nuovamente e sottoposti a QA per garantire che nulla si interrompa con le modifiche . 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. Per esempio:

 --- 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.

Edizioni Pattern Lab

Le edizioni consentono a team e agenzie di raggruppare tutte le cose che supportano i loro flussi di lavoro unici con Pattern Lab. Un'edizione può diventare il punto di partenza per tutti i tuoi progetti mentre i team condividono e aggiornano le funzionalità. La versione Node di Pattern Lab utilizza npm per inserire componenti separati, mentre la versione PHP utilizza Composer per aiutarti a dare il via ai tuoi progetti in modo semplice e standardizzato.

Nucleo di laboratorio di modelli

Core è il coraggio di Pattern Lab e abilita tutte le altre funzionalità. Poiché Core è autonomo, un team può aggiornare e rimanere aggiornato con le ultime funzionalità di Pattern Lab senza interrompere il resto del progetto.

StarterKit

Hai un set affidabile di codice standard con cui inizi ogni progetto? Forse un insieme comune di modelli di base, mix-in Sass e librerie JavaScript che sono i tuoi strumenti di riferimento? Uno StarterKit è perfetto per raggruppare queste risorse in un unico standard che si assicuri che ogni progetto inizi con il piede giusto.

Esistono già diversi starterkit per dare il via al tuo progetto, sia che tu stia cercando un inizio vuoto, iniziare con una demo che mostri le funzionalità di Pattern Lab o iniziare con un framework popolare come Bootstrap, Foundation o Material Design. E puoi lanciare il tuo, che può essere completamente controllato dalla versione in modo che lo StarterKit del tuo team possa evolversi insieme ai tuoi strumenti.

L'importazione di uno starterkit richiede solo pochi tasti dopo l'installazione. Alla fine questa funzione sarà integrata in una fase post-installazione come per Pattern Lab PHP tramite il compositore.

Styleguide Kit

Gli StyleguideKits sono il front-end di Pattern Lab. Lo chiamiamo "Lo spettatore". Gli StyleguideKits consentono alle agenzie e alle organizzazioni di sviluppare interfacce utente Pattern Lab personalizzate e di marca per mostrare i propri modelli.

Pattern Engines

I PatternEngine sono i motori di creazione di modelli responsabili dell'analisi dei modelli e della loro trasformazione in HTML. PatternEngines offre a Pattern Lab Core la flessibilità per eseguire il rendering di molti tipi diversi di linguaggi modello. Gli attuali PatternEngines includono Moustache e Twig, con altri come Handlebars e Underscore in fase di sviluppo. E non c'è modo di impedirti di aggiungere un altro motore di creazione di modelli a Pattern Lab.

Plugin

I plugin consentono agli sviluppatori di estendere Pattern Lab Core e altre parti dell'ecosistema. Ad esempio, la versione PHP di Pattern Lab ha una serie di plugin come Browser Auto-Reload, Data Inheritance e Faker. L'architettura di Pattern Lab consente agli sviluppatori di modificare i dati in fasi diverse, aggiungere i propri comandi o regole di pattern o modificare il front-end per modificare ed estendere le capacità di Pattern Lab

Guarda Il mio discorso

Prova Pattern Lab 2 e partecipa

La creazione di interfacce utente basate su modelli e sofisticati sistemi di progettazione è più importante che mai. Pattern Lab 2 è ben attrezzato per creare e mantenere sistemi di progettazione atomica e può fungere da hub per il tuo sistema di progettazione in ogni fase del flusso di lavoro del tuo team.

Se il tuo team decide di scaricare Pattern Lab 2 e provarlo, ci farebbe piacere avere tue notizie! Partecipa alla conversazione ponendo domande su Gitter, risolvi problemi se stai lottando con qualcosa e aiuta a proporre e discutere nuove funzionalità.

E se fai cose interessanti con Pattern Lab 2, condividi le tue intuizioni! Styleguides.io ha oltre 150 esempi di librerie di pattern, quindi aggiungi il tuo Pattern Lab al mix. Il bello del web e dei progetti open source è che l'intera comunità può imparare dalla tua esperienza e costruire su quella conoscenza.

Siamo entusiasti di vedere quali grandi cose crei!