การออกแบบและร่างแบบปรมาณู – คู่มือการปรับปรุงเวิร์กโฟลว์

Sketch และ Atomic Design คือชุดเครื่องมือและระเบียบวิธีที่มีประสิทธิภาพที่นักออกแบบสามารถใช้เพื่อสร้างระบบการออกแบบที่ช่วยให้มีการกำหนดมาตรฐานและเวิร์กโฟลว์มีประสิทธิภาพมากขึ้น

ระบบการออกแบบ: A Primer

ระบบการออกแบบคือชุดของส่วนประกอบและแนวทางที่นำกลับมาใช้ใหม่ได้ ซึ่งช่วยให้ทีมทำงานร่วมกันโดยใช้ภาษาทั่วไปในระหว่างการสร้างและอายุการใช้งานของผลิตภัณฑ์

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

การออกแบบวัสดุของ Google เป็นตัวอย่างของระบบการออกแบบ UI ที่มีโครงสร้าง Material Design เปิดตัวในปี 2014 เพื่อเป็นวิธีการออกแบบและพัฒนาแอพ Android ที่ทำงานร่วมกันได้

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

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

การออกแบบปรมาณู: ระบบออกแบบอาคาร

Atomic Design ซึ่งเป็นวิธีการที่ Brad Frost นำเสนอในปี 2013 มีพื้นฐานมาจากแนวคิดที่ว่าทุกระบบการออกแบบสามารถกำหนดเป็นชุดของการสร้างบล็อคที่อยู่ร่วมกันได้

ต่อไปนี้คือภาพรวมโดยย่อของส่วนประกอบของการออกแบบปรมาณู:

• อะตอม . แสดงถึงหน่วยการสร้างพื้นฐานของระบบการออกแบบ ตัวอย่างคือปุ่มหรือลักษณะข้อความ
• โมเลกุล . กลุ่มอะตอมทำงานร่วมกันเป็นหน่วย โมเลกุลเป็นองค์ประกอบ UI ที่จับต้องได้ ตัวอย่างเช่น สามารถจัดกลุ่มปุ่มและฟิลด์ข้อความเพื่อสร้างแบบฟอร์มการค้นหา
• สิ่งมีชีวิต อะตอมและโมเลกุลทำงานร่วมกันในโครงสร้างที่ซับซ้อน ช่องค้นหาที่จัดกลุ่มด้วยแถบนำทางจะสร้างเนื้อหาส่วนหัวบนเว็บไซต์
• แม่แบบ ออบเจ็กต์ระดับหน้าที่วางส่วนประกอบลงในเลย์เอาต์ที่กำหนดโครงสร้างเนื้อหา ตัวอย่างเช่น การนำสิ่งมีชีวิตส่วนหัวมาวางบนเทมเพลตหน้าแรก
• หน้า. อินสแตนซ์ของเทมเพลตที่แสดงถึงผลิตภัณฑ์ขั้นสุดท้าย

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

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

วิธีใช้การออกแบบปรมาณูกับ Sketch

ในการพัฒนาระบบการออกแบบโดยใช้ Atomic Design เครื่องมือที่ยอดเยี่ยม (และคุ้นเคยอยู่แล้ว) คือ Sketch เป็นผืนผ้าใบสำหรับเราในการสร้างอะตอม โมเลกุล และสิ่งมีชีวิต: องค์ประกอบที่จำเป็นในการกำหนดแกนหลักของระบบการออกแบบ

การสร้างอะตอม

เราเริ่มต้นด้วยการสร้างอะตอมสามประเภทใน Sketch: สัญลักษณ์ สไตล์เลเยอร์ และสไตล์ข้อความ

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

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

ลักษณะข้อความ สไตล์ข้อความ คล้ายกับสไตล์เลเยอร์ เป็นองค์ประกอบที่นำกลับมาใช้ใหม่ได้ ซึ่งรับประกันความสอดคล้องกันในวัตถุข้อความที่คล้ายคลึงกัน ตัวอย่างเช่น การกำหนดขนาดฟอนต์และสีขององค์ประกอบ h1 ทำงานในลักษณะเดียวกันกับรูปแบบข้อความใน Google Docs หรือ Microsoft Word

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

ต่อไปนี้คือบางวิธีในการสร้างหมวดหมู่แบบลำดับชั้นสำหรับสัญลักษณ์ ข้อความ และสไตล์เลเยอร์ใน Sketch

เราสามารถแสดงสัญลักษณ์โดยใช้แบบแผนการตั้งชื่อที่แนะนำต่อไปนี้ภายใต้ Atoms/ :

• ทรัพย์สิน
• ปุ่ม
• การควบคุมอินพุต
• รูปภาพ
• การนำทาง
• ข้อมูล

เราจะไม่แปลงสไตล์เลเยอร์เป็นสัญลักษณ์ ดังนั้นการระบุโดยกลุ่มความหมายก็เพียงพอแล้ว อีกครั้งโดยใช้ Atoms /:

• เติม
• พรมแดน
• เงา
• ไล่โทนสี

เช่นเดียวกับสไตล์เลเยอร์ นี่คือวิธีที่เราสามารถสร้างสไตล์ข้อความภายใต้ Atoms /:

• หัวเรื่อง
• ตัว
• คำบรรยาย
• ป้าย
• ลิงค์

ภาษาการออกแบบที่เป็นหนึ่งเดียวไม่ควรเป็นเพียงชุดของกฎคงที่และอะตอมแต่ละตัว มันควรจะเป็นระบบนิเวศที่กำลังพัฒนา—Airbnb เกี่ยวกับการสร้างภาษาภาพ

การสร้างโมเลกุล

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

การรวมป้ายกำกับ (atom) ด้วยปุ่มอินพุต (atom) เพื่อสร้างฟังก์ชันการค้นหาเป็นตัวอย่างที่ดีขององค์ประกอบโมเลกุลที่ใช้กันทั่วไป

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

หมวดหมู่หลักที่อยู่ภายใต้ โมเลกุล/ คือ:

• ข้อมูล
• การนำทาง
• การควบคุมอินพุต

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

• รายการแบบเลื่อนลง
• สลับ
• สไลเดอร์
• แท็บ
• การแบ่งหน้า
• ตัวชี้วัดความก้าวหน้า
• ช่องวันที่
• ช่องข้อความ
• ช่องทำเครื่องหมาย
• ปุ่มตัวเลือก
• โมดูล

การสร้างสิ่งมีชีวิต

สิ่งมีชีวิตเป็นกลุ่มของอะตอมและโมเลกุล พวกมันยังสามารถเป็นส่วนหนึ่งของสิ่งมีชีวิตอื่นๆ

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

หากช่องค้นหาที่กำหนดไว้ก่อนหน้านี้จัดกลุ่มกับส่วนประกอบอื่นๆ เช่น แถบนำทาง (โมเลกุล) และโลโก้ (อะตอม) สิ่งมีชีวิตจะถูกสร้างขึ้น ตัวอย่างคือแถบนำทางหรือปฏิทิน

สิ่งมีชีวิตเช่นโมเลกุลสามารถจัดเป็นหมวดหมู่และหมวดหมู่ย่อยเดียวกันได้:

นี่คือหมวดหมู่หลักที่เราจะสร้างสำหรับ Organisms/:

• ข้อมูล
• การนำทาง
• การควบคุมอินพุต

เช่นเดียวกับโมเลกุล เราจะสร้างหมวดหมู่ย่อยสำหรับสิ่งมีชีวิตด้วย:

• รายการแบบเลื่อนลง
• สลับ
• สไลเดอร์
• แท็บ
• การแบ่งหน้า
• ตัวชี้วัดความก้าวหน้า
• ช่องวันที่

จนถึงตอนนี้ UI ส่วนใหญ่ได้รับการออกแบบมาแล้ว ดังนั้นตอนนี้จึงง่ายพอๆ กับการเรียกอินสแตนซ์ของส่วนประกอบของเราเมื่อจำเป็นสำหรับการออกแบบ

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

Runner for Sketch เพิ่มประสิทธิภาพเวิร์กโฟลว์ของนักออกแบบโดยจัดเตรียมชุดคำสั่งแป้นพิมพ์ที่พวกเขาสามารถใช้ได้แทนการค้นหาสิ่งต่างๆ ในเมนูที่ไม่มีที่สิ้นสุด ตัวอย่างเช่น พวกเขาสามารถพิมพ์คำว่า insert กดปุ่ม tab และค้นหาส่วนประกอบที่ต้องการ

เมื่อพิมพ์ atoms รายการแบบเลื่อนลงจะแสดงองค์ประกอบทั้งหมดที่อยู่ในหมวดหมู่นั้นให้เราเห็น หากอะตอมและโมเลกุลมีการแบ่งประเภทร่วมกัน จะมองเห็นเฉพาะอะตอมและจะละเว้นโมเลกุลทั้งหมด

ห่อหมก

Sketch และ Atomic Design เป็นชุดเครื่องมือที่ทรงพลังที่สามารถใช้ร่วมกันเพื่อปรับปรุงเวิร์กโฟลว์การออกแบบและอำนวยความสะดวกให้กับกรอบงานระบบการออกแบบที่มีประสิทธิภาพ

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

นักออกแบบสามารถใช้เครื่องมือต่างๆ เช่น Sketch เพื่อใช้ Atomic Design เพื่อให้เวิร์กโฟลว์มีประสิทธิภาพมากขึ้น และชุดมาตรฐานที่ทุกคนในทีมออกแบบยอมรับ รวมถึงนักพัฒนาในช่วงขั้นตอนสุดท้ายของโครงการ

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• วิธีสร้างกรอบการออกแบบที่มีประสิทธิภาพ
• การทำความเข้าใจระบบการออกแบบและรูปแบบ
• วิธีสร้าง Sketch Style Guide, Library และ UI Kit
• ทำไมสตาร์ทอัพต้องมี Styleguide
• ปลั๊กอินร่าง Zeplin – สะพานเวิร์กโฟลว์ระหว่างการออกแบบและวิศวกรรม