Cara Membuat Dan Memelihara Sistem Desain Atom Dengan Lab Pola 2

Manfaat sistem desain UI sekarang sudah terkenal. Mereka mengarah pada pengalaman pengguna yang lebih kohesif dan konsisten. Mereka mempercepat alur kerja tim Anda, memungkinkan Anda meluncurkan lebih banyak barang sekaligus menghemat banyak waktu dan uang dalam prosesnya . Mereka membangun kosakata umum antar disiplin, menghasilkan alur kerja yang lebih kolaboratif dan konstruktif.

Mereka membuat pengujian browser, perangkat, kinerja, dan aksesibilitas lebih mudah. Dan mereka berfungsi sebagai dasar yang kuat untuk dibangun dari waktu ke waktu, membantu organisasi Anda untuk lebih mudah beradaptasi dengan lanskap web yang terus berubah.

Untuk membuat sistem ini, kita harus membuat Pustaka Pola di Penurunan Harga. Kita perlu memecah antarmuka kita menjadi bagian-bagian yang lebih kecil, tetapi kita secara bersamaan perlu memastikan bagian-bagian itu bersatu untuk membentuk keseluruhan yang indah dan fungsional. "Desain atom" adalah model mental yang membantu kita melakukan hal itu, dan Lab Pola adalah seperangkat alat yang membantu menghidupkan sistem desain atom ini.

Bacaan Lebih Lanjut tentang SmashingMag:

• Mengambil Perpustakaan Pola Ke Tingkat Selanjutnya
• Pola Desain Responsif Cerdas
• Tinjauan Mendalam Tentang Alat Panduan Gaya Hidup
• Temui Pola Desain Front-End Inklusif
  

Setelah lebih dari dua tahun bekerja keras, dengan senang hati kami mengumumkan Pattern Lab 2! Didesain ulang sepenuhnya, Pattern Lab 2 adalah rangkaian alat sumber terbuka untuk membantu Anda dan tim Anda membuat dan memelihara sistem desain UI yang bijaksana . Pada intinya, ini adalah generator situs statis yang menyatukan pola dan memungkinkan Anda mendesain dengan data dinamis.

Beberapa sorotan dari versi baru meliputi:

• Inti yang benar-benar direstrukturisasi yang mendukung lebih banyak bahasa, mesin templating, dan format data
• Mendukung Penurunan Harga untuk dokumentasi pola
• Menambahkan dukungan YAML serta JSON untuk mengelola data dinamis
• Plugin untuk memperluas dan meningkatkan fungsionalitas Pattern Lab
• UI frontend bertema, dapat diperpanjang, didesain ulang

Tetapi lebih dari segalanya, Pattern Lab 2 telah dirancang dan dibangun sehingga tim Anda dapat menggunakannya secara efektif selama setiap fase proses sistem desain Anda, dari awal hingga pemeliharaan jangka panjangnya.

Lab Pola Saat Proyek Dimulai

Tim Anda telah ditugaskan untuk membuat aplikasi baru dan sistem desain yang mendasarinya. Sekali waktu, desainer UX tim Anda mungkin bersembunyi di sebuah ruangan untuk mendefinisikan produk dengan cara monolitik, wireframe beranotasi berat. Setelah disetujui, mereka akan diteruskan ke desainer visual yang kemudian akan menerapkan warna, tipografi, dan tekstur untuk menghidupkan gambar rangka. Setelah homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd akhirnya disetujui, desain dikirim ke pengembang frontend, yang dengan cepat menangis karena desain berisi banyak tata letak yang tidak realistis, konten pengguna yang tidak mungkin (setiap nama pengguna hanya 4 karakter—betapa nyamannya!) , dan bunga rampai wajah font dan pola desain yang tidak kongruen.

