วิธีการสร้างและบำรุงรักษาระบบการออกแบบปรมาณูด้วย Pattern Lab 2

ประโยชน์ของระบบการออกแบบ UI เป็นที่ทราบกันดีอยู่แล้ว สิ่งเหล่านี้นำไปสู่ประสบการณ์ผู้ใช้ที่เหนียวแน่นและสม่ำเสมอยิ่งขึ้น สิ่งเหล่านี้ช่วยเพิ่มความเร็วให้กับเวิร์กโฟลว์ของทีม ช่วยให้คุณสามารถเปิดตัวสิ่งต่างๆ ได้มากขึ้น ในขณะที่ ประหยัดเวลาและเงินจำนวนมากในกระบวนการ พวกเขาสร้างคำศัพท์ทั่วไประหว่างสาขาวิชา ส่งผลให้เวิร์กโฟลว์การทำงานร่วมกันและสร้างสรรค์มากขึ้น

ทำให้การทดสอบเบราว์เซอร์ อุปกรณ์ ประสิทธิภาพ และการเข้าถึงง่ายขึ้น และทำหน้าที่เป็นรากฐานที่มั่นคงในการต่อยอดเมื่อเวลาผ่านไป ช่วยให้องค์กรของคุณปรับตัวเข้ากับภูมิทัศน์เว็บที่เปลี่ยนแปลงตลอดเวลาได้ง่ายขึ้น

ในการสร้างระบบเหล่านี้ เราต้องสร้าง Pattern Library ใน Markdown เราจำเป็นต้องแบ่งอินเทอร์เฟซของเราออกเป็นส่วนเล็กๆ แต่เราต้องตรวจสอบให้แน่ใจพร้อมกันว่าชิ้นส่วนเหล่านั้นมารวมกันเพื่อสร้างส่วนที่สวยงามและใช้งานได้จริง “การออกแบบปรมาณู” เป็นรูปแบบทางจิตที่เป็นประโยชน์ที่ช่วยให้เราทำอย่างนั้นได้ และ Pattern Lab เป็นชุดเครื่องมือที่ช่วยให้ระบบการออกแบบปรมาณูเหล่านี้มีชีวิต

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• นำ Pattern Libraries ไปสู่อีกระดับ
• รูปแบบการออกแบบที่ตอบสนองอย่างชาญฉลาด
• ภาพรวมเชิงลึกของเครื่องมือแนะนำรูปแบบการใช้ชีวิต
• พบกับรูปแบบการออกแบบส่วนหน้าแบบรวม
  

หลังจากทำงานหนักมาเป็นเวลากว่าสองปี เรายินดีที่จะประกาศ Pattern Lab 2! Pattern Lab 2 ได้รับการออกแบบใหม่ทั้งหมด เป็นชุดเครื่องมือโอเพนซอร์สที่จะช่วยให้คุณและทีมของคุณ สร้างและรักษาระบบการออกแบบ UI ที่รอบคอบ แก่นแท้ของมันคือเครื่องมือสร้างไซต์แบบคงที่ที่รวมรูปแบบเข้าด้วยกันและช่วยให้คุณออกแบบด้วยข้อมูลแบบไดนามิก

ไฮไลท์บางส่วนของเวอร์ชันใหม่ ได้แก่:

• แกนที่ปรับโครงสร้างใหม่ทั้งหมดที่รองรับภาษา เครื่องมือสร้างเทมเพลต และรูปแบบข้อมูลมากขึ้น
• รองรับ Markdown สำหรับเอกสารรูปแบบ
• เพิ่มการรองรับ YAML เช่นเดียวกับ JSON สำหรับจัดการข้อมูลไดนามิก
• ปลั๊กอินเพื่อขยายและปรับปรุงการทำงานของ Pattern Lab
• UI ฟรอนต์เอนด์ที่ออกแบบใหม่ได้ ขยายได้ และออกแบบใหม่

แต่เหนือสิ่งอื่นใด Pattern Lab 2 ได้รับการออกแบบและสร้างขึ้นเพื่อให้ทีมของคุณสามารถใช้งานได้อย่างมีประสิทธิภาพในทุกขั้นตอนของกระบวนการออกแบบระบบของคุณ ตั้งแต่เริ่มต้นจนถึงการบำรุงรักษาระยะยาว

Pattern Lab ที่ Project Start

ทีมของคุณได้รับมอบหมายให้สร้างแอปพลิเคชันใหม่และระบบการออกแบบพื้นฐาน กาลครั้งหนึ่ง นักออกแบบ UX ของทีมของคุณอาจซ่อนตัวอยู่ในห้องเพื่อกำหนดผลิตภัณฑ์โดยใช้โครงร่างแบบเสาหินที่มีคำอธิบายประกอบอย่างหนัก เมื่อได้รับการอนุมัติแล้ว พวกเขาจะถูกส่งต่อไปยังนักออกแบบภาพซึ่งจะใช้สี การออกแบบตัวอักษร และพื้นผิวเพื่อทำให้กรอบลวดดูมีชีวิตชีวา หลังจากที่ homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd _v9_final_forReview_jimEdits_05-12__FINAL.psd ได้รับการอนุมัติ ในที่สุดการออกแบบจะถูกส่งไปยังนักพัฒนาส่วนหน้า ซึ่งน้ำตาจะไหลอย่างรวดเร็วเนื่องจากการออกแบบมีเลย์เอาต์ที่ไม่สมจริงจำนวนมาก เนื้อหาผู้ใช้ที่ไม่น่าจะเป็นไปได้ (ชื่อผู้ใช้ทุกคนมีเพียง 4 ตัวอักษร—สะดวกแค่ไหน!) และบุหงาของแบบอักษรและรูปแบบการออกแบบที่ไม่สอดคล้องกัน

