Trong bài viết này, mình muốn chia sẻ với bạn những mẹo và thủ thuật thực tế có thể hữu ích khi xây dựng lưới trong thiết kế giao diện di động. Đây chỉ là những lời khuyên, không phải là những giáo điều bất di bất dịch.

Chúng ta sẽ xem xét:

• Số lượng cột tối ưu
• Cách đếm các rãnh và lề đúng cách
• Lưới cố định và đáp ứng
• Độ chính xác tính toán lưới
• Lưới bên trong các thành phần riêng lẻ (mô-đun)
• Hàng và nhịp dọc

Lưới là một trong những công cụ chính của nhà thiết kế, giúp họ đạt được sự nhất quán của các thành phần, thiết lập kết nối giữa chúng và xây dựng một hệ thống trực quan trông hài hòa và giúp người dùng điều hướng.

‍

Số lượng cột tối ưu

Đừng tự giới hạn số lượng cột trong giai đoạn đầu tiên. Đầu tiên, tạo một nguyên mẫu lo-fi hoặc hi-fi cho giao diện của bạn. Quyết định các yếu tố cơ bản và luồng người dùng. Sau đó, bạn có thể bắt đầu chọn số lượng cột và kích thước tối ưu. Đừng lo lắng nếu bạn phải thay đổi số lượng cột trong quá trình này. 😎

"Số lượng cột tối ưu trong lưới cho thiết bị di động là bao nhiêu?" mình nghĩ đây là một trong những câu hỏi phổ biến nhất của những nhà thiết kế bắt đầu thiết kế giao diện di động. Quan niệm sai lầm phổ biến nhất xuất hiện khi nói đến kích thước màn hình nhỏ, chiều rộng thường không lớn hơn một vài cột trên web.

Một trong những lưới thuận tiện nhất cho giao diện di động, tương tự như web, là lưới 12 cột. Lưới này sẽ cho phép bạn đặt cả số phần tử chẵn và lẻ trong một hàng.

Nhược điểm của lưới 12 cột cho thiết bị di động là chiều rộng của một cột quá nhỏ nên bạn có thể hiếm khi tạo các phần tử có chiều rộng bằng một cột.
Nếu bạn chọn lưới 2, 4 hoặc 8 cột, hãy lưu ý các vấn đề có thể xảy ra khi đặt một số thành phần lẻ trong một hàng.

🤓 Pro-Tip

Đừng tập trung vào một lưới. Thiết kế giao diện thường có thể chứa hàng trăm màn hình khác nhau, do đó, một lưới có thể không phù hợp với tất cả các màn hình. Tạo các lưới bổ sung nếu cần, nhưng đừng quên về tính nhất quán của thiết kế.

Tính nhất quán trong các lưới sẽ giúp bạn đạt được: lề bố cục bằng nhau, rãnh hoặc tỷ lệ giữa các cột và hành vi giống nhau khi thay đổi kích thước của chính các cột.

‍

Gutter và Margin

Được rồi, chúng ta đã quyết định số lượng cột tối ưu. Hãy xác định các rãnh(Gutter) và lề(Margin).

Trước tiên, hãy xem các nguyên tắc của hệ điều hành để tìm ra biên bố cục (hiệu số). Hiện tại, lề bố cục được đề xuất tối thiểu là 16pt cho Android và iOs. Điều này có nghĩa là nếu bạn muốn tuân thủ các nguyên tắc hệ thống, lợi nhuận không được nhỏ hơn giá trị này. (Nhưng chúng có thể lớn hơn 😉)

Khi chọn lưới 12 cột, các rãnh(Gutter) giữa các cột không được quá lớn, vì do chiều rộng nhỏ của các cột và rãnh lớn giữa chúng, các cột sẽ bắt đầu chia nhỏ một cách trực quan.

Nếu bạn, giống như mình, là một fan hâm mộ của "8pt Grid", mình khuyên bạn nên chọn kích thước của rãnh(Gutter) tỷ lệ với "tiêu chuẩn 8pt". Vì vậy nhịp ngang và nhịp dọc của bố cục sẽ chồng chéo lên nhau. Bạn có thể đọc thêm về lưới 8pt tại đây: Giới thiệu về Hệ thống 8pt Grid

‍

🤓 Pro-Tip

Rãnh(Gutter) phải tương xứng với lề bố cục (offset). Nó sẽ làm cho lưới nhất quán hơn và cũng sẽ cho phép bạn dễ dàng đặt các thành phần như "băng chuyền" vào đó.

‍

Cố định(fixed) và responsive grids