Proses desain lempar-over-the-wall sudah mati dan hilang. Kolaborasi, iterasi, dan pengembangan cepat sangat penting untuk mengatasi lanskap web yang terus berubah dan beragam ini. Kita perlu masuk ke browser sesegera mungkin dan menguji desain di bawah variabel dunia nyata seperti daya tanggap, kinerja, ergonomi, dan gerakan. Itulah mengapa sangat penting untuk memperlakukan pengembangan front-end sebagai bagian inti dari proses desain, dan mengapa sangat penting untuk membuat desainer dan pengembang frontend bekerja sama secara erat. Pada akhirnya, kita semua mengerjakan UI yang sama.

Menyiapkan instance Lab Pola pada Hari 1 proyek Anda dapat membuat lokakarya bersama — atau laboratorium, jika Anda mau — dilengkapi dengan alat desain dan pengembangan, pendingin air, papan tulis, dan mikroskop. Ini menyediakan tempat bagi setiap disiplin untuk menyumbangkan perspektif mereka pada sistem desain pernapasan yang hidup. Dalam arti sebenarnya, Lab Pola dapat berfungsi sebagai pusat proyek sistem desain Anda, meminimalkan kebutuhan untuk membuat gambar rangka yang terlalu bertele-tele, kompilasi statis bergaris merah, dan artefak statis kikuk lainnya.

Kedengarannya bagus, bukan? Mari kita telusuri bagaimana Anda dapat menjalankan Lab Pola pada Hari 1 proyek Anda.

Pattern Lab 2 hadir dalam rasa PHP dan Node. Tim, pilih petualangan Anda! Beberapa proyek menghasilkan pilihan tumpukan teknologi yang jelas. Yang lain turun ke keahlian tim atau prioritas lingkungan. Apapun platformnya, Pattern Lab 2 siap membantu Anda dan tim Anda berkolaborasi dalam membangun aplikasi dan sistem desain baru Anda. Apa pun pilihan platform Anda, ketahuilah bahwa dengan salah satu versi, Pattern Lab akan menghasilkan hasil yang hampir sama — sama seperti mobil dengan merek dan model yang berbeda, semuanya membawa Anda ke tujuan yang sama.

Menginstal Lab Pola

Setelah prasyarat yang sesuai diinstal, Anda akan siap untuk menginstal Lab Pola. Mari kita lihat cara menginstal Pattern Lab Node, tetapi perlu diingat bahwa instruksi PHP juga tersedia dan serupa.

Dari jendela terminal Anda, navigasikan ke direktori tempat Anda ingin menginstal Lab Pola. Kemudian ketik perintah berikut:

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

Menjalankan npm install akan menurunkan dependensi terbaru, dan gulp patternlab gulp patternlab:serve akan menghasilkan dan menghosting sendiri Pattern Lab, membuka frontend di browser default Anda. Dan jika Anda tidak ingin mengkloning repositori git secara langsung, Anda juga dapat mengunduh rilis terbaru dan kemudian melakukan langkah 2 dan 3.

Dengan Pattern Lab yang aktif dan berjalan, tim Anda kini memiliki hub untuk merancang, mengembangkan, dan meninjau sistem desain Anda yang akan segera dibuat.

Sistem File Lab Pola

Pattern Lab mengkompilasi semua yang ditemukan di folder /source proyek Anda ke dalam file HTML statis yang ada di folder /public . Output ini kemudian dapat ditampilkan atau dikonsumsi secara individual atau di dalam frontend panduan gaya. Mari kita lihat sistem file Pattern Lab dan apa yang ada di dalam source/ :

• _annotations/ - tempat tim Anda dapat menentukan anotasi langsung untuk mendukung dokumentasi UI Anda
• _data/ - tempat data global yang digunakan untuk merender pola Anda berada.
• _meta/ - tempat informasi <head> dan foot (yang memesan semua pola Anda) berada.
• _patterns/ - tempat pola, dokumentasi pola, dan data khusus pola Anda berada.
• css - tempat stylesheet Anda berada
• gambar - tempat gambar Anda dapat berada
• js - tempat javascript Anda dapat berada