กระบวนการออกแบบแบบใช้แล้วทิ้งหมดไป การทำงานร่วมกัน การทำซ้ำ และการพัฒนาอย่างรวดเร็วเป็นสิ่งจำเป็นสำหรับการแก้ปัญหาภูมิทัศน์เว็บที่หลากหลายและเปลี่ยนแปลงตลอดเวลา เราจำเป็นต้องเข้าสู่เบราว์เซอร์โดยเร็วที่สุดและทดสอบการออกแบบภายใต้ตัวแปรในโลกแห่งความเป็นจริง เช่น การตอบสนอง ประสิทธิภาพ การยศาสตร์ และการเคลื่อนไหว นั่นเป็นเหตุผลว่าทำไมจึงเป็นสิ่งสำคัญที่จะถือว่าการพัฒนาส่วนหน้าเป็นส่วนหลักของกระบวนการออกแบบ และเหตุใดจึงสำคัญอย่างยิ่งที่จะต้องให้นักออกแบบและนักพัฒนาส่วนหน้าทำงานร่วมกันอย่างใกล้ชิด สุดท้ายนี้ เราทุกคนกำลังทำงานบน UI เดียวกัน

การตั้งค่าอินสแตนซ์ของ Pattern Lab ในวันที่ 1 ของโครงการของคุณ สามารถสร้างเวิร์กช็อปที่ใช้ร่วมกัน — หรือห้องปฏิบัติการ ถ้าคุณต้องการ — ติดตั้งเครื่องมือออกแบบและพัฒนา เครื่องทำน้ำเย็น ไวท์บอร์ด และกล้องจุลทรรศน์ เป็นพื้นที่สำหรับแต่ละสาขาวิชาที่จะสนับสนุนมุมมองของตนต่อระบบการออกแบบการหายใจที่มีชีวิต ในความเป็นจริง Pattern Lab สามารถทำหน้าที่เป็นศูนย์กลางของโปรเจ็กต์ระบบการออกแบบของคุณ ช่วยลดความจำเป็นในการสร้างโครงร่างแบบละเอียดมากเกินไป คอมพ์แบบสแตติกที่มีเส้นสีแดง และสิ่งประดิษฐ์สแตติกอื่นๆ

ฟังดูดีใช่มั้ย? มาดูวิธีการหมุน Pattern Lab ในวันที่ 1 ของโครงการกัน

Pattern Lab 2 มีทั้งแบบ PHP และ Node ทีมเลือกการผจญภัยของคุณ! บางโครงการให้ตัวเลือกกองเทคโนโลยีที่ชัดเจน คนอื่น ๆ ลงมาที่ชุดทักษะของทีมหรือลำดับความสำคัญด้านสิ่งแวดล้อม ไม่ว่าแพลตฟอร์มใด Pattern Lab 2 ก็พร้อมช่วยให้คุณและทีมทำงานร่วมกันเพื่อสร้างแอปพลิเคชันและระบบการออกแบบใหม่ ไม่ว่าตัวเลือกแพลตฟอร์มของคุณจะเป็นเช่นไร โปรดทราบว่า Pattern Lab ทั้งสองเวอร์ชันจะให้ผลลัพธ์ที่เกือบเหมือนกัน — เหมือนกับรถยนต์ยี่ห้อและรุ่นต่างๆ ที่จะพาคุณไปยังจุดหมายเดียวกัน

การติดตั้ง Pattern Lab

เมื่อข้อกำหนดเบื้องต้นที่เหมาะสมได้รับการติดตั้งแล้ว คุณก็พร้อมที่จะติดตั้ง Pattern Lab มาดูวิธีการติดตั้ง Pattern Lab Node กัน แต่อย่าลืมว่าคำสั่ง PHP นั้นมีให้ใช้งานและมีความคล้ายคลึงกัน

จากหน้าต่างเทอร์มินัล ไปที่ไดเร็กทอรีที่คุณต้องการติดตั้ง Pattern Lab จากนั้นพิมพ์คำสั่งต่อไปนี้:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. เสร็จแล้วก็ gulp patternlab:serve

การรันการ npm install จะดึงการพึ่งพาล่าสุด และ gulp patternlab:serve จะสร้างและโฮสต์ Pattern Lab ด้วยตนเอง โดยเปิดส่วนหน้าในเบราว์เซอร์เริ่มต้นของคุณ และหากคุณไม่ต้องการโคลนที่เก็บ git โดยตรง คุณสามารถดาวน์โหลดรุ่นล่าสุดแล้วทำตามขั้นตอนที่ 2 และ 3

ด้วย Pattern Lab ที่พร้อมใช้งาน ตอนนี้ทีมของคุณมีฮับสำหรับการออกแบบ พัฒนา และตรวจสอบระบบการออกแบบที่ใกล้จะถูกสร้างขึ้นในเร็วๆ นี้

ระบบไฟล์ของ Pattern Lab

Pattern Lab รวบรวมทุกอย่างที่พบในโฟลเดอร์ /source ของโปรเจ็กต์ลงในไฟล์ HTML แบบสแตติกที่อยู่ในโฟลเดอร์ /public เอาต์พุตนี้สามารถแสดงหรือใช้ทีละรายการหรือภายในส่วนหน้าของคู่มือสไตล์ มาดูระบบไฟล์ของ Pattern Lab และสิ่งที่อยู่ภายใน source/ :

• _annotations/ - ตำแหน่งที่ทีมของคุณสามารถกำหนดคำอธิบายประกอบที่มีชีวิตเพื่อสนับสนุนเอกสาร UI ของคุณ
• _data/ - ตำแหน่งที่ข้อมูลส่วนกลางใช้ในการแสดงรูปแบบของคุณ
• _meta/ - ที่ซึ่งข้อมูล <head> และ foot (ซึ่งจองรูปแบบทั้งหมดของคุณ) อยู่
• _patterns/ - ที่ซึ่งมีรูปแบบ เอกสารประกอบรูปแบบ และข้อมูลเฉพาะของรูปแบบอยู่
• css - ตำแหน่งที่สไตล์ชีตของคุณสามารถอยู่ได้
• รูปภาพ - ที่ที่รูปภาพของคุณสามารถอยู่ได้
• js - ที่ที่จาวาสคริปต์ของคุณสามารถอยู่ได้

