Skip to content

Components & Patterns in Modern UI Design

Components และ Patterns เป็นองค์ประกอบสำคัญในการสร้างระบบการออกแบบ (Design System) ที่มีประสิทธิภาพและสม่ำเสมอ

Atomic Design Principles

1. Atomic Components

html
<button class="btn btn-primary">Submit</button>
<input type="text" class="form-control" placeholder="Enter your name">
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
  • ปุ่ม (Buttons)
  • Input Fields
  • ไอคอน (Icons)
  • ใช้ CSS Variables สำหรับสไตล์

2. Molecular Components

html
<div class="card">
  <img src="image.jpg" alt="Card Image" class="card-img">
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Card Description</p>
  </div>
</div>
  • การ์ด (Cards)
  • เมนู (Menus)
  • Modal Dialogs
  • ใช้ Composition Pattern

3. Organism Components

html
<header class="header">
  <nav class="navbar">
    <a href="/" class="nav-link">Home</a>
    <a href="/about" class="nav-link">About</a>
  </nav>
</header>
  • Header
  • Footer
  • Sidebar
  • ใช้ Slot-based Architecture

Essential Design Patterns

1. Navigation Patterns

html
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ol>
</nav>
  • Breadcrumbs
  • Tabs
  • Accordion
  • ใช้ ARIA attributes

2. Content Patterns

html
<div class="card-list">
  <div class="card">...</div>
  <div class="card">...</div>
</div>
  • Cards
  • Lists
  • Tables
  • ใช้ Grid Layout

3. Feedback Patterns

html
<div class="notification notification-success" role="alert">
  <p>Your changes have been saved!</p>
</div>
  • Loaders
  • Notifications
  • Tooltips
  • ใช้ Animation ที่เหมาะสม

Component Design Principles

1. ความสม่ำเสมอ (Consistency)

css
:root {
  --primary-color: #1E90FF;
  --secondary-color: #FF6347;
  --border-radius: 4px;
}
  • ใช้ชุดสไตล์เดียวกัน
  • ใช้ Design Tokens
  • ใช้ CSS Variables

2. การนำกลับมาใช้ใหม่ (Reusability)

html
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
  • สร้าง Component Library
  • ใช้ Props/Parameters
  • ใช้ Slot-based Architecture

3. ความยืดหยุ่น (Flexibility)

html
<card :title="title" :description="description" :image="image"></card>
  • ใช้ Composition
  • ใช้ Slot-based Architecture
  • ใช้ Props สำหรับ Customization

4. ความเข้าถึง (Accessibility)

html
<button aria-label="Close" tabindex="0">
  <svg><use xlink:href="#icon-close"></use></svg>
</button>
  • ใช้ ARIA attributes
  • ทดสอบกับ Screen Readers
  • ใช้ Semantic HTML

Best Practices

  • ใช้ Component-based Architecture
  • สร้าง Design System
  • ทดสอบกับผู้ใช้จริง
  • ปรับปรุงอย่างต่อเนื่อง

เครื่องมือช่วยสร้าง Components

1. UI Frameworks

2. Design Systems

3. Component Libraries

ทรัพยากรเพิ่มเติม

"Good design is obvious. Great design is transparent." - Joe Sparano