Jak tworzyć i utrzymywać systemy projektowania atomowego za pomocą Pattern Lab 2

Korzyści płynące z systemów projektowania interfejsu użytkownika są teraz dobrze znane. Prowadzą do bardziej spójnego, spójnego doświadczenia użytkownika. Przyspieszają pracę Twojego zespołu, umożliwiając uruchamianie większej liczby rzeczy, jednocześnie oszczędzając przy tym ogromne ilości czasu i pieniędzy . Ustanawiają wspólne słownictwo między dyscyplinami, co skutkuje bardziej konstruktywnym i opartym na współpracy przepływem pracy.

Ułatwiają testowanie przeglądarek, urządzeń, wydajności i ułatwień dostępu. Służą też jako solidna podstawa, na której można z czasem budować, pomagając Twojej organizacji łatwiej dostosowywać się do ciągle zmieniającego się środowiska internetowego.

Aby stworzyć te systemy, musimy założyć bibliotekę wzorców w Markdown. Musimy rozbić nasze interfejsy na mniejsze części, ale jednocześnie musimy zadbać o to, by te części połączyły się w piękną i funkcjonalną całość. „Projekt atomowy” jest pomocnym modelem mentalnym, który właśnie nam w tym pomaga, a Pattern Lab to zestaw narzędzi, które pomagają ożywić te systemy projektowania atomowego.

Dalsze czytanie na SmashingMag:

• Przenoszenie bibliotek wzorów na wyższy poziom
• Inteligentne, responsywne wzorce projektowe
• Dogłębny przegląd narzędzi przewodnika po stylu życia
• Poznaj inkluzywne wzorce projektowe front-end
  

Po ponad dwóch latach ciężkiej pracy z przyjemnością ogłaszamy Pattern Lab 2! Całkowicie przeprojektowany Pattern Lab 2 to zestaw narzędzi typu open source, które pomogą Tobie i Twojemu zespołowi w tworzeniu i utrzymywaniu przemyślanych systemów projektowania interfejsu użytkownika . W swej istocie jest to statyczny generator witryn, który łączy ze sobą wzorce i umożliwia projektowanie z wykorzystaniem dynamicznych danych.

Oto kilka najważniejszych cech nowej wersji:

• Całkowicie zrestrukturyzowany rdzeń, który obsługuje więcej języków, silników szablonów i formatów danych
• Obsługa Markdown dla dokumentacji wzorców
• Dodanie obsługi YAML oraz JSON do zarządzania danymi dynamicznymi
• Wtyczki rozszerzające i ulepszające funkcjonalność Pattern Lab
• Tematyczny, rozszerzalny, przeprojektowany interfejs użytkownika

Przede wszystkim jednak Pattern Lab 2 został zaprojektowany i zbudowany tak, aby Twój zespół mógł skutecznie z niego korzystać na każdym etapie procesu projektowania systemu, od samego początku aż do jego długoterminowej konserwacji.

Laboratorium wzorców na początku projektu

Twój zespół otrzymał zadanie stworzenia nowej aplikacji i podstawowego systemu projektowania. Dawno, dawno temu, projektanci UX twojego zespołu mogli zaszyć się w pokoju, aby zdefiniować produkt za pomocą monolitycznych, mocno oznaczonych modeli szkieletowych. Po zatwierdzeniu były przekazywane projektantom wizualnym, którzy następnie stosowali kolor, typografię i teksturę, aby ożywić szkielety. Po tym, jak homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd została w końcu zaakceptowana, projekty są wysyłane do programistów frontend, którzy szybko wybuchają płaczem, ponieważ projekty zawierają mnóstwo nierealistycznych układów i nieprawdopodobną zawartość użytkownika (każda nazwa użytkownika ma tylko 4 znaki — jakże wygodne!) , oraz potpourri krojów czcionek i niespójnych wzorców projektowych.

