Cơ bản về thiết kế theo mô hình nguyên tử đối với Frontend Development

Rate this post

Thiết kế theo mô hình nguyên tử (Atomic Design) là một xu hướng ngày càng lên ngôi trong lĩnh vực thiết kế Frontend web. Liệu bạn có biết nó là gì và các khái niệm cơ bản xoay quanh nó không?

Atomic Design được nhà thiết kế Brad Frost đưa ra vào năm 2013 và giới thiệu trong cuốn sách cùng tên mà bạn có thể đọc online miễn phí ở đây. Trong đó, nhà thiết kế này nêu ra quan điểm về sự nhận diện thiết kế UI theo xu hướng nguyên tử hóa.

Tại sao là Thiết kế theo Atomic Design?

Chúng ta thường nói nhiều về hệ thống thiết kế (design system), nhưng phần lớn lại hướng tới màu sắc, định dạng chữ, khung cột (grid). Tất nhiên, ta không cho rằng điều ấy là kém quan trọng, song việc thiết kế một cách có hệ thống dường như quan trọng và mang tính thống nhất hơn.

Trở lại một cách khoa học hơn, chúng ta sẽ nhận thấy công thức hóa học thường bắt đầu từ các nguyên tử. Như các bạn thấy, nhiều nguyên tử kết hợp lại với nhau thì ta sẽ lần lượt có phân tử và các thành phần phức tạp, tạo nên thế giới vật chất ngày nay.

Cũng tương tự như vậy, các website cũng là tập hợp của các element nhỏ được nhóm lại thành các block và sử dụng chung trong các template. Điều đó dẫn tới ta có thể đi ngược về các element nhỏ để kiến tạo nên các giá trị khởi điểm đầu tiên.

[sociallocker]

Thế nào là Thiết kế theo mô hình Atomic Design?

Thiết kế theo mô hình nguyên tử được định hình bởi các khái niệm (Brad Frost định nghĩa bằng tiếng Anh, nhưng Code Tốt xin truyền tải theo cách nắm bắt để bạn đọc hình dung rõ hơn):

  1. Elements
  2. Modules
  3. Blocks
  4. Templates
  5. Pages

Elements

Elements trong khái niệm này ở đây bao gồm 1 và chỉ 1 element. Đối chiếu với tập hợp HTML5 element, ta sẽ hiểu đây là thẻ input, submit hay label chẳng hạn:

Ví dụ các Element trong Atomic Design
Ví dụ các Element trong Atomic Design

Element có thể bao gồm các thuộc tính font-size, color, animation hay bất kì thuộc tính nào có ảnh hưởng tới nó. Lưu ý trong tình huống này, thường các element khi độc lập sẽ không nên bao gồm space với bên ngoài (chẳng hạn như margin).

Ví dụ bảng màu và typography trong Atomic Design
Ví dụ bảng màu và typography trong Atomic Design

Chẳng hạn, tôi định nghĩa element input như sau:

.input {
  padding: 10px 25px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 1.5px;
  color: #232425;
  border: 1px solid #777;
}

Tất nhiên, nếu xét ở vị trí riêng lẻ thì các element này với style sẽ dường như khá trừu tượng và khó hình dung cho tới khi bạn đặt chúng vào trong 1 block cụ thể.

Modules

Điều thú vị hơn sẽ đến là khi ta kết hợp các Element ở trên với nhau, từ đó tạo ra khái niệm Modules. Khi các Element kết hợp với nhau và trở thành “phân tử”, chúng hữu hình và trở nên quan trọng tựa như xương sống trong hệ thống thiết kế vậy.

Ví dụ cụ thể chính là khi ta nhóm button, label và input vào để trở thành module tìm kiếm chẳng hạn:

Ví dụ module trong Atomic Design
Ví dụ module trong Atomic Design

Điều này khuyến khích việc xây dựng theo hướng “làm một việc và làm tốt nhất”.

Khi kết hợp thành 1 module, giữa các nguyên tử sẽ cần chịu sự giám sát của 1 parent class (ta tạm gọi là module class). Điều này dẫn tới việc xây dựng các nguyên tắc style kết hợp, chẳng hạn như sau:

.module {
  display: flex;
  flex-wrap: wrap;
}