Patut ditekankan bahwa Lab Pola tidak memaksakan konvensi frontend atau ketergantungan produksi apa pun kepada Anda. Bagaimana Anda memutuskan untuk menyusun folder Anda dan teknologi mana yang Anda pilih sepenuhnya terserah Anda. Jika Anda ingin memanggil folder Anda /stylesheets alih-alih /css , lakukan saja! Ingin menggunakan Sass? Bagus! Suka jQuery? Besar! membencinya? Itu juga bagus! Lab Pola hanya ada untuk menyatukan pola Anda dan menghindari keputusan frontend yang Anda buat. Anda bahkan dapat mengonfigurasi bagaimana aset Anda dikelola saat berpindah dari source/ ke public/ .

Pilih Petualangan Anda Sendiri: Konvensi Penamaan dan Konfigurasi

Desain atom adalah model mental yang membantu untuk berpikir tentang membangun sistem desain UI, tetapi itu jelas bukan dogma yang kaku. Sangat penting untuk memilih nomenklatur yang membantu tim Anda berbicara dalam bahasa yang sama dan bekerja sama dengan baik.

Konvensi penamaan Pattern Lab, seperti kebanyakan aspek perangkat lunak, sepenuhnya dapat dikonfigurasi. Sementara patterns/ folder Lab Pola default ke "atom", "molekul", "organisme", "templat", dan "halaman, Anda bebas untuk memodifikasi, menghapus, atau menambah keinginan hati Anda. Misalnya, jika kita membuat ulang taksonomi sistem desain Predix GE — yang terdiri dari Principles, Basics, Components, Templates, Features, dan Applications — kita akan menyusun direktori /source/_patterns/ Pattern Lab menjadi sebagai berikut:

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

Lab Pola dirancang agar sesuai dengan alur kerja Anda, bukan sebaliknya.

Menetapkan Arah Desain

Bahkan selama hari atau jam pertama proyek, setiap orang memiliki sesuatu untuk disumbangkan ke Lab Pola Anda. Ini adalah waktu untuk mengeksplorasi, mencari tahu, dan menciptakan keselarasan. Setiap peran melakukan aktivitas yang berbeda, tetapi output dan inputnya saling terkait. Masing-masing memompa ban kendaraan yang terpisah yang akan membawa Anda semua ke tujuan Anda.

Mendefinisikan IA lo-fidelitas di Lab Pola

Pekerjaan desain UX awal melibatkan penentuan arsitektur informasi aplikasi. Daripada segera meraih alat gambar rangka dengan ketelitian tinggi yang cenderung menentukan tata letak dan fungsionalitas teknis secara prematur, lebih baik membuat sketsa lo-fi yang menetapkan apa yang terjadi pada layar tertentu dan dalam urutan umum seperti apa. Karya ini dapat berupa sketsa serbet, daftar berpoin, atau spreadsheet. Karena Pattern Lab mendukung markup dasar, diagram referensi konten ini dapat segera diterjemahkan ke dalam browser dengan cepat. Untuk desain ulang Pittsburgh Food Bank, kami mematikan setiap template menggunakan pendekatan ini.

Jadi kode templat beranda, yang ditemukan di /source/_patterns/templates/homepage.mustache terlihat seperti ini:

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

Kami menyertakan pola header dan footer, dan kemudian cukup mematikan konten yang kami harapkan untuk disertakan di halaman ini.

Menangkap Keputusan Desain Visual

Pekerjaan desain visual awal melibatkan penjelajahan tipografi, palet warna, dan aspek lain dari merek visual. Secara historis, desainer mungkin melompat ke dalam pembuatan mockup Photoshop desktop-centric dengan kesetiaan tinggi, desainer sekarang memiliki alat yang bermanfaat seperti ubin gaya, Typecast, dan kolase elemen untuk menetapkan arah desain visual tanpa menggunakan comps prematur, kesetiaan tinggi.

Saat keputusan dibuat seputar palet warna dan pasangan font, Lab Pola dapat menangkap hasil dari keputusan desain tersebut, memastikan tim desain dan pengembangan tidak secara tidak sengaja menghasilkan 50 warna abu-abu.