Cũng như trong thiết kế web, bạn có thể sử dụng lưới cố định hoặc lưới đáp ứng trong thiết kế di động. Màn hình điện thoại thông minh không có sự khác biệt quá lớn về chiều rộng nên giải pháp tối ưu sẽ là sử dụng lưới linh hoạt và kéo dài các cột theo chiều rộng.

Mình khuyên bạn nên sử dụng Reponsive Grid vì cách tiếp cận này sẽ sử dụng hiệu quả hơn toàn bộ không gian màn hình của điện thoại thông minh vốn đã rất hạn chế.

‍

🤓 Pro-Tip

Luôn bắt đầu với kích thước màn hình nhỏ hơn trong hệ thống hoặc với kích thước màn hình phổ biến nhất. Ví dụ, ở thời điểm hiện tại trong iOs, màn hình nhỏ nhất là iPhone SE (320sp), và phổ biến nhất là iPhone 8/7/6 (375sp). Tiếp theo, chỉ cần kéo căng các cột và để lại các kích thước rãnh(gutter) giống nhau.

Cách tiếp cận này phù hợp với hầu hết các trường hợp, nhưng tất nhiên, sẽ có ngoại lệ đối với các quy tắc khi không cần thiết phải kéo dài nội dung trong một cột.

Các bạn có thể tìm hiểu thêm về cách tạo Reponsive Grid trong video của Mizko:

‍

Tính chính xác

Trong iOs, hầu hết các màn hình đều có chiều rộng kỳ lạ ,do đó một số màn hình không thể chia đều được. Trong Android, bạn cũng có thể tìm thấy các kích thước màn hình như vậy. Trong trường hợp này, bạn có một số tùy chọn:

1. Bù 1pt do kích thước lề bố cục khác nhau.

Ví dụ: đặt lề trái 24pt và lề phải 23pt. Nhiều khả năng sẽ không ai nhận ra sự khác biệt bằng mắt thường, tuy nhiên những người có nội tâm cầu toàn sẽ không thích điều này 😡.

• Ưu điểm: không gian còn lại có thể được chia thành số lượng cột mong muốn
• Nhược điểm: Các nhà phát triển cần luôn ghi nhớ sự khác biệt về lề bố cục, ví dụ trên iPhone SE (320sp) thay đổi lề lẻ thành chẵn.

2. Để lại các giá trị chính xác cho lề (ví dụ 24pt) và sử dụng kích thước phân số cho cột.

Những người có nội tâm cầu toàn sẽ lại không thích điều này. Nhưng trên thực tế, phương pháp này không tệ như bạn tưởng, do màn hình hiện đại có mật độ điểm ảnh cao hơn. Không có khả năng bất kỳ người dùng nào nhận thấy sự hiện diện của một nửa pixel xuất hiện do giá trị phân số.

• Ưu điểm: bản thân thuật toán sẽ xem xét độ rộng của các cột và bạn sẽ không phải phát minh ra các tùy chọn khác nhau cho lưới cho các độ rộng khác nhau
• Nhược điểm: Hiện tại, việc tạo một lưới chính xác như vậy trong trình chỉnh sửa đồ họa sẽ gặp vấn đề. Ví dụ, Figma từ chối tạo giá trị phân số cho các cột. Lưới được tạo từ các hình chữ nhật bên trong khung có thể là giải pháp.

‍

Lưới bên trong các thành phần riêng lẻ (modules)

Cũng như ở kích thước lớn, bạn có thể có các mô-đun riêng biệt trong thiết kế. Trong trường hợp này, một mô-đun (thành phần) riêng biệt có thể có lưới riêng của nó.
Quy tắc tương tự áp dụng ở đây như với các màn hình bổ sung. Cần phải quan sát tính nhất quán trong lưới bên trong mô-đun.

‍

Nhịp hàng ngang và nhịp hàng dọc

Để xây dựng các mô-đun lớn hơn và duy trì nhịp điệu theo chiều dọc, bạn nên tạo các hàng và rãnh giữa chúng tương xứng với mô-đun chính. (trong ví dụ của mình tỷ lệ với mô-đun 8pt)

‍

Kết luận

Bài viết này chỉ là một ví dụ cụ thể, mục đích là khuyến khích bạn bắt đầu khám phá lưới trong giao diện di động. Tìm kiếm và tìm ra các giải pháp tối ưu cho các nhiệm vụ và dự án cụ thể.

Và đừng quên:

"Biết rõ các quy tắc thì bạn có thể phá vỡ chúng một cách hiệu quả.” The Dalai Lama