Giới thiệu

Handoff giữa thiết kế và phát triển là một trong những điểm quan trọng nhất trong vòng đời sản phẩm. Một thiết kế có thể trông sạch sẽ và hoàn thiện trong Figma, Sketch hoặc Adobe XD, nhưng nếu các thông số được bàn giao cho các nhà phát triển không nhất quán—chẳng hạn như việc sử dụng các giá trị pixel phân số (13.7px, 22.4px, 47.2px) hoặc kích thước biểu tượng có số thập phân—nó sẽ gây ra sự khó khăn, lỗi khi triển khai và các vấn đề về khả năng mở rộng lâu dài.

Bài viết này giải thích tại sao sự nhất quán trong các giá trị là rất quan trọng, các vấn đề kỹ thuật do số thập phân và kích thước tùy ý gây ra, và cách chúng ảnh hưởng đến khả năng truy cập, trải nghiệm của nhà phát triển và khả năng mở rộng của hệ thống thiết kế.

Vai trò của Design Tokens

Phát triển front-end hiện đại phụ thuộc rất nhiều vào design tokens. Tokens là các giá trị có tên đại diện cho các quyết định thiết kế:

Khoảng cách: 4px, 8px, 16px, 32px
Kiểu chữ: 12px, 14px, 16px, 20px, 24px
Màu sắc: primary-500, neutral-200, v.v.
Biểu tượng & Bán kính: bội số của 4 hoặc 8

Tokens tạo ra một ngôn ngữ chung giữa thiết kế và mã. Chúng đảm bảo sự nhất quán, làm cho các cập nhật toàn cầu trở nên đơn giản (ví dụ: cập nhật màu sắc thương hiệu hoặc thay đổi kích thước kiểu chữ), và loại bỏ các giá trị tùy ý.

👉 Khi một nhà thiết kế chỉ định padding 23.7px hoặc kích thước font 13.5px, điều đó phá vỡ hệ thống này. Các nhà phát triển không thể ánh xạ những giá trị đó với các token và phải làm tròn chúng (mất độ chính xác) hoặc tạo ra ngoại lệ (tăng sự không nhất quán).

Tham khảo: Nhóm cộng đồng Design Tokens W3C

Tại sao Pixel Thập Phân không Hoạt Động

1. Sự Không Nhất Quán trong Hiển Thị Trên Các Thiết Bị

Các nền tảng web và di động dựa vào pixel độc lập với thiết bị (dp trong Android, pt trong iOS).
Một giá trị phân số như 13.5px không chuyển đổi tốt sang các đơn vị này; nó sẽ được làm tròn khác nhau tùy thuộc vào tỷ lệ pixel của thiết bị (DPR).
Kết quả: Sự lệch nhẹ, biểu tượng mờ, và khoảng cách không nhất quán trên các thiết bị.

Tham khảo: MDN - Mật độ Pixel và Pixel Độc Lập với Thiết Bị

2. Độ Sắc Nét của Biểu Tượng và Lưới Pixel

Các biểu tượng cần phải căn chỉnh hoàn hảo với lưới pixel để hiển thị sắc nét.

Một biểu tượng 23.7px sẽ bị mờ (cạnh bị mờ).
Xuất các biểu tượng ở kích thước pixel nguyên (16, 20, 24, 32px) đảm bảo độ sắc nét trên tất cả các màn hình.

Tham khảo: HIG của Apple - Điểm và Pixel

3. Khả Năng Mở Rộng và Bảo Trì

Các số thập phân tùy ý dẫn đến CSS bloat: 23.7px, 47.2px, 11.3px đều trở thành các quy tắc độc nhất.
Điều này phá vỡ nguyên tắc của design tokens có thể tái sử dụng → mỗi màn hình mới giới thiệu các ngoại lệ.
Khi mở rộng các thiết kế (bố cục đáp ứng, chủ đề, khả năng truy cập), sự không nhất quán sẽ nhân lên.

Tham khảo: Material Design - Lưới Bố Cục

4. Căn Chỉnh Đa Nền Tảng

Một hệ thống thiết kế phải hoạt động trên Web, iOS và Android.

Trên iOS, các giá trị pt là số nguyên.
Trên Android, các giá trị dp/sp là số nguyên.
Trên Web, các pixel CSS được căn chỉnh theo số nguyên theo DPR.
Các giá trị thập phân đơn giản không tồn tại một cách tự nhiên, vì vậy các nhà phát triển phải làm tròn → làm cho ý định thiết kế ban đầu trở nên vô nghĩa.

Các Cân Nhắc Về Khả Năng Truy Cập

Khả năng truy cập (a11y) thường bị bỏ qua trong quy trình chuyển giao từ thiết kế sang mã, nhưng các giá trị không nhất quán hoặc phân số có thể làm giảm khả năng truy cập theo những cách tinh vi nhưng quan trọng:

Khả năng Đọc của Văn Bản

Các font chữ kích thước số thập phân (ví dụ: 13.5px) có thể hiển thị không nhất quán trên các nền tảng.
Trên một số trình duyệt/thiet bị, điều này khiến văn bản trở nên mỏng hơn hoặc mờ hơn, ảnh hưởng đến khả năng đọc—đặc biệt là đối với người dùng có khuyết tật thị giác.

Mục Nhắm và Khu Vực Nhấn

