Cum să creați și să întrețineți sisteme de proiectare atomică cu Pattern Lab 2

Beneficiile sistemelor de design UI sunt acum bine cunoscute. Acestea conduc la experiențe de utilizator mai coezive și consecvente. Acestea accelerează fluxul de lucru al echipei dvs., permițându-vă să lansați mai multe lucruri, economisind în același timp cantități uriașe de timp și bani în acest proces . Ele stabilesc un vocabular comun între discipline, rezultând un flux de lucru mai colaborativ și constructiv.

Acestea facilitează testarea browserului, a dispozitivului, a performanței și a accesibilității. Și servesc ca o bază solidă pe care să o construiți în timp, ajutând organizația dvs. să se adapteze mai ușor la peisajul web în continuă schimbare.

Pentru a crea aceste sisteme, trebuie să stabilim o bibliotecă de modele în Markdown. Trebuie să ne împărțim interfețele în părți mai mici, dar trebuie să ne asigurăm simultan că acele părți se unesc pentru a forma un întreg frumos și funcțional. „Designul atomic” este un model mental util care ne ajută să facem exact asta, iar Pattern Lab este o suită de instrumente care ajută la aducerea la viață a acestor sisteme de proiectare atomică.

Citiți suplimentare despre SmashingMag:

• Ducerea bibliotecilor de modele la nivelul următor
• Modele inteligente de design receptiv
• O privire de ansamblu aprofundată asupra instrumentelor ghid pentru stilul de viață
• Faceți cunoștință cu modele de design front-end inclusive
  

După peste doi ani de muncă grea, suntem bucuroși să anunțăm Laboratorul de modele 2! Complet reimaginat, Pattern Lab 2 este o suită open-source de instrumente care vă ajută pe dvs. și echipa dvs. să creați și să mențineți sisteme de proiectare a interfeței de utilizare bine gândite . În esență, este un generator de site static care îmbină modele și vă permite să proiectați cu date dinamice.

Câteva puncte importante ale noii versiuni includ:

• Un nucleu complet restructurat care acceptă mai multe limbi, motoare de șabloane și formate de date
• Sprijină Markdown pentru documentarea modelului
• Adăugarea suportului YAML, precum și JSON pentru gestionarea datelor dinamice
• Pluginuri pentru extinderea și îmbunătățirea funcționalității Pattern Lab
• O interfață de utilizare frontală cu tematică, extensibilă și reproiectată

Dar mai mult decât orice, Pattern Lab 2 a fost proiectat și construit astfel încât echipa dumneavoastră să-l poată utiliza eficient în fiecare fază a procesului sistemului dumneavoastră de proiectare, de la început până la întreținerea pe termen lung.

Laboratorul de modele la începutul proiectului

Echipa ta a fost însărcinată cu realizarea unei noi aplicații și a unui sistem de proiectare de bază. Pe vremuri, designerii UX ai echipelor tale s-ar fi putut ascunde într-o cameră pentru a defini produsul prin intermediul unor wireframes monolitice, puternic adnotate. Odată aprobate, acestea erau transferate către designeri vizuali care apoi aplicau culoare, tipografie și textura pentru a da viață cadrelor. După ce homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd este în sfârșit aprobat, design-urile sunt trimise dezvoltatorilor frontend, care au izbucnit rapid în lacrimi, deoarece design-urile conțin o mulțime de layout-uri nerealiste, conținut de utilizator improbabil (fiecare nume de utilizator are doar 4 caractere) - cât de convenabil! , și un potpourri de fonturi și modele de design incongruente.

Procesul de proiectare a aruncării peste perete este mort și dispărut. Colaborarea, iterația și dezvoltarea rapidă sunt esențiale pentru abordarea acestui peisaj web divers și în continuă schimbare. Trebuie să intrăm în browser cât mai curând posibil și să testăm design-urile în funcție de variabile din lumea reală, cum ar fi capacitatea de răspuns, performanța, ergonomia și mișcarea. De aceea, este esențial să tratăm dezvoltarea front-end ca o parte esențială a procesului de proiectare și de ce este atât de important să convingem designerii și dezvoltatorii de front-end să lucreze îndeaproape. La sfârșitul zilei, lucrăm cu toții la aceeași interfață de utilizare.

