Giao diện layout grid, guide bằng action

GIAO DIỆN LAYOUT GRID, GUIDE BẰNG ACTION
I.

Grid Layout

1. Khái niệm:
•

Lưới có thể tạo ra một cấu trúc cơ bản, một khung xương cho thiết kế của
bạn. Chúng bao gồm các đường "vơ hình" mà trên đó các yếu tố thiết kế của bạn
có thể được đặt. Làm như vậy liên kết chúng với nhau trong một “hệ thống” tổng
thể và hỗ trợ các nhà thiết kế sáng tác một cách hợp lý.

•

Lưới giúp bạn có được sự liên kết và nhất quán hiệu quả mà không tốn nhiều
công sức. Nếu được thực hiện đúng cách, các thiết kế của bạn sẽ xuất hiện chu
đáo, có tổ chức, gọn gàng và hợp lý về mặt cấu trúc.

•

Ví dụ: Cách thiết kế trang đích này chia nhỏ các yếu tố của nó trên lưới 12 cột.

2. Thuật ngữ đơn vị
Các đơn vị là khối xây dựng cơ bản của mọi lưới. Nhiều đơn vị tạo thành lưới tổng
thể. Trong ví dụ dưới đây, bạn đang xem một lưới 5 đơn vị trên mobile và 1 đơn vị trên
mobile. Mỗi sọc màu tím đại diện cho một đơn vị.


3. Thuật ngữ Máng xối
Máng xối là các đường giữa các cột và hàng tách biệt từng đơn vị này. Kích thước

máng xối khá phổ biến là 20px. Vai trị của máng xối là tạo thành không gian âm (bất kể
lớn hay nhỏ) giữa các cột và hàng.
Nói một cách đơn giản nhất, máng xối là khoảng trống giữa các cột và không gian giữa
các hàng. Máng xối đặc biệt quan trọng đối với bố trí khối xây, trong đó chiều rộng
máng xối là một trong những chi tiết quan trọng nhất của bố cục.
Các sọc hẹp màu vàng trên hình minh họa bên dưới đại diện cho các máng xối tách
biệt từng đơn vị. Khoảng cách đệm à một dạng của khoảng trắng siêu nhỏ tạo cho lưới
để có không gian thở.


4. Các loại lưới
a. Lưới đường cơ sở

• Lưới đường cơ sở thiên về kỹ thuật hơn một chút, nó được xác định
bởi vị trí của văn bản. Về cơ bản, đó là khoảng cách hàng đầu hoặc


khoảng cách giữa các đường cơ sở. Lưới này giúp tạo ra trải nghiệm
tốt cho người đọc, đặc biệt là ở những nơi có nhiều văn bản để đọc.
•

Mặc dù điều quan trọng nhất đối với thiết kế in ấn như bố cục sách,
điều quan trọng là phải xem xét lưới đường cơ sở trong thiết kế web.

•

Khoảng cách giữa các dòng của website sẽ ảnh hưởng đến mức độ dễ
đọc của trang đích. Nếu văn bản quá chặt chẽ, người dùng có thể bỏ
cuộc và rời khỏi trang web của bạn hoàn toàn. Tạo sự cân bằng tốt
giữa văn bản và khoảng trắng.

b. Lưới bản thảo

Lưới bản thảo là nền tảng cho tất cả sách, báo và tạp chí. Còn được gọi là lưới một cột,
đây là một trong những cấu trúc lưới đơn giản nhất và phù hợp với các khối văn bản và
hình ảnh liên tục lớn. Về cơ bản, đó là một vùng hình chữ nhật lớn bên trong trang,
giống như một hộp giới hạn cho văn bản.

c. Lưới cột


Lưới cột giúp chia nhỏ văn bản, ảnh và hình minh họa. Đối với các trang web, bạn có
thể có bất kỳ đâu từ 2–12 hoặc thậm chí 16 cột trải dài theo chiều rộng của trang
đích. Bạn có thể đặt văn bản và hình ảnh chỉ trong một cột hoặc chúng có thể kéo dài
qua nhiều cột. Khoảng trống giữa các cột được gọi là máng xối, chúng phải có cùng
kích thước trên tất cả.

Máng xối là khơng gian giữa các cột
Không phải tất cả các lưới cột đều phải đối xứng. Ví dụ: bạn có thể sử dụng lưới cột
khơng đối xứng trong đó một số mỏng hơn trong khi một số khác rộng hơn, điều này có


