II.

Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Lưới là một cấu trúc 2 chiều được tạo thành từ các đường giao cắt

của trục dọc và ngang. Lưới được sử dụng để cấu trúc nội dung,

giúp các nhà thiết kế tổ chức hình ảnh và văn bản một cách hợp lý,

dễ nhìn.

https://material.io/design/layout/und
erstanding-layout.html#layout-anato
my
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Chúng ta có đủ hệ thống lưới cho từng loại nội dung luôn. Ví dụ:

● Baseline grid – Lưới đường cơ sở: bạn nhớ mấy cuốn tập có kẻ

ngang hay viết hồi nhỏ chớ? Là nó đó.

● Column grid – Lưới dạng cột: để canh các phần tử theo chiều dọc.

● Manuscript grid – Lưới bản thảo: lưới này phổ rất phổ biến, nó dùng

để ngăn cách lề và nội dung.

● Hierarchical Grid – Lưới phân cấp: thường được dùng trong thiết kế

web, để tổ chức nội dung theo thứ tự, cấp độ quan trọng.
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Hệ thống lưới 8-Point Grid System – hệ thống lưới 8-điểm, do Bryn Jackson nghĩ ra.
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Nguyên tắc cơ bản

- Sử dụng bội số của 8 để xác định kích thước, padding và margin của các phần tử. Khi mà

một phần tử block chỉ chứa text hay văn bản thì bạn cứ chỉnh kích thước text cho nhất quán

với các phần khác của giao diện, sau đó dùng padding để chỉnh kích thước của phần tử block

đó. Trong trường hợp phần tử có chiều rộng full (width: 100%) thì bạn chỉ cần chỉnh padding

top và bottom thôi là được.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Có 2 phương pháp nổi bật cho hệ thống 8-điểm

này.

- Một là bạn đặt các phần tử được thiết kế vào một hệ

thống hiển thị được xác định trước khoảng cách, vùng

đệm (padding) hay lề (margin) theo cấp số cộng của 8.

Chúng ta sẽ gọi phương pháp này là “Lưới cứng” –

Hard grid.
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Có 2 phương pháp nổi bật cho hệ thống 8-điểm

này.

- phương pháp Lưới cứng này là: bằng việc sử dụng

các khoảng cách trong suốt cho padding và margin của

phần tử rồi sau đó nhóm chúng lại. Khi đó bạn sẽ dễ

dàng kiểm soát và đặt chúng vào bản thiết kế như xếp

những viên gạch vậy.Material design – sử dụng lưới 4

điểm cũng tuân theo phương pháp này.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Có 2 phương pháp nổi bật cho hệ thống 8-điểm

này.

- Còn phương pháp thứ 2 chỉ đơn giản là chỉnh khoảng

cách theo cấp số cộng của 8 cho các phần tử riêng lẻ,

và chúng ta sẽ gọi đây là “Lưới mềm” – Soft grid.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Có 2 phương pháp nổi bật cho hệ thống 8-điểm

này.

- Phương pháp Lưới mềm như sau: khi cần lập trình

cho một giao diện, việc chỉ sử dụng một hệ thống lưới

trong thực tế là không phù hợp, vì các ngôn ngữ lập

trình không sử dụng loại cấu trúc đó để viết – thế nên

nó sẽ bị loại bỏ.
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Tại sao nó lại quan trọng?

UI nhất quán

Khi tất cả các kích thước và khoảng cách tuân theo các quy tắc giống nhau thì giao diện của bạn sẽ mặc

nhiên nhất quán thôi.

Ít quyết định, đỡ tốn thời gian hơn

Bằng việc bỏ đi 7 trong 8 lựa chọn cho việc chỉnh kích thước và khoảng cách bạn sẽ đỡ được mớ việc vặt

vãnh ảnh hưởng đến tốc độ thiết kế cũng như lập trình (nếu bạn là một designer như mình, hihi).

Thiết kế đa nền tảng

Bất chấp yếu tố hình thức của màn hình hiện nay, thì kích thước phổ biến của chúng đều chia hết cho 8 –

trên ít nhất là một chiều (ngang – dọc), mà thường thì là cả hai.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Ngoài ra, hướng dẫn mẫu – style guide – của một số nền tảng (như là Material Design) kêu gọi sử

dụng lưới 4 hoặc 8 điểm, tự nhiên làm cho hệ thống này phù hợp luôn.

Một số màn hình có kích thước khó canh chỉnh (như là iPhone 6: 375×667 điểm), nhưng cách giải

quyết khá là đơn giản. Cứ để padding và margin cho nhất quán với các thành phần khác, chỉ cần

điều chỉnh kích thước của phần tử cho phù hợp là được.
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Grid System là một thuật ngữ được dùng để chỉ phương pháp sắp

đặt các thành phần HTML theo dạng lưới dựa trên CSS. Một Grid

System rất quen thuộc và được áp dụng phổ biến là 960 Grid. 960

Grid hỗ trợ hai loại là 12 và 16 cột. Ngoài ra, bạn có thể sử dụng

một Grid System tương tự cho phép bạn xác định số cột tùy ý, đó là

Variable Grid System.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system ● 12 cột

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system ● 16 cột

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Cái tên bắt đầu với con số 960 là do Grid System này cố định chiều rộng của trang web là

960px. Với loại 12 cột thì mỗi cột sẽ có chiều rộng là 60px và tương tự là 40px cho loại 16 cột.

Ở đây tôi chỉ đề cập đến loại 12 cột (16 cột cũng tương tự).

● Bạn có thể thắc mắc tại sao chỉ là 60px với 12 cột (bởi vì 12 * 60px = 720px)? Câu trả lời là bởi

vì các cột không nằm sát nhau mà chúng cách nhau 20px, hay nói cách khác, một cột sẽ có

margin trái và phải là 10px.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Columns: Cột

● Gutter width: khoảng cách giữa các cột

● Columns width: độ rộng của cột

● Margin: lề
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

● Đối với web design, hệ thống lưới được nhiều người dùng nhất đó là multi-columns và

modular.

● 1. Multi-columns :

Đối với hệ thống lưới multi-columns, tham khảo thêm tại website
https://960.gs/
II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

960 Grid System đơn giản là hệ thống lưới cho nội dung website có

độ rộng là 960 pixel.

Với hệ thống lưới này có 2 phần : 12 column và 16 column.Trong hệ

thống 12 column, mỗi cột sẽ có độ rộng là 60px, lề trái và phải mỗi

bên là 10 px, khoảng cách giữa các cột là 20px. Ngoài ra, ta có thể

linh hoạt kết hợp các cột lại như sau :

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Từ đó, ta thấy độ rộng các cột có thể là 60, 140, 220, 300, 380, 460,

540, 620, 700, 780, 860 và 940 pixel.

II. Thực hành vẽ sitemap và dựng low wireframe

Tìm hiểu grid system

Tương tự, trong hệ thống 16

column, mỗi cột sẽ có độ rộng là

40 px. Ta cũng có thể kết hợp

chúng lại như sau :

Độ rộng mỗi cột có thể là 40, 100, 160, 220, 280, 340, 400, 460, 520,

580, 640, 700, 760, 820, 880 và 940 pixel.