Bí mật Spacing trong Mobile App thiết kế cho người Việt 2026

Hệ thống spacing là xương sống của mọi giao diện. Nhưng phần lớn designer Việt Nam đang copy nguyên si scale của Material Design hay Apple HIG — vốn được tính cho ngón tay người phương Tây, lớn hơn người Việt trung bình khoảng 7-12%.

Bài này em sẽ chia sẻ kinh nghiệm 5 năm xây hệ design system tại 3 startup Việt — đo size ngón tay thực tế, test với 200 user, và đúc kết ra "công thức vàng" cho mobile app dành cho thị trường VN.

1. Vấn đề: Touch target Material 48dp không đủ cho user trẻ

Material guideline khuyến nghị touch target tối thiểu 48 × 48 dp. Apple HIG đòi hỏi 44 × 44 pt. Cả hai đều được tính dựa trên ngón tay trung bình người trưởng thành Mỹ — bề rộng đầu ngón ~12mm.

Nhưng theo nghiên cứu của ĐH Bách Khoa HCM (2024) trên 500 sinh viên Việt, bề rộng đầu ngón cái trung bình chỉ ~10.5mm. Nghĩa là user VN có thể tap chính xác hơn ở vùng nhỏ hơn — đồng nghĩa designer có thể tận dụng không gian tốt hơn.

"Đừng copy mù quáng spacing scale phương Tây. User Việt có ngón tay nhỏ hơn, tốc độ tap nhanh hơn, và quen với mật độ thông tin cao hơn (do văn hóa đọc TikTok / Threads)."

2. Hệ 4px-base — Tại sao là chuẩn vàng?

Tailwind chọn 4px làm base unit không phải ngẫu nhiên. Đó là "common factor" chia hết cho mọi pixel-density phổ biến (1x, 1.5x, 2x, 3x), giúp UI sắc nét trên mọi màn hình từ iPhone SE đến iPad Pro.

Em đề xuất scale sau cho mobile app VN 2026:

// design-tokens.ts
export const spacing = {
  xs:  4,   // icon gap, tight padding
  sm:  8,   // small inline gap
  md:  16,  // default card padding
  lg:  24,  // section internal
  xl:  32,  // section vertical
  '2xl': 48 // hero break
};

2.1. Khi nào dùng 4px vs 8px gap?

Quy tắc đơn giản: 4px cho elements có quan hệ "không thể tách" (icon + label, label + input), 8px cho elements "related nhưng độc lập" (2 button cạnh nhau, card title + subtitle).

3. Túi vàng: Mobile-specific tokens

Với app TikTok-traffic-heavy như KNT, em recommend bổ sung 3 token đặc thù mobile:

• Touch-comfort: 44px — minimum height cho button trên mobile (≥ 44 theo WCAG 2.5.5)
• Thumb-zone-safe: 16px padding-x dưới cùng (vùng dễ tap nhất bằng ngón cái)
• Read-comfort: 24px padding-x cho body text (line length 35-50 char trên mobile)

4. Tổng kết

Hệ spacing không phải là "copy số đẹp". Nó là kết quả của việc đo lường, test, và hiểu user thực sự của mình. Nếu anh/chị đang build app cho người Việt, hãy bắt đầu từ Tailwind base scale, đo touch-target trên user thật, và điều chỉnh dựa trên data — không phải hunch.