thể hữu ích tùy thuộc vào hệ thống phân cấp trong thiết kế của bạn. Lưới cột không đối
xứng thường được sử dụng trên các trang web blog nơi bạn có nội dung chính trong
vùng chứa hai phần ba lớn hơn của bố cục, trong khi phần ba nhỏ hơn có thể là thanh
bên bao gồm thơng tin về blog và người viết. Hãy xem cách trang chủ blog này sử dụng
lưới cột khơng đối xứng.

d. Lưới mơ-đun

Ví dụ về lưới mô-đun


Lưới mô-đun tương tự như lưới cột nhưng khác với việc thêm hàng. Bạn sẽ thấy các tờ
báo và tạp chí sử dụng lưới mơ-đun khá nhiều để sắp xếp nội dung nhưng chúng cũng
có thể được sử dụng trên thiết kế trang web hoặc ứng dụng, chẳng hạn như trong phần
lưới sản phẩm.
Hãy xem cách Everlane sử dụng lưới mơ-đun để tổ chức lựa chọn denim của mình.

Ví dụ về lưới mô-đun trong thiết kế web (nguồn: Everlane)


Trang chủ YouTube là một ví dụ khác về lưới mô-đun đang được sử dụng. Mặc dù họ
sử dụng thanh bên ở bên trái cho các liên kết phổ biến như phần thịnh hành và phần
đăng ký, nhưng tất cả nội dung video được tổ chức thành một lưới mô-đun 4 cột để tối
đa hóa số lượng video mà người dùng có thể duyệt khi cuộn nội dung để xem.

Trang chủ YouTube là một ví dụ về lưới mơ-đun

e. Lưới phân cấp

Ví dụ về lưới phân cấp


Lưới phân cấp thường thấy nhất trong thiết kế web. Mục đích của các lưới này là sắp
xếp các phần tử theo thứ tự quan trọng. Chúng có thể linh hoạt hơn một chút nhưng
chúng vẫn sử dụng cột, hàng và mô-đun để giúp tổ chức. Chúng được tạo ra một cách
tự nhiên bằng cách đặt các đối tượng quan trọng nhất trên trang trước và sau đó tạo
một lưới xung quanh chúng.
Các trang web liên quan đến tin tức và truyền thơng có xu hướng sử dụng loại lưới này

để giúp thu hút sự chú ý đến một số bài báo và đăng nhiều hơn những bài báo
khác. Hãy xem ví dụ này về cách The New York Times sử dụng lưới phân cấp trên
trang chủ của họ.

Ví dụ về lưới phân cấp trong thiết kế web (nguồn: The New York Times)

f. Quy tắc một phần ba
“ Quy tắc một phần ba ” sử dụng một lưới nhỏ và ngụ ý rằng khi bạn đặt nội dung trên
các dòng nhất định chia nội dung thành một phần ba, kết quả sẽ dễ nhìn hơn đối với
mắt người. Ví dụ, đây là một cách tiếp cận rất thường được sử dụng trong nhiếp
ảnh. Mặc dù nó có thể là một điểm khởi đầu tốt và thường giúp bạn đến đúng sân
bóng, nhưng tơi khun bạn nên coi trọng điều này với một chút muối.


Khi mọi người nói về "giao điểm kỳ diệu" được cho là sẽ giúp bạn đặt các yếu tố thiết
kế, tơi khun bạn nên hít thở và xem xét tiềm năng của lông tơ. Thật dễ dàng để chỉ
uống trợ giúp mát lạnh, đặc biệt là vì khơng khó để tn theo “quy tắc” này, nhưng
khơng có gì về điều này có vẻ đặc biệt về mặt tốn học hoặc sinh học theo bất kỳ cách
nào - và nó chắc chắn không phải là phép thuật.

II.

Lưu ý khi thiết kế sử dụng lưới

1. Hãy nghĩ về lưới trước khi bạn thiết kế
Sau khi bạn đã nghiên cứu xong, thậm chí có thể khám phá một số khung dây có độ
trung thực thấp trên giấy, hãy tạo lưới cho trang đích của bạn. Đó là một bước đơn
giản, khi bạn đã tạo xong, bạn sẽ khơng phải nghĩ lại về nó cho tất cả các trang đích
tiếp theo. Trước khi bạn bắt đầu thiết kế, hãy nghĩ về lưới trước, thay vì để nó đến cuối
và cố gắng làm cho thiết kế của bạn phù hợp với lưới.

