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