Menjadi Koki Persiapan Frontend di Lab Pola

Dan kemudian ada kode frontend. Pada tahap awal proyek ini, pengembang frontend mungkin tergoda untuk duduk diam dan menunggu desainer memberikan arahan sebelum menyelami kode. Tetapi jenis pemikiran ini membuat desainer dan pengembang tidak sinkron satu sama lain dan mencegah kolaborasi sejati terjadi.

Seperti koki persiapan di restoran, pengembang memiliki peluang besar untuk mulai bekerja menyiapkan pola dan kode yang pada akhirnya akan menjadi sistem desain akhir. Pada hari-hari awal proyek, pengembang dapat mulai mematikan pola dan dan mengimpor aset ke Lab Pola, menyiapkan segala sesuatunya lebih awal sehingga desainer dan pengembang dapat menghabiskan lebih banyak waktu untuk benar-benar bekerja sama untuk merancang dan membangun UI.

Palet warna, salinan asli, dan tata letak belum ditetapkan, tetapi itu seharusnya tidak menghentikan pengembang untuk membangun struktur yang mendukung gambar rangka konten. Ambil pola pahlawan, misalnya:

Pola ini mencakup pola lain, yang merupakan cara ampuh untuk menggunakan elemen antarmuka yang lebih kecil ke dalam struktur yang lebih besar. Berikut markup untuk 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-->

Kode kurung kurawal ganda ( {{}} ) adalah kode templating Kumis, yang memungkinkan kita mendefinisikan materi dinamis dan menyertakan pola di dalam satu sama lain. Misalnya, kode {{> atoms-hero-img }} memberi tahu Lab Pola untuk mencari atom yang disebut “pahlawan-img” dan memasukkannya ke dalam pola. Unit pahlawan itu sendiri kemudian dapat dimasukkan ke dalam pola yang lebih kompleks menggunakan konvensi penyertaan yang sama menggunakan yang berikut: {{> molecules-hero }} .

Pendekatan boneka bersarang Rusia ini untuk memasukkan pola memungkinkan basis kode Anda tetap bagus dan KERING, artinya jika Anda mengedit pola tertentu, di mana pun pola itu disertakan akan diperbarui secara otomatis. Ini menjaga desain dan basis kode Anda tetap sinkron dan konsisten. Dan di atas semua itu, pembentukan pola yang terus-menerus ini dapat menghasilkan antarmuka yang hampir lengkap dalam waktu singkat!

Menggulung Lengan Kami

Arsitektur informasi telah mulai terbentuk, arah estetika awal telah ditetapkan, dan pola yang baru lahir telah dimatikan di Lab Pola. Sekarang tim sekarang dapat secara kolektif terjun ke dalam membangun sistem desain antarmuka dengan sungguh-sungguh. Mari kita bahas cara menggunakan Lab Pola untuk mengubah arah yang tidak jelas menjadi sistem desain yang indah, fungsional, bijaksana, dan lengkap.

Mendesain dengan Data Dinamis

Salah satu konsep penting dari desain atom adalah perbedaan antara template dan halaman. Template menentukan struktur konten yang mendasari UI, sedangkan halaman adalah contoh spesifik dari template yang menggantikan struktur konten tersebut dengan konten representatif nyata. Keduanya diperlukan untuk mendokumentasikan parameter konten sambil juga menunjukkan pola desain dalam tindakan dan diisi dengan konten nyata.

Salah satu fitur Pattern Lab yang paling kuat adalah kemampuan untuk menukar konten representatif yang berbeda ke dalam pola UI Anda untuk memastikan mereka dapat menangani sifat dinamis konten Anda. Bagaimana jika pengguna Anda tidak mengunggah gambar profil? Bagaimana jika pengguna memiliki 13 item di keranjang belanja versus 2 item? Bagaimana jika salah satu produk tersebut memiliki 14 variasi potensial? Bagaimana jika judul posting blog berisi 400 karakter? Kembalikan pengguna? Pengguna pertama kali? Bagaimana jika artikel tidak memiliki komentar? Atau bagaimana bila memiliki tujuh lapisan komentar bersarang? Bagaimana jika kita perlu menampilkan pesan penting di dasbor saat akun mereka diretas? Pattern Lab memungkinkan Anda untuk memanipulasi data untuk mengekspresikan sejumlah berbagai status UI dan varian dari template apa pun.