2. Đừng ngại phá vỡ lưới khi cần thiết
Những nhà thiết kế mới có thể cảm thấy bị giới hạn bởi ý tưởng sử dụng lưới nhưng
bạn không nên. Sau khi bạn đã tạo lưới của mình, bạn có thể phá bỏ nó! Nhưng ít nhất
bạn đang làm điều đó một cách có chủ đích và có những lý do cho quyết định thiết kế
của bạn. Bạn càng sử dụng lưới, bạn càng nhận ra đó là một hướng dẫn và nó thực sự
sẽ giúp bạn thiết kế tốt hơn nhanh hơn.

3. Đừng sợ khoảng trắng


Cân bằng khoảng trắng hoặc khoảng trắng là điều quan trọng trong thiết kế web. Đừng
cảm thấy cần phải lấp đầy mọi góc trên thiết kế trang đích. Cân nhắc lợi nhuận lớn và
khoảng cách hợp lý giữa các phần nội dung để cho phép người dùng của bạn thở và
tạm dừng khi họ đang cuộn qua trang web của bạn.

4. Hãy thử sử dụng hệ thống lưới 960
Hệ thống lưới 960 là một nỗ lực để hợp lý hóa quy trình phát triển web bằng cách cung
cấp các kích thước thường được sử dụng dựa trên chiều rộng 960 pixel. Có hai biến
thể: 12 và 16 cột.
•

Lưới 960 tn theo cấu trúc sau:

•

Tổng chiều rộng là 960px

•

Sử dụng tối đa 12 cột, mỗi cột rộng 60px

•

Sử dụng khoảng cách 10px ở bên trái và bên phải của mỗi cột để có tổng
khoảng cách rãnh là 20px

•

Tổng diện tích nội dung là 940px

Hệ thống lưới 12 cột cho phép rất linh hoạt. Dưới đây là ví dụ về cách bạn có thể sử
dụng lưới 12 cột để thêm nội dung trong bố cục 3 cột.

Ví dụ về các phần tử được đặt trên lưới 12 cột

5. Phân tích lưới của các trang web khác


Khi bạn đang duyệt internet, nên quan sát các webite của họ. Người thiết kế đang sử
dụng loại lưới nào? Họ có sử dụng nó để thiết kế trải nghiệm không? Bạn sẽ nhận thấy
lưới thành công (hoặc không thành công) như thế nào khi bạn càng chú ý đến cách tổ
chức nội dung trên các trang web khác nhau. Hãy quan sát, học hỏi và sử dụng nó để
tạo ra những thiết kế trang web tốt hơn.

6. Một số ví dụ về các loại lưới thường dùng

Lưới mười hai đơn vị

Lưới mười bốn đơn vị

Lưới mười bốn đơn vị


Lưới mười ba cột

Lưới mười ba cột


Lưới mười sáu cột


Lưới mười sáu cột

Lưới kết hợp


Lưới kết hợp

Lưới kết hợp

Lưới kết hợp


III.

Thiết kế hệ thống lưới Grid System

1. Bắt đầu với vùng làm việc trống

Luôn luôn dễ dàng hơn nếu hướng dẫn dựa trên thực tế. Vì vậy, hãy thực hành. Bạn
phải thiết kế một chương trình cho một cuộc triển lãm các bộ sưu tập. Bạn sẽ làm trên


kích thước giấy A4. Bạn cũng được cung cấp thơng tin và các hình ảnh kích cỡ khác
nhau. Và bạn có vùng làm việc của bạn.

2. Phân chia tỉ lệ
Hệ thống lưới mà chúng ta thiết kế sẽ dựa trên sự phân chia tỉ lệ 1:1, 414. Sử dụng
khổ giấy như là những đường dẫn để có thể tạo tỉ lệ trên hệ thống lưới, điều này sẽ
cung cấp các thành phần của các thiết kế có mối liên hệ với nhau. hệ thống lưới và
kích thước giấy.
Đây là một trong những cách dễ nhất để tạo ra một mạng lưới cân bằng. Bằng cách
sử dụng kích thước của tờ giấy như một tiêu chuẩn, dựa vào đó tạo ra tỉ lệ cho các
hệ thống lưới.
Bạn có đoạn thẳng A———B—————-C Tỉ lệ vàng sẽ là tỉ lệ sau: AB x 1,414 = BC.
Và BC x 1,414 = AC. Như vậy tỉ lệ 1 : 1,414 trong khổ A4 thì: Cạnh ngắn x 1,1414 = Cạnh
dài.
Các xác định tỉ lệ vàng.

