Lan can giao diện người dùng sáng tạo: Thiết kế theo ý định mà không phá vỡ hệ thống thiết kế của bạn

Từ bố cục cố định đến thiết kế có mục đích

Trong một bố cục cố định, các nhà thiết kế quyết định trước mọi màn hình. Với giao diện người dùng tổng quát, mô hình AI sẽ quyết định giao diện nào sẽ hiển thị cho một yêu cầu cụ thể. Google mô tả giao diện người dùng tổng quát là một mô hình tạo ra không chỉ nội dung mà còn tạo ra toàn bộ trải nghiệm và giờ đây họ cung cấp các thử nghiệm dựa trên điều này trong ứng dụng Gemini và Chế độ AI trong Google Tìm kiếm. Trong các công cụ dành cho nhà phát triển, Vercel AI SDK mô tả một phiên bản đơn giản hơn: mô hình gọi một công cụ và kết quả của lệnh gọi công cụ đó được hiển thị dưới dạng thành phần React.

Những thay đổi nào đối với UX

Các nhà thiết kế ngừng vẽ mọi màn hình và bắt đầu thiết kế các quy tắc: thành phần nào tồn tại, khi nào mỗi thành phần phù hợp và những gì không bao giờ được thay đổi. Khung xung quanh nội dung được tạo, chẳng hạn như điều hướng, đầu vào, hoàn tác và cài đặt, phải cố định để mọi người không bao giờ mất vị trí. Các khu vực được tạo phải được đánh dấu rõ ràng và mọi người có thể chuyển sang chế độ xem đơn giản, có thể dự đoán được.

Guardrail 1: danh mục linh kiện đã được phê duyệt

Mẫu an toàn nhất là để mô hình chọn và điền các thành phần chứ không phải phát minh ra chúng. A2UI, một giao thức mở do Google tạo ra, hoạt động theo cách này: các tác nhân gửi mô tả thành phần khai báo và máy khách hiển thị chúng bằng các tiện ích gốc của riêng nó mà không cần chạy mã tùy ý từ tác nhân. Danh mục của bạn có thể nhỏ: bảng, thẻ, biểu đồ, biểu mẫu, danh sách, mỗi danh mục đều do nhóm của bạn xây dựng và thử nghiệm.

Guardrail 2: mã thông báo thay vì giá trị thô

Cung cấp mã thông báo ngữ nghĩa của mô hình, chẳng hạn như color.text.primary hoặc space.4 và từ chối kết quả đầu ra sử dụng giá trị hex thô hoặc kích thước phông chữ tùy ý. Điều này đảm bảo độ tương phản, kiểu chữ và khoảng cách bên trong hệ thống, đồng thời các chủ đề như chế độ tối hoặc độ tương phản cao sẽ tiếp tục hoạt động tự động.

Guardrail 3: xác thực trước khi kết xuất

Chạy kiểm tra tự động trên đầu ra được tạo trước khi hiển thị nó: hiện tại các trường bắt buộc, độ tương phản màu, thứ tự tiêu đề, nhãn trên đầu vào, thứ tự lấy nét, kích thước mục tiêu chạm và hỗ trợ giảm chuyển động. Nếu kiểm tra không thành công, hãy quay lại bố cục đơn giản, dễ sử dụng thay vì hiển thị giao diện người dùng bị hỏng.

• Xác thực lược đồ: chỉ các thành phần và thuộc tính đã biết
• Khả năng truy cập: độ tương phản, nhãn, vai trò, thứ tự tiêu điểm
• Giới hạn nội dung: mục tối đa, độ dài văn bản, kích thước hình ảnh
• Dự phòng: danh sách đơn giản hoặc câu trả lời bằng văn bản nếu xác thực không thành công