คุ้มค่าที่จะเน้นว่า Pattern Lab ไม่ได้บังคับแบบแผนส่วนหน้าหรือการพึ่งพาการผลิตใดๆ กับคุณ วิธีที่คุณตัดสินใจจัดโครงสร้างโฟลเดอร์และเทคโนโลยีที่คุณเลือกนั้นขึ้นอยู่กับคุณ ถ้าคุณต้องการเรียกโฟลเดอร์ของคุณ /stylesheets แทน /css ไปเลย! ต้องการใช้ Sass? ดี! รัก jQuery? ยอดเยี่ยม! เกลียดมัน? ก็ดีเหมือนกัน! Pattern Lab มีอยู่เพื่อต่อรูปแบบของคุณเข้าด้วยกัน และหลีกหนีการตัดสินใจส่วนหน้าใดๆ ที่คุณทำ คุณยังสามารถกำหนดค่าวิธีจัดการสินทรัพย์ของคุณเมื่อเดินทางจาก source/ ไปยัง public/

เลือกการผจญภัยของคุณเอง: ข้อตกลงการตั้งชื่อและการกำหนดค่า

การออกแบบปรมาณูเป็นแบบจำลองทางจิตที่เป็นประโยชน์ในการคิดเกี่ยวกับการสร้างระบบการออกแบบ UI แต่ก็ไม่ใช่ความเชื่อที่เข้มงวดอย่างแน่นอน สิ่งสำคัญคือต้องเลือกระบบการตั้งชื่อที่ช่วยให้ทีมของคุณพูดภาษาเดียวกันและทำงานร่วมกันได้อย่างยอดเยี่ยม

หลักการตั้งชื่อของ Pattern Lab เช่นเดียวกับซอฟต์แวร์ส่วนใหญ่ สามารถกำหนดค่าได้ทั้งหมด แม้ว่า patterns/ โฟลเดอร์ของ Pattern Lab จะมีค่าเริ่มต้นเป็น “อะตอม”,”โมเลกุล”, “สิ่งมีชีวิต”, “แม่แบบ” และ “หน้าต่างๆ ก็ตาม คุณมีอิสระที่จะแก้ไข ลบ หรือเพิ่มสิ่งที่ปรารถนาได้ ตัวอย่างเช่น หากเราต้องสร้างอนุกรมวิธานของระบบการออกแบบ Predix ของ GE ขึ้นใหม่ ซึ่งประกอบด้วยหลักการ พื้นฐาน ส่วนประกอบ เทมเพลต คุณลักษณะ และแอปพลิเคชัน เราจะจัดโครงสร้าง /source/_patterns/ ของ Pattern Lab ให้เป็นดังนี้:

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

Pattern Lab ได้รับการออกแบบมาเพื่อให้สอดคล้องกับเวิร์กโฟลว์ของคุณ ไม่ใช่ในทางกลับกัน

กำหนดทิศทางการออกแบบ

แม้แต่ในช่วงวันแรกหรือชั่วโมงแรกของโครงการ ทุกคนมีส่วนสนับสนุน Pattern Lab ของคุณ นี่เป็นเวลาสำหรับการสำรวจ ค้นหาสิ่งต่าง ๆ และสร้างแนวร่วม แต่ละบทบาทดำเนินกิจกรรมที่แตกต่างกัน แต่เอาต์พุตและอินพุตเชื่อมโยงกัน แต่ละคนสูบลมยางแยกต่างหากของรถเพื่อพาคุณไปยังจุดหมายปลายทาง

การกำหนด lo-fidelity IA ใน Pattern Lab

งานออกแบบ UX รุ่นแรก ๆ เกี่ยวข้องกับการกำหนดสถาปัตยกรรมข้อมูลของแอปพลิเคชัน แทนที่จะเอื้อมมือไปหาเครื่องมือโครงลวดที่มีความเที่ยงตรงสูงซึ่งมักจะกำหนดเลย์เอาต์และการทำงานทางเทคนิคก่อนเวลาอันควร จะเป็นการดีกว่าที่จะสร้างภาพสเก็ตช์ lo-fi ซึ่งกำหนดสิ่งที่เกิดขึ้นบนหน้าจอหนึ่งๆ และในลำดับทั่วไป งานนี้สามารถอยู่ในรูปแบบของภาพร่างผ้าเช็ดปาก รายการหัวข้อย่อย หรือสเปรดชีต เนื่องจาก Pattern Lab รองรับมาร์กอัปพื้นฐาน จึงสามารถแปลไดอะแกรมอ้างอิงเนื้อหาเหล่านี้ลงในเบราว์เซอร์ได้อย่างรวดเร็ว สำหรับการออกแบบใหม่ของ Pittsburgh Food Bank เราได้สรุปเทมเพลตแต่ละแบบโดยใช้วิธีนี้

ดังนั้นโค้ดเทมเพลตของหน้าแรกที่พบใน /source/_patterns/templates/homepage.mustache จะมีลักษณะดังนี้:

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

เรากำลังรวมรูปแบบส่วนหัวและส่วนท้าย จากนั้นจึงค่อยสรุปเนื้อหาที่เราคาดว่าจะรวมไว้ในหน้านี้

จับภาพการตัดสินใจออกแบบภาพ

งานออกแบบภาพช่วงแรกๆ เกี่ยวข้องกับการสำรวจการออกแบบตัวอักษร จานสี และแง่มุมอื่นๆ ของแบรนด์ภาพ ในอดีต นักออกแบบอาจก้าวกระโดดในการสร้างแบบจำลอง Photoshop ที่มีความแม่นยำสูงและเน้นเดสก์ท็อปเป็นหลัก ตอนนี้นักออกแบบมีเครื่องมือที่เป็นประโยชน์ เช่น ไทล์สไตล์, Typecast และภาพตัดปะองค์ประกอบ เพื่อสร้างทิศทางการออกแบบภาพโดยไม่ต้องพึ่ง comps ที่มีความเที่ยงตรงสูงก่อนเวลาอันควร

