Giới thiệu về Thiết kế nguyên tử cho các nhà thiết kế web

Các nguyên tử không chỉ đơn giản là các yếu tố HTML mà là cũng thuộc về phong cách của họ: phông chữ, màu sắc, kích thước và các quy tắc kiểu CSS khác. Với lời nói của Brad, các nguyên tử “thể hiện tất cả các phong cách cơ bản của bạn trong nháy mắt”.

Nguyên tử - Ví dụ

Đây là một ví dụ từ trang web của chúng tôi. Các tiêu đề của bài viết được đề xuất có thể chiếm một loại nguyên tử; họ sử dụng cùng mã HTML và CSS và có thể được dễ dàng phân biệt từ phần còn lại của nội dung.

Lưu ý rằng Hongkiat.com không được thiết kế với thiết kế nguyên tử, ở đây nó chỉ được sử dụng cho mục đích trình diễn.

Bản chất của thiết kế nguyên tử là thiết kế giao diện người dùng từ dưới lên bằng cách sử dụng năm giai đoạn này, không xác định các thành phần thiết kế nguyên tử sau đó.

2. Phân tử

Một phân tử được hình thành bởi một nhóm các nguyên tử. Các phân tử tạo thành giai đoạn tiếp theo trong hệ thống phân cấp thiết kế nguyên tử. Hãy suy nghĩ về các yếu tố UI đơn giản hơn đã có sẵn được làm từ nhiều hơn một thành phần HTML, chẳng hạn như một hình thức tìm kiếm hoặc một bài viết được đề xuất trong thanh bên.

Được tổ chức thành một phân tử đưa ra một mục đích đến từng nguyên tử. Trong một nhóm lớn hơn (phân tử), các nguyên tử phải hỗ trợ và bổ sung nhau, họ phải làm việc tốt với nhau để tạo ra một thiết kế có thể sử dụng.

Chẳng hạn, tiêu đề (một nguyên tử) phải nhấn mạnh hơn (phông chữ lớn hơn, trọng lượng hơn, v.v.) so với tên của tác giả (một nguyên tử khác) trong khối bài được đề xuất. Theo cách này, hai nguyên tử là “có nghĩa là” đến làm việc theo nhóm để có được kết quả tốt nhất.

Phân tử - Ví dụ

Sử dụng ví dụ trước của chúng tôi, bạn có thể thấy rằng trong thanh bên của Hongkiat, một khối bài được đề xuất có thể được xem là một phân tử. Một phân tử bài được đề nghị là xây dựng từ ba nguyên tử: hình thu nhỏ, tiêu đề và nguyên tử tên tác giả.

3. Sinh vật

Các sinh vật bao gồm một nhóm các phân tử, nguyên tử (và đôi khi sinh vật khác). Trong thiết kế web, các sinh vật là các thành phần UI phức tạp hơn đại diện cho phần dứt khoát của trang, chẳng hạn như tiêu đề, chân trang hoặc thanh bên.

Các sinh vật có thể được tạo thành từ các loại phân tử khác nhau, ví dụ, một thanh bên có thể bao gồm một thanh tìm kiếm và các loại vật dụng khác nhau hoặc của cùng một phân tử lặp đi lặp lại nhiều lần, ví dụ một số ít các khối bài liên quan với nhau. Và, nó có thể là sự kết hợp của hai.

Sinh vật - Ví dụ

Trên trang web của Hongkiat, thanh bên có thể là một sinh vật. Nó bao gồm một thanh tim kiêm (một loại phân tử, chỉ hiển thị một lần) và một số bài viết được đề xuất (một loại phân tử khác, được hiển thị nhiều lần).

Tuy nhiên, sinh vật sidebar cũng có thể được coi là thành phần của một phân tử (thanh tìm kiếm) và sinh vật khác (tiện ích bài viết được đề xuất với một số bài viết được đề xuất). Thiết kế nguyên tử là một mô hình linh hoạt, các quy tắc không quá nghiêm ngặt, vì vậy trong trường hợp này chúng ta có thể định nghĩa cùng một khối xây dựng cả dưới dạng phân tử và sinh vật.

