Tìm hiểu Atomic Design là gì? Vai trò của Atomic Design trong thiết kế UX/UI là gì?

Thiết kế giao diện đóng vai trò quan trọng trong quá trình phát triển dự án phần mềm, một giao diện người dùng phù hợp không chỉ tạo ra trải nghiệm người dùng tốt mà còn góp phần tối ưu hóa việc bảo trì, cập nhật các thành phần trong hệ thống sản phẩm. Trong đó, có một phương pháp thiết kế giao diện phổ biến và được đánh giá cao là Atomic Design. Nội dung sau sẽ cung cấp cho bạn thông tin sơ bộ về nguồn gốc, khái niệm Atomic Design là gì và bao gồm những gì.

Tìm hiểu Atomic Design

Atomic Design là gì?

Atomic Design là một phương pháp thiết kế giao diện (User Interface) được sáng tạo bởi Brad Frost – một Web Designer đến từ Mỹ. Bằng việc áp dụng Atomic Design, thay vì thiết kế một trang hoàn chỉnh, Designer sẽ tạo từng thành phần (Component) riêng lẻ trên giao diện, sau đó kết hợp thành một hệ thống phù hợp.

Chính như tên gọi “atomic” – có nghĩa là nguyên tử, phương pháp Atomic Design sẽ tập trung vào việc xây dựng các thành phần có tính riêng lẻ và có thể tái sử dụng trong toàn bộ hệ thống.

Hiệu quả của Atomic Design:

• Đảm bảo tính đồng bộ trong thiết kế giao diện;
• Tiết kiệm thời gian khi có thể tái sử dụng các thành phần trong dự án;
• Dễ dàng nâng cấp, bảo trì các thành phần, dự án;
• Tối ưu quy trình thiết kế.

Đánh giá ưu – nhược điểm khi áp dụng Atomic Design

Ưu điểm:

• Tính tái sử dụng: Tạo một lần nhưng có thể sử dụng nhiều lần, đây cũng là ưu điểm nổi bật nhất của Atomic Design;
• Nhanh chóng tùy chỉnh một thành phần nào đó theo yêu cầu mà vẫn giữ tính thống nhất của thành phần đó;
• Người mới dễ dàng nắm bắt quy chuẩn thiết kế và layout của giao diện;
• Hỗ trợ làm prototype nhanh chóng và đơn giản.

Nhược điểm:

• Mất thời gian nếu Team tự build một thành phần có yêu cầu phức tạp;
• Chỉnh sửa sẽ phức tạp nếu gặp trường hợp chỉ cần chỉnh sửa một thành phần ở một nơi nào đó trên phần mềm: vì đặc tính xây 1 lần, dùng nhiều lần;
• Atomic Design ưu tiên những Web Designer nhiều kinh nghiệm.

Thành phần chính trong Atomic Design là gì?

Sau khi tìm hiểu Atomic Design là gì, hãy đến với mô hình Atomic Design với 5 thành phần như sau:

Atom (Nguyên tử)

Đây là những thành phần nhỏ và cơ bản nhất, bao gồm: màu chữ, font chữ, buttons, input fields, checkboxes, links, label, button…

Molecule (Phân tử)

Bao gồm những thành phần là kết quả của sự kết hợp giữa các Atoms đã đề cập.

Ví dụ:

1. Molecule đơn giản: Buttons kết hợp với Links tạo thành một button chuyển hướng đến một trang web hay thực hiện hành động nào đó;
2. Molecule đơn giản: Khung tìm kiếm là một Molecule được kết hợp giữa: input field – button search;
3. Molecule phức tạp: Hiển thị thông tin sản phẩm sẽ bao gồm text và image để tạo thành box thông tin sản phẩm. Ngoài ra, còn có button để thêm sản phẩm vào giỏ hàng hoặc mục yêu thích.

Organism (Thực thể)

Đây là cấp cao hơn Molecule, được tạo ra bằng cách kết hợp các Molecules với nhau tạo thành một thành phần hoàn chỉnh, thường là một Section hoàn chỉnh.

Ví dụ: Hero Section được tạo nên từ Logo images, Khung tìm kiếm và các mục Menu.

Template (Mẫu)

Template là một giao diện người dùng mẫu chứa nhiều Organism hay Section, có đặc tính gần giống như output của bước Wireframing trong quy trình 6 bước thiết kế UX/UI. Template nhằm giúp Web Designer chỉnh sửa và hình dung rõ hơn về layout, section và cách các component tương tác với nhau trên giao diện.

Pages (Trang)

Pages gần như là thành quả sau khi Web Designer thiết kế và điều chỉnh templates. Mục đích của page trong Atomic Design là giúp Web Designer xem xét cách người dùng tương tác chân thực trên một trang hoàn chỉnh.

Tạm kết

Atomic Design là một phương pháp thiết kế UX/UI logic và có nhiều ưu điểm thông qua cách chia nhỏ các phần tử trong phần mềm để tạo ra hệ thống thiết kế có tính nhất quán và dễ bảo trì. Bên cạnh đó, cũng cần phải xem xét về yêu cầu và độ phức tạp của dự án có phù hợp để thực hiện Atomic Design hay không. Thông qua bài viết này, mong là bạn đã có cái nhìn tổng quan về Atomic Design là gì để có thêm hướng tham khảo cho dự án của mình.

Xem thêm:

• Ngành khoa học máy tính ra làm gì? Mức lương và cơ hội nghề nghiệp của ngành học hot nhất hiện nay
• Dân IT là gì? Những số liệu “gây sốc” trên thế giới về dân IT có thể bạn chưa biết

Để làm việc hiệu quả, đừng bỏ lỡ cơ hội sở hữu các dòng laptop hot nhất của FPT Shop với giá tốt nhất cùng ưu đãi cực sốc. Xem các laptop hot nhất đang bán ở FPT Shop tại đây:

• Laptop giá tốt