Tài liệu đặc tả hệ thống thiết kế của Vercel thực sự là một ví dụ đẳng cấp sách giáo khoa mà tôi từng thấy.
Hôm nay, tôi đã nghiêm túc nghiên cứu tệp DESIGN.md của họ. Với cả giao diện sáng và tối, nó mô tả hoàn chỉnh màu sắc, phông chữ, khoảng cách, thành phần, chuyển động và quy tắc viết nội dung thành một phương pháp thiết kế có thể thực thi được.
Tôi cảm thấy mình có thể đi theo con đường này cho tệp design.md của tất cả các sản phẩm trong tương lai.
Chi tiết ở đây:
Một số bạn có thể chưa rõ DESIGN.md là gì. Nói đơn giản, đó là một đặc tả thiết kế dành cho AI đọc. Khi AI giúp chúng ta viết code, nó cần biết nên dùng màu gì, cỡ chữ nào và khoảng cách giữa các phần tử.
Nếu không có tệp này, các giao diện do AI tạo ra trông sẽ khác nhau mỗi lần, với phong cách không nhất quán.
Sau khi đọc DESIGN.md của Vercel, tôi nhận ra rằng một DESIGN.md tốt không chỉ đơn thuần là nói cho AI biết mã hex hay cỡ chữ nào cần dùng. Nó đại diện cho cả một tư duy thiết kế. Nó đã thay đổi khá nhiều nhận thức của tôi.
Hôm nay, tôi sẽ phân tích tại sao tệp này lại hay đến vậy.
1
Đầu tiên, hãy nói về màu sắc.
Khi tôi mới bắt đầu viết DESIGN.md, phần màu sắc thực ra rất đơn giản. Tôi chỉ liệt kê một vài giá trị màu, nói cho AI biết đâu là màu chính, màu phụ và màu nhấn, và thế là xong.
Nhưng viết như vậy, AI vẫn không biết những màu này tương ứng với các trạng thái tương tác khác nhau như thế nào.
Ví dụ, với một nút bấm, trạng thái mặc định nên có màu gì? Khi di chuột vào nên tối hơn bao nhiêu? Màu sắc ngay khi được nhấp vào là gì? Nếu những chi tiết này không được định nghĩa rõ ràng, kết quả do AI tạo ra có thể khác nhau mỗi lần.
Cách tiếp cận của Vercel giải quyết hoàn toàn vấn đề này.
Trong hệ thống thiết kế của họ, mỗi chuỗi màu được chia thành 10 cấp độ từ 100 đến 1000, và mỗi con số tương ứng với một trạng thái giao diện cố định.
100 là nền mặc định của phần tử, 200 là nền khi di chuột, và 300 là nền khi nhấp chuột. Tiếp theo, 400 là viền mặc định, 500 là viền khi di chuột, và 600 là viền khi nhấp chuột.
700 được dùng cho các khối màu đặc, như thẻ tag hoặc chính nút bấm; 800 là trạng thái di chuột của các khối này. 900 được dùng cho văn bản phụ và biểu tượng, và 1000 được dùng cho văn bản chính và biểu tượng.
Trông có vẻ chỉ là đánh số, nhưng đằng sau nó là một logic tương tác hoàn chỉnh.
100 đến 300 quản lý trạng thái nền. 400 đến 600 quản lý trạng thái viền. 700 và 800 quản lý trạng thái khối màu đặc. 900 và 1000 quản lý thứ bậc thông tin.
Nói cách khác, Vercel thực sự đang nói với AI rằng có một số trạng thái ở đây. Màu sắc chỉ là biểu hiện của những trạng thái này.
Lợi ích của việc này rất trực tiếp.
Khi AI viết code, nó không cần phải đoán xem nút bấm sẽ tối hơn bao nhiêu khi di chuột, cũng không cần đoán viền sẽ thay đổi như thế nào. Trạng thái mặc định tương ứng với 100, di chuột với 200, nhấp chuột với 300; các quy tắc đã được xác định trước.
Ngoài ra, trên cơ sở này, Vercel cung cấp cả giao diện sáng và tối nhưng sử dụng cùng một tên Token.
Ví dụ, gray-1000. Trong giao diện sáng, nó là #171717, gần với màu đen tuyền. Trong giao diện tối, nó trở thành #ededed, gần với màu trắng tinh.
Đối với một hệ thống thiết kế, hai màu này thực chất là một.
Cả hai đều đại diện cho thông tin quan trọng nhất trên trang. Các nhà phát triển và AI, khi tạo giao diện, tập trung vào ý nghĩa ngữ nghĩa của gray-1000 chứ không phải giá trị hex cụ thể đằng sau nó. Khi chủ đề chuyển đổi, hệ thống tự động ánh xạ ý nghĩa ngữ nghĩa này sang màu tương ứng.
2
Sau khi giải quyết vấn đề màu sắc, một ràng buộc quan trọng hơn nữa là nhịp điệu của trang.
Hệ thống khoảng cách của Vercel dựa trên bội số của 4px, chỉ cung cấp tổng cộng 9 giá trị: 4, 8, 12, 16, 24, 32, 40, 64, 96. Tất cả khoảng cách trong toàn bộ sản phẩm đều được chọn từ những con số này.
Phản ứng đầu tiên của tôi là có vẻ hơi hạn chế. Nếu tôi cần 20px thì sao? Nếu tôi cần 28px thì sao?
Tôi đã hỏi một người bạn là nhà thiết kế, và anh ấy nói rằng đối với đại đa số sản phẩm, 9 kiểu khoảng cách về cơ bản là đủ.
Nếu có quá nhiều lựa chọn về khoảng cách, nhịp điệu của trang sẽ bị mất. Nhiều trang web tồi có thiết kế khoảng cách rất lộn xộn. Đây thực sự là một điều tối kỵ trong thiết kế sản phẩm.
Các hệ thống thiết kế xuất sắc không đưa ra vô số lựa chọn; chúng chủ động giới hạn các lựa chọn.
Vercel trực tiếp đưa ra một bộ gợi ý nhịp điệu rõ ràng: giữ khoảng cách 8px giữa các phần tử trong một nhóm, 16px giữa các nhóm và 32 đến 40px giữa các phần. Điều này thực sự đang định nghĩa nhịp thở của trang.
Người dùng có thể không nhận thấy những khoảng trống này, nhưng họ sẽ tự nhiên cảm nhận được phần nào thuộc về cùng một tổng thể và phần nào là một khu vực nội dung mới bắt đầu.
Thông thường, một trang trông thoải mái không phải vì nhà thiết kế đã sử dụng kỹ thuật cao siêu nào, mà vì nhịp điệu này được giữ nhất quán trong suốt trang.
Kiểu chữ cũng tuân theo logic tương tự.
Hệ thống phông chữ của Vercel giống hệt logic của màu sắc và khoảng cách.
Tất cả văn bản được phân loại thành một số vai trò cố định: tiêu đề, nhãn, nội dung chính và nút bấm.
Dưới mỗi vai trò, các Token có kích thước khác nhau được cung cấp và mỗi Token có phông chữ, kích thước, trọng lượng, chiều cao dòng và khoảng cách chữ cái được xác định trước.
Trước đây, khi đối mặt với một đoạn văn bản, nhà thiết kế có thể nghĩ về việc nên dùng 14px hay 15px và chiều cao dòng nào phù hợp.
Với một hệ thống thiết kế, cách suy nghĩ thay đổi. AI trước tiên xác định vai trò của văn bản này. Nó là tiêu đề, nội dung chính hay thông tin phụ? Khi vai trò được xác định, kiểu tương ứng cũng được xác định.
Chuyển từ tư duy về kích thước phông chữ sang tư duy dựa trên vai trò. Từ quyết định trực quan sang quyết định ngữ nghĩa. Đây là nơi giá trị thực sự của một hệ thống thiết kế nằm ở. Xuất sắc.
Thấy được điều này, bạn nhận ra rằng dù là khoảng cách hay phông chữ, Vercel đều đang làm một việc: giảm thiểu sự tự do trong giai đoạn thực thi càng nhiều càng tốt, với các quy tắc được xác định trước, để việc thực thi chỉ cần chọn một vai trò.
Điều này đúng với nhà thiết kế, đúng với nhà phát triển và đúng với AI.
3
Ngoài ra, việc viết nội dung cũng được coi là một phần quan trọng trong đặc tả thiết kế của Vercel. Đây là phần dễ bị thiếu nhất trong hầu hết các tệp DESIGN.md.
Vercel định nghĩa những chi tiết này rất cụ thể.
Ví dụ, nội dung nút bấm phải là một hành động cộng với một đối tượng. Giống như "Deploy Project" hoặc "Delete Member". Bạn không thể chỉ viết những từ mơ hồ như "Deploy", "OK" hay "Delete".
Lý do rất đơn giản. Khi nhìn thấy "Delete", người dùng vẫn cần phải suy nghĩ xem chính xác cái gì đang bị xóa. Với một hành động và một đối tượng, người dùng có thể ngay lập tức hình thành một sự hiểu biết hoàn chỉnh.
Thông báo lỗi cũng tương tự. Quy tắc của Vercel rất rõ ràng. Đầu tiên, cho người dùng biết điều gì đã xảy ra. Sau đó, cho người dùng biết phải làm gì tiếp theo.
Ví dụ, nếu bản dựng thất bại vì tệp gói vượt quá giới hạn kích thước, giải pháp là giảm kích thước hoặc điều chỉnh giới hạn. Sau khi đọc ba câu, người dùng ngay lập tức biết vấn đề ở đâu và phải làm gì tiếp theo.
Lời nhắc lỗi trong nhiều sản phẩm là "Thao tác thất bại, vui lòng thử lại sau". Nội dung thông tin của lời nhắc như vậy gần như bằng không. Thông tin duy nhất người dùng nhận được sau khi đọc là nó đã thất bại. Còn tại sao nó thất bại và phải làm gì tiếp theo, họ vẫn phải đoán.
Các đặc tả viết nội dung trong một hệ thống thiết kế về cơ bản là giảm thiểu sự phỏng đoán này.
Vercel cũng chuẩn hóa các thông báo sau khi một thao tác hoàn tất, chỉ cần nêu rõ thay đổi nào đã xảy ra. Ví dụ, "Project deleted", không phải "Project deleted successfully".
Bởi vì thực tế là hộp thông báo có thể bật lên đã cho thấy thao tác đã hoàn tất. Từ "successfully" là thông tin thừa.
Tiếp theo là chuyển động.
Phần này đặc biệt thú vị vì nó hoàn toàn trái ngược với trực giác của tôi. Tôi thường nghĩ rằng càng nhiều hoạt ảnh, sản phẩm càng tinh tế.
Vì vậy, thêm một chút hoạt ảnh vào hiệu ứng di chuột của nút bấm hoặc bảng chọn menu dường như làm cho nó trông cao cấp. Nhiều sản phẩm Vibe Coding hiện nay dường như đang đi theo hướng này.
Nhưng thái độ của Vercel hoàn toàn khác. Họ thậm chí còn viết rõ rằng trong nhiều tình huống tương tác, 0 mili giây thường là lựa chọn tốt nhất. Nói cách khác, không có hoạt ảnh, hoàn thành ngay lập tức.
Nếu một nút bấm thay đổi từ trạng thái mặc định sang trạng thái di chuột, sự thay đổi này đã đủ rõ ràng. Phản hồi tốt nhất là để nó xảy ra ngay lập tức; thêm một lớp hoạt ảnh sẽ làm cho giao diện có cảm giác chậm chạp.
Tất nhiên, một số tình huống yêu cầu chuyển động.
Ví dụ, một cửa sổ bật lên đột ngột xuất hiện. Nếu không có bất kỳ chuyển tiếp nào, mọi người sẽ không biết nó đến từ đâu. Đây là lúc hoạt ảnh có giá trị.
Vercel thậm chí còn chỉ định thời lượng cho các tình huống khác nhau. Thay đổi trạng thái bình thường khoảng 150 mili giây, popover khoảng 200 mili giây và modal khoảng 300 mili giây.
Sự thay đổi càng lớn, thời gian phản ứng càng nhiều. Sự thay đổi càng nhỏ, phản hồi càng trực tiếp.
Logic đằng sau nó luôn giống nhau: không chuyển động nếu không cần thiết, và khi phải chuyển động, hãy giữ nó nhanh, nhẹ và có chừng mực.
Phần cuối cùng để lại ấn tượng sâu sắc cho tôi là khả năng tiếp cận.
Thành thật mà nói, trước đây tôi hiếm khi đặc biệt chú ý đến phần này. Bởi vì hầu hết thời gian, miễn là giao diện sản phẩm đẹp và các chức năng hoạt động, dường như là đủ. Nhưng Vercel đã viết phần này rất nghiêm túc.
Họ yêu cầu độ tương phản đủ giữa văn bản và nền. Thay đổi trạng thái không thể chỉ dựa vào màu sắc; phải đi kèm với biểu tượng hoặc mô tả văn bản.
Tất cả các phần tử tương tác phải có trạng thái tiêu điểm rõ ràng và không thể bị loại bỏ vì mục đích trực quan sạch sẽ.
Những quy tắc này có nghĩa là hệ thống thiết kế phục vụ tất cả mọi người, bao gồm cả những người có độ nhạy màu thấp, những người điều hướng bằng bàn phím và những người nhìn vào điện thoại của họ dưới ánh sáng mạnh.
DESIGN.md này quá chuyên nghiệp. Tôi nghĩ khi mọi người tạo ra các sản phẩm mới trong tương lai, họ có thể viết DESIGN.md của riêng mình dựa trên ý tưởng của hai tệp MD này.