Configurarea unei instanțe de Pattern Lab în ziua 1 a proiectului poate crea un atelier comun - sau un laborator, dacă doriți - echipat cu instrumente de proiectare și dezvoltare, un răcitor de apă, o tablă și un microscop. Oferă un loc pentru fiecare disciplină pentru a-și contribui cu perspectiva asupra sistemului de design viu și respirabil. Într-un sens real, Pattern Lab poate servi ca centru al proiectului dumneavoastră de sistem de proiectare, minimizând nevoia de a crea wireframes prea detaliate, compoziții statice cu linii roșii și alte artefacte statice neplăcute.

Sună grozav, nu? Să vedem cum poți activa Pattern Lab în ziua 1 a proiectului tău.

Pattern Lab 2 vine în ambele variante PHP și Node. Echipe, alegeți-vă aventura! Unele proiecte oferă o alegere clară în domeniul tehnologiei. Alții se reduc la abilitățile echipei sau la prioritatea mediului. Indiferent de platformă, Pattern Lab 2 este pregătit să vă ajute pe dumneavoastră și echipa dumneavoastră să colaborați la construirea noului dumneavoastră sistem de aplicații și design. Oricare ar fi alegerea dvs. de platformă, știți că, cu oricare dintre versiuni, Pattern Lab va produce rezultate aproape identice - la fel cum mașinile de diferite mărci și modele vă aduc toate la aceeași destinație.

Instalarea Pattern Lab

Odată ce sunt instalate cerințele preliminare corespunzătoare, veți fi gata să instalați Pattern Lab. Să aruncăm o privire la cum să instalați Pattern Lab Node, dar rețineți că instrucțiunile PHP sunt, de asemenea, disponibile și sunt similare.

Din fereastra terminalului, navigați la un director în care doriți să instalați Pattern Lab. Apoi tastați următoarele comenzi:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Odată terminat, gulp patternlab:serve

Rularea npm install va elimina cele mai recente dependențe, iar gulp patternlab:serve va genera și auto-găzdui Pattern Lab, deschizând interfața în browserul dvs. implicit. Și dacă nu doriți să clonați direct depozitul git, puteți, alternativ, să descărcați cea mai recentă versiune și apoi să efectuați pașii 2 și 3.

Cu Pattern Lab în funcțiune, echipa dvs. are acum un hub pentru care să vă proiecteze, să dezvolte și să revizuiască sistemul dvs. de proiectare care urmează să fie înființat în curând.

Sistemul de fișiere al Laboratorului de modele

Pattern Lab compilează tot ce se găsește în folderul /source al proiectului în fișiere HTML statice care se află în folderul /public . Această ieșire poate fi apoi afișată sau consumată individual sau în interiorul interfeței ghidului de stil. Să aruncăm o privire la sistemul de fișiere al Pattern Lab și la ceea ce se află în interiorul source/ :

• _annotations/ - unde echipa dvs. poate defini adnotări vii pentru a vă consolida documentația UI
• _data/ - unde se află datele globale utilizate pentru a reda modelele dvs.
• _meta/ - unde se află informațiile despre <head> și piciorul (care vă fixează toate tiparele).
• _patterns/ - unde se află modelele dvs., documentația modelului și datele specifice modelului.
• css - unde pot fi găsite foile de stil
• imagini - unde pot locui imaginile dvs
• js - unde poate locui javascript-ul

Merită să subliniem că Pattern Lab nu impune nicio convenție frontend sau dependențe de producție asupra dvs. Modul în care decideți să vă structurați folderele și ce tehnologii alegeți depinde în totalitate de dvs. Dacă doriți să vă apelați folderul /stylesheets în loc de /css , mergeți la el! Vrei să folosești Sass? Grozav! Îți place jQuery? Grozav! Urăsc asta? E bine și asta! Laboratorul de modele există pur și simplu pentru a vă îmbina modelele și iese din calea oricăror decizii frontale pe care le luați. Puteți chiar să configurați modul în care sunt gestionate activele dvs. pe măsură ce se deplasează de la source/ la public/ .

Alege-ți propria aventură: convenții de denumire și configurație

Designul atomic este un model mental util pentru a te gândi la construirea sistemelor de proiectare a UI, dar cu siguranță nu este o dogmă rigidă. Este important să alegeți o nomenclatură care să vă ajute echipa să vorbească aceeași limbă și să facă o muncă grozavă împreună.