เมื่อตัดสินใจเกี่ยวกับจานสีและการจับคู่ฟอนต์ Pattern Lab สามารถจับผลลัพธ์ของการตัดสินใจออกแบบเหล่านั้นได้ ทำให้มั่นใจได้ว่าทีมออกแบบและผู้พัฒนาจะไม่สร้างสีเทา 50 เฉดโดยไม่ได้ตั้งใจ

การเป็น Frontend Prep Chef ใน Pattern Lab

แล้วมีรหัสส่วนหน้า ในช่วงเริ่มต้นของโครงการ นักพัฒนาส่วนหน้าอาจถูกล่อลวงให้นั่งรอและรอให้นักออกแบบคิดหาทิศทางก่อนที่จะลงมือเขียนโค้ด แต่การคิดแบบนี้ทำให้นักออกแบบและนักพัฒนาไม่ซิงค์กัน และป้องกันไม่ให้เกิดการทำงานร่วมกันอย่างแท้จริง

เช่นเดียวกับพ่อครัวเตรียมอาหารในร้านอาหาร นักพัฒนามีโอกาสมหาศาลในการทำงานเพื่อเตรียมรูปแบบและโค้ดที่จะกลายเป็นระบบการออกแบบขั้นสุดท้ายในที่สุด ในช่วงเริ่มต้นของโครงการ นักพัฒนาสามารถเริ่มตัดรูปแบบและนำเข้าเนื้อหาไปยัง Pattern Lab จัดเตรียมสิ่งต่างๆ ให้พร้อมตั้งแต่เนิ่นๆ เพื่อให้นักออกแบบและนักพัฒนาสามารถใช้เวลาร่วมกันมากขึ้นในการออกแบบและสร้าง UI

จานสี สำเนาจริง และเลย์เอาต์ยังไม่ได้สร้าง แต่นั่นไม่ควรหยุดนักพัฒนาจากการนั่งร้านโครงสร้างที่สนับสนุนโครงร่างเนื้อหา ใช้รูปแบบฮีโร่เช่น:

รูปแบบนี้รวมถึงรูปแบบอื่นๆ ซึ่งเป็นวิธีที่มีประสิทธิภาพในการใช้องค์ประกอบอินเทอร์เฟซที่มีขนาดเล็กลงในโครงสร้างที่ใหญ่ขึ้นเรื่อยๆ นี่คือมาร์กอัปสำหรับ 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-->

รหัสวงเล็บปีกกาคู่ ( {{}} ) คือรหัสเทมเพลตของ Mustache ซึ่งช่วยให้เรากำหนดเนื้อหาแบบไดนามิกและรวมรูปแบบภายในกันและกัน ตัวอย่างเช่น รหัส {{> atoms-hero-img }} บอกให้ Pattern Lab ค้นหาอะตอมที่เรียกว่า "hero-img" และรวมไว้ในรูปแบบ ยูนิตฮีโร่สามารถรวมในรูปแบบที่ซับซ้อนมากขึ้นได้โดยใช้แบบแผนรวมโดยใช้สิ่งต่อไปนี้: {{> molecules-hero }}

แนวทางตุ๊กตาทำรังของรัสเซียในการรวมรูปแบบช่วยให้ codebase ของคุณดูดีและแห้ง หมายความว่าหากคุณแก้ไขรูปแบบใดรูปแบบหนึ่ง ทุกที่ที่มีรูปแบบนั้นจะถูกอัปเดตโดยอัตโนมัติ ซึ่งจะทำให้การออกแบบและฐานโค้ดของคุณตรงกันและสม่ำเสมอ และเหนือสิ่งอื่นใด การสร้างรูปแบบอย่างต่อเนื่องนี้สามารถให้อินเทอร์เฟซที่เกือบสมบูรณ์ได้ในระยะเวลาอันสั้น!

ม้วนแขนเสื้อขึ้น

สถาปัตยกรรมข้อมูลเริ่มเป็นรูปเป็นร่าง มีการกำหนดทิศทางความงามเบื้องต้นขึ้น และรูปแบบที่พึ่งได้เริ่มถูกตัดออกใน Pattern Lab ตอนนี้ทีมสามารถดำดิ่งสู่การสร้างระบบการออกแบบส่วนต่อประสานอย่างจริงจังได้แล้ว มาพูดคุยกันถึงวิธีการใช้ Pattern Lab เพื่อเปลี่ยนทิศทางที่คลุมเครือให้เป็นระบบการออกแบบที่สวยงาม ใช้งานได้จริง รอบคอบ และครบถ้วน

การออกแบบด้วย Dynamic Data

แนวคิดที่สำคัญอย่างหนึ่งของการออกแบบปรมาณูคือความแตกต่างระหว่างเทมเพลตและเพจ เทมเพลตจะกำหนดโครงสร้างเนื้อหาพื้นฐานของ UI ในขณะที่หน้าคืออินสแตนซ์เฉพาะของเทมเพลตที่แทนที่โครงสร้างเนื้อหานั้นด้วยเนื้อหาที่เป็นตัวแทนจริง ทั้งสองจำเป็นในการจัดทำเอกสารพารามิเตอร์ของเนื้อหาในขณะที่ยังแสดงรูปแบบการออกแบบในการดำเนินการและเติมด้วยเนื้อหาจริง