Proces projektowania rzucania przez ścianę jest martwy i odszedł. Współpraca, iteracja i szybki rozwój są niezbędne do radzenia sobie z ciągle zmieniającym się, zróżnicowanym środowiskiem sieciowym. Musimy jak najszybciej wejść do przeglądarki i przetestować projekty pod rzeczywistymi zmiennymi, takimi jak responsywność, wydajność, ergonomia i ruch. Dlatego tak ważne jest, aby traktować front-end jako kluczową część procesu projektowania i dlatego tak ważne jest, aby projektanci i programiści frontend ściśle ze sobą współpracowali. Pod koniec dnia wszyscy pracujemy nad tym samym interfejsem użytkownika.

Skonfigurowanie instancji Pattern Lab w pierwszym dniu projektu może spowodować utworzenie wspólnego warsztatu — lub laboratorium, jeśli wolisz — wyposażonego w narzędzia do projektowania i programowania, dystrybutor wody, tablicę i mikroskop. Zapewnia miejsce dla każdej dyscypliny, aby wnieść swój punkt widzenia do żyjącego, oddychającego systemu projektowania. W rzeczywistości Pattern Lab może służyć jako centrum projektu systemu projektowania, minimalizując potrzebę tworzenia zbyt rozbudowanych modeli szkieletowych, statycznych kompozycji z czerwonymi liniami i innych niezgrabnych artefaktów.

Brzmi świetnie, prawda? Przyjrzyjmy się, jak możesz uruchomić Pattern Lab w pierwszym dniu swojego projektu.

Pattern Lab 2 jest dostępny zarówno w wersjach PHP, jak i Node. Zespoły, wybierz swoją przygodę! Niektóre projekty dają jasny wybór stosu technologicznego. Inne sprowadzają się do umiejętności zespołowych lub pierwszeństwa środowiskowego. Niezależnie od platformy, Pattern Lab 2 pomoże Tobie i Twojemu zespołowi we współpracy przy tworzeniu nowej aplikacji i systemu projektowania. Niezależnie od wybranej platformy, wiedz, że w obu wersjach Pattern Lab uzyskasz niemal identyczne wyniki — podobnie jak samochody różnych marek i modeli zaprowadzą Cię do tego samego celu.

Instalowanie wzorca laboratoryjnego

Po zainstalowaniu odpowiednich wymagań wstępnych będziesz gotowy do zainstalowania Pattern Lab. Przyjrzyjmy się, jak zainstalować Pattern Lab Node, ale pamiętaj, że instrukcje PHP są również dostępne i są podobne.

W oknie terminala przejdź do katalogu, w którym chcesz zainstalować Pattern Lab. Następnie wpisz następujące polecenia:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. Po zakończeniu gulp patternlab:serve

Uruchomienie npm install spowoduje ściągnięcie najnowszych zależności, a gulp patternlab:serve wygeneruje i hostuje samodzielnie Pattern Lab, otwierając frontend w domyślnej przeglądarce. A jeśli nie chcesz bezpośrednio klonować repozytorium git, możesz alternatywnie pobrać najnowszą wersję, a następnie wykonać kroki 2 i 3.

Po uruchomieniu Pattern Lab Twój zespół ma teraz centrum, w którym można projektować, rozwijać i sprawdzać swój wkrótce ustanowiony system projektowania.

System plików Pattern Lab

Pattern Lab kompiluje wszystko, co znajduje się w folderze /source projektu, do statycznych plików HTML, które znajdują się w folderze /public . Te dane wyjściowe mogą być następnie wyświetlane lub używane pojedynczo lub w interfejsie przewodnika stylu. Przyjrzyjmy się systemowi plików Pattern Lab i temu, co znajduje się w source/ :

• _annotations/ - gdzie Twój zespół może zdefiniować żywe adnotacje, aby wzmocnić dokumentację interfejsu użytkownika
• _data/ - gdzie znajdują się globalne dane używane do renderowania twoich wzorców.
• _meta/ - gdzie znajdują się informacje <head> i stopa (która kończy wszystkie twoje wzorce).
• _patterns/ - gdzie znajdują się twoje wzorce, dokumentacja wzorców i dane specyficzne dla wzorca.
• css - gdzie mogą znajdować się Twoje arkusze stylów
• obrazy - gdzie mogą znajdować się Twoje obrazy
• js - gdzie może znajdować się twój javascript