4. Mẫu

Giai đoạn tiếp theo trong hệ thống phân cấp thiết kế nguyên tử là mẫu. Như bạn có thể thấy, đây là khi thiết kế nguyên tử ngừng sử dụng phép tương tự hóa học. Brad kiềm chế thuật ngữ vào thời điểm này vì anh nghĩ rằng nó ít hiểu cho khách hàng và các bên liên quan khác, và về cơ bản đó là hai giai đoạn cuối (mẫu và trang) mà các nhà thiết kế cần bán.

Mẫu được xây dựng của các sinh vật. họ đang đối tượng cấp trang nhưng không có nội dung cuối cùng. Mục đích của các mẫu là để đại diện cho cấu trúc của nội dung cơ bản.

Mẫu hiển thị cách các nguyên tử, phân tử, sinh vật khác nhau “hoạt động cùng nhau trong bối cảnh của một bố cục”. Chúng cơ bản đại diện cho bộ xương của một trang.

Mẫu - Ví dụ

Ví dụ, suy nghĩ về một mẫu trang chủ với hình ảnh giữ chỗ và khối văn bản ipsum lorem.

Dưới đây, bạn có thể xem một ví dụ từ cuốn sách Thiết kế nguyên tử. Đây là mẫu trang chủ của tạp chí TimeInc. Các nguyên tử, phân tử và sinh vật đều ở vị trí của chúng nhưng chỉ với nội dung sơ đồ.

5. Trang

Trang đại diện cho giai đoạn cuối cùng của hệ thống phân cấp thiết kế nguyên tử. Các trang là “trường hợp cụ thể của mẫu”. Trong giai đoạn trang, các mẫu có được với nội dung thực (sao chép, microcopy, hình ảnh, video, v.v.), giống như chúng sẽ xuất hiện trong giao diện người dùng thực.

Các trang cho phép các nhà thiết kế xem cách trải nghiệm người dùng cuối cùng sẽ như thế nào, kiểm tra thiết kế với người dùng thực và đo lường nó hoạt động tốt như thế nào về khả năng sử dụng, chuyển đổi, khả năng truy cập và các số liệu khác.

Các biến thể của trang và mẫu

Mục tiêu khác của giai đoạn trang là thực hiện biến thể mẫu khả thi. Chúng tôi nói về các biến thể mẫu khi bên dưới mẫu giống nhau nhưng dân cư nội dung là (hơi) khác nhau. Ví dụ: nếu bạn muốn hiển thị nội dung khác nhau cho các nhóm người dùng khác nhau (ví dụ: đối với khách truy cập so với người dùng đã đăng nhập) hoặc khi một tiêu đề dài hơn nhiều so với các nhóm khác.

Sử dụng các biến thể mẫu là rất quan trọng nếu chúng ta muốn tạo kiên định và kiên cường giao diện người dùng. Các thành phần nhỏ hơn (nguyên tử, phân tử, sinh vật) phải hoạt động tốt trong các tình huống khác nhau.

Ví dụ, một nút phải có thể nhấp được với bất cứ yếu tố nào xung quanh. Nếu nó trông không hoạt động trong một biến thể nhất định, bạn cần thiết kế lại nguyên tử nút cho đến khi nó phù hợp với tất cả các trường hợp sử dụng.

Trang - Ví dụ

Dưới đây, bạn có thể thấy giai đoạn trang của mẫu trang chủ TimeInc trước đó. Trông thật khác nhỉ? Đây chỉ là một biến thể mẫu, Tuy nhiên. Để có một giao diện người dùng hiệu quả, nhóm thiết kế phải suy nghĩ kỹ về những gì có thể thay đổi trong trang web thực sự. Sau đó, họ cũng cần kiểm tra thiết kế cho biến thể mẫu (trang) đó.