3. Bắt đầu sáng tạo
Nhiều người nói rằng hệ thống lưới bóp nghẹt sáng tạo, nhưng tơi khơng đồng ý. Hệ
thống lưới tạo ra những vùng làm việc và cho nhà thiết kế các câu trả lời như “nên để
chúng ở đâu”, “lớn thế nào cho đủ” … Một hệ thống lưới tốt sẽ chỉ đường cho những
câu hỏi như vậy.


Vậy chúng ta sẽ có hệ thống lưới của mình. Hãy bắt đầu xử lý vùng văn bản, hình dạng
và vị trí. Chúng ta có thể khám phá qua làm thế nào để hình ảnh và chữ có thể làm việc
cùng nhau trên rất nhiều kiểu trang.

Vị trí có thể khiến một số thứ dễ sử dụng
Đây là một lý thuyết có tồn tại được gọi là “Thẩm mỹ tạo khả năng sử dụng”. Tôi cho
rằng đây là một lý thuyết thú vị. Lý thuyết này cho rằng thiết kế đẹp tất nhiên có nhiều
khả năng sử dụng hơn. Nó thách thức những lý thuyết kiểu “Tốt gỗ hơn tốt nước sơn”.
Sắp xếp các lưới bằng cách sử dụng lý thuyết và các tỉ lệ cân đối (như Golden
Section), cho phép việc tao ra kiểu dáng đẹp, cân đối. Theo lý thuyết, những thiết kế
này sau đó có thể khiến sản phẩm dễ sử dụng. Có lẽ tơi cần xem lại điểm này, nhưng
tóm lại:
Hệ thống lưới tốt khơng chỉ giúp thiết kế của bạn đẹp hơn mà giúp người dùng dễ dàng
hơn.

3. Đặt nó vào thực tế
Như trong bài viết đầu tiên của tôi, tôi sẽ thiết kế hệ thống lưới trong từng ngữ cảnh.
Đối với những bạn không phải thiết kế website, chúng ta hãy lấy một ví dụ khác như In
Ấn, tất nhiên lý thuyết này vẫn áp dụng được cho web. Nó cũng áp dụng được trong
nhiều môi trường khác, từ kiến trúc, tới thiết kế nội thất và nghệ thuật. Bạn chỉ áp dụng
nó vào khung làm việc khác nhau.
Tôi sẽ áp dụng lưới lên 2 trang sách, được gọi là hệ thống lưới không đối xứng, trái với
những hệ thống lưới đối xứng tôi đã viết.


4. Tìm bố cục của trang
Cho tỉ lệ của trang sách này, tôi sẽ sử dụng một tỉ lệ để xác định nội dung, chữ
chính và khu vực của trang. Có một cách đơn giản để làm là giảm kích thước của
khổ giấy xuống để chắc rằng tỉ lệ được đặt đúng, cân bằng. Xem hình dưới.

5. Áp dụng Vùng tỉ lệ vàng
Bây giờ, khi bạn đã đọc tới đây, bạn có thể áp dụng tỉ lệ một cách dễ dàng, ta sẽ chia
thành cột A và B.

6. Tạo hệ thống


Chúng ta đã có cột, giờ chúng ta cần vẽ các lưới để áp dụng với nhiều trang khác nhau.
Ta sẽ vẽ các đường line chỉ ra khu vực chữ và phân chia các cột.

Sau đó áp dụng đường cắt ngang chia khu vực nội dung và phần sáng tạo. Tơi gọi nó
là “Đường treo” – “Hanging Lines”, cũng khơng chắc chắn về từ chính xác. Nhưng
nội dung ở dưới đường này sẽ được thống nhất toàn bộ cuốn sách. Nó cho người đọc
sự liền mạch, xuyên suốt để họ tiếp tục để mắt tới những trang sau.

Thêm vào những đường line khác để chia thêm những khu vực cần chú ý như, hình
ảnh chú thích, thơng tin liên quan tới bài viết… để chỉ ra rằng nó khác với phần nội
dung.


Chúng ta sau đó có thể thêm vào các thiết kế vào hệ thống lưới với điều kiện, biết rõ
rằng những đối tượng thiết kế như – chữ, hình ảnh, cấu trúc mới sẽ có sự liên hệ tới
những yếu tố khác, và liên hệ với trang giấy.