Warto podkreślić, że Pattern Lab nie narzuca Ci żadnych konwencji frontendowych ani zależności produkcyjnych. To, jak zdecydujesz się ustrukturyzować foldery i jakie technologie wybierzesz, zależy wyłącznie od Ciebie. Jeśli chcesz wywołać swój folder /stylesheets zamiast /css , zrób to! Chcesz użyć Sassa? Miły! Kochasz jQuery? Świetnie! Nienawidzisz tego? To też jest w porządku! Pattern Lab istnieje po prostu po to, aby łączyć ze sobą twoje wzorce i unikać wszelkich podejmowanych przez ciebie decyzji frontendowych. Możesz nawet skonfigurować sposób zarządzania zasobami, gdy przemieszczają się one od source/ do public/ .

Wybierz własną przygodę: konwencje nazewnictwa i konfiguracja

Projektowanie atomowe jest pomocnym modelem mentalnym do myślenia o konstruowaniu systemów projektowania interfejsu użytkownika, ale z pewnością nie jest to sztywny dogmat. Ważne jest, aby wybrać nazewnictwo, które pomoże Twojemu zespołowi mówić tym samym językiem i dobrze współpracować.

Konwencje nazewnictwa Pattern Lab, podobnie jak większość aspektów oprogramowania, są całkowicie konfigurowalne. Podczas gdy patterns/ foldery Pattern Lab są domyślnie ustawione na „atomy”, „molekuły”, „organizmy”, „szablony” i „strony”, możesz dowolnie modyfikować, usuwać lub dodawać do swoich pragnień. Na przykład, gdybyśmy mieli odtworzyć taksonomię systemu projektowania Predix firmy GE — która składa się z zasad, podstaw, komponentów, szablonów, funkcji i aplikacji — ustrukturyzowalibyśmy katalog /source/_patterns/ Pattern Lab w następujący sposób:

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

Pattern Lab został zaprojektowany tak, aby był zgodny z Twoim przepływem pracy, a nie na odwrót.

Ustalenie kierunku projektowania

Nawet podczas pierwszych dni lub godzin projektu każdy ma coś do wniesienia do Twojego Laboratorium Wzorców. To czas na odkrywanie, zastanawianie się i tworzenie wyrównania. Każda rola prowadzi inne działania, ale ich wyniki i wkład są ze sobą powiązane. Każdy pompuje osobną oponę pojazdu, która zawiezie wszystkich do celu.

Definiowanie lo-fidelity IA w Pattern Lab

Wczesne prace projektowe UX obejmują określenie architektury informacji aplikacji. Zamiast od razu sięgać po narzędzia szkieletowe o wysokiej wierności, które mają tendencję do przedwczesnego definiowania układów i funkcji technicznych, lepiej jest tworzyć szkice lo-fi, które określają, co dzieje się na konkretnym ekranie iw jakiej ogólnej kolejności. Ta praca może przybrać formę szkiców na serwetkach, list punktowanych lub arkuszy kalkulacyjnych. Ponieważ Pattern Lab obsługuje podstawowe znaczniki, możliwe jest szybkie przetłumaczenie tych diagramów odwołań do zawartości do przeglądarki. W celu przeprojektowania Banku Żywności w Pittsburghu wycięliśmy każdy szablon przy użyciu tego podejścia.

Tak więc kod szablonu strony głównej, znaleziony w /source/_patterns/templates/homepage.mustache , wygląda tak:

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

Dołączamy wzorzec nagłówka i stopki, a następnie po prostu odcinamy zawartość, którą spodziewamy się umieścić na tej stronie.

Przechwytywanie decyzji dotyczących projektowania wizualnego

Wczesne prace związane z projektowaniem wizualnym obejmują eksplorację typografii, palet kolorów i innych aspektów wizualnej marki. Historycznie rzecz biorąc, projektanci mogli przeskoczyć do tworzenia wysokiej jakości, zorientowanych na komputer makiety Photoshopa, projektanci mają teraz przydatne narzędzia, takie jak kafelki stylów, Typecast i kolaże elementów, aby ustalić kierunek projektowania wizualnego bez uciekania się do przedwczesnych kompozycji o wysokiej wierności.

W miarę podejmowania decyzji dotyczących palet kolorów i parowania czcionek, Pattern Lab może rejestrować wyniki tych decyzji projektowych, zapewniając, że zespół projektantów i programistów nie generuje przypadkowo 50 odcieni szarości.

