Frontend Academy · บทเรียน

การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม

จัดหมวดหมู่คอมโพเนนต์เป็นอะตอม โมเลกุล ออร์แกนิซึม เทมเพลต และหน้า เพื่อสร้างคำศัพท์ร่วมกันระหว่างงานออกแบบกับงานวิศวกรรม

การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การออกแบบแบบอะตอมคืออะไร

การออกแบบแบบอะตอม (Atomic Design) ของ Brad Frost ในปี 2013 คือแนวคิดสำหรับจัดระเบียบคอมโพเนนต์ UI ออกเป็นห้าระดับตามความซับซ้อน ได้แก่ อะตอม โมเลกุล ออร์แกนิซึม เทมเพลต และเพจ แนวคิดนี้ช่วยให้ดีไซเนอร์และวิศวกรมีคำศัพท์ร่วมกัน

อะตอม — หน่วย building block ที่เล็กที่สุด

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

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

โมเลกุล — กลุ่มคอมโพเนนต์แบบง่าย

นำอะตอมมาประกอบกันเพื่อทำงานที่เป็นประโยชน์ เช่น SearchBar ประกอบด้วย Input + Button + Icon ส่วน FormField ประกอบด้วย Label + Input + ErrorMessage ทั้งหมดยังคงเป็นองค์ประกอบทั่วไป

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

ออร์แกนิซึม — ส่วนประกอบที่ซับซ้อน

การประกอบขนาดใหญ่ที่รวมกันเป็นส่วนต่าง ๆ ของอินเทอร์เฟซอย่างชัดเจน เช่น Header (โลโก้ + การนำทาง + แถบค้นหา + เมนูผู้ใช้), ProductCard (รูปภาพ + ชื่อเรื่อง + ราคา + ปุ่ม) และ SignupForm โดยมีบริบทเฉพาะมากขึ้น

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

เทมเพลต — โครงร่างเพจ

เลย์เอาต์ระดับไวร์เฟรมที่จัดวางออร์แกนิซึมโดยยังไม่มีเนื้อหาจริง BlogTemplate มี Header, Main ที่มีช่องสำหรับ Article และ Sidebar

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

เพจ — เนื้อหาจริง

เทมเพลตที่มีเนื้อหาจริง เพจ /blog/[slug] จะแสดงผล BlogTemplate พร้อมบทความจริง วิดเจ็ตในแถบด้านข้าง และองค์ประกอบประกอบหน้า

โครงสร้างโฟลเดอร์

หลายทีมจัดระเบียบคอมโพเนนต์ตามระดับ

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

ประโยชน์

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

ข้อวิจารณ์: การจัดหมวดหมู่อย่างเคร่งครัดทำได้ยาก

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

ทางเลือกสมัยใหม่: การจัดตามฟีเจอร์

โค้ดเบส React/Vue ขนาดใหญ่จำนวนมากนิยมจัดระเบียบตามฟีเจอร์ (auth/, checkout/, dashboard/) มากกว่าการแบ่งระดับอะตอมอย่างเคร่งครัด อย่างไรก็ตาม การออกแบบแบบอะตอมยังเหมาะกับเลเยอร์ระบบการออกแบบที่ใช้ร่วมกัน

การออกแบบแบบอะตอมใน Storybook

Storybook ปรับใช้กับการออกแบบแบบอะตอมได้ดี — การแบ่งหมวดหมู่ระดับบนสุดเป็น Atoms, Molecules และ Organisms ทำให้เรียกดูไลบรารีคอมโพเนนต์ได้ง่าย

ควรใช้การออกแบบแบบอะตอมเมื่อใด

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

ตรวจสอบความเข้าใจ

ในการออกแบบแบบอะตอม คอมโพเนนต์ประเภทใดที่สร้างจาก Input + Button + Icon และใช้เป็น SearchBar

สรุป: การออกแบบแบบอะตอม

มีห้าระดับ ได้แก่ อะตอม (Button, Input, Icon), โมเลกุล (SearchBar, FormField), ออร์แกนิซึม (Header, ProductCard), เทมเพลต (เลย์เอาต์) และเพจ (เนื้อหาจริง) ใช้คำศัพท์ร่วมกันและให้ความสำคัญกับการประกอบเป็นอันดับแรก โครงสร้างโฟลเดอร์สะท้อนเลเยอร์ต่าง ๆ เหมาะที่สุดสำหรับระบบการออกแบบที่ใช้ร่วมกัน ส่วนโฟลเดอร์ตามฟีเจอร์มักเหมาะกับโค้ดแอปมากกว่าการแบ่งแบบอะตอม

คำถามที่พบบ่อย

บทเรียน “การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม”

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

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

บทเรียน “การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม
การตั้งค่าโมโนรีโพด้วย Turborepo
ไมโครฟรอนต์เอนด์: Module Federation
โครงสร้างโฟลเดอร์ตามฟีเจอร์

← กลับไปที่ Frontend Academy