Master hệ thống lưới 8pt | P.1

Sau khi bạn đã chuẩn bị xong tất cả mọi thứ, bao gồm màu sắc, hệ thống chữ viết, và nhiều thứ khác trước khi bắt tay vào dự án, giờ là lúc để bạn bắt tay vào tìm hiểu và làm việc với hệ thống lưới trong thiết kế của bạn.

Hôm nay, mình sẽ cùng tìm hiểu về hệ thống lưới phổ biến được khá đông đảo anh em quần hùng sử dụng đó là hệ thống lưới 8 điểm - hay còn gọi là The 8pt Grid System.

Bài viết này mình sẽ nói về lý thuyết và gửi bạn file demo để bạn tham khảo trước, bài tiếp theo mình sẽ hướng dẫn chi tiết cách để tạo 1 hệ thống lưới 8pt như thế nào nhé!

Khi mà một phần tử chỉ chứa hình ảnh hay văn bản thì bạn cứ chỉnh kích thước 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ử đó. 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.

Một số lý do, đầu tiên là nó có tỷ lệ hoàn hảo trong tất cả các màn hình khác nhau (bao gồm cả android @ 0,75 và @ 1,5).

Lý do thứ hai, style guide Apple và Google khuyên như vậy, mặc dù không nêu quá nhiều lý do tại sao 🤓.

Lý do thứ ba, đó là một đơn vị cơ bản tốt để làm, kích thước phổ biến của các màn hình điện thoại hiện nay đều dễ dàng chia hết cho 8, chúng  dễ dàng được nhân lên và mặc nhiên sẽ nhất quán giao diện thôi.

Khi thiết lập một hệ thống Typographic, để cố gắng giữ tất cả kiểu chữ củ đủ khác biệt nhưng vẫn nhất quán áp dụng phép nhân 8 vào trong hệ thống thì cũng sẽ có 1 bộ kiểu chữ xịn xò để dùng mà không cần suy nghĩ nhiều rồi.

Để nhanh chóng tạo ra một hệ thống kiểu chữ nhất quán, bạn hãy thử dùng một trong những công cụ yêu thích của mình: Grid Lover

Tips: Bạn có thể chọn một font bất kỳ mà bạn đã cài sẵn trong máy bằng cách nhập tên font thôi nhen!!

Icon thì có muôn hình vạn trạng, mình thường thấy nhiều bạn newbie hay kiểu vẽ icon dài, icon cao xong rồi đặt vào chọn căn giữa...Nope, ngưng đi làm vậy đi bạn, như thế sẽ không đều đâu.

Mình khuyên bạn nên thiết kế icon trên Frame 16 × 16 pixel và một phiên bản khác trên Frame 20 × 20 pixel. Để nó đảm bảo được tính nhất quán.

Tương tự như lưới Bootstrap mình đã nói ở bài viết trước. Lưới Bootstrap tiêu chuẩn là một bố cục 12 cột, với lề 15px ở mỗi bên của cột; dẫn đến Gutter 30px giữa các cột cộng với 15px ở bên trái và bên phải của lưới. Đây là các cài đặt mặc định , mình sẽ định cấu hình theo ý thích của mình hoặc yêu cầu dev định cấu hình.

Toàn bộ lưới được gọi là Container. Một container có thể là Fluid hoặc Non Fluid như hình dưới đây.

Khi trang web dựa trên Bootstrap được hiển thị trên bất kỳ thiết bị nào, Trình duyệt sẽ kiểm tra xem trang chủ có còn nhiều không gian để hiển thị hay không và đặt bố cục theo không gian đó. 

Đến đây nếu bạn giống mình, bạn muốn tùy chỉnh cấu hình một hệ thống lưới. 

Chúng ta sẽ bắt đầu bằng cách lấy máy tính ra và thử nhen!!

Giả sử khi thiết kế cho Desktop, mình muốn mỗi cột có chiều rộng 72px và có Gutter 24px hoặc 32px. Gutter 24px sẽ dẫn đến 12px ở mỗi bên và Gutter 32px sẽ dẫn đến 16px ở mỗi bên. Mình thường chọn Gutter 24px. Lúc này ta có công thức:

Tuy nhiên, về mặt kỹ thuật là như thế nếu bạn đang sử dụng phần mềm Figma thì sẽ đơn giản hơn nhiều, bạn chỉ cần mở bảng Layout Grid lên sau đó nhập số cột, Margin và Gutter là xong roài!^^

Còn về giao diện Tablet hay Mobile, 12 cột không thực sự tốt khi thiết kế cho màn hình hẹp. Mình thường chọn bố cục 6 cột hoặc 4 cột trên thiết bị di động, đôi khi cũng thử với bố cục 2 cột, kết quả cũng khá thú vị ấy.

Tương tự như Columns, áp dụng lưới 8pt vào mình sẽ có hệ thống nhất quán và phân cấp thông tin trực quan, điều này dễ thấy nhất khi một hệ thống typographic được thiết kế dựa trên lưới 8pt.

Rows rất ít khi được bật lên vì các phần mềm thiết kế cho phép bạn chỉnh Nudge – khoảng dời.

Ví dụ: trong Figma đi, dùng mũi tên » Small nudge = dời 1px, dùng shift + mũi tên » Big nudge = dời 8px. Việc này giúp cho việc thiết kế của bạn nhanh và dễ dàng hơn nhiều lắm đó

Hầu hết các phần mềm và ứng dụng thiết kế đều có tính năng tự dính vào lưới – snap to grid.

Nhiều ứng dụng có phím tắt để di chuyển, chỉnh kích thước và điều chỉnh bước nhảy nhanh chóng, bạn nên tập sử dụng chúng đi. Thực sự hữu ích luôn đó.

Lý thuyết mình cố gắng cô đọng lại sao cho bạn dễ hiểu nhất có thể, ở bài tiếp theo mình sẽ hướng dẫn chi tiết cách để tạo 1 hệ thống lưới 8pt như thế nào nhé!

Nguồn: Hữu Dương