Jak zostać szefem kuchni przygotowującej frontend w laboratorium wzorców

A potem jest kod frontendu. Na tych wczesnych etapach projektu programiści frontend mogą ulec pokusie, aby czekać, aż projektanci wymyślą kierunek, zanim zagłębią się w kod. Ale tego typu myślenie uniemożliwia projektantom i programistom wzajemną synchronizację i uniemożliwia prawdziwą współpracę.

Podobnie jak szefowie kuchni w restauracji, programiści mają ogromną okazję do pracy nad przygotowaniem wzorów i kodu, które ostatecznie staną się ostatecznym systemem projektowania. We wczesnych dniach projektu programiści mogą rozpocząć odcinanie wzorców i importowanie zasobów do Pattern Lab, wcześnie przygotowując rzeczy, aby projektanci i programiści mogli spędzać więcej czasu na rzeczywistej współpracy nad projektowaniem i budowaniem interfejsu użytkownika.

Palety kolorów, prawdziwa kopia i układ muszą jeszcze zostać ustalone, ale to nie powinno powstrzymywać programistów przed tworzeniem szkieletów, które obsługują szkielety treści. Weź wzór bohatera, na przykład:

Ten wzorzec zawiera inne wzorce, co jest potężnym sposobem na wykorzystanie mniejszych elementów interfejsu w coraz większych strukturach. Oto znacznik dla 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-->

Kod podwójnego nawiasu klamrowego ( {{}} ) to kod szablonowy Moustache, który pozwala nam definiować dynamiczną zawartość i umieszczać wzorce wewnątrz siebie. Na przykład kod {{> atoms-hero-img }} mówi Pattern Lab, aby szukał atomu o nazwie „hero-img” i uwzględniał go we wzorcu. Samą jednostkę bohatera można następnie włączyć do bardziej złożonych wzorów, stosując tę ​​samą konwencję dołączania za pomocą następującej: {{> molecules-hero }} .

To rosyjskie podejście do dołączania wzorców z lalką zagnieżdżającą pozwala, aby baza kodu była ładna i sucha, co oznacza, że ​​jeśli dokonasz edycji dowolnego konkretnego wzorca, gdziekolwiek ten wzorzec zostanie uwzględniony, zostanie automatycznie zaktualizowany. Dzięki temu Twoje projekty i baza kodu będą zsynchronizowane i spójne. Co więcej, ta ciągła budowa wzorców może w krótkim czasie dostarczyć prawie kompletnych interfejsów!

Podwijamy rękawy

Architektura informacji zaczęła nabierać kształtu, ustalono początkowy kierunek estetyczny, a powstające wzorce zostały usunięte w Pattern Lab. Teraz zespół może teraz wspólnie zagłębić się w tworzenie systemu projektowania interfejsów na dobre. Porozmawiajmy o tym, jak używać Pattern Lab, aby zmienić niejasne poczucie kierunku w piękny, funkcjonalny, przemyślany i kompletny system projektowania.

Projektowanie z wykorzystaniem danych dynamicznych

Jedną z ważnych koncepcji projektowania atomowego są różnice między szablonami a stronami. Szablony definiują podstawową strukturę treści interfejsu użytkownika, podczas gdy strony są konkretnymi wystąpieniami tych szablonów, które zastępują tę strukturę treści rzeczywistą reprezentatywną treścią. Oba są niezbędne do dokumentowania parametrów treści, a także do pokazywania wzorców projektowych w działaniu i wypełniania rzeczywistą treścią.

Jedną z najpotężniejszych funkcji Pattern Lab jest możliwość zamiany różnych reprezentatywnych treści na wzorce interfejsu użytkownika, aby zapewnić, że poradzą sobie z dynamiczną naturą treści. Co się stanie, jeśli Twój użytkownik nie prześle zdjęcia profilowego? Co się stanie, jeśli użytkownik ma w koszyku 13 produktów w porównaniu z 2 przedmiotami? Co się stanie, jeśli jeden z tych produktów ma 14 potencjalnych odmian? Co się stanie, jeśli tytuł posta na blogu zawiera 400 znaków? Zwrócić użytkownika? Użytkownik po raz pierwszy? Co jeśli artykuł nie zawiera komentarzy? A co jeśli ma siedem warstw zagnieżdżonych komentarzy? Co zrobić, jeśli musimy wyświetlić pilną wiadomość na desce rozdzielczej, gdy ich konto zostanie zhakowane? Pattern Lab pozwala manipulować danymi w celu wyrażenia dowolnej liczby różnych stanów interfejsu użytkownika i wariantów dowolnego szablonu.