.module .label {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.module .input {
  margin-right: 5px;
}

.module .button {
  width: 200px;
}

Nhưng như các bạn thấy, chúng ta không đả động nhiều về mặt style các thuộc tính typography hay color nữa, mà chỉ dàn xếp vị trí layout cho các element mà thôi.

Blocks

Ở cấp độ lớn hơn, ta kết hợp nhiều module lại để ra được Blocks. Các khối này trở thành 1 phần quan trọng có tính chất ảnh hưởng lớn đến cấu trúc layout, thường như là Header, Section, Sidebar hay Footer. Ngoài ra còn có thể là các khối linh hoạt như Grid, List, Hero,…

Ví dụ một block trong Atomic Design
Ví dụ một block trong Atomic Design

Việc hình thành Blocks đánh dấu bước quan trọng. Khách hàng có thể không hình dung ra Elements và Modules, nhưng với Blocks thì họ đã có định hình và có thể đánh giá. Trong một góc nhìn khác, ta có thể xây dựng khối mẫu và trình bày với khách hàng để họ hình dung concept. Tuy vậy, đừng làm tất cả khối vì như vậy chưa hẳn đã cần thiết.

Một đặc điểm của Blocks là có thể chứa các Modules và Elements giống hoặc khác nhau.

Nếu bạn chứa 1 Block Hero, rõ ràng tỷ lệ các Elements lặp lại sẽ ít hơn (như bao gồm Headline, Description là riêng biệt và Buttons CTA sẽ giống nhau) so với khi bạn xây dựng 1 block chứa Grid (bao gồm nhiều Item giống nhau).

Xây dựng Block là một quá trình tái sử dụng các Module và Elements một cách sáng tạo và linh hoạt.

Templates

Ở cấp độ này, bạn sẽ chuyển qua việc quan tâm tới kết quả cuối (final output), điều sẽ ảnh hưởng rất nhiều tới ý kiến của khách hàng. Các Block được kết hợp với nhau, tái sử dụng để tạo ra 1 giao diện hoàn chỉnh với bố cục khớp thiết kế.

Nếu bản thiết kế đã đủ khớp với Template, công đoạn phía sau của bạn khi xây dựng Page cụ thể sẽ rất nhẹ nhàng hơn.

Pages

Pages là cấp độ cao hơn, qua việc xây dựng nội dung hoàn chỉnh dựa trên Templates. Nói cách khác, thay vì sử dụng demo content thì trên các Pages ta bắt đầu build content hoàn chỉnh. Ở cấp độ Pages, tỷ lệ bạn nhập content và đảm bảo giống thiết kế càng cao thì càng dễ được khách hàng hài lòng.

Hoạt động trong mô hình SCSS

Cấu trúc thư mục

Việc xây dựng cấu trúc SCSS theo mô hình nguyên tử là cần thiết giúp định hình rõ hơn cách ta hoàn thiện hệ thống ở mô hình code.

Chẳng hạn bạn có thể chia theo cấu trúc sau:

--scss
----base (nơi chứa global settings và global elements)
------reset.scss
------buttons.scss 
------forms.scss
------typography.scss
------variables.scss (global settings)
---components (nơi chứa các element tái sử dụng)
------cell.scss
------card.scss
----modules (nơi chứa modules)
------hero.scss
------grid.scss
------three-up.scss
------bottom-cta.scss
----partials (nơi chứa blocks)
------header.scss
------footer.scss
------hero.scss
------sidebar.scss
----templates (nơi chứa templates)
------home.scss
------about.scss
------why.scss

Các nguyên tắc sử dụng

Tùy theo cách thức bạn sử dụng mà có thể chia theo nhiều hướng, nhưng nên giữ các quan điểm sau:

  • Global elements (typography, button, form,…) có thể sử dụng trong module, nhưng nếu rewrite thì luôn sử dụng các class theo module và edit trong file SCSS module đó.
    Ví dụ: module có chứa button thì sử dụng lần lượt 2 class là .button .hero__button (class .hero__button ở đây viết theo tiêu chuẩn BEM, còn bình thường ta sử dụng .hero-button là đủ.
  • Các thuộc tính mở rộng và tái sử dụng cho module cần sử dụng trong đúng module.
    Ví dụ: ta tái sử dụng module grid ở 2 cấp độ là 3 cột và 4 cột thì lần lượt set các class grid--three-col và grid--four-col vào và viết trong grid.scss.
  • Các thuộc tính mở rộng và tái sử dụng cho element cần sử dụng trong đúng element.
    Ví dụ: ta có cell 3 cột và 4 cột, thì như vậy cần set class cell--three-col và cell--four-col vào trong file cell.scss chứ không dùng .grid--three-col .cell hay .grid--four-col .cell

Sử dụng Sketch App trong mô phỏng thiết kế theo nguyên tử

Nếu bạn là web designer, Sketch App trên Mac dường như là một lựa chọn rất hay và đáp ứng nhu cầu thiết kế theo nguyên tử.

Nói vậy là bởi vì Sketch App cho phép bạn xây dựng đủ các thành phần theo các cấp độ nguyên tử, chẳng hạn như 1 button, sau đó 1 footer chứa button và cuối cùng là 1 template chứa footer.

Các element/component nhỏ nằm trong Sketch
Các element/component nhỏ nằm trong Sketch

Tài liệu tham khảo:

[/sociallocker]

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...