Các hướng dẫn về khả năng truy cập (WCAG, HIG của Apple, Material Design) yêu cầu các mục nhắm tối thiểu là 44×44px hoặc 48×48dp.
Một nút có padding phân số hoặc kích thước không nhất quán có thể không đạt được các ngưỡng này, làm cho người dùng có khuyết tật vận động khó nhấn chính xác.

Phóng to và Thay Đổi Tỷ Lệ

Khi người dùng phóng to hoặc bật cài đặt văn bản lớn hơn, các giá trị phân số thường làm tăng các lỗi làm tròn, dẫn đến các phần tử giao diện không căn chỉnh.
Việc giữ các token có số nguyên nhất quán đảm bảo giao diện có thể thay đổi một cách dự đoán.

👉 Tóm lại, các giá trị sạch sẽ được căn chỉnh theo số nguyên cải thiện khả năng đọc, tính khả dụng và tuân thủ các tiêu chuẩn về khả năng truy cập.

Tham khảo: WCAG 2.2 - Tiêu Chí Kích Thước Mục Nhắm

Các Cân Nhắc Về Trải Nghiệm Của Nhà Phát Triển

Từ góc độ của nhà phát triển, các giá trị không nhất quán ảnh hưởng trực tiếp đến hiệu quả công việc, khả năng bảo trì, và khả năng mở rộng:

Ma sát trong Triển Khai

Các nhà phát triển sử dụng các framework như Tailwind, Chakra, hoặc Material UI dựa vào các thang token.
Nếu một thiết kế chỉ định khoảng cách 13.7px, không có lớp/token phù hợp. Nhà phát triển phải ước lượng, mã cứng, hoặc tạo ra một ngoại lệ → lãng phí thời gian và tạo ra sự không nhất quán.

Bloat Mã

Mỗi giá trị tùy ý tạo ra một quy tắc CSS độc nhất. Theo thời gian, điều này làm cho mã trở nên phình to và khó quản lý hơn.
Hệ thống dựa trên token, ngược lại, cho phép CSS có thể tái sử dụng và nhẹ nhàng.

Đào Tạo Các Nhà Phát Triển Mới

Với các giá trị không nhất quán, các thành viên mới trong đội ngũ gặp khó khăn trong việc hiểu cái gì là “chuẩn” so với cái gì là ngoại lệ.
Với các thang số nguyên dựa trên token, các quy tắc trở nên dễ đoán → giảm thiểu ma sát trong việc đào tạo.

Hợp Tác Giữa Các Đội

Sự nhất quán giảm thiểu việc “đẩy pixel” qua lại giữa các nhà thiết kế và nhà phát triển.
Các nhà phát triển có thể triển khai thiết kế nhanh hơn với ít sai lệch hơn, và các tester QA mất ít thời gian hơn để xác minh sự căn chỉnh hình ảnh.

👉 Tóm lại, sự không nhất quán làm chậm các nhà phát triển và tạo ra nợ kỹ thuật, trong khi sự nhất quán thúc đẩy việc giao hàng và bảo tồn ý định thiết kế.

Sức Mạnh của Hệ Thống Lưới

Hầu hết các hệ thống thiết kế khuyến nghị sử dụng hệ thống lưới 4px hoặc 8px.

Giữ khoảng cách, kiểu chữ và các thành phần nhất quán.
Lê dài tốt trên các kích thước và mật độ màn hình.
Đơn giản hóa việc chuyển giao thiết kế vì cả nhà thiết kế và nhà phát triển đều nói cùng một thang.

Tham khảo: Hệ thống Lưới Bốn Điểm

Thực Hành Tốt Nhất cho Các Nhà Thiết Kế

Chỉ sử dụng design tokens → giữ nguyên các thang định nghĩa sẵn.
Tránh giá trị phân số → làm tròn đến giá trị token gần nhất.
Xuất các biểu tượng ở kích thước pixel nguyên → 16px, 20px, 24px, v.v.
Bám sát một thang kiểu chữ → 12, 14, 16, 20, 24 (không có số thập phân).
Hợp tác với các nhà phát triển sớm → đồng ý về định nghĩa token để ngăn ngừa sự trôi dạt.

Kết luận

Các số thập phân và các giá trị không nhất quán có thể có vẻ vô hại trong các công cụ thiết kế, nhưng chúng gây ra những vấn đề kỹ thuật thực sự trong quá trình triển khai: biểu tượng mờ, sự không nhất quán trong hiển thị, CSS phình to, các mục nhắm không khả dụng và các token thiết kế bị hỏng.

Bằng cách tuân thủ các giá trị số nguyên phù hợp với design tokens và hệ thống lưới, các nhà thiết kế và nhà phát triển có thể đảm bảo sự nhất quán, khả năng truy cập, khả năng mở rộng và quy trình làm việc từ thiết kế đến mã mượt mà hơn.

Thiết kế không chỉ là cách nó trông như thế nào trong Figma—nó còn về cách mà nó dịch chuyển tốt vào mã và mở rộng qua các nền tảng. Và việc dịch chuyển đó phụ thuộc rất nhiều vào sự nhất quán, độ chính xác và tôn trọng hệ thống.

Đọc Thêm

Định dạng Design Tokens W3C
Hướng dẫn Material Design - Lưới Bố Cục
Hướng dẫn Giao diện Con Người của Apple - Điểm và Pixel
MDN - Hiểu Mật độ Pixel CSS
Hệ thống Lưới Bốn Điểm
WCAG 2.2 - Kích Thước Mục Nhắm Tối Thiểu

Giá trị Pixel, Token và Lưới: Đồng Nhất Thiết Kế và Mã Lập Trình