Data Khusus Halaman

Data awal di Lab Pola disimpan dalam file bernama /source/_data/data.json , yang berisi data yang awalnya akan digunakan pola untuk ditampilkan dalam panduan gaya dan tampilan template. data.json default Anda mungkin terlihat seperti ini:

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

Anda dapat mereferensikan potongan data ini dalam pola Anda (yaitu menyertakan {{ headline.short }} dalam suatu pola) untuk mencapai hasil seperti ini:

Pada tingkat halaman, kami ingin mengganti gambar skala abu-abu dan teks placeholder lorem ipsum dengan konten asli. Untuk mencapai ini, kita akan membuat file baru tepat di sebelah /source/_patterns/pages/homepage.mustache bernama homepage.json , di mana kita dapat mengganti data awal yang didefinisikan dalam `data.json. Itu mungkin terlihat seperti ini:

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

Ini menghasilkan UI yang terlihat seperti ini:

Pseudo-Pola

Sistem desain kami harus fleksibel dan beradaptasi dengan realitas konten yang ada di aplikasi kami. Kita perlu secara bersamaan memperhitungkan situasi kasus terbaik, terburuk, dan segala sesuatu di antaranya.

Mengekspresikan variasi UI ini dalam alat desain statis adalah latihan dalam kebosanan dan redundansi, yang mungkin menjelaskan mengapa mereka jarang dirancang. Tapi fitur pseudo-pattern Pattern Lab memungkinkan kita untuk mengartikulasikan (terkadang liar) skenario yang berbeda hanya dengan beberapa perubahan pada data kita.

Katakanlah kita sedang membuat aplikasi pelacakan pendakian yang dasbornya menampilkan daftar statistik pendakian: ketinggian yang didaki, jumlah jalur pendakian, langkah yang diambil, dan sebagainya. Untuk pengguna aktif yang secara konsisten memasukkan konten ke dalam aplikasi, UI mungkin terlihat seperti ini:

Di /source/_patterns/pages/dashboard.json , data kita akan terlihat seperti ini:

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

Dengan data ini, Lab Pola dapat mengisi UI dengan kekayaan konten yang dihasilkan pengguna ini.

Namun, skenario ini mungkin tidak terlalu umum. Untuk setiap pengguna ambisius yang meluangkan waktu untuk mengisi setiap bidang dan menghubungkan setiap aplikasi yang tersedia, kemungkinan ada lusinan pengguna biasa yang tidak mengisi setiap kolom dan memanfaatkan semua fitur aplikasi. Dalam hal ini, pada satu titik dalam perjalanan setiap pengguna, mereka benar-benar baru dalam antarmuka! Mari kita artikulasikan variasi penting ini menggunakan fitur pseudo-pattern Pattern Lab.

Di direktori /source/_patterns/pages/ kita, kita dapat membuat pola semu baru yang disebut dashboard~new-user.json . Ini akan membuat halaman lain yang mewarisi semua data dari dashboard.json , tetapi juga memungkinkan kita untuk memodifikasi atau memperluas data lebih lanjut. Dalam kasus dashboard~new-user.json , kami dapat mengganti bit data untuk menunjukkan seperti apa pengalaman pengguna baru:

Dan inilah data yang kami tambahkan ke file untuk mencapai UI ini:

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

Dengan mengganti beberapa nilai di dashboard.json kami dapat memodifikasi konten dan mengaktifkan/menonaktifkan pola tertentu.

Dalam contoh lain, kami mungkin perlu mendemonstrasikan seperti apa tampilan UI saat ada masalah keamanan atau masalah lain dengan akun pengguna. Kita dapat membuat pseudo-pattern dashboard~hacked.json untuk membuat UI berikut:

Sebagian besar data dari dashboard.json akan tetap sama, tetapi kami akan menambahkan yang berikut ini untuk membuat pesan kesalahan:

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

Parameter Pola

Ada kalanya menggunakan Lab Pola yang menjamin pola semu penuh, seperti yang diilustrasikan di atas. Namun terkadang Anda mungkin perlu mengubah atau mengganti hanya satu nilai data dalam suatu pola, membiarkan sisanya ditangani oleh pola tampilan dinamis lainnya. Untuk contoh ini, parameter pola adalah alat pilihan Anda. Parameter pola adalah mekanisme sederhana untuk mengganti variabel dalam pola yang disertakan. Mereka terbatas untuk mengganti variabel dalam pola yang disertakan dan hanya pola yang disertakan. Pertimbangkan kutipan template detail ini:

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

yang termasuk pola daftar media bagian.

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

Seperti yang telah kita pelajari, {{sectionTitle}} untuk kedua Postingan terbaru dan blok data Orang yang ditampilkan akan diisi dari setiap pendamping .json yang ada, dengan /source/_data/data.json sebagai cadangan global. Namun, kami menyertakan satu pola beberapa kali, dan mungkin ingin dengan cepat menyediakan data unik untuk setiap pola tanpa harus membuat kunci ini di .json kami. Kami dapat mengubah daftar media bagian yang disertakan menjadi berikut ini:

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

Kedua organisme ini sekarang akan menggunakan variabel sectionTitle yang ditentukan di sini saat merender. Parameter pola sangat kuat, tetapi hanya didukung oleh PHP dan Node Moustache PatternEngine. Bahasa template lain memberikan solusi yang lebih baik untuk masalah ini. Lihat dokumen untuk membaca parameter parameter kurus penuh.

pengubah gaya

Seringkali Anda ingin menampilkan varian gaya dari pola yang sama, seperti tombol media sosial berwarna atau status komponen. Ekstensi ke singkatan termasuk sintaks, styleModifiers memasok kelas tambahan ke suatu pola. Asalkan Anda membuat block-media pola dengan {{ styleModifier}} dalam atribut 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 -->

Menyertakan pola ini dengan titik dua setelah nama menyetel styleModifier:

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

akan menghasilkan tag jangkar seperti ini:

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

styleModifiers dapat digabungkan untuk memasok beberapa kelas, menggunakan pipa (|) sebagai pembatas.

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

Di antara pseudo-patterns, pattern parameter, dan styleModifiers , Pattern Lab mempermudah untuk mendemonstrasikan variasi UI yang terkadang sangat berbeda sambil menjaga basis kode yang mendasari KERING dalam prosesnya.

Iterasi dalam Gaya

Elemen kunci dari alur kerja berbasis pola adalah merangkul iterasi dan mengenali bahwa pola dan desain akan terus berkembang. Bagian-bagian akan membentuk keseluruhan, keseluruhan akan membentuk bagian-bagian, dan sistem komponen yang saling berhubungan akan muncul sebagai hasil dari proses ini.

Konsekuensi alami lainnya dari proses ini adalah titik produksi bergeser dari tangan UX dan desainer visual ke tangan pengembang frontend jauh lebih awal. Daripada menghabiskan banyak waktu berharga untuk membuat banyak comp fidelitas tinggi dan gambar rangka mendetail, pekerjaan desain dapat berpindah dari dokumen statis ke browser tempat tim Anda dapat lebih cepat menangani realitas web.

Dengan Lab Pola sebagai sumber air bagi seluruh tim, desainer dapat lebih memahami bagaimana keputusan yang dibuat di satu area memengaruhi area lain.

Pengujian viewport dengan ish.

Sangat penting bagi komponen kami, serta halaman kami, untuk menjadi fleksibel di seluruh spektrum resolusi. Memanggang alat pengubahan ukuran area pandang seperti ish. ke dalam pustaka pola memastikan setiap elemen terlihat dan berfungsi dengan indah pada ukuran layar apa pun. Meluangkan waktu untuk membuat pola yang sepenuhnya fleksibel akan lebih mempersiapkan kita untuk masa depan ketika kueri elemen dan komponen web telah sepenuhnya matang (kita tidak bisa menunggu!).

Dengan memiliki alat viewport ini dimasukkan langsung ke lingkungan frontend, desainer dan pengembang dapat berkerumun di sekitar Pattern Lab untuk menentukan tempat untuk memasukkan breakpoint ke dalam desain. Selain itu, klien, QA, dan kolega lainnya dapat menunjukkan dengan tepat area tertentu di mana UI berantakan karena alasan apa pun.

Siap Diluncurkan

Proyek ini berjalan dengan baik, tetapi sebelum dapat diluncurkan ke dunia, banyak hal perlu diperketat, diuji lintas-browser/perangkat, dan didokumentasikan dengan baik. Mari kita bicara tentang bagaimana Pattern Lab dapat membantu menyiapkan kode sistem desain dan dokumentasi Anda untuk prime time!

Dokumentasi Pola yang Dapat Didekati

Beberapa pola mungkin menampilkan diri sebagai dokumentasi diri, tetapi sebuah pola sering kali memerlukan beberapa konteks atau informasi tambahan untuk membuat semuanya menjadi jelas. Hal-hal seperti definisi. pedoman penggunaan, pertimbangan, sumber daya, dan contoh gambar dapat dan harus menemukan jalannya ke dalam dokumentasi pola. Dokumentasi Pattern Lab 2 menggunakan Markdown dengan materi depan YAML untuk membuat dokumentasi ini. File penurunan harga menyertai pola (misalnya, media-object.md harus berada tepat di samping media-object.mustache ), dan dapat diformat seperti ini:

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

Dokumentasi penurunan harga berarti bahwa IA, desainer visual, ahli strategi konten, pebisnis, dll dapat lebih mudah berkontribusi pada dokumentasi hidup. Pemilik produk bahkan dapat menghentikan catatan fungsionalitas untuk pola baru bahkan sebelum pola tersebut dibuat. Perbaikan direncanakan untuk membuat dokumentasi pola lebih kuat, yang selanjutnya menjadikan Lab Pola ruang yang selalu hijau untuk tim Anda.

Silsilah untuk QA yang Lebih Mudah

Saat melihat berbagai pola di perpustakaan, kurangnya konteks dapat membuat sulit untuk membedakan di mana mereka benar-benar digunakan. Mendefinisikan dan mendeskripsikan karakteristik pola adalah satu hal, tetapi ada peluang untuk memberikan informasi kontekstual tambahan tentang pola UI Anda.

Berkat sifat boneka bersarang Rusia dari Lab Pola, ia dapat menampilkan pola apa yang membentuk komponen tertentu, dan juga menunjukkan di mana pola itu digunakan dalam sistem desain.

Berkat fitur ini, desainer dan pengembang memiliki informasi kontekstual yang berguna saat QAing dan/atau membuat perubahan pada sistem desain. Jika kita ingin membuat perubahan pada pola tertentu, seperti menggandakan ukuran gambar atau menambahkan elemen teks tambahan, kita akan segera mengetahui pola dan template mana yang perlu diuji ulang dan QA untuk memastikan tidak ada yang rusak dengan perubahan tersebut. . 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.

Edisi Lab Pola

Edisi memungkinkan tim dan agensi menggabungkan semua hal yang mendukung alur kerja unik mereka dengan Pattern Lab. Edisi dapat menjadi titik awal untuk semua proyek Anda saat tim berbagi dan memperbarui fungsionalitas. Versi Node dari Pattern Lab menggunakan npm untuk menarik komponen terpisah, sementara versi PHP menggunakan Composer untuk membantu Anda memulai proyek Anda dengan cara yang sederhana dan standar.

Inti Lab Pola

Core adalah keberanian Pattern Lab dan memungkinkan semua fitur lainnya. Karena Core berdiri sendiri, tim dapat memperbarui dan mengikuti perkembangan fitur Pattern Lab terbaru tanpa mengganggu sisa proyek mereka.

Kit Pemula

Punya satu set kode boilerplate tepercaya yang Anda gunakan untuk memulai setiap proyek? Mungkin kumpulan pola dasar yang umum, campuran Sass, dan pustaka JavaScript yang merupakan alat bantu Anda? StarterKit sangat cocok untuk menggabungkan aset-aset ini menjadi satu boilerplate yang memastikan setiap proyek dimulai dengan langkah yang benar.

Beberapa starterkit sudah ada untuk memulai proyek Anda, apakah Anda mencari awal yang kosong, mulai dengan demo yang menampilkan fitur Pattern Lab, atau mulai dengan kerangka kerja populer seperti Bootstrap, Foundation, atau Desain Material. Dan Anda dapat menggulung sendiri, yang dapat dikontrol sepenuhnya oleh versi sehingga StarterKit tim Anda dapat berkembang bersama dengan alat Anda.

Mengimpor starterkit hanya dengan beberapa penekanan tombol setelah instalasi. Akhirnya fitur ini akan dibangun ke dalam fase pasca-instal seperti halnya untuk Pattern Lab PHP melalui komposer.

Panduan GayaKit

StyleguideKits adalah front-end dari Pattern Lab. Kami menyebutnya "Pemirsa". StyleguideKits memungkinkan agensi dan organisasi mengembangkan UI Lab Pola kustom bermerek untuk memamerkan pola mereka.

PolaMesin

PatternEngine adalah mesin templating yang bertanggung jawab untuk menguraikan pola dan mengubahnya menjadi HTML. PatternEngine memberi Pattern Lab Core fleksibilitas untuk merender berbagai jenis bahasa template. PatternEngine saat ini termasuk Moustache dan Twig, dengan yang lain seperti Handlebars dan Underscore dalam pengembangan. Dan tidak ada yang menghentikan Anda untuk menambahkan mesin templating lain ke Lab Pola.

Plugin

Plugin memungkinkan pengembang untuk memperluas Pattern Lab Core dan bagian lain dari ekosistem. Misalnya, versi PHP dari Pattern Lab memiliki sejumlah plugin seperti Browser Auto-Reload, Data Inheritance, dan Faker. Arsitektur Pattern Lab memungkinkan pengembang untuk memodifikasi data pada tahapan yang berbeda, menambahkan perintah atau aturan pola mereka sendiri, atau mengubah front-end untuk memodifikasi dan memperluas kemampuan Pattern Lab

Tonton Obrolan Saya

Cobalah Pattern Lab 2, Dan Terlibatlah

Membuat antarmuka pengguna yang digerakkan oleh pola dan sistem desain yang canggih lebih penting dari sebelumnya. Pattern Lab 2 dilengkapi dengan baik untuk membuat dan memelihara sistem desain atomik, dan dapat berfungsi sebagai hub untuk sistem desain Anda melalui setiap langkah alur kerja tim Anda.

Jika tim Anda memutuskan untuk mengunduh Pattern Lab 2 dan mencobanya, kami akan senang mendengarnya dari Anda! Bergabunglah dalam percakapan dengan mengajukan pertanyaan tentang Gitter, buka masalah jika Anda kesulitan dengan sesuatu, dan bantu mengusulkan & mendiskusikan fitur baru.

Dan jika Anda membuat hal-hal keren dengan Pattern Lab 2, silakan bagikan wawasan Anda! Styleguides.io memiliki lebih dari 150+ contoh pustaka pola, jadi tambahkan Lab Pola Anda ke dalam campuran. Keindahan web dan proyek sumber terbuka adalah bahwa seluruh komunitas dapat belajar dari pengalaman Anda dan membangun pengetahuan itu.

Kami senang melihat hal-hal hebat apa yang Anda buat!