Atomic Design — nền tảng, nguyên tử, phân tử và sinh vật trong UI
Chúng tôi giải thích Atomic Design là gì — một phương pháp thiết kế giao diện do Brad Frost đề xuất năm 2013, mượn phép ẩn dụ về nguyên tử, phân tử và sinh vật để xây dựng hệ thống phân cấp các thành phần UI. Khác với cách tiếp cận dựa trên trang, nơi giao diện được thiết kế từng màn hình một, Atomic Design chia UI thành các phần tử có thể tái sử dụng nhỏ nhất (nguyên tử) và ghép chúng thành các cấu trúc phức tạp hơn. Theo Brad Frost (2016), phương pháp này được sử dụng trong hệ thống thiết kế của 67% các công ty lớn, bao gồm IBM, Airbnb và Google.
Những điểm chính
- Atomic Design — phương pháp chia các thành phần UI thành năm cấp độ: nguyên tử, phân tử, sinh vật, mẫu và trang.
- Nguyên tử là các phần tử HTML cơ bản (nút, trường nhập, nhãn); phân tử là sự kết hợp của các nguyên tử (trường nhập có nhãn); sinh vật là các khối phức tạp (biểu mẫu đăng nhập).
- Phương pháp này được Brad Frost đề xuất vào năm 2013 và được mô tả trong cuốn sách "Atomic Design" (2016).
- Atomic Design là nền tảng của các hệ thống thiết kế hiện đại: Material Design, Carbon (IBM), Lightning (Salesforce).
- Trong phát triển di động, Atomic Design tích hợp với các framework thành phần — Jetpack Compose và SwiftUI — nơi các thành phần tùy chỉnh mô tả tự nhiên các nguyên tử và phân tử.
Atomic Design là gì?
Atomic Design là phương pháp tạo ra các hệ thống giao diện phân cấp, trong đó mỗi phần tử UI thuộc về một trong năm cấp độ: nguyên tử (phần tử cơ bản), phân tử (sự kết hợp của nguyên tử), sinh vật (khối phức tạp), mẫu (khung dây trang) và trang (màn hình cụ thể có dữ liệu). Phép loại suy được mượn từ hóa học: nguyên tử kết hợp thành phân tử, phân tử thành sinh vật, sinh vật thành mẫu, mẫu được lấp đầy nội dung và trở thành trang.
Phương pháp này được nhà thiết kế web Brad Frost đề xuất vào năm 2013 như một phản ứng trước vấn đề "tư duy trang" — khi mỗi màn hình mới được thiết kế từ đầu mà không xem xét các thành phần hiện có. Trong cuốn sách "Atomic Design" (2016), Frost mô tả việc triển khai phương pháp trong các dự án của các công ty lớn: IBM, GE, Starbucks. Theo Nielsen Norman Group (2022), Atomic Design giảm thời gian thiết kế màn hình mới từ 30–50% nhờ tái sử dụng các thành phần có sẵn.
Atomic Design không chỉ là công nghệ mà còn là triết lý tổ chức UI. Nó không bị ràng buộc với một framework cụ thể và có thể áp dụng cả trong web (React, Vue) và phát triển di động (Jetpack Compose, SwiftUI). Tại IT Sectr, chúng tôi sử dụng Atomic Design để xây dựng hệ thống thiết kế cho khách hàng: xác định các thành phần nguyên tử ở giai đoạn thiết kế và chuyển chúng thành các thành phần mã trong Compose/SwiftUI.
Năm cấp độ: nguyên tử, phân tử, sinh vật, mẫu, trang
Mỗi cấp độ của Atomic Design giải quyết vấn đề riêng và có phạm vi trách nhiệm chặt chẽ. Nguyên tử là các khối xây dựng nhỏ nhất của giao diện không thể chia nhỏ hơn nữa mà không mất ý nghĩa: nút, trường văn bản, biểu tượng, nhãn, hộp kiểm. Nguyên tử không chứa logic kinh doanh và không phụ thuộc vào ngữ cảnh. Chúng xác định các đặc điểm trực quan cơ bản: màu sắc, kích thước, khoảng cách, kiểu chữ.
Phân tử là sự kết hợp của hai hoặc nhiều nguyên tử tạo thành các đơn vị chức năng đơn giản. Trường nhập có nhãn và thông báo lỗi là một phân tử. Thẻ sản phẩm có hình ảnh, tên và giá là một phân tử. Phân tử có thể chứa logic cơ bản (hiển thị/ẩn lỗi), nhưng không chứa quy trình kinh doanh. Phân tử là cấp độ đầu tiên mà các thành phần có thể tái sử dụng trên các màn hình khác nhau.
Sinh vật là các khối giao diện phức tạp bao gồm các phân tử và nguyên tử, thực hiện một chức năng cụ thể của ứng dụng. Biểu mẫu đăng nhập (trường email, trường mật khẩu, nút gửi, liên kết "quên mật khẩu") là một sinh vật. Tiêu đề có logo, tìm kiếm và điều hướng là một sinh vật. Sinh vật có thể chứa logic kinh doanh và truy cập API, nhưng chỉ trong phạm vi chức năng của chúng.
Mẫu là khung dây trang xác định cách bố trí các sinh vật trên màn hình mà không có nội dung cụ thể. Mẫu xác định lưới, cột, vùng nội dung — một khung dây ở cấp độ mã. Mẫu không chứa dữ liệu, chỉ có trình giữ chỗ. Chúng cho phép đánh giá cấu trúc trang trước khi điền nội dung.
Trang là các màn hình ứng dụng cụ thể nơi mẫu được điền dữ liệu thực. Ở cấp độ này, kiểm tra xem các thành phần trông như thế nào với nội dung thực (chuỗi dài, thiếu dữ liệu, lỗi). Trang là cấp độ duy nhất mà người dùng cuối nhìn thấy. Các thay đổi ở cấp độ trang không được ảnh hưởng đến nguyên tử, phân tử và sinh vật — nếu một thành phần cần thay đổi, thay đổi được thực hiện ở cấp độ của nó và trang tự động tiếp nhận.
Lợi ích và hạn chế của Atomic Design
Lợi ích của Atomic Design trở nên rõ ràng khi mở rộng quy mô giao diện. Một thư viện thành phần duy nhất đảm bảo tính nhất quán trực quan: một nút trông giống nhau trên tất cả các màn hình vì nó là cùng một nguyên tử. Theo Brad Frost (2016), các công ty triển khai Atomic Design giảm thời gian phát triển màn hình mới từ 30–50% nhờ tái sử dụng các phân tử và sinh vật có sẵn.
| Đặc điểm | Atomic Design | Cách tiếp cận dựa trên trang |
|---|---|---|
| Tái sử dụng thành phần | Cao (nguyên tử, phân tử, sinh vật) | Thấp (mỗi màn hình từ đầu) |
| Tính nhất quán trực quan | Đảm bảo | Kiểm soát thủ công |
| Tốc độ tạo màn hình mới | Cao (lắp ráp từ khối có sẵn) | Thấp (thiết kế + đánh dấu từ đầu) |
| Độ phức tạp triển khai | Cao (cần danh mục thành phần) | Thấp (mô hình quen thuộc) |
| Khả năng kiểm thử | Cao (mỗi nguyên tử độc lập) | Tích hợp (toàn bộ màn hình cùng lúc) |
Hạn chế — Atomic Design không mô tả cách quản lý trạng thái ứng dụng. Phương pháp chỉ trả lời câu hỏi "làm thế nào để tổ chức các thành phần UI" nhưng không đề cập đến logic kinh doanh, định tuyến hoặc quản lý dữ liệu. Hạn chế thứ hai là khó khăn trong việc xác định ranh giới: phân tử kết thúc ở đâu và sinh vật bắt đầu từ đâu? Trong thực tế, ranh giới rất mờ nhạt và các nhóm khác nhau có thể phân loại cùng một thành phần theo cách khác nhau. Nên thiết lập các quy tắc trong token thiết kế và danh mục thành phần (Storybook, Jetpack Compose Preview).
Hạn chế thứ ba là sự trừu tượng quá mức cho các dự án nhỏ. Nếu ứng dụng chỉ gồm 5 màn hình, việc tạo hệ thống phân cấp nguyên tử và phân tử là công việc không cần thiết. Atomic Design trở nên có lợi khi số lượng màn hình vượt quá 20 và các thành phần được tái sử dụng trên các trang khác nhau.
Atomic Design vs Feature-Sliced Design
Atomic Design và Feature-Sliced Design (FSD) giải quyết các vấn đề khác nhau và có thể được sử dụng cùng nhau. Atomic Design là phương pháp tổ chức các thành phần UI, FSD là phương pháp tổ chức các lớp kinh doanh và toàn bộ ứng dụng. Atomic Design trả lời câu hỏi "làm thế nào để chia UI thành các phần có thể tái sử dụng", FSD trả lời "làm thế nào để tổ chức mã xoay quanh các tính năng kinh doanh". Chúng không cạnh tranh: bạn có thể có cấu trúc FSD với các lớp features và entities, và trong mỗi lớp sử dụng Atomic Design để tổ chức các thành phần UI.
| Tiêu chí | Atomic Design | Feature-Sliced Design |
|---|---|---|
| Phạm vi | Thành phần UI | Kiến trúc ứng dụng |
| Đơn vị nhóm | Phép ẩn dụ hóa học (nguyên tử → phân tử → sinh vật) | Tính năng kinh doanh (lát cắt) |
| Phụ thuộc | Từ nguyên tử đến trang (từ dưới lên) | Từ ứng dụng đến chia sẻ (từ trên xuống) |
| Xử lý dữ liệu | Không được mô tả | Qua các phân đoạn model + api |
| Mở rộng quy mô | Ngang (nhiều thành phần hơn) | Dọc (nhiều tính năng hơn) |
Sự kết hợp điển hình: FSD xác định cấu trúc mô-đun của ứng dụng (lớp, lát cắt), Atomic Design xác định cấu trúc bên trong của các thành phần UI trong mỗi lát cắt. Ví dụ: lát cắt feature.auth chứa các phân tử (LoginForm, PasswordInput) và sinh vật (AuthPage) được lắp ráp theo quy tắc Atomic Design. Lớp chia sẻ chứa các nguyên tử (Button, Input, Label) được tái sử dụng trên tất cả các tính năng.
Atomic Design trong ứng dụng di động: Compose và SwiftUI
Jetpack Compose và SwiftUI hỗ trợ tự nhiên hệ thống phân cấp Atomic Design thông qua thành phần tổng hợp. Nguyên tử trong Compose là các hàm @Composable cơ bản: AppButton, AppTextField, AppCheckbox. Mỗi hàm chấp nhận các tham số tùy chỉnh (màu sắc, kích thước, trạng thái) và không chứa logic kinh doanh. Nguyên tử được định nghĩa trong lớp chia sẻ và xuất dưới dạng bộ công cụ UI.
Phân tử là các hàm @Composable kết hợp nhiều nguyên tử: LabeledTextField (nhãn + trường nhập + thông báo lỗi), ProductCard (hình ảnh + tên + giá). Phân tử có thể chứa trạng thái cơ bản (tính hợp lệ của trường) nhưng không truy cập API hoặc ViewModel. Chúng được tái sử dụng trong các sinh vật khác nhau.
Sinh vật là các hàm @Composable ở cấp độ tính năng: LoginForm (LabeledTextField cho email + LabeledTextField cho mật khẩu + AppButton gửi + liên kết khôi phục). Sinh vật làm việc với ViewModel thông qua các hàm Intent và có thể chứa logic kinh doanh. Trong SwiftUI, hệ thống phân cấp tương tự được xây dựng thông qua @ViewBuilder và các cấu trúc View tùy chỉnh.
Trong SwiftUI, nguyên tử là cấu trúc View tùy chỉnh AppButton, phân tử là trường nhập có nhãn trên HStack, sinh vật là biểu mẫu đăng nhập. Cấu trúc này cho phép tái sử dụng các thành phần trên tất cả các màn hình — thay đổi một nguyên tử (màu nút) tự động áp dụng cho tất cả các màn hình. Sự kết hợp của Atomic Design với hệ thống thiết kế đảm bảo tính nhất quán giao diện mà không cần kiểm soát thủ công từng màn hình.
Câu hỏi thường gặp
Có cần tuân thủ nghiêm ngặt năm cấp độ của Atomic Design không?
Năm cấp độ là một khuyến nghị, không phải luật. Nhiều hệ thống thiết kế (Material Design, IBM Carbon) sử dụng 3 hoặc 4 cấp độ: thành phần cơ bản, thành phần tổng hợp và mẫu. Quy tắc chính là mỗi thành phần thuộc về một cấp độ và có thể được tái sử dụng ở các cấp độ cao hơn. Nếu bạn thấy các cấp độ "phân tử" và "sinh vật" trong dự án của mình không khác biệt — hãy hợp nhất chúng. Nguyên tử và trang là các cấp độ bắt buộc duy nhất.
Làm thế nào để kiểm thử các thành phần Atomic Design?
Nguyên tử được kiểm thử trực quan (kiểm thử ảnh chụp nhanh, Compose Preview) — xác minh rằng nút với các thuộc tính nhất định hiển thị chính xác. Phân tử được kiểm thử như sự kết hợp của các nguyên tử — trạng thái được kiểm tra (lỗi, thành công, vô hiệu hóa). Sinh vật yêu cầu kiểm thử tích hợp — tương tác với ViewModel được kiểm tra (gửi biểu mẫu, tải dữ liệu). Tại IT Sectr, chúng tôi sử dụng Compose Test cho Android và XCTest cho iOS; cho kiểm thử trực quan — Paparazzi (Android) và SnapshotTesting (iOS).
Có thể sử dụng Atomic Design mà không có hệ thống thiết kế không?
Có thể, nhưng hiệu quả giảm. Không có hệ thống thiết kế và token thiết kế, các nguyên tử không có phong cách thống nhất — mỗi nhà phát triển tạo nguyên tử riêng với màu sắc và khoảng cách tùy ý, dẫn đến không nhất quán trực quan. Atomic Design và hệ thống thiết kế là các khái niệm bổ sung: Atomic Design xác định hệ thống phân cấp, hệ thống thiết kế xác định ngôn ngữ trực quan. Nên triển khai chúng cùng nhau: đầu tiên là token thiết kế (màu sắc, kiểu chữ, khoảng cách), sau đó là nguyên tử, sau đó là phân tử và sinh vật.
Làm thế nào để đối phó với "vùng nguyên tử" (quá nhiều nguyên tử)?
"Vùng nguyên tử" là tình huống số lượng nguyên tử vượt quá giới hạn hợp lý (100+) và việc tìm thành phần cần thiết mất nhiều thời gian hơn viết từ đầu. Giải pháp là đặt nguyên tử theo tính năng: nguyên tử chỉ được sử dụng bởi một tính năng nên được lưu trữ trong tính năng đó, không phải trong chia sẻ. Trong chia sẻ chỉ đặt các nguyên tử toàn cục (Button, Text, Input). Theo Brad Frost, việc đặt theo tính năng giảm số lượng nguyên tử chia sẻ từ 60–70% mà không mất khả năng tái sử dụng.
Atomic Design chỉ dành cho UI hay cũng dành cho mã?
Atomic Design ban đầu là phương pháp thiết kế giao diện, nhưng trong thực tế hiện đại cũng được sử dụng để tổ chức mã. Trong các công cụ thiết kế (Figma, Sketch), nguyên tử là thành phần thư viện; trong mã, chúng là hàm và lớp. Phương pháp không phân biệt giữa thiết kế và mã — nguyên tử giống nhau cả trong bản phác thảo và trong triển khai. Tại IT Sectr, chúng tôi sử dụng supernova.io để đồng bộ hóa nguyên tử thiết kế và nguyên tử mã, loại bỏ sự khác biệt giữa bản phác thảo và giao diện hoàn thiện.
Tóm tắt
- Atomic Design là phương pháp tổ chức phân cấp các thành phần UI, sử dụng phép ẩn dụ về nguyên tử, phân tử, sinh vật, mẫu và trang.
- Nguyên tử là các phần tử cơ bản (nút, đầu vào); phân tử là sự kết hợp của chúng (trường có nhãn); sinh vật là các khối phức tạp (biểu mẫu tìm kiếm).
- Mẫu xác định khung, trang — việc điền dữ liệu cụ thể.
- Atomic Design không quản lý trạng thái hoặc logic kinh doanh — nó chỉ xử lý việc tổ chức lớp UI.
- Trong phát triển di động, nguyên tử được mô tả tự nhiên bằng hàm @Composable (Android) và cấu trúc View (iOS).
- Atomic Design kết hợp tốt với FSD: FSD xác định kiến trúc, Atomic Design tổ chức UI trong các lát cắt.
- Các lợi ích chính là tái sử dụng thành phần, nhất quán trực quan và tốc độ tạo màn hình mới.
Chúng tôi sẽ phát triển ứng dụng di động chìa khóa trao tay
IT Sectr tạo các ứng dụng iOS và Android cho các công ty khởi nghiệp và doanh nghiệp từ năm 2017. Chúng tôi sẽ tư vấn và đề xuất giải pháp tốt nhất cho bạn.
Đọc thêm