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

ระบบการออกแบบ: ไพรเมอร์

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

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

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

วิธีการเขียนโปรแกรมใน c

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

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

การออกแบบอะตอม: ระบบการออกแบบอาคาร

การออกแบบอะตอมเป็นวิธีการที่แนะนำโดย แบรดฟรอสต์ ในปี 2013 มีพื้นฐานมาจากแนวคิดที่ว่าระบบการออกแบบทุกระบบสามารถกำหนดให้เป็นชุดส่วนประกอบที่อยู่ร่วมกันได้

นี่คือภาพรวมโดยย่อของส่วนประกอบของ Atomic Design:

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

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

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

วิธีใช้ Atomic Design กับ Sketch

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

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

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

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

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

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

กฎเกสตัลต์ของ ________ บอกว่าเรามักจะจัดกลุ่มวัตถุที่อยู่ใกล้กัน

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

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

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

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

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

• เติม
• พรมแดน
• เงา
• การไล่ระดับสี

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

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

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

c และ c++

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ที่มาของวิกฤตหนี้กรีซ

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

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

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

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

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

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

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

อะไรคือความแตกต่างระหว่าง s corp และ c corp

ห่อมัน

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

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

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

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

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

ทำความเข้าใจพื้นฐาน

ไลบรารีรูปแบบคืออะไร?

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

รูปแบบ UI คืออะไร?

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

ส่วนประกอบ UI คืออะไร?

ส่วนประกอบอินเทอร์เฟซผู้ใช้ใช้เพื่อแสดงองค์ประกอบ UI ที่แตกต่างกันเช่นตารางปุ่มกล่องโต้ตอบและอื่น ๆ พวกเขาห่อหุ้มหน่วยของการโต้ตอบส่วนติดต่อผู้ใช้และใช้ในเฟรมเวิร์กยอดนิยมเช่น React, Magento และ Oracle

Atomic Design คืออะไร?

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