คุณลักษณะ Pattern Lab ที่ทรงพลังที่สุดประการหนึ่งคือความสามารถในการสลับเนื้อหาตัวแทนต่างๆ เป็นรูปแบบ UI ของคุณ เพื่อให้แน่ใจว่าจะสามารถจัดการกับลักษณะแบบไดนามิกของเนื้อหาของคุณได้ จะเกิดอะไรขึ้นหากผู้ใช้ของคุณไม่อัปโหลดรูปโปรไฟล์ จะเกิดอะไรขึ้นหากผู้ใช้มีสินค้า 13 รายการในรถเข็นช็อปปิ้ง เทียบกับ 2 รายการ จะเกิดอะไรขึ้นถ้าหนึ่งในผลิตภัณฑ์เหล่านั้นมี 14 รูปแบบที่เป็นไปได้? จะเกิดอะไรขึ้นถ้าชื่อโพสต์บล็อกมีอักขระ 400 ตัว ผู้ใช้ที่กลับมา? ผู้ใช้ครั้งแรก? เกิดอะไรขึ้นถ้าบทความไม่มีความคิดเห็น? หรือเมื่อมันมีความคิดเห็นซ้อนกันเจ็ดชั้นล่ะ จะเกิดอะไรขึ้นหากเราต้องแสดงข้อความด่วนบนแดชบอร์ดเมื่อบัญชีถูกแฮ็ก Pattern Lab ช่วยให้คุณสามารถจัดการข้อมูลเพื่อแสดงสถานะ UI และรูปแบบต่างๆ ของเทมเพลตใดก็ได้

ข้อมูลเฉพาะหน้า

ข้อมูลเริ่มต้นใน Pattern Lab ถูกจัดเก็บไว้ในไฟล์ชื่อ /source/_data/data.json ซึ่งมีข้อมูลที่รูปแบบจะใช้ในขั้นต้นเพื่อแสดงในมุมมองแนะนำสไตล์และเทมเพลต data.json เริ่มต้นของคุณอาจมีลักษณะดังนี้:

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

คุณสามารถอ้างอิงข้อมูลเหล่านี้ในรูปแบบของคุณ (เช่น รวม {{ headline.short }} ในรูปแบบ) เพื่อให้ได้ผลลัพธ์ดังนี้:

ที่ระดับหน้า เราต้องการแทนที่รูปภาพระดับสีเทาและข้อความตัวแทนของ lorem ipsum ด้วยเนื้อหาจริง เพื่อให้บรรลุสิ่งนี้ เราจะสร้างไฟล์ใหม่ถัดจาก /source/_patterns/pages/homepage.mustache ที่เรียกว่า homepage.json ซึ่งเราสามารถแทนที่ข้อมูลเริ่มต้นที่กำหนดไว้ใน `data.json นั่นอาจมีลักษณะดังนี้:

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

ส่งผลให้ UI มีลักษณะดังนี้:

รูปแบบหลอก

ระบบการออกแบบของเราต้องยืดหยุ่นและปรับให้เข้ากับความเป็นจริงของเนื้อหาที่อยู่ในแอปพลิเคชันของเรา เราต้องคำนึงถึงสถานการณ์ที่ดีที่สุด กรณีที่เลวร้ายที่สุด และทุกสิ่งในระหว่างนั้นควบคู่กันไป

การแสดงรูปแบบต่างๆ ของ UI เหล่านี้ในเครื่องมือการออกแบบสแตติกเป็นการฝึกความน่าเบื่อหน่ายและความซ้ำซ้อน ซึ่งอาจอธิบายได้ว่าทำไมจึงไม่ค่อยได้รับการออกแบบ แต่ฟีเจอร์รูปแบบหลอกของ Pattern Lab ช่วยให้เราระบุสถานการณ์ต่างๆ (บางครั้งอาจดูรุนแรง) ได้อย่างชัดเจน โดยมีการเปลี่ยนแปลงข้อมูลของเราเพียงเล็กน้อย

สมมติว่าเรากำลังสร้างแอปติดตามการเดินป่าที่มีแดชบอร์ดแสดงรายการสถิติการเดินป่า ได้แก่ ระดับความสูงที่ปีน จำนวนเส้นทางที่ขึ้น จำนวนก้าว และอื่นๆ สำหรับผู้ใช้ที่ใช้งานอยู่ซึ่งป้อนเนื้อหาลงในแอปอย่างสม่ำเสมอ UI อาจมีลักษณะดังนี้:

ใน /source/_patterns/pages/dashboard.json ข้อมูลของเราจะมีลักษณะดังนี้:

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

ด้วยข้อมูลนี้ Pattern Lab สามารถเติม UI ด้วยเนื้อหาที่สร้างขึ้นมากมายของผู้ใช้รายนี้

อย่างไรก็ตาม สถานการณ์นี้อาจไม่ใช่เรื่องธรรมดาทั้งหมด สำหรับผู้ใช้ที่มีความทะเยอทะยานทุกคนที่ใช้เวลาในการเติมข้อมูลทุกฟิลด์และเชื่อมต่อทุกแอปพลิเคชันที่มี มีแนวโน้มว่าจะมีผู้ใช้ทั่วไปหลายสิบคนที่ไม่ได้กรอกข้อมูลในช่องว่างทั้งหมดและใช้ประโยชน์จากคุณลักษณะทั้งหมดของแอป สำหรับเรื่องนั้น ณ จุดหนึ่งในการเดินทางของผู้ใช้ทุกคน ผู้ใช้ยังใหม่กับอินเทอร์เฟซโดยสิ้นเชิง! มาพูดถึงรูปแบบที่สำคัญเหล่านี้กันโดยใช้คุณลักษณะรูปแบบหลอกของ Pattern Lab

ใน /source/_patterns/pages/ ของเรา เราสามารถสร้างรูปแบบเทียมใหม่ที่เรียกว่า dashboard~new-user.json สิ่งนี้จะสร้างอินสแตนซ์อื่นของหน้าที่รับช่วงข้อมูลทั้งหมดจาก dashboard.json แต่ยังช่วยให้เราสามารถแก้ไขหรือขยายข้อมูลเพิ่มเติมได้ ในกรณีของ dashboard~new-user.json เราสามารถแทนที่บิตของข้อมูลเพื่อแสดงให้เห็นว่าประสบการณ์ผู้ใช้ใหม่อาจมีลักษณะอย่างไร:

และนี่คือข้อมูลที่เรากำลังเพิ่มลงในไฟล์เพื่อให้ UI นี้สำเร็จ:

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

การแทนที่ค่าบางค่าใน dashboard.json ทำให้เราสามารถแก้ไขเนื้อหาและเปิด/ปิดรูปแบบเฉพาะได้

ในอีกกรณีหนึ่ง เราอาจต้องแสดงให้เห็นว่า UI เป็นอย่างไรเมื่อมีปัญหาด้านความปลอดภัยหรือปัญหาอื่นๆ กับบัญชีของผู้ใช้ เราสามารถสร้าง dashboard~hacked.json pseudo-pattern เพื่อสร้าง UI ต่อไปนี้:

ข้อมูลส่วนใหญ่จาก dashboard.json จะยังคงเหมือนเดิม แต่เราจะเพิ่มข้อมูลต่อไปนี้เพื่อสร้างข้อความแสดงข้อผิดพลาด:

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

พารามิเตอร์รูปแบบ

มีบางครั้งที่ใช้ Pattern Lab ที่รับประกันรูปแบบหลอกทั้งหมด ดังที่แสดงไว้ด้านบน แต่บางครั้งคุณอาจต้องปรับแต่งหรือแทนที่ค่าข้อมูลเพียงค่าเดียวภายในรูปแบบ ปล่อยให้ส่วนที่เหลือจัดการโดยรูปแบบการแสดงผลแบบไดนามิกอื่นๆ สำหรับกรณีเหล่านี้ พารามิเตอร์รูปแบบเป็นเครื่องมือที่คุณเลือก พารามิเตอร์รูปแบบเป็นกลไกง่ายๆ ในการแทนที่ตัวแปรในรูปแบบที่รวมไว้ จำกัดเฉพาะการแทนที่ตัวแปรในรูปแบบที่รวมไว้และ เฉพาะ รูปแบบที่รวมไว้เท่านั้น พิจารณาข้อความที่ตัดตอนมาจากเทมเพลตรายละเอียดนี้:

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

ซึ่งรวมถึงรูปแบบรายการสื่อของส่วน

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

ตามที่เราได้เรียนรู้ {{sectionTitle}} สำหรับทั้งบล็อกข้อมูลล่าสุดและรายการแนะนำจะเติมข้อมูลจาก .json ที่แสดงร่วมทั้งหมด โดยมี /source/_data/data.json เป็นทางเลือกสำรองทั่วโลก อย่างไรก็ตาม เราได้รวมรูปแบบเดียวหลายครั้ง และอาจต้องการให้ข้อมูลที่ไม่ซ้ำกันอย่างรวดเร็วสำหรับแต่ละรูปแบบโดยไม่ต้องสร้างคีย์เหล่านี้ใน .json ของเรา เราสามารถเปลี่ยนรายการสื่อของส่วนที่รวมไว้ดังต่อไปนี้:

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

สิ่งมีชีวิตทั้งสองนี้จะใช้ตัวแปร sectionTitle ที่กำหนดไว้ที่นี่เมื่อแสดงผล พารามิเตอร์รูปแบบมีประสิทธิภาพ แต่สนับสนุนโดย PHP และ Node Mustache PatternEngines เท่านั้น ภาษาของเทมเพลตอื่นๆ จะช่วยแก้ปัญหานี้ได้ดีกว่า ตรวจสอบเอกสารเพื่ออ่านรายละเอียดเกี่ยวกับพารามิเตอร์พารามิเตอร์

styleModifiers

บ่อยครั้ง คุณจะพบว่าตัวเองต้องการแสดงรูปแบบโวหารที่มีรูปแบบเดียวกัน เช่น ปุ่มโซเชียลมีเดียที่มีสีหรือสถานะส่วนประกอบ ส่วนขยายของชวเลขรวมถึงไวยากรณ์ styleModifiers จัดหาคลาสเพิ่มเติมให้กับรูปแบบ ให้คุณสร้างรูปแบบ block-media ด้วย {{ styleModifier}} ภายในแอตทริบิวต์คลาส:

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

รวมรูปแบบนี้ด้วยโคลอนหลังชื่อตั้งค่า styleModifier:

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

จะให้ผลแท็กสมอเช่นนี้:

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

styleModifiers สามารถรวมกันเพื่อจัดหาหลายคลาส โดยใช้ไพพ์ (|) เป็นตัวคั่น

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

ระหว่างรูปแบบหลอก พารามิเตอร์รูปแบบ และ styleModifiers Pattern Lab ช่วยให้สามารถสาธิตรูปแบบ UI ที่แตกต่างกันอย่างมากในบางครั้งได้ง่ายขึ้น ในขณะที่ยังคงรักษา Codebase DRY พื้นฐานไว้ในกระบวนการ

วนซ้ำอย่างมีสไตล์

องค์ประกอบหลักของเวิร์กโฟลว์แบบอิงตามรูปแบบคือการรองรับการทำซ้ำและตระหนักว่ารูปแบบและการออกแบบจะยังคงพัฒนาต่อไป ชิ้นส่วนจะสร้างรูปร่างทั้งหมด ส่วนทั้งหมดจะสร้างรูปร่าง และระบบที่เชื่อมต่อถึงกันของส่วนประกอบจะเกิดขึ้นอันเป็นผลมาจากกระบวนการนี้

ผลที่ตามมาตามธรรมชาติอีกประการของกระบวนการนี้คือจุดของการผลิตเปลี่ยนจากมือของ UX และนักออกแบบภาพไปอยู่ในมือของนักพัฒนาส่วนหน้าก่อนหน้านี้มาก แทนที่จะเสียเวลาอันมีค่าไปกับการสร้างคอมพ์ที่มีความเที่ยงตรงสูงและโครงร่างที่มีรายละเอียดสูง งานออกแบบสามารถย้ายจากเอกสารแบบคงที่ไปยังเบราว์เซอร์ ซึ่งทีมของคุณสามารถจัดการกับความเป็นจริงของเว็บได้เร็วยิ่งขึ้น

ด้วย Pattern Lab เป็นหลุมรดน้ำสำหรับทั้งทีม นักออกแบบสามารถเข้าใจได้ดีขึ้นว่าการตัดสินใจในพื้นที่หนึ่งส่งผลต่อพื้นที่อื่นๆ อย่างไร

การทดสอบวิวพอร์ตด้วย ish

สิ่งสำคัญสำหรับคอมโพเนนต์ของเรา รวมถึงหน้าเว็บของเรา จะต้องมีความยืดหยุ่นในสเปกตรัมความละเอียดทั้งหมด การอบเครื่องมือปรับขนาดวิวพอร์ตเช่น ish ลงในไลบรารีรูปแบบช่วยให้มั่นใจได้ว่าแต่ละองค์ประกอบจะมีลักษณะและทำงานอย่างสวยงามที่หน้าจอทุกขนาด การใช้เวลาสร้างรูปแบบที่ยืดหยุ่นอย่างเต็มที่จะช่วยเตรียมเราให้พร้อมสำหรับอนาคตเมื่อการสืบค้นองค์ประกอบและองค์ประกอบของเว็บเติบโตเต็มที่ (เรารอไม่ไหวแล้ว!)

ด้วยการให้เครื่องมือวิวพอร์ตเหล่านี้ถูกรวมเข้ากับสภาพแวดล้อมส่วนหน้า นักออกแบบและนักพัฒนาสามารถรวมตัวกันที่ Pattern Lab เพื่อกำหนดตำแหน่งที่จะแทรกเบรกพอยต์ลงในการออกแบบ นอกจากนี้ ลูกค้า, QA และเพื่อนร่วมงานอื่นๆ สามารถระบุพื้นที่เฉพาะที่ UI แยกจากกันไม่ว่าด้วยเหตุผลใดก็ตาม

พร้อมที่จะเปิดตัว

โปรเจ็กต์นี้เข้ากันได้ดี แต่ก่อนที่จะเปิดตัวสู่โลกได้ สิ่งต่างๆ จำเป็นต้องรัดกุม ทดสอบข้ามเบราว์เซอร์/อุปกรณ์ และจัดทำเอกสารอย่างถูกต้อง มาคุยกันว่า Pattern Lab สามารถช่วยเตรียมโค้ดระบบการออกแบบและเอกสารประกอบให้พร้อมสำหรับไพรม์ไทม์ได้อย่างไร!

เอกสารรูปแบบที่เข้าถึงได้

รูปแบบบางอย่างอาจแสดงตัวเองเป็นเอกสารประกอบ แต่รูปแบบมักต้องการบริบทหรือข้อมูลเพิ่มเติมบางอย่างเพื่อทำให้สิ่งต่างๆ ชัดเจน สิ่งที่ชอบคำจำกัดความ แนวทางการใช้งาน ข้อควรพิจารณา ทรัพยากร และภาพตัวอย่างสามารถและควรหาทางเข้าสู่เอกสารรูปแบบ เอกสารของ Pattern Lab 2 ใช้ Markdown กับ YAML front matter เพื่อสร้างเอกสารนี้ ไฟล์ markdown มาพร้อมกับรูปแบบ (เช่น media-object.md ต้องนั่งข้าง media-object.mustache ) และสามารถจัดรูปแบบได้ดังนี้:

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

เอกสาร Markdown หมายความว่า IA, นักออกแบบภาพ, นักยุทธศาสตร์ด้านเนื้อหา, นักธุรกิจ ฯลฯ สามารถมีส่วนร่วมในเอกสารที่มีชีวิตได้ง่ายขึ้น เจ้าของผลิตภัณฑ์สามารถจดบันทึกการทำงานสำหรับรูปแบบใหม่ได้ก่อนที่จะสร้างรูปแบบด้วยซ้ำ มีการวางแผนการปรับปรุงเพื่อทำให้เอกสารรูปแบบมีประสิทธิภาพมากขึ้น ทำให้ Pattern Lab เป็นพื้นที่ที่ไม่สิ้นสุดสำหรับทีมของคุณ

เชื้อสายสำหรับ QA . ที่ง่ายขึ้น

เมื่อดูรูปแบบต่างๆ ในห้องสมุด การขาดบริบทอาจทำให้ยากต่อการแยกแยะว่าจะใช้รูปแบบใด การกำหนดและอธิบายลักษณะของรูปแบบเป็นสิ่งหนึ่ง แต่มีโอกาสที่จะให้ข้อมูลตามบริบทเพิ่มเติมเกี่ยวกับรูปแบบ UI ของคุณ

ด้วยลักษณะของตุ๊กตาทำรังของรัสเซียของ Pattern Lab จึงสามารถแสดงรูปแบบที่ประกอบขึ้นจากส่วนประกอบที่กำหนด และยังแสดงตำแหน่งที่รูปแบบนั้นถูกใช้ในระบบการออกแบบ

ด้วยคุณสมบัตินี้ นักออกแบบและนักพัฒนาจึงมีข้อมูลเชิงบริบทที่มีประโยชน์เมื่อทำ QAing และ/หรือทำการเปลี่ยนแปลงระบบการออกแบบ หากเราต้องการเปลี่ยนแปลงรูปแบบเฉพาะ เช่น การเพิ่มขนาดของรูปภาพเป็นสองเท่าหรือเพิ่มองค์ประกอบข้อความเพิ่มเติม เราจะทราบได้ทันทีว่ารูปแบบและเทมเพลตใดจะต้องทำการทดสอบซ้ำ และ QA จะทำให้แน่ใจว่าไม่มีอะไรเสียหายจากการเปลี่ยนแปลง . 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.

Pattern Lab Editions

รุ่นต่างๆ ช่วยให้ทีมและเอเจนซีรวมทุกสิ่งที่สนับสนุนเวิร์กโฟลว์เฉพาะของตนด้วย Pattern Lab ฉบับสามารถเป็นจุดเริ่มต้นสำหรับโครงการทั้งหมดของคุณในขณะที่ทีมแบ่งปันและอัปเดตฟังก์ชันการทำงาน Pattern Lab เวอร์ชันโหนดใช้ npm เพื่อดึงส่วนประกอบที่แยกจากกัน ในขณะที่เวอร์ชัน PHP ใช้ Composer เพื่อช่วยให้คุณเริ่มต้นโครงการของคุณในวิธีที่ง่ายและเป็นมาตรฐาน

Pattern Lab Core

Core คือหัวใจของ Pattern Lab และเปิดใช้งานคุณสมบัติอื่นๆ ทั้งหมด เนื่องจาก Core เป็นแบบสแตนด์อโลน ทีมงานจึงสามารถอัปเดตและติดตามฟีเจอร์ล่าสุดของ Pattern Lab ได้โดยไม่กระทบต่อส่วนที่เหลือของโปรเจ็กต์

ชุดเริ่มต้น

มีชุดรหัสสำเร็จรูปที่เชื่อถือได้ที่คุณเริ่มต้นทุกโครงการหรือไม่? อาจเป็นชุดของรูปแบบพื้นฐานทั่วไป มิกซ์อิน Sass และไลบรารี JavaScript ที่เป็นเครื่องมือที่คุณคุ้นเคย StarterKit เหมาะอย่างยิ่งสำหรับการรวมสินทรัพย์เหล่านี้เข้าด้วยกันเป็นต้นแบบที่ทำให้แน่ใจว่าแต่ละโครงการจะเริ่มต้นอย่างถูกต้อง

ชุดเริ่มต้นหลายชุดมีอยู่แล้วเพื่อเริ่มต้นโครงการของคุณ ไม่ว่าคุณจะกำลังมองหาการเริ่มต้นเปล่า เริ่มต้นด้วยการสาธิตที่แสดงคุณสมบัติของ Pattern Lab หรือเริ่มต้นด้วยเฟรมเวิร์กยอดนิยม เช่น Bootstrap, Foundation หรือ Material Design และคุณสามารถม้วนตัวเองได้ ซึ่งสามารถควบคุมเวอร์ชันได้อย่างสมบูรณ์เพื่อให้ StarterKit ของทีมของคุณสามารถพัฒนาไปพร้อมกับเครื่องมือของคุณได้

การนำเข้าชุดเริ่มต้นทำได้เพียงไม่กี่การกดแป้นหลังการติดตั้ง ในที่สุด ฟีเจอร์นี้จะถูกสร้างขึ้นในช่วงหลังการติดตั้ง เช่นเดียวกับ Pattern Lab PHP ผ่านทางผู้แต่ง

StyleguideKits

StyleguideKits คือส่วนหน้าของ Pattern Lab เราเรียกสิ่งนี้ว่า “ผู้ดู” StyleguideKits ช่วยให้เอเจนซีและองค์กรพัฒนา Pattern Lab UI แบบกำหนดเองที่มีตราสินค้าเพื่อแสดงรูปแบบของพวกเขา

PatternEngines

PatternEngines เป็นเอ็นจิ้นการสร้างเทมเพลตที่รับผิดชอบการแยกวิเคราะห์รูปแบบและเปลี่ยนให้เป็น HTML PatternEngines ให้ Pattern Lab Core มีความยืดหยุ่นในการแสดงภาษาของเทมเพลตประเภทต่างๆ มากมาย PatternEngines ปัจจุบันรวมถึง Mustache และ Twig โดยมีรูปแบบอื่นๆ เช่น Handlebars และ Underscore ในการพัฒนา และไม่มีการหยุดคุณจากการเพิ่มเอ็นจิ้นการสร้างเทมเพลตอื่นใน Pattern Lab

ปลั๊กอิน

ปลั๊กอินช่วยให้นักพัฒนาสามารถขยาย Pattern Lab Core และส่วนอื่นๆ ของระบบนิเวศได้ ตัวอย่างเช่น Pattern Lab เวอร์ชัน PHP มีปลั๊กอินจำนวนหนึ่ง เช่น การโหลดเบราว์เซอร์อัตโนมัติ การสืบทอดข้อมูล และ Faker สถาปัตยกรรมของ Pattern Lab ช่วยให้นักพัฒนาสามารถแก้ไขข้อมูลในขั้นตอนต่างๆ เพิ่มคำสั่งหรือกฎรูปแบบของตนเอง หรือเปลี่ยนส่วนหน้าเพื่อแก้ไขและขยายขีดความสามารถของ Pattern Lab

ดูการพูดคุยของฉัน

ให้ Pattern Lab 2 ลองและมีส่วนร่วม

การสร้างอินเทอร์เฟซผู้ใช้ตามรูปแบบและระบบการออกแบบที่ซับซ้อนมีความสำคัญมากกว่าที่เคย Pattern Lab 2 มีความพร้อมในการสร้างและบำรุงรักษาระบบการออกแบบปรมาณู และสามารถทำหน้าที่เป็นศูนย์กลางสำหรับระบบการออกแบบของคุณในทุกขั้นตอนของเวิร์กโฟลว์ของทีม

หากทีมของคุณตัดสินใจดาวน์โหลด Pattern Lab 2 และลองดู เรายินดีที่จะรับฟังจากคุณ! เข้าร่วมการสนทนาโดยถามคำถามเกี่ยวกับ Gitter เปิดประเด็นหากคุณประสบปัญหาบางอย่าง และช่วยเสนอและหารือเกี่ยวกับคุณสมบัติใหม่

และหากคุณสร้างสิ่งดีๆ ด้วย Pattern Lab 2 โปรดแบ่งปันข้อมูลเชิงลึกของคุณ! Styleguides.io มีตัวอย่างไลบรารีรูปแบบมากกว่า 150 ตัวอย่าง ดังนั้นให้เพิ่ม Pattern Lab ของคุณลงในมิกซ์ ความสวยงามของเว็บและโครงการโอเพ่นซอร์สคือทั้งชุมชนสามารถเรียนรู้จากประสบการณ์ของคุณและสร้างจากความรู้นั้น

เราตื่นเต้นมากที่จะได้เห็นผลงานที่ยอดเยี่ยมของคุณ!