Dane specyficzne dla strony

Początkowe dane w Pattern Lab są przechowywane w pliku o nazwie /source/_data/data.json , który zawiera dane, które wzorce będą początkowo wykorzystywać do wyświetlenia w przewodniku stylu i widokach szablonu. Twój domyślny data.json może wyglądać mniej więcej tak:

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

Możesz odwoływać się do tych fragmentów danych we wzorcach (tj. włączając {{ headline.short }} we wzorcu), aby uzyskać takie wyniki:

Na poziomie strony chcemy zastąpić te obrazy w skali szarości i tekst zastępczy lorem ipsum rzeczywistą treścią. Aby to osiągnąć, utworzymy nowy plik tuż obok /source/_patterns/pages/homepage.mustache o nazwie homepage.json , gdzie możemy nadpisać początkowe dane zdefiniowane w `data.json. To może wyglądać mniej więcej tak:

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

Powoduje to interfejs użytkownika, który wygląda tak:

Pseudo-wzory

Nasze systemy projektowe muszą być elastyczne i dostosowywać się do rzeczywistości treści zawartych w naszych aplikacjach. Musimy jednocześnie uwzględnić najlepsze sytuacje, najgorsze i wszystko pomiędzy.

Wyrażanie tych odmian interfejsu użytkownika w statycznych narzędziach do projektowania jest ćwiczeniem z nudy i nadmiarowości, co może wyjaśniać, dlaczego rzadko są one projektowane. Ale funkcja pseudowzorów w Pattern Lab pozwala nam wyrażać (czasem szalenie) różne scenariusze za pomocą zaledwie kilku zmian w naszych danych.

Załóżmy, że tworzymy aplikację śledzącą wędrówki, której pulpit nawigacyjny wyświetla listę statystyk wędrówek: pokonana wysokość, liczba przebytych szlaków, pokonane kroki i tak dalej. Dla aktywnego użytkownika, który konsekwentnie wprowadza treści do aplikacji, interfejs użytkownika może wyglądać mniej więcej tak:

W /source/_patterns/pages/dashboard.json nasze dane wyglądałyby mniej więcej tak:

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

Dzięki tym danym Pattern Lab jest w stanie wypełnić interfejs użytkownika bogactwem wygenerowanych treści.

Jednak ten scenariusz może nie być tak powszechny. Na każdego ambitnego użytkownika, który poświęca czas na wypełnienie każdego pola i podłączenie każdej dostępnej aplikacji, prawdopodobnie znajdą się dziesiątki zwykłych użytkowników, którzy nie wypełniają wszystkich pustych miejsc i korzystają ze wszystkich funkcji aplikacji. Zresztą w pewnym momencie podróży każdego użytkownika interfejs jest zupełnie nowy! Przedstawmy te ważne wariacje za pomocą funkcji pseudowzorów w Pattern Lab.

W naszym katalogu /source/_patterns/pages/ możemy utworzyć nowy pseudowzorzec o nazwie dashboard~new-user.json . Stworzy to kolejną instancję strony, która dziedziczy wszystkie dane z dashboard.json , ale także pozwoli nam na dalszą modyfikację lub rozszerzenie danych. W przypadku dashboard~new-user.json możemy nadpisać fragmenty danych, aby zademonstrować, jak może wyglądać nowy interfejs użytkownika:

A oto dane, które dodajemy do pliku, aby wykonać ten interfejs użytkownika:

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

Zastępując niektóre wartości w dashboard.json jesteśmy w stanie modyfikować zawartość i włączać/wyłączać poszczególne wzorce.

W innym przypadku może być konieczne zademonstrowanie, jak wygląda interfejs użytkownika, gdy wystąpi problem z zabezpieczeniami lub inny problem z kontem użytkownika. Możemy utworzyć dashboard~hacked.json , aby utworzyć następujący interfejs użytkownika:

Większość danych z dashboard.json pozostanie taka sama, ale dodamy następujące, aby utworzyć komunikat o błędzie:

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

Parametry wzoru

Zdarzają się przypadki korzystania z Pattern Lab, które gwarantują pełne pseudo-wzorce, jak pokazano powyżej. Ale czasami może być konieczne dostosowanie lub nadpisanie tylko jednej wartości danych we wzorcu, pozostawiając resztę do obsługi innych dynamicznych wzorców wyświetlania. W takich przypadkach preferowanym narzędziem są parametry szyku. Parametry wzorca to prosty mechanizm zastępowania zmiennych w dołączonym wzorcu. Ograniczają się one do zastępowania zmiennych we wzorcu dołączonym i tylko we wzorcu dołączonym. Rozważ ten fragment szablonu szczegółów:

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

który zawiera wzorzec listy mediów sekcji.

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

Jak się dowiedzieliśmy, bloki danych {{sectionTitle}} zarówno dla najnowszych postów, jak i polecanych osób zostaną wypełnione z dowolnego towarzyszącego pliku .json, z /source/_data/data.json jako globalną rezerwą. Wielokrotnie dołączamy jednak jeden wzorzec i możemy chcieć szybko dostarczyć unikalne dane do każdego wzorca bez konieczności tworzenia tych kluczy w naszym .json. Możemy zmienić zawarte w sekcji listy mediów na następujące:

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

Te dwa organizmy będą teraz używać zdefiniowanej tutaj zmiennej sectionTitle podczas renderowania. Parametry wzorca są potężne, ale są obsługiwane tylko przez PHP i Node Mustache PatternEngine. Inne języki szablonów zapewniają lepsze rozwiązania tego problemu. Zapoznaj się z dokumentacją, aby przeczytać pełne chude parametry parametrów.

Modyfikatory stylu

Często zdarza się, że chcesz wyświetlać warianty stylistyczne tego samego wzoru, takie jak kolorowe przyciski mediów społecznościowych lub stany komponentów. Rozszerzenie skrótu obejmuje składnię, styleModifiers dostarczają dodatkowe klasy do wzorca. Pod warunkiem, że skonstruujesz wzorzec block-media z {{ styleModifier}} w atrybucie 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 -->

Dołączenie tego wzorca z dwukropkiem po nazwie ustawia styleModifier:

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

dałoby taki tag kotwicy:

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

styleModifiers można łączyć w celu dostarczenia wielu klas, używając potoku (|) jako ogranicznika.

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

Pomiędzy pseudowzorami, parametrami wzorców i styleModifiers , Pattern Lab ułatwia zademonstrowanie czasami szalenie różnych odmian interfejsu użytkownika, jednocześnie zachowując bazową bazę kodu DRY w procesie.

Iteracja w stylu

Kluczowym elementem przepływu pracy opartego na wzorcach jest uwzględnienie iteracji i rozpoznanie, że wzorce i projekt będą nadal ewoluować. Części ukształtują całość, całość ukształtuje części, a w wyniku tego procesu powstanie połączony system elementów.

Inną naturalną konsekwencją tego procesu jest to, że znacznie wcześniej punkt produkcji przechodzi z rąk projektantów UX i wizualnych w ręce programistów frontend. Zamiast marnować dużo cennego czasu na tworzenie mnóstwa wysokiej jakości kompozycji i szczegółowych makiet, prace projektowe można przenieść ze statycznych dokumentów do przeglądarki, w której Twój zespół może szybciej zająć się realiami sieci.

Z Pattern Lab jako wodopoju dla całego zespołu, projektanci mogą lepiej zrozumieć, w jaki sposób decyzje podjęte w jednym obszarze wpływają na inne obszary.

Testowanie rzutni z ish.

Ważne jest, aby nasze komponenty, a także nasze strony, były elastyczne w całym spektrum rozdzielczości. Pieczenie narzędzia do zmiany rozmiaru rzutni, takiego jak ish. w bibliotekę wzorów zapewnia, że ​​każdy element wygląda i działa pięknie przy dowolnym rozmiarze ekranu. Poświęcenie czasu na stworzenie w pełni elastycznych wzorców lepiej przygotuje nas na przyszłość, gdy zapytania o elementy i komponenty sieciowe będą w pełni dojrzałe (nie możemy się doczekać!).

Dzięki temu, że te narzędzia widoku są wypiekane bezpośrednio w środowisku frontendowym, projektanci i programiści mogą gromadzić się wokół Pattern Lab, aby określić, gdzie wstawić punkty przerwania do projektu. Co więcej, klienci, kontrola jakości i inni współpracownicy mogą wskazać konkretne obszary, w których interfejs użytkownika rozpada się z dowolnego powodu.

Gotowy do uruchomienia

Projekt ładnie się układa, ale zanim będzie mógł zostać uruchomiony w świecie, trzeba wszystko zaostrzyć, przetestować na różnych przeglądarkach/urządzeniach i odpowiednio udokumentować. Porozmawiajmy o tym, w jaki sposób Pattern Lab może pomóc w przygotowaniu kodu i dokumentacji systemu projektowania na czas największego zainteresowania!

Przystępna dokumentacja wzoru

Niektóre wzorce mogą przedstawiać się jako samodokumentujące się, ale wzorzec często wymaga kontekstu lub dodatkowych informacji, aby wszystko było krystalicznie jasne. Rzeczy takie jak definicje. wskazówki dotyczące użytkowania, rozważania, zasoby i przykładowe obrazy mogą i powinny znaleźć się w dokumentacji wzorców. Dokumentacja Pattern Lab 2 wykorzystuje Markdown z przednią materią YAML do tworzenia tej dokumentacji. Plik markdown towarzyszy wzorcowi (na przykład media-object.md musi znajdować się tuż obok media-object.mustache ) i można go sformatować w następujący sposób:

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

Dokumentacja Markdown oznacza, że ​​IA, projektanci wizualni, stratedzy treści, ludzie biznesu itp. mogą łatwiej przyczynić się do tworzenia żywej dokumentacji. Właściciele produktów mogą nawet przyciąć uwagi dotyczące funkcjonalności dla nowych wzorów, zanim wzór zostanie nawet utworzony. Planowane są ulepszenia, aby uczynić dokumentację wzorców bardziej wydajnym, co dodatkowo sprawi, że Pattern Lab stanie się wiecznie zieloną przestrzenią dla Twojego zespołu.

Pochodzenie dla łatwiejszej kontroli jakości

Przyglądając się różnym wzorcom w bibliotece, brak kontekstu może utrudnić rozeznanie, gdzie faktycznie są wykorzystywane. Definiowanie i opisywanie cech wzorców to jedno, ale istnieje możliwość podania dodatkowych informacji kontekstowych na temat wzorców interfejsu użytkownika.

Dzięki rosyjskiej naturze lalki zagnieżdżającej się w Pattern Lab, może wyświetlać, jakie wzory składają się na dany komponent, a także pokazywać, gdzie ten wzór jest używany w systemie projektowania.

Dzięki tej funkcji projektanci i programiści mają informacje kontekstowe, które są przydatne podczas kontroli jakości i/lub wprowadzania zmian w systemie projektowania. Gdybyśmy chcieli wprowadzić zmiany do określonego wzorca, takie jak podwojenie rozmiaru obrazu lub dodanie dodatkowego elementu tekstowego, od razu wiedzielibyśmy, które wzorce i szablony wymagają ponownego przetestowania i kontroli jakości, aby upewnić się, że nic się nie zepsuje wraz ze zmianami . 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.

Wzorce Lab Edycje

Wersje umożliwiają zespołom i agencjom łączenie wszystkich funkcji, które obsługują ich unikalne przepływy pracy, z Pattern Lab. Edycja może stać się punktem wyjścia dla wszystkich Twoich projektów, podczas gdy zespoły współdzielą i aktualizują funkcjonalność. Wersja Node Pattern Lab używa npm do pobierania oddzielnych komponentów, podczas gdy wersja PHP używa Composera, aby pomóc Ci rozpocząć projekty w prosty i ustandaryzowany sposób.

Rdzeń laboratorium wzorców

Core to wnętrzności Pattern Lab i udostępnia wszystkie inne funkcje. Ponieważ Core jest samodzielny, zespół może aktualizować i być na bieżąco z najnowszymi funkcjami Pattern Lab bez zakłócania reszty projektu.

Zestawy startowe

Masz sprawdzony zestaw standardowych kodów, od których zaczynasz każdy projekt? Być może wspólny zestaw podstawowych wzorców, wstawek Sass i bibliotek JavaScript, które są Twoimi podstawowymi narzędziami? Zestaw StarterKit jest idealny do łączenia tych zasobów w schemat, który zapewnia, że ​​każdy projekt zaczyna się we właściwy sposób.

Istnieje już kilka zestawów startowych, które umożliwiają rozpoczęcie projektu, niezależnie od tego, czy szukasz pustego początku, zacznij od wersji demonstracyjnej, która prezentuje funkcje Pattern Lab, lub zacznij od popularnego frameworka, takiego jak Bootstrap, Foundation lub Material Design. Możesz też tworzyć własne, które mogą być w pełni kontrolowane przez wersję, dzięki czemu zestaw startowy Twojego zespołu może ewoluować wraz z Twoimi narzędziami.

Import zestawu startowego to tylko kilka naciśnięć klawiszy po instalacji. Ostatecznie ta funkcja zostanie wbudowana w fazę poinstalacyjną, tak jak w przypadku Pattern Lab PHP za pośrednictwem kompozytora.

Zestawy przewodników stylów

StyleguideKits to front-end Pattern Lab. Nazywamy to „widzem”. StyleguideKits pozwalają agencjom i organizacjom opracowywać niestandardowe, markowe interfejsy użytkownika Pattern Lab, aby pokazać swoje wzory.

Silniki wzorcowe

PatternEngine to silniki szablonów, które są odpowiedzialne za parsowanie wzorców i przekształcanie ich w HTML. PatternEngine daje Pattern Lab Core elastyczność w renderowaniu wielu różnych typów języków szablonów. Obecne silniki PatternEngine obejmują Mustache i Twig, a inne, takie jak Handlebars i Underscore, są w fazie rozwoju. I nic Cię nie powstrzyma przed dodaniem kolejnego silnika szablonów do Pattern Lab.

Wtyczki

Wtyczki umożliwiają programistom rozszerzenie Pattern Lab Core i innych części ekosystemu. Na przykład wersja PHP Pattern Lab zawiera wiele wtyczek, takich jak Automatyczne ponowne ładowanie przeglądarki, Dziedziczenie danych i Faker. Architektura Pattern Lab pozwala programistom modyfikować dane na różnych etapach, dodawać własne polecenia lub reguły wzorców lub zmieniać front-end w celu modyfikacji i rozszerzenia możliwości Pattern Lab

Oglądaj moją przemowę

Wypróbuj Pattern Lab 2 i zaangażuj się

Tworzenie interfejsów użytkownika opartych na wzorcach i wyrafinowanych systemów projektowania jest ważniejsze niż kiedykolwiek. Pattern Lab 2 jest dobrze wyposażony do tworzenia i utrzymywania systemów projektowania atomowego i może służyć jako centrum systemu projektowania na każdym etapie przepływu pracy zespołu.

Jeśli Twój zespół zdecyduje się pobrać Pattern Lab 2 i spróbować, bardzo chcielibyśmy usłyszeć od Ciebie! Dołącz do rozmowy, zadając pytania na Gitterze, otwieraj problemy, jeśli masz z czymś problem, oraz pomóż proponować i omawiać nowe funkcje.

A jeśli robisz fajne rzeczy z Pattern Lab 2, podziel się swoimi spostrzeżeniami! Styleguides.io zawiera ponad 150 przykładów bibliotek wzorów, więc dodaj do miksu swoje Laboratorium wzorów. Piękno projektów internetowych i open source polega na tym, że cała społeczność może uczyć się na Twoich doświadczeniach i budować na tej wiedzy.

Jesteśmy podekscytowani, widząc, jakie wspaniałe rzeczy tworzysz!