Một cách nhìn giao diện từ dưới lên
Atomic design đề nghị một cách chia giao diện thành năm tầng, từ nhỏ đến lớn. Ý tưởng lấy từ hoá học: vật chất được tạo thành từ nguyên tử, nguyên tử liên kết thành phân tử, phân tử tạo nên những cấu trúc phức tạp hơn. Brad Frost dùng hình ảnh này để đặt tên cho các tầng của giao diện. Giá trị của nó không nằm ở cái tên, mà ở chỗ nó buộc đội trả lời một câu hỏi cụ thể cho mỗi phần của màn hình: phần này thuộc tầng nào, và nó được ghép từ những gì?
Năm tầng
| Tầng | Là gì | Ví dụ ở Giỏ Xanh | Câu hỏi để nhận ra |
|---|---|---|---|
| Nguyên tử (atom) | Phần nhỏ nhất còn có nghĩa, không chia được nữa | Nút, ô nhập, nhãn giá, biểu tượng, huy hiệu "-20%" | Tách nhỏ hơn thì có còn dùng được không? |
| Phân tử (molecule) | Vài nguyên tử ghép lại làm một việc | Ô tìm kiếm (ô nhập + nút), bộ chọn số lượng (nút trừ + số + nút cộng) | Nó làm đúng một việc nhỏ không? |
| Sinh vật (organism) | Một khối giao diện hoàn chỉnh, có thể đứng riêng | Thẻ sản phẩm, đầu trang, giỏ hàng thu gọn | Người dùng có nhận ra nó như một "khu vực" không? |
| Khuôn (template) | Bố cục trang với các sinh vật đặt vào chỗ, chưa có nội dung thật | Khuôn trang danh mục: đầu trang, bộ lọc, lưới thẻ sản phẩm | Nó mô tả cấu trúc hay nội dung? |
| Trang (page) | Khuôn đổ nội dung thật vào | Trang "Rau củ" hôm nay với 48 món, có món hết hàng | Nó có dữ liệu thật, trường hợp thật không? |
flowchart TD
A[Nguyên tử - nút, ô nhập, nhãn giá] --> B[Phân tử - ô tìm kiếm, bộ chọn số lượng]
B --> C[Sinh vật - thẻ sản phẩm, đầu trang]
C --> D[Khuôn - bố cục trang danh mục]
D --> E[Trang - Rau củ hôm nay, dữ liệu thật]Một thẻ sản phẩm, tách ra từng tầng
Thẻ sản phẩm là nơi Giỏ Xanh rối nhất: 5 kiểu khác nhau cho cùng một việc. Tách nó theo atomic design:
- Nguyên tử: ảnh sản phẩm, tên món, nhãn giá, nhãn giá gạch (giá cũ), huy hiệu giảm giá, nút.
- Phân tử: khối giá (nhãn giá + giá gạch + huy hiệu), bộ chọn số lượng.
- Sinh vật: thẻ sản phẩm = ảnh + tên + khối giá + bộ chọn số lượng hoặc nút "Thêm vào giỏ".
Những hiểu lầm thường gặp
| Hiểu lầm | Thực tế |
|---|---|
| Phải xếp mọi thứ đúng tầng thì mới làm được | Ranh giới giữa phân tử và sinh vật đôi khi mờ. Đội thống nhất một cách xếp là đủ, không cần đúng tuyệt đối |
| Atomic design là quy trình làm từ dưới lên, xong nguyên tử mới vẽ trang | Đội làm đồng thời cả hai chiều: nhìn trang để biết cần gì, làm nguyên tử để ghép trang |
| Năm tầng là năm thư mục trong code | Đó là cách nghĩ. Thư mục code có thể đặt khác, miễn tên gọi thống nhất |
| Chỉ designer cần biết | PM và BA dùng nó để viết spec, QA dùng để biết lỗi nằm ở tầng nào |
Vì sao khuôn và trang quan trọng với PM
Hai tầng cuối thường bị bỏ qua vì trông giống "thiết kế màn hình" quen thuộc. Nhưng chính ở đây PM và BA đóng góp nhiều nhất:
- Khuôn trả lời câu hỏi cấu trúc: trang danh mục có bộ lọc ở trên hay ở bên? Lưới hai cột hay một cột trên điện thoại? Đây là quyết định sản phẩm, không chỉ là thẩm mỹ. Khi làm khuôn, các kỹ thuật ở Wireframe và prototype cơ bản dùng được ngay.
- Trang là nơi kiểm tra trường hợp khó: tên món dài ba dòng, món hết hàng, giá có hai mức giảm, danh mục chỉ có một món, ảnh không tải được. Một sinh vật trông đẹp với dữ liệu mẫu có thể vỡ với dữ liệu thật.
Đặt tên chung cho cả đội
Phần khó nhất của atomic design không phải là chia tầng, mà là đặt một tên cho mỗi phần và dùng tên đó ở mọi nơi: trong file thiết kế, trong code, trong spec, trong ticket. Nếu designer gọi là "card món", kỹ sư gọi là ProductTile, còn BA viết "ô hiển thị sản phẩm", thì ba người đang nói về ba thứ. Giỏ Xanh chọn tên tiếng Anh cho code và tiếng Việt cho tài liệu, có bảng đối chiếu, và mọi spec dùng tên trong bảng đó.
Làm ngay
Chọn màn hình quan trọng nhất của sản phẩm bạn. In hoặc chụp lại, rồi khoanh từng phần theo năm tầng: nguyên tử, phân tử, sinh vật, khuôn, trang. Ghi tên đội bạn đang gọi mỗi sinh vật. Tìm ít nhất một chỗ mà cùng một thứ có hai tên khác nhau giữa design, code và spec, và một chỗ mà dữ liệu thật (tên dài, hết hàng, không có ảnh) làm vỡ giao diện.