Convențiile de denumire ale Pattern Lab, la fel ca majoritatea aspectelor software-ului, sunt complet configurabile. În timp ce patterns/ dosarul Pattern Lab este implicit „atomi”, „molecule”, „organisme”, „șabloane” și „pagini, sunteți liber să modificați, să eliminați sau să adăugați la dorința inimii. De exemplu, dacă ar fi să recream taxonomia sistemului de proiectare Predix de la GE – care constă din Principii, Baze, Componente, Șabloane, Caracteristici și Aplicații – am structura directorul /source/_patterns/ al Pattern Lab astfel:

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

Pattern Lab este conceput pentru a se conforma fluxului dvs. de lucru, nu invers.

Stabilirea direcției de proiectare

Chiar și în primele zile sau ore ale unui proiect, toată lumea are cu ce să contribuie la laboratorul tău de modele. Acesta este un moment pentru explorarea, descoperirea lucrurilor și crearea alinierii. Fiecare rol desfășoară activități diferite, dar rezultatele și contribuțiile lor sunt legate. Fiecare umflă o anvelopă separată a vehiculului, care vă va duce pe toți la destinație.

Definirea lo-fidelity IA în Pattern Lab

Lucrările timpurii de design UX implică determinarea arhitecturii informaționale a aplicației. În loc să apelezi imediat la instrumente wireframe de înaltă fidelitate care tind să definească prematur machetele și funcționalitatea tehnică, este mai bine să creezi schițe lo-fi care stabilesc ce se întâmplă pe un anumit ecran și în ce ordine generală. Această lucrare poate lua forma unor schițe cu șervețele, liste cu marcatori sau foi de calcul. Deoarece Pattern Lab acceptă markup de bază, este posibil să traduceți rapid aceste diagrame de referință de conținut în browser imediat. Pentru reproiectarea Băncii de Alimente din Pittsburgh, am eliminat fiecare șablon folosind această abordare.

Deci, codul șablonului de pagină de pornire, găsit în /source/_patterns/templates/homepage.mustache arată astfel:

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

Includem un model de antet și de subsol și apoi pur și simplu eliminăm conținutul pe care anticipăm să îl includem pe această pagină.

Captarea deciziilor de design vizual

Lucrările timpurii de design vizual implică explorarea tipografiei, paletelor de culori și a altor aspecte ale mărcii vizuale. Din punct de vedere istoric, designerii s-ar putea să creeze machete Photoshop de înaltă fidelitate, centrate pe desktop, designerii au acum instrumente utile, cum ar fi plăci de stil, Typecast și colaje de elemente, pentru a stabili direcția vizuală a designului fără a recurge la compoziții premature, de înaltă fidelitate.

Pe măsură ce se iau decizii cu privire la paletele de culori și perechile de fonturi, Pattern Lab poate surprinde rezultatele acestor decizii de design, asigurându-se că echipa de proiectare și dezvoltare nu generează neintenționat 50 de nuanțe de gri.

A deveni un chef de pregătire pentru front-end în Laboratorul de modele

Și apoi există codul frontend. În aceste etape incipiente ale unui proiect, dezvoltatorii front-end pot fi tentați să stea bine și să aștepte ca designerii să vină cu o direcție înainte de a se scufunda în cod. Dar acest tip de gândire îi ține pe designeri și dezvoltatorii desincronizati între ei și împiedică apariția unei colaborări adevărate.

La fel ca bucătarii pregătitori de la un restaurant, dezvoltatorii au o oportunitate uriașă de a se pune pe treabă pregătind modelele și codurile care vor deveni în cele din urmă sistemul de design final. În primele zile ale proiectului, dezvoltatorii pot începe să elimine modele și să importe active în Pattern Lab, punând lucrurile la punct din timp, astfel încât designerii și dezvoltatorii să poată petrece mai mult timp lucrând împreună pentru a proiecta și construi interfața de utilizare.

Paletele de culori, copierea reală și aspectul nu au fost încă stabilite, dar asta nu ar trebui să-i împiedice pe dezvoltatori să construiască structurile care susțin wireframes-ul de conținut. Luați un model de erou, de exemplu:

Acest model include alte modele, care este o modalitate puternică de a consuma elemente de interfață mai mici în structuri din ce în ce mai mari. Iată marcajul pentru 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-->

Codul de paranteză dublă ( {{}} ) este un cod de șablon Mustache, care ne permite să definim conținut dinamic și să includem modele unul în celălalt. De exemplu, codul {{> atoms-hero-img }} îi spune Pattern Lab să caute un atom numit „hero-img” și să îl includă în model. Unitatea erou în sine poate fi apoi inclusă în modele mai complexe folosind aceeași convenție de includere folosind următoarele: {{> molecules-hero }} .

Această abordare cu păpușile rusești de a include modele permite ca baza de cod să rămână plăcută și USCĂ, ceea ce înseamnă că, dacă modificați un anumit model, oriunde este inclus acel model va fi actualizat automat. Astfel, design-urile și baza de cod sunt sincronizate și consecvente. Și, pe lângă toate acestea, această acumulare continuă de modele poate produce interfețe aproape complete în scurt timp!

Ne suflecăm mânecile

Arhitectura informației a început să prindă contur, direcția estetică inițială a fost stabilită și modelele în curs de dezvoltare au fost eliminate în Pattern Lab. Acum, echipa se poate scufunda în mod colectiv în construirea sistemului de proiectare a interfeței cu seriozitate. Să discutăm cum să folosiți Pattern Lab pentru a transforma un vag simț al direcției într-un sistem de design frumos, funcțional, atent și complet.

Proiectare cu date dinamice

Un concept important al designului atomic este diferențele dintre șabloane și pagini. Șabloanele definesc structura de conținut de bază a unei interfețe de utilizare, în timp ce paginile sunt exemple specifice ale acelor șabloane care înlocuiesc acea structură de conținut cu conținut reprezentativ real. Ambele sunt necesare pentru a documenta parametrii de conținut, arătând, de asemenea, modelele de design în acțiune și populate cu conținut real.

Una dintre cele mai puternice caracteristici Pattern Lab este abilitatea de a schimba conținut reprezentativ diferit în modelele dvs. de interfață de utilizare pentru a vă asigura că pot gestiona natura dinamică a conținutului dvs. Ce se întâmplă dacă utilizatorul dvs. nu încarcă o fotografie de profil? Ce se întâmplă dacă utilizatorul are 13 articole în coșul de cumpărături față de 2 articole? Ce se întâmplă dacă unul dintre aceste produse are 14 variante potențiale? Ce se întâmplă dacă titlul articolului de blog conține 400 de caractere? Utilizator returnat? Utilizator pentru prima dată? Dacă articolul nu are comentarii? Sau ce zici când are șapte straturi de comentarii imbricate? Ce se întâmplă dacă trebuie să afișăm un mesaj urgent pe tabloul de bord atunci când contul lor este spart? Pattern Lab vă permite să manipulați datele pentru a exprima orice număr de diferite stări ale UI și variante ale oricărui șablon.

Date specifice paginii

Datele inițiale din Pattern Lab sunt stocate într-un fișier numit /source/_data/data.json , care conține datele pe care modelele le vor consuma inițial pentru a fi afișate în ghidul de stil și în vizualizările șablonului. data.json implicit poate arăta cam așa:

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

Puteți face referire la aceste date în modelele dvs. (adică includerea {{ headline.short }} într-un model) pentru a obține rezultate ca acestea:

La nivel de pagină, dorim să înlocuim acele imagini în tonuri de gri și textul substituent lorem ipsum cu conținut real. Pentru a realiza acest lucru, vom crea un fișier nou chiar lângă /source/_patterns/pages/homepage.mustache numit homepage.json , unde putem suprascrie datele inițiale definite în `data.json. Ar putea arăta cam așa:

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

Rezultă o interfață de utilizare care arată astfel:

Pseudo-Modele

Sistemele noastre de design trebuie să fie flexibile și să se adapteze la realitatea conținutului care trăiește în aplicațiile noastre. Trebuie să luăm în considerare concomitent situațiile cele mai bune, cele mai rele și tot ce se află între ele.

Exprimarea acestor variații ale interfeței de utilizare în instrumentele de proiectare statică este un exercițiu de oboseală și redundanță, ceea ce poate explica de ce sunt rar proiectate. Însă caracteristica de pseudo-model a Pattern Lab ne permite să articulăm (uneori sălbatic) scenarii diferite cu doar câteva modificări ale datelor noastre.

Să presupunem că creăm o aplicație de urmărire a drumețiilor al cărei tablou de bord afișează o listă de statistici de drumeții: altitudinea urcat, numărul de trasee parcurse, pașii făcuți și așa mai departe. Pentru un utilizator activ care a introdus constant conținut în aplicație, interfața de utilizare ar putea arăta cam așa:

În /source/_patterns/pages/dashboard.json , datele noastre ar arăta cam așa:

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

Cu aceste date, Pattern Lab poate completa interfața de utilizare cu conținutul generat al acestui utilizator.

Cu toate acestea, acest scenariu poate să nu fie atât de comun. Pentru fiecare utilizator ambițios care își face timpul pentru a popula fiecare câmp și a conecta fiecare aplicație disponibilă, este probabil să existe zeci de utilizatori ocazionali care nu completează fiecare spațiu liber și nu profită de toate funcțiile aplicației. De altfel, la un moment dat în călătoria fiecărui utilizator, aceștia sunt complet noi în interfață! Să articulăm aceste variații importante folosind funcția de pseudo-model a Pattern Lab.

În directorul nostru /source/_patterns/pages/ , putem crea un nou pseudo-model numit dashboard~new-user.json . Aceasta va crea o altă instanță a paginii care moștenește toate datele din dashboard.json , dar ne va permite și să modificăm sau să extindem în continuare datele. În cazul dashboard~new-user.json , putem suprascrie biți de date pentru a demonstra cum ar putea arăta o nouă experiență de utilizator:

Și iată datele pe care le adăugăm în fișier pentru a realiza această interfață de utilizare:

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

Prin suprascrierea unora dintre valorile din dashboard.json , putem modifica conținutul și putem activa/dezactiva anumite modele.

Într-un alt caz, poate fi necesar să demonstrăm cum arată interfața de utilizare atunci când există o problemă de securitate sau o altă problemă cu contul utilizatorului. Putem crea tabloul de dashboard~hacked.json pseudo-pattern pentru a crea următoarea interfață de utilizare:

Majoritatea datelor din dashboard.json vor rămâne aceleași, dar vom adăuga următoarele pentru a crea mesajul de eroare:

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

Parametrii modelului

Există momente când se utilizează Pattern Lab care garantează pseudo-modele complete, așa cum este ilustrat mai sus. Dar, uneori, poate fi necesar să modificați sau să suprascrieți doar o singură valoare a datelor dintr-un model, lăsând restul să fie gestionat de celelalte modele de afișare dinamice. Pentru aceste cazuri, parametrii modelului sunt instrumentul preferat. Parametrii modelului sunt un mecanism simplu pentru înlocuirea variabilelor într-un model inclus. Acestea sunt limitate la înlocuirea variabilelor din modelul inclus și doar modelul inclus. Luați în considerare acest extras din șablonul de detaliu:

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

care include modelul listei media secțiunii.

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

După cum am aflat, {{sectionTitle}} atât pentru cele mai recente Postări, cât și pentru blocurile de date FeaturedPeople se vor popula din orice .json însoțitor prezent, cu /source/_data/data.json ca alternativă globală. Cu toate acestea, includem un singur model de mai multe ori și este posibil să dorim să furnizăm rapid date unice fiecărui model fără a fi nevoie să creăm aceste chei în .json. Putem schimba listele media secțiunilor incluse în următoarele:

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

Aceste două organisme vor folosi acum variabila sectionTitle definită aici la randare. Parametrii modelului sunt puternici, dar sunt acceptați doar de PHP și Node Mustache PatternEngines. Alte limbaje șablon oferă soluții mai bune la această problemă. Consultați documentele pentru a citi parametrii completi skinny despre parametri.

Modificatori de stil

Adesea vă veți descoperi că doriți să afișați variante stilistice ale aceluiași model, cum ar fi butoanele colorate ale rețelelor sociale sau stările componente. O extensie la prescurtarea include sintaxă, styleModifiers furnizează clase suplimentare unui model. Cu condiția să construiți un model block-media cu {{ styleModifier}} în cadrul atributului de clasă:

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

Includerea acestui model cu două puncte după nume setează styleModifier:

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

ar produce o etichetă de ancorare ca aceasta:

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

styleModifiers pot fi combinate pentru a furniza mai multe clase, folosind pipe (|) ca delimitator.

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

Între pseudo-modele, parametrii de model și styleModifiers , Pattern Lab facilitează demonstrarea unor variații extrem de diferite ale interfeței de utilizare, păstrând în același timp baza de cod DRY în acest proces.

Iterarea în stil

Un element cheie al unui flux de lucru bazat pe modele este îmbrățișarea iterației și recunoașterea faptului că modelele și designul vor continua să evolueze. Părțile vor modela întregul, întregul va modela părțile, iar sistemul interconectat de componente va apărea ca rezultat al acestui proces.

O altă consecință naturală a acestui proces este că punctul de producție trece din mâinile UX și designerilor vizuali în mâinile dezvoltatorilor de front-end mult mai devreme. În loc să ardă mult timp prețios creând o mulțime de compuși de înaltă fidelitate și wireframes detaliate, munca de proiectare se poate muta de la documente statice la browser, unde echipa ta poate aborda mai repede realitățile web.

Cu Pattern Lab ca punct de adapare pentru întreaga echipă, designerii pot înțelege mai bine modul în care deciziile luate într-o zonă afectează alte zone.

Testarea viewportului cu ish.

Este important ca componentele noastre, precum și paginile noastre, să fie flexibile pe întregul spectru de rezoluție. Coacerea unui instrument de redimensionare a ferestrei de vizualizare, cum ar fi ish. într-o bibliotecă de modele asigură că fiecare element arată și funcționează frumos la orice dimensiune de ecran. Luarea timpului pentru a crea modele complet flexibile ne va pregăti mai bine pentru un viitor când interogările de elemente și componentele web s-au maturizat pe deplin (abia așteptăm!).

Prin integrarea acestor instrumente de vizualizare direct în mediul frontend, designerii și dezvoltatorii se pot înghesui în Pattern Lab pentru a determina unde să insereze puncte de întrerupere în design. În plus, clienții, QA și alți colegi pot identifica anumite zone în care interfața de utilizare se destramă din orice motiv.

Gata de Lansare

Proiectul se adună frumos, dar înainte de a putea fi lansat în lume, lucrurile trebuie să fie înăsprite, testate între browsere/dispozitive și documentate corespunzător. Să vorbim despre modul în care Pattern Lab vă poate ajuta să vă pregătiți codul și documentația sistemului de proiectare pentru prime time!

Documentație de model abordabil

Unele modele se pot prezenta ca auto-documentate, dar un model necesită adesea un anumit context sau informații suplimentare pentru a face lucrurile să fie clare. Lucruri precum definițiile. ghidurile de utilizare, considerentele, resursele și imaginile de exemplu pot și ar trebui să își găsească drumul în documentația de model. Documentația Pattern Lab 2 folosește Markdown cu YAML front matter pentru a crea această documentație. Fișierul markdown însoțește modelul (de exemplu, media-object.md trebuie să stea chiar lângă media-object.mustache ) și poate fi formatat astfel:

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

Documentația Markdown înseamnă că AI, designerii vizuali, strategii de conținut, oamenii de afaceri etc. pot contribui mai ușor la documentarea vie. Proprietarii de produse ar putea chiar să introducă note de funcționalitate pentru noi modele înainte ca modelul să fie creat. Sunt planificate îmbunătățiri pentru a face documentarea modelelor mai puternică, făcând și mai mult Pattern Lab un spațiu veșnic verde pentru echipa ta.

Linie pentru un QA mai ușor

Când se uită la diferite modele dintr-o bibliotecă, lipsa contextului poate face dificilă discernământul unde se obișnuiesc de fapt. Definirea și descrierea caracteristicilor modelului este un lucru, dar există o oportunitate de a oferi informații contextuale suplimentare despre modelele dvs. de IU.

Datorită naturii de păpușă rusească de cuibărit a Pattern Lab, poate afișa ce modele alcătuiesc orice componentă dată și, de asemenea, poate arăta unde este consumat acel model în sistemul de proiectare.

Datorită acestei caracteristici, designerii și dezvoltatorii au informații contextuale care sunt utile atunci când fac QA și/sau modifică sistemul de proiectare. Dacă dorim să facem modificări unui anumit model, cum ar fi dublarea dimensiunii imaginii sau adăugarea unui element de text suplimentar, am ști imediat ce modele și șabloane ar trebui testate din nou și verificate pentru a ne asigura că nimic nu se întrerupe cu modificările. . 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. For instance:

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

Edițiile Pattern Lab

Edițiile permit echipelor și agențiilor să grupeze toate lucrurile care le susțin fluxurile de lucru unice cu Pattern Lab. O ediție poate deveni punctul de plecare pentru toate proiectele dvs., în timp ce echipele partajează și actualizează funcționalitățile. Versiunea Node a Pattern Lab folosește npm pentru a introduce componente separate, în timp ce versiunea PHP folosește Composer pentru a vă ajuta să demarați proiectele într-un mod simplu și standardizat.

Nucleu de laborator de modele

Core este curajul Pattern Lab și permite toate celelalte funcții. Deoarece Core este independent, o echipă se poate actualiza și rămâne la curent cu cele mai recente funcții Pattern Lab fără a întrerupe restul proiectului.

StarterKits

Aveți un set de încredere de coduri standard cu care începeți fiecare proiect? Poate un set comun de modele de bază, combinații Sass și biblioteci JavaScript care sunt instrumentele tale de bază? Un StarterKit este perfect pentru a grupa aceste active într-un plan general care se asigură că fiecare proiect începe cu piciorul potrivit.

Există deja câteva kituri de pornire pentru a începe proiectul dvs., fie că sunteți în căutarea unui început gol, începeți cu o demonstrație care prezintă caracteristicile Pattern Lab sau începeți cu un cadru popular precum Bootstrap, Foundation sau Material Design. Și puteți rula pe propriul dvs., care poate fi complet controlat de versiune, astfel încât StarterKit-ul echipei dvs. să poată evolua împreună cu instrumentele dvs.

Importarea unui set de pornire este la doar câteva apăsări de taste distanță după instalare. În cele din urmă, această caracteristică va fi încorporată într-o fază de post-instalare, așa cum este pentru Pattern Lab PHP prin compozitor.

Truse de ghid de stil

StyleguideKits reprezintă partea frontală a Pattern Lab. Numim asta „Vizionatorul”. StyleguideKits permite agențiilor și organizațiilor să dezvolte interfețe personalizate, de brand, pentru a-și arăta modelele.

PatternEngines

PatternEngines sunt motoarele de șabloane care sunt responsabile pentru analizarea modelelor și transformarea lor în HTML. PatternEngines oferă lui Pattern Lab Core flexibilitatea de a reda multe tipuri diferite de limbaje șablon. PatternEngines actuale includ Mustache și Twig, cu altele, cum ar fi Handlebars și Underscore, în dezvoltare. Și nu vă împiedică să adăugați un alt motor de șabloane la Pattern Lab.

Pluginuri

Pluginurile permit dezvoltatorilor să extindă Pattern Lab Core și alte părți ale ecosistemului. De exemplu, versiunea PHP a Pattern Lab are o serie de plugin-uri precum Browser Auto-Reload, Data Inheritance și Faker. Arhitectura Pattern Lab permite dezvoltatorilor să modifice datele în diferite etape, să adauge propriile comenzi sau reguli de model sau să schimbe front-end-ul pentru a modifica și extinde capacitățile Pattern Lab.

Urmăriți discuția mea

Încercați Pattern Lab 2 și implicați-vă

Crearea de interfețe de utilizator bazate pe modele și sisteme de design sofisticate este mai importantă ca niciodată. Pattern Lab 2 este bine echipat pentru a crea și întreține sisteme de proiectare atomică și poate servi ca un hub pentru sistemul dvs. de proiectare prin fiecare pas al fluxului de lucru al echipei dumneavoastră.

Dacă echipa ta decide să descarce Pattern Lab 2 și să-l încerce, ne-ar plăcea să aflăm de la tine! Alăturați-vă conversației punând întrebări despre Gitter, deschideți probleme dacă vă confruntați cu ceva și ajutați la propunerea și discutarea de noi funcții.

Și dacă faci lucruri interesante cu Pattern Lab 2, te rog să-ți împărtășești cunoștințele! Styleguides.io are peste 150 de exemple de biblioteci de modele, așa că adăugați Laboratorul de modele la amestec. Frumusețea proiectelor web și open source este că întreaga comunitate poate învăța din experiența dumneavoastră și poate construi pe baza acestor cunoștințe.

Suntem încântați să vedem ce lucruri grozave creați!