Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa nhận một file thiết kế từ đồng nghiệp. Bạn mở panel Inspect trong Figma, click vào khoảng cách giữa cái tiêu đề và đoạn mô tả: 13px. Click tiếp xuống nút bấm: 17px. Padding bên trong nút: 11px trên, 14px dưới. Khoảng cách giữa hai card: 22px. Bạn ngồi đó và tự hỏi: "Những con số này từ đâu ra? Có logic gì không, hay designer chỉ kéo chuột cho tới khi thấy 'trông ổn'?"
Câu trả lời, đáng buồn thay, thường là vế sau.
Đây chính là vấn đề mà Bài 9 muốn giải quyết. Ở những bài trước, bạn đã học về thứ bậc thị giác (visual hierarchy), về typography scale — tức là hệ thống hoá kích thước chữ. Spacing (khoảng cách) cũng cần được hệ thống hoá y hệt như vậy, nhưng đây lại là phần bị bỏ quên nhiều nhất ở designer junior. Chữ thì ai cũng biết phải chọn font, chọn size. Nhưng khoảng trắng — thứ chiếm phần lớn diện tích màn hình — lại thường được xử lý tuỳ hứng.
Spacing không phải là "phần còn dư sau khi đặt các thành phần". Spacing chính là thiết kế. Nó quyết định nhịp điệu (rhythm), quyết định thành phần nào thuộc về nhóm nào, quyết định giao diện của bạn trông chuyên nghiệp hay nghiệp dư. Và quan trọng với nghề nghiệp của bạn: một spacing system tốt là thứ giúp bạn giao tiếp với dev một cách chính xác, giúp họ code ra đúng thứ bạn thiết kế thay vì đoán mò. Bài này sẽ dạy bạn cách xây dựng một hệ thống khoảng cách nhất quán — mà công thức nền tảng chính là "The Power of 8".
Khái niệm cốt lõi
Spacing system là gì?
Spacing system là một tập hợp giới hạn các giá trị khoảng cách được định nghĩa trước, mà mọi khoảng cách trong thiết kế của bạn — padding, margin, gap giữa các phần tử — đều phải lấy từ tập hợp đó. Thay vì có thể dùng bất kỳ số nào từ 0 đến vô hạn, bạn tự giới hạn mình vào một "thang đo" (scale) như: 4, 8, 12, 16, 24, 32, 48, 64.
Nghe có vẻ như bạn đang tự trói tay mình. Thực tế thì ngược lại: ràng buộc này giải phóng bạn khỏi hàng nghìn quyết định vụn vặt. Khi cần khoảng cách giữa icon và text, bạn không phải nghĩ "8 hay 9 hay 10?" — bạn chỉ chọn trong scale, thường là 8. Quyết định nhanh hơn, và kết quả nhất quán hơn.
Tại sao lại là số 8? "The Power of 8"
Câu hỏi kinh điển: tại sao là 8 mà không phải 5 hay 10? Có mấy lý do rất thực tế:
Thứ nhất — khả năng chia hết. Số 8 chia hết cho 2 và 4. Điều này quan trọng vì màn hình thiết bị ngày nay có nhiều mật độ điểm ảnh khác nhau (1x, 1.5x, 2x, 3x). Khi bạn nhân một giá trị cơ sở là 8 với các hệ số này, kết quả vẫn ra số nguyên, không bị lẻ nửa pixel gây mờ (blur). Ví dụ 8 × 1.5 = 12, 8 × 2 = 16, 8 × 3 = 24 — tất cả đều đẹp. Nếu bạn dùng số cơ sở là 5, thì 5 × 1.5 = 7.5, sinh ra nửa pixel.
Thứ hai — vừa đủ mịn, không quá dày đặc. Bước nhảy 8px đủ nhỏ để bạn có độ linh hoạt, nhưng đủ lớn để hai giá trị liền kề (ví dụ 16 và 24) tạo ra sự khác biệt rõ ràng bằng mắt thường. Nếu bước nhảy chỉ 1-2px, mắt người gần như không phân biệt được, và bạn lại rơi vào cái bẫy tuỳ hứng.
Thứ ba — nó là chuẩn ngành. Material Design của Google xây dựng trên lưới 8dp. Apple Human Interface Guidelines cũng thiên về bội số của 8 (với một số điểm 4). Khi cả ngành nói chung một "ngôn ngữ 8", việc bạn theo nó giúp collaboration dễ hơn rất nhiều.
Với những khoảng cách nhỏ cần độ tinh chỉnh — như padding bên trong một badge nhỏ, hay khoảng cách giữa icon 16px và label — người ta thường thêm bước 4px (nửa của 8). Đây gọi là "4-point sub-grid". Bạn vẫn giữ tinh thần Power of 8, chỉ cho phép mình bước nửa nhịp ở những chỗ thật sự cần.
Cấu trúc một spacing scale điển hình
Một scale thực dụng thường trông như thế này (đơn vị px):
- 4 — micro spacing: giữa icon và label, padding badge nhỏ
- 8 — khoảng cách cơ sở nhỏ nhất phổ biến: gap giữa các phần tử liên quan chặt
- 12 — biến thể của 8 + 4, hay dùng cho padding input
- 16 — "đơn vị vàng": padding chuẩn của card, gap giữa form field
- 24 — khoảng cách giữa các nhóm nội dung nhỏ
- 32 — khoảng cách giữa các section trong một trang
- 48 — khoảng cách section lớn
- 64 — khoảng cách rất lớn, giữa các khối lớn trên landing page
Đặt tên cho scale: t-shirt sizing
Khi đưa scale vào design token (bạn sẽ học sâu hơn ở các bài về Design Tokens sau), người ta hiếm khi gọi trực tiếp là spacing-16. Lý do: nếu sau này bạn đổi 16 thành 20, cái tên spacing-16 trở nên sai lệch. Thay vào đó, dùng cách đặt tên theo ngữ nghĩa hoặc theo cỡ áo:
space-xs= 4space-sm= 8space-md= 16space-lg= 24space-xl= 32space-2xl= 48
Tình huống thực tế
Ví dụ 1 — Startup fintech ở TP.HCM và "cơn ác mộng padding"
Một startup ví điện tử tại TP.HCM (gọi là "PayViet") có đội thiết kế 3 người, không ai dùng spacing system. Mỗi designer làm một màn hình riêng. Khi ghép lại thành app hoàn chỉnh, màn hình "Nạp tiền" có padding ngoài 20px, màn hình "Chuyển khoản" là 16px, còn màn hình "Lịch sử giao dịch" là 24px. Trên điện thoại, người dùng lướt qua các tab và cảm giác "có gì đó sai sai" — nội dung cứ nhích trái nhích phải một chút mỗi khi chuyển màn, dù chẳng ai chỉ ra được chính xác vấn đề.
Tệ hơn, đội dev khi implement phải hardcode từng giá trị lẻ. Một bạn dev kể rằng anh phải viết hơn 40 giá trị margin/padding khác nhau trong CSS chỉ cho luồng thanh toán. Khi CEO yêu cầu "làm app thoáng hơn một chút", không ai biết phải sửa từ đâu vì không có nguồn chân lý (source of truth) duy nhất.
Bài học: Sau đó team áp một scale 4-8-16-24-32. Toàn bộ padding màn hình chuẩn hoá về 16px. Số lượng token spacing giảm từ 40+ giá trị hỗn loạn xuống còn 6 giá trị. Yêu cầu "làm thoáng hơn" giờ chỉ cần đổi padding màn hình từ 16 lên 24 — một chỗ, áp cho tất cả. Sự nhất quán không đến từ tài năng cá nhân, nó đến từ hệ thống.
Ví dụ 2 — Grab và sức mạnh của grid 8dp trên nhiều quốc gia
Các sản phẩm quy mô Đông Nam Á như Grab phải phục vụ hàng chục thị trường, hàng trăm màn hình, hàng chục kỹ sư trên cả iOS lẫn Android. Nếu mỗi màn hình dùng spacing tuỳ hứng, sự hỗn loạn sẽ nhân lên theo cấp số nhân. Đó là lý do các công ty ở tầm này gần như luôn chuẩn hoá trên lưới 8dp (dp = density-independent pixel, đơn vị của Android). Một tài xế ở Việt Nam và một tài xế ở Indonesia mở app lên thấy nhịp điệu giao diện y hệt nhau, dù nội dung ngôn ngữ khác.
Điểm hay ở đây: khi spacing dựa trên bội số của 8, cùng một spec thiết kế dịch sang cả điểm ảnh Android (dp) lẫn point iOS mà không sinh số lẻ. Designer đưa cho dev con số "gap 16" là dev biết chính xác phải làm gì, không cần hỏi lại, không cần đoán. Tốc độ giao tiếp tăng, lỗi giảm.
Bài học: Càng nhiều người và nhiều nền tảng cùng làm việc, spacing system càng quan trọng. Nó không chỉ là chuyện đẹp — nó là cơ sở hạ tầng để mở rộng quy mô đội ngũ.
Ví dụ 3 — Trang blog cá nhân và bài học "ít mà chất"
Một bạn designer freelance nhận làm lại trang blog cho một khách hàng dạy tiếng Anh online. Ban đầu bạn dùng đủ loại khoảng cách: tiêu đề cách đoạn văn 18px, đoạn văn cách nhau 15px, ảnh cách text 25px. Trang trông "bình thường" nhưng thiếu sự sắc sảo. Bạn quyết định làm lại với đúng ba giá trị: 8, 16, 32. Khoảng cách trong một nhóm (tiêu đề với đoạn đầu) = 8; giữa các đoạn = 16; giữa các section lớn = 32.
Kết quả: trang trông "sạch" và chuyên nghiệp hẳn lên, dù bạn chẳng thêm màu sắc hay hiệu ứng gì. Khách hàng nói "trông đắt tiền hơn". Bí mật nằm ở nguyên tắc spacing tỉ lệ thuận với mức độ liên quan: thứ càng liên quan chặt thì càng gần nhau, thứ càng tách biệt thì càng xa nhau. Scale hữu hạn giúp mối quan hệ này trở nên rõ ràng và nhất quán.
Bài học: Bạn không cần một scale phức tạp. Đôi khi ba giá trị được dùng đúng chỗ còn đẹp hơn hai mươi giá trị dùng tuỳ tiện.
Hướng dẫn từng bước
Đây là quy trình xây dựng spacing system cho một dự án từ đầu:
Bước 1 — Chọn giá trị cơ sở (base unit). Với đại đa số dự án web và mobile, chọn 8px làm base, kèm 4px làm sub-grid cho các trường hợp tinh chỉnh. Đừng phức tạp hoá ở bước này.
Bước 2 — Xây scale. Từ base 8, dựng thang: 4, 8, 12, 16, 24, 32, 48, 64. Nếu dự án nhỏ, thu gọn còn 4, 8, 16, 24, 32. Ghi ra giấy hoặc một frame riêng trong Figma để cả team nhìn thấy.
Bước 3 — Đặt tên có ngữ nghĩa. Gán mỗi giá trị một cái tên: xs, sm, md, lg, xl, 2xl. Đây sẽ là ngôn ngữ chung giữa bạn và dev.
Bước 4 — Tạo Variables trong Figma. Vào panel Variables, tạo một collection tên "Spacing", thêm từng biến số với đúng giá trị và tên. Từ giờ, mỗi khi đặt padding hay gap trong Auto Layout, bạn chọn từ biến này thay vì gõ số trực tiếp. (Auto Layout và Variables là chủ đề của các bài riêng — ở đây bạn chỉ cần biết spacing system chính là dữ liệu nạp vào chúng.)
Bước 5 — Áp dụng có kỷ luật. Khi thiết kế, mỗi lần định gõ một con số khoảng cách, tự hỏi: "Con số này có trong scale không?" Nếu không, đừng gõ nó — chọn giá trị gần nhất trong scale. Kỷ luật ở bước này là thứ tạo nên hoặc phá vỡ cả hệ thống.
Bước 6 — Kiểm tra bằng "spacing audit". Sau khi xong một màn hình, dùng công cụ đo trong Figma rà lại các khoảng cách. Bất kỳ số lẻ nào (13, 17, 22) là dấu hiệu bạn đã lệch khỏi hệ thống — sửa ngay.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng số lẻ vì "trông ổn hơn". Cảm giác 15px "ổn hơn" 16px thường là ảo giác. Khi đặt bên cạnh phần còn lại của giao diện dùng bội số 8, con số lẻ đó lại chính là thứ phá vỡ nhịp điệu. Hãy tin vào hệ thống.
Lỗi 2 — Có scale nhưng không tuân thủ. Đây là lỗi phổ biến nhất. Team định nghĩa scale rất đẹp trong tài liệu, rồi khi làm việc thực tế lại "châm chước" gõ số tự do vì tiện. Scale chỉ có giá trị khi nó được thực thi. Mẹo: dùng Variables trong Figma để "khoá" các lựa chọn — khi dropdown chỉ hiện các giá trị hợp lệ, bạn khó lòng gõ bậy.
Lỗi 3 — Nhầm lẫn giữa spacing và hairline/border. Đường viền 1px, đường kẻ phân cách 1px không thuộc spacing scale — chúng là stroke, một hệ thống khác. Đừng cố ép mọi thứ 1px thành bội số của 8.
Lỗi 4 — Quá nhiều bước trong scale. Nếu scale của bạn có tới 15 giá trị (4, 6, 8, 10, 12, 14, 16...), bạn thực chất đã quay lại tuỳ hứng. Sức mạnh của hệ thống đến từ sự hữu hạn. Giữ scale gọn.
Mẹo — Quy tắc "spacing kể chuyện nhóm". Khoảng cách bên trong một nhóm phải nhỏ hơn khoảng cách giữa các nhóm. Nếu label và ô input cách nhau 8px, thì hai form field khác nhau nên cách nhau ít nhất 16 hoặc 24px. Nguyên tắc này (liên quan tới Gestalt bạn học ở bài khác) là kim chỉ nam khi phân bổ giá trị từ scale.
Mẹo — Nhân đôi thay vì cộng dồn. Khi phân vân giữa hai bước, ưu tiên bước tạo tương phản rõ. Nhảy từ 8 lên 16 (gấp đôi) tạo khác biệt rõ hơn nhảy từ 8 lên 12. Tương phản rõ giúp thứ bậc dễ đọc hơn.
Bài tập thực hành
- Audit một app bạn đang dùng. Chụp màn hình một app Việt Nam (ví dụ MoMo, ZaloPay, Tiki). Mở trong Figma, dùng công cụ đo để đo 10 khoảng cách khác nhau. Ghi lại: có bao nhiêu giá trị là bội số của 8? Có giá trị lẻ nào không? Từ đó đoán xem team đó có dùng spacing system hay không.
- Xây scale của riêng bạn. Tạo một Figma file mới. Định nghĩa một spacing scale 6 bước (ví dụ 4, 8, 16, 24, 32, 48), đặt tên t-shirt (xs → 2xl), và tạo Variables tương ứng.
- Thiết kế lại một card. Lấy một card sản phẩm bất kỳ (ảnh, tiêu đề, giá, nút "Mua"). Thiết kế nó hai lần: lần một dùng số tuỳ hứng, lần hai chỉ dùng scale bạn vừa tạo. Đặt cạnh nhau và tự đánh giá: bản nào trông chuyên nghiệp hơn, và vì sao?
- Viết spec cho dev. Với card ở bài 3, viết một đoạn ngắn mô tả các khoảng cách bằng tên token (ví dụ "padding card = space-md, gap giữa ảnh và tiêu đề = space-sm"). Đây là kỹ năng handoff cốt lõi bạn sẽ dùng suốt sự nghiệp.
Tóm tắt
Spacing không phải phần dư thừa — nó là một trong những trụ cột tạo nên cảm giác chuyên nghiệp và nhất quán của giao diện. Một spacing system tốt là một tập hữu hạn các giá trị khoảng cách được định nghĩa trước, thường xây trên nền "The Power of 8": lấy 8px làm đơn vị cơ sở vì nó chia hết đẹp, hoạt động tốt trên mọi mật độ màn hình, và là chuẩn chung của cả ngành. Thêm bước 4px cho những tinh chỉnh nhỏ.
Ba điều cần khắc cốt ghi tâm: (1) Ràng buộc mình vào một scale không làm bạn kém sáng tạo — nó giải phóng bạn khỏi hàng nghìn quyết định vụn vặt và tạo ra sự nhất quán. (2) Đặt tên token theo ngữ nghĩa (xs, sm, md...) để designer và dev nói cùng ngôn ngữ. (3) Kỷ luật tuân thủ scale mới là thứ tạo nên hệ thống — có scale mà gõ số tự do thì cũng vô nghĩa.
Khi bạn chuyển sang các bài về Auto Layout, Design Tokens và Figma Variables sau này, spacing system chính là dữ liệu nền mà tất cả chúng dựa vào. Làm chủ nó bây giờ, và mọi thứ phía sau sẽ dễ dàng hơn rất nhiều.