Atomic Design — พื้นฐาน อะตอม โมเลกุล และสิ่งมีชีวิตใน UI
เราอธิบายว่า Atomic Design คืออะไร — วิธีการออกแบบอินเทอร์เฟซที่เสนอโดย Brad Frost ในปี 2013 ซึ่งยืมอุปมาของอะตอม โมเลกุล และสิ่งมีชีวิตมาใช้สร้างลำดับชั้นของส่วนประกอบ UI แตกต่างจากแนวทางแบบหน้าที่ออกแบบอินเทอร์เฟซทีละหน้าจอ Atomic Design จะแบ่ง UI ออกเป็นองค์ประกอบที่นำกลับมาใช้ซ้ำได้เล็กที่สุด (อะตอม) และประกอบเป็นโครงสร้างที่ซับซ้อนมากขึ้น ตามข้อมูลของ Brad Frost (2016) วิธีการนี้ถูกใช้ในระบบการออกแบบของ 67% ของบริษัทขนาดใหญ่ รวมถึง IBM, Airbnb และ Google
ประเด็นสำคัญ
- Atomic Design — วิธีการที่แบ่งส่วนประกอบ UI ออกเป็นห้าระดับ: อะตอม โมเลกุล สิ่งมีชีวิต เทมเพลต และหน้า
- อะตอมคือองค์ประกอบ HTML พื้นฐาน (ปุ่ม อินพุต ป้ายกำกับ) โมเลกุลคือการรวมกันของอะตอม (ฟิลด์อินพุตพร้อมป้ายกำกับ) สิ่งมีชีวิตคือบล็อกที่ซับซ้อน (แบบฟอร์มเข้าสู่ระบบ)
- วิธีการนี้ถูกเสนอโดย Brad Frost ในปี 2013 และอธิบายไว้ในหนังสือ "Atomic Design" (2016)
- Atomic Design เป็นรากฐานของระบบการออกแบบสมัยใหม่: Material Design, Carbon (IBM), Lightning (Salesforce)
- ในการพัฒนามือถือ Atomic Design ผสานรวมกับเฟรมเวิร์กส่วนประกอบ — Jetpack Compose และ SwiftUI — ซึ่งส่วนประกอบที่กำหนดเองจะอธิบายอะตอมและโมเลกุลได้อย่างเป็นธรรมชาติ
Atomic Design คืออะไร?
Atomic Design เป็นวิธีการสร้างระบบอินเทอร์เฟซแบบลำดับชั้น โดยแต่ละองค์ประกอบ UI จะอยู่ในหนึ่งในห้าระดับ ได้แก่ อะตอม (องค์ประกอบพื้นฐาน) โมเลกุล (การรวมกันของอะตอม) สิ่งมีชีวิต (บล็อกที่ซับซ้อน) เทมเพลต (โครงร่างหน้า) และหน้า (หน้าจอเฉพาะที่มีข้อมูล) การอุปมานี้ยืมมาจากเคมี: อะตอมรวมกันเป็นโมเลกุล โมเลกุลรวมกันเป็นสิ่งมีชีวิต สิ่งมีชีวิตรวมกันเป็นเทมเพลต เทมเพลตถูกเติมเนื้อหาและกลายเป็นหน้า
วิธีการนี้ถูกเสนอโดยนักออกแบบเว็บ Brad Frost ในปี 2013 เพื่อตอบสนองต่อปัญหาของ "การคิดแบบหน้า" — เมื่อแต่ละหน้าจอใหม่ถูกออกแบบจากเริ่มต้นโดยไม่พิจารณาส่วนประกอบที่มีอยู่ ในหนังสือ "Atomic Design" (2016) Frost อธิบายการนำวิธีการไปใช้ในโครงการของบริษัทขนาดใหญ่: IBM, GE, Starbucks ตามข้อมูลของ Nielsen Norman Group (2022) Atomic Design ลดเวลาในการออกแบบหน้าจอใหม่ลง 30–50% ด้วยการนำส่วนประกอบสำเร็จรูปกลับมาใช้ใหม่
Atomic Design ไม่ใช่เทคโนโลยีแต่เป็นปรัชญาของการจัดระเบียบ UI มันไม่ได้ผูกติดกับเฟรมเวิร์กเฉพาะ และสามารถนำไปใช้ได้ทั้งในเว็บ (React, Vue) และการพัฒนามือถือ (Jetpack Compose, SwiftUI) ที่ IT Sectr เราใช้ Atomic Design เพื่อสร้างระบบการออกแบบให้ลูกค้า: เราระบุส่วนประกอบอะตอมในขั้นตอนการออกแบบและถ่ายโอนไปยังส่วนประกอบโค้ดใน Compose/SwiftUI
ห้าระดับ: อะตอม โมเลกุล สิ่งมีชีวิต เทมเพลต หน้า
แต่ละระดับของ Atomic Design แก้ปัญหาของตัวเองและมีขอบเขตความรับผิดชอบที่ชัดเจน อะตอม เป็นส่วนประกอบที่เล็กที่สุดของอินเทอร์เฟซที่ไม่สามารถแบ่งย่อยต่อไปได้โดยไม่สูญเสียความหมาย: ปุ่ม ฟิลด์ข้อความ ไอคอน ป้ายกำกับ กล่องเลือก อะตอมไม่มีตรรกะทางธุรกิจและไม่ขึ้นกับบริบท พวกมันกำหนดลักษณะภาพพื้นฐาน: สี ขนาด ระยะห่าง การพิมพ์
โมเลกุล คือการรวมกันของอะตอมสองตัวขึ้นไปที่สร้างหน่วยฟังก์ชันอย่างง่าย ฟิลด์อินพุตพร้อมป้ายกำกับและข้อความแสดงข้อผิดพลาดคือโมเลกุล การ์ดสินค้าพร้อมรูปภาพ ชื่อ และราคาคือโมเลกุล โมเลกุลสามารถมีตรรกะพื้นฐาน (แสดง/ซ่อนข้อผิดพลาด) แต่ไม่มีกระบวนการทางธุรกิจ โมเลกุลเป็นระดับแรกที่ส่วนประกอบสามารถนำกลับมาใช้ซ้ำได้ในหน้าจอต่างๆ
สิ่งมีชีวิต คือบล็อกอินเทอร์เฟซที่ซับซ้อนประกอบด้วยโมเลกุลและอะตอมที่ใช้ฟังก์ชันเฉพาะของแอปพลิเคชัน แบบฟอร์มเข้าสู่ระบบ (ฟิลด์อีเมล ฟิลด์รหัสผ่าน ปุ่มส่ง ลิงก์ "ลืมรหัสผ่าน") คือสิ่งมีชีวิต ส่วนหัวที่มีโลโก้ การค้นหา และการนำทางคือสิ่งมีชีวิต สิ่งมีชีวิตสามารถมีตรรกะทางธุรกิจและเข้าถึง API ได้ แต่เฉพาะในขอบเขตของฟังก์ชันของมันเท่านั้น
เทมเพลต คือโครงร่างหน้าที่กำหนดการจัดวางสิ่งมีชีวิตบนหน้าจอโดยไม่มีเนื้อหาเฉพาะ เทมเพลตกำหนดกริด คอลัมน์ พื้นที่เนื้อหา — โครงร่างในระดับโค้ด เทมเพลตไม่มีข้อมูล มีเพียงตัวยึดตำแหน่งเท่านั้น เทมเพลตช่วยให้ประเมินโครงสร้างหน้าก่อนเติมเนื้อหา
หน้า คือหน้าจอแอปพลิเคชันเฉพาะที่เทมเพลตถูกเติมด้วยข้อมูลจริง ในระดับนี้จะตรวจสอบว่าส่วนประกอบดูเป็นอย่างไรกับเนื้อหาจริง (สตริงยาว ข้อมูลขาดหาย ข้อผิดพลาด) หน้าเป็นระดับเดียวที่ผู้ใช้ปลายทางเห็น การเปลี่ยนแปลงในระดับหน้าไม่ควรส่งผลต่ออะตอม โมเลกุล และสิ่งมีชีวิต — หากจำเป็นต้องเปลี่ยนส่วนประกอบ การเปลี่ยนแปลงจะทำในระดับของมัน และหน้าจะรับการเปลี่ยนแปลงโดยอัตโนมัติ
ข้อดีและข้อจำกัดของ Atomic Design
ข้อดี ของ Atomic Design จะชัดเจนเมื่อปรับขนาดอินเทอร์เฟซ ไลบรารีส่วนประกอบเดียวรับประกันความสอดคล้องทางภาพ: ปุ่มดูเหมือนกันบนทุกหน้าจอเพราะเป็นอะตอมเดียวกัน ตามข้อมูลของ Brad Frost (2016) บริษัทที่นำ Atomic Design ไปใช้ลดเวลาในการพัฒนาหน้าจอใหม่ลง 30–50% ด้วยการนำโมเลกุลและสิ่งมีชีวิตสำเร็จรูปกลับมาใช้ใหม่
| ลักษณะ | Atomic Design | แนวทางแบบหน้า |
|---|---|---|
| การนำส่วนประกอบกลับมาใช้ใหม่ | สูง (อะตอม โมเลกุล สิ่งมีชีวิต) | ต่ำ (แต่ละหน้าจอจากเริ่มต้น) |
| ความสอดคล้องทางภาพ | รับประกัน | การควบคุมด้วยตนเอง |
| ความเร็วในการสร้างหน้าจอใหม่ | สูง (ประกอบจากบล็อกสำเร็จรูป) | ต่ำ (ออกแบบ + มาร์กอัปจากเริ่มต้น) |
| ความซับซ้อนในการนำไปใช้ | สูง (ต้องมีแค็ตตาล็อกส่วนประกอบ) | ต่ำ (โมเดลที่คุ้นเคย) |
| ความสามารถในการทดสอบ | สูง (แต่ละอะตอมแยกออกจากกัน) | การบูรณาการ (ทั้งหน้าจอพร้อมกัน) |
ข้อจำกัด — Atomic Design ไม่ได้อธิบายวิธีจัดการสถานะของแอปพลิเคชัน วิธีการตอบเพียงคำถาม "วิธีจัดระเบียบส่วนประกอบ UI" แต่ไม่ได้กล่าวถึงตรรกะทางธุรกิจ การกำหนดเส้นทาง หรือการจัดการข้อมูล ข้อจำกัดที่สองคือความยากในการกำหนดขอบเขต: โมเลกุลสิ้นสุดที่ไหนและสิ่งมีชีวิตเริ่มต้นที่ไหน? ในทางปฏิบัติ ขอบเขตไม่ชัดเจน และทีมต่างๆ อาจจำแนกส่วนประกอบเดียวกันแตกต่างกัน แนะนำให้กำหนดกฎในโทเค็นการออกแบบและแค็ตตาล็อกส่วนประกอบ (Storybook, Jetpack Compose Preview)
ข้อจำกัดที่สามคือการมีนามธรรมมากเกินไปสำหรับโครงการขนาดเล็ก หากแอปพลิเคชันประกอบด้วย 5 หน้าจอ การสร้างลำดับชั้นของอะตอมและโมเลกุลเป็นงานที่ไม่จำเป็น Atomic Design จะมีประโยชน์เมื่อจำนวนหน้าจอเกิน 20 และส่วนประกอบถูกนำกลับมาใช้ซ้ำในหน้าต่างๆ
Atomic Design กับ Feature-Sliced Design
Atomic Design และ Feature-Sliced Design (FSD) แก้ปัญหาคนละอย่างและสามารถใช้ร่วมกันได้ Atomic Design เป็นวิธีการจัดระเบียบส่วนประกอบ UI ส่วน FSD เป็นวิธีการจัดระเบียบชั้นทางธุรกิจและแอปพลิเคชันโดยรวม Atomic Design ตอบคำถาม "วิธีแบ่ง UI ออกเป็นส่วนที่นำกลับมาใช้ใหม่ได้" ส่วน FSD ตอบ "วิธีจัดระเบียบโค้ดรอบคุณสมบัติทางธุรกิจ" พวกมันไม่ได้แข่งขันกัน: คุณสามารถมีโครงสร้าง FSD ที่มีชั้น features และ entities และภายในแต่ละชั้นใช้ Atomic Design เพื่อจัดระเบียบส่วนประกอบ UI
| เกณฑ์ | Atomic Design | Feature-Sliced Design |
|---|---|---|
| ขอบเขต | ส่วนประกอบ UI | สถาปัตยกรรมแอปพลิเคชัน |
| หน่วยการจัดกลุ่ม | อุปมาเคมี (อะตอม → โมเลกุล → สิ่งมีชีวิต) | คุณสมบัติทางธุรกิจ (ชิ้น) |
| การพึ่งพา | จากอะตอมไปยังหน้า (ล่างขึ้นบน) | จากแอปไปยัง shared (บนลงล่าง) |
| การจัดการข้อมูล | ไม่ได้อธิบาย | ผ่านเซกเมนต์ model + api |
| การปรับขนาด | แนวนอน (ส่วนประกอบมากขึ้น) | แนวตั้ง (คุณสมบัติมากขึ้น) |
การรวมกันทั่วไป: FSD กำหนดโครงสร้างโมดูลาร์ของแอปพลิเคชัน (ชั้น, ชิ้น) Atomic Design กำหนดโครงสร้างภายในของส่วนประกอบ UI ในแต่ละชิ้น ตัวอย่างเช่น ชิ้น feature.auth ประกอบด้วยโมเลกุล (LoginForm, PasswordInput) และสิ่งมีชีวิต (AuthPage) ที่ประกอบตามกฎของ Atomic Design ชั้น shared ประกอบด้วยอะตอม (Button, Input, Label) ที่นำกลับมาใช้ใหม่ในทุกคุณสมบัติ
Atomic Design ในแอปพลิเคชันมือถือ: Compose และ SwiftUI
Jetpack Compose และ SwiftUI รองรับลำดับชั้นของ Atomic Design อย่างเป็นธรรมชาติผ่านการประกอบส่วนประกอบ อะตอม ใน Compose คือฟังก์ชัน @Composable พื้นฐาน: AppButton, AppTextField, AppCheckbox แต่ละฟังก์ชันรับพารามิเตอร์การปรับแต่ง (สี ขนาด สถานะ) และไม่มีตรรกะทางธุรกิจ อะตอมถูกกำหนดในชั้น shared และส่งออกเป็นชุดเครื่องมือ UI
โมเลกุล คือฟังก์ชัน @Composable ที่รวมอะตอมหลายตัว: LabeledTextField (ป้ายกำกับ + ฟิลด์อินพุต + ข้อความแสดงข้อผิดพลาด), ProductCard (รูปภาพ + ชื่อ + ราคา) โมเลกุลสามารถมีสถานะพื้นฐาน (ความถูกต้องของฟิลด์) แต่ไม่เข้าถึง API หรือ ViewModel โมเลกุลถูกนำกลับมาใช้ใหม่ในสิ่งมีชีวิตต่างๆ
สิ่งมีชีวิต คือฟังก์ชัน @Composable ในระดับคุณสมบัติ: LoginForm (LabeledTextField สำหรับอีเมล + LabeledTextField สำหรับรหัสผ่าน + AppButton ส่ง + ลิงก์กู้คืน) สิ่งมีชีวิตทำงานกับ ViewModel ผ่านฟังก์ชัน Intent และสามารถมีตรรกะทางธุรกิจ ใน SwiftUI มีการสร้างลำดับชั้นที่คล้ายกันผ่าน @ViewBuilder และโครงสร้าง View ที่กำหนดเอง
ใน SwiftUI อะตอมคือโครงสร้าง View ที่กำหนดเอง AppButton โมเลกุลคือฟิลด์อินพุตพร้อมป้ายกำกับบน HStack สิ่งมีชีวิตคือแบบฟอร์มเข้าสู่ระบบ โครงสร้างนี้อนุญาตให้นำส่วนประกอบกลับมาใช้ใหม่ได้บนทุกหน้าจอ — การเปลี่ยนอะตอม (สีปุ่ม) จะนำไปใช้กับทุกหน้าจอโดยอัตโนมัติ การรวมกันของ Atomic Design กับระบบการออกแบบรับประกันความสอดคล้องของอินเทอร์เฟซโดยไม่ต้องควบคุมแต่ละหน้าจอด้วยตนเอง
คำถามที่พบบ่อย
จำเป็นต้องปฏิบัติตามห้าระดับของ Atomic Design อย่างเคร่งครัดหรือไม่?
ห้าระดับเป็นคำแนะนำ ไม่ใช่กฎ ระบบการออกแบบหลายระบบ (Material Design, IBM Carbon) ใช้ 3 หรือ 4 ระดับ: ส่วนประกอบพื้นฐาน ส่วนประกอบประกอบ และเทมเพลต กฎหลัก คือแต่ละส่วนประกอบอยู่ในระดับเดียวและสามารถนำกลับมาใช้ใหม่ในระดับที่สูงขึ้นได้ หากคุณเห็นว่าระดับ "โมเลกุล" และ "สิ่งมีชีวิต" ในโครงการของคุณไม่แตกต่างกัน — ให้รวมเข้าด้วยกัน อะตอมและหน้าเป็นระดับบังคับเพียงระดับเดียว
วิธีทดสอบส่วนประกอบของ Atomic Design?
อะตอมถูกทดสอบด้วยภาพ (การทดสอบภาพถ่าย, Compose Preview) — ตรวจสอบว่าปุ่มพร้อมคุณสมบัติที่กำหนดแสดงผลถูกต้อง โมเลกุลถูกทดสอบเป็นการรวมกันของอะตอม — ตรวจสอบสถานะ (ข้อผิดพลาด, สำเร็จ, ปิดใช้งาน) สิ่งมีชีวิตต้องการการทดสอบการบูรณาการ — ตรวจสอบการโต้ตอบกับ ViewModel (การส่งแบบฟอร์ม, การโหลดข้อมูล) ที่ IT Sectr เราใช้ Compose Test สำหรับ Android และ XCTest สำหรับ iOS สำหรับการทดสอบด้วยภาพ — Paparazzi (Android) และ SnapshotTesting (iOS)
สามารถใช้ Atomic Design โดยไม่มีระบบการออกแบบได้หรือไม่?
ได้ แต่ประสิทธิภาพลดลง หากไม่มีระบบการออกแบบและโทเค็นการออกแบบ อะตอมจะไม่มีสไตล์ที่เป็นหนึ่งเดียว — นักพัฒนาแต่ละคนสร้างอะตอมของตัวเองด้วยสีและระยะห่างตามอำเภอใจ ซึ่งนำไปสู่ความไม่สอดคล้องทางภาพ Atomic Design และระบบการออกแบบเป็นแนวคิดที่เสริมกัน: Atomic Design กำหนดลำดับชั้น ระบบการออกแบบกำหนดภาษาภาพ แนะนำให้นำไปใช้ร่วมกัน: อันดับแรกโทเค็นการออกแบบ (สี, การพิมพ์, ระยะห่าง) จากนั้นอะตอม จากนั้นโมเลกุลและสิ่งมีชีวิต
วิธีจัดการกับ "โซนอะตอม" (อะตอมมากเกินไป)?
"โซนอะตอม" คือสถานการณ์ที่จำนวนอะตอมเกินขีดจำกัดที่สมเหตุสมผล (100+) และการค้นหาส่วนประกอบที่ต้องการใช้เวลานานกว่าการเขียนจากเริ่มต้น วิธีแก้คือ การวางอะตอมตามคุณสมบัติ: อะตอมที่ใช้โดยคุณสมบัติเดียวเท่านั้นควรเก็บไว้ภายในคุณสมบัตินั้น ไม่ใช่ใน shared ใน shared จะวางเฉพาะอะตอมระดับโลก (Button, Text, Input) เท่านั้น ตามข้อมูลของ Brad Frost การวางตามคุณสมบัติจะลดจำนวนอะตอมที่ใช้ร่วมกันลง 60–70% โดยไม่สูญเสียความสามารถในการนำกลับมาใช้ใหม่
Atomic Design สำหรับ UI เท่านั้นหรือสำหรับโค้ดด้วย?
Atomic Design เดิมเป็นวิธีการออกแบบอินเทอร์เฟซ แต่ในการปฏิบัติสมัยใหม่ก็ใช้สำหรับจัดระเบียบโค้ดด้วย ในเครื่องมือออกแบบ (Figma, Sketch) อะตอมคือส่วนประกอบของไลบรารี ในโค้ดคือฟังก์ชันและคลาส วิธีการไม่ได้แยกความแตกต่างระหว่างการออกแบบและโค้ด — อะตอมเหมือนกันทั้งในแบบจำลองและการนำไปใช้ ที่ IT Sectr เราใช้ supernova.io เพื่อซิงโครไนซ์อะตอมการออกแบบและอะตอมโค้ด ซึ่งกำจัดความแตกต่างระหว่างแบบจำลองและอินเทอร์เฟซที่เสร็จสมบูรณ์
สรุป
- Atomic Design เป็นวิธีการจัดระเบียบส่วนประกอบ UI แบบลำดับชั้น โดยใช้อุปมาของอะตอม โมเลกุล สิ่งมีชีวิต เทมเพลต และหน้า
- อะตอมคือองค์ประกอบพื้นฐาน (ปุ่ม, อินพุต) โมเลกุลคือการรวมกัน (ฟิลด์พร้อมป้ายกำกับ) สิ่งมีชีวิตคือบล็อกที่ซับซ้อน (แบบฟอร์มค้นหา)
- เทมเพลตกำหนดกรอบ หน้ากำหนดการเติมข้อมูลเฉพาะ
- Atomic Design ไม่จัดการสถานะหรือตรรกะทางธุรกิจ — มันจัดการเฉพาะการจัดระเบียบชั้น UI
- ในการพัฒนามือถือ อะตอมถูกอธิบายอย่างเป็นธรรมชาติโดยฟังก์ชัน @Composable (Android) และโครงสร้าง View (iOS)
- Atomic Design เข้ากันได้ดีกับ FSD: FSD กำหนดสถาปัตยกรรม Atomic Design จัดระเบียบ UI ภายในชิ้น
- ข้อดีหลักคือการนำส่วนประกอบกลับมาใช้ใหม่ ความสอดคล้องทางภาพ และความเร็วในการสร้างหน้าจอใหม่
เราจะพัฒนาแอปพลิเคชันบนมือถือแบบครบวงจร
IT Sectr สร้างแอปพลิเคชัน iOS และ Android สำหรับสตาร์ทอัพและธุรกิจตั้งแต่ปี 2017 เราจะให้คำแนะนำและเสนอวิธีแก้ปัญหาที่ดีที่สุดแก่คุณ
อ่านเพิ่มเติม