02 Giao diện tái sử dụng

Thành phần

Điều khiển phổ biến với cách hoạt động dễ hiểu, trạng thái có khả năng tiếp cận và ví dụ tái sử dụng. Các đặc tả này là đề xuất dự thảo.

Hướng dẫn thành phần đang được hoàn thiện

Dùng ví dụ để xem định dạng. Trang thành phần tương lai cần mục đích, biến thể, trạng thái, bàn phím, thích ứng màn hình và khả năng tiếp cận. Xem toàn bộ danh mục 81 mục giao diện.

Hành động

Nút bấm

Nút để thực hiện hành động. Liên kết để tới trang khác.

Hành động liên kết

Mục đíchThực hiện hành động trong ngữ cảnh hiện tại.
NhãnDùng động từ ngắn mô tả kết quả.
Bàn phímGiữ cách dùng bàn phím gốc của nút và liên kết. Viền tiêu điểm luôn nhìn thấy.

Nhập dữ liệu

Trường nhập chữ

Nhãn nhìn thấy, ở gần điều khiển. Chữ hướng dẫn giải thích định dạng hoặc bước tiếp theo.

Tên dự ánTên ngắn, dễ nhận biết.

NhãnGắn nhãn cố định, nhìn thấy được với từng trường.
Chữ hướng dẫnNối gợi ý hoặc lỗi với trường bằng aria-describedby.
LỗiGiải thích cần sửa gì và giữ dữ liệu người dùng đã nhập.

Lựa chọn

Danh sách thả xuống tùy chỉnh cần chăm chút cả nút mở lẫn bảng lựa chọn khi mở.

Cả hai trạng tháiTạo kiểu nút đóng và bảng lựa chọn mở bằng cùng biến thiết kế và phông chữ. Bảng mặc định hệ điều hành không đáp ứng yêu cầu điều khiển VINASIG.
Bàn phímHỗ trợ mở, phím mũi tên, Enter hoặc Space để chọn, Escape để đóng, tiêu điểm nhìn thấy và rời tiêu điểm bình thường.
Khả năng tiếp cậnNhãn nhìn thấy, mẫu select hoặc listbox đã kiểm chứng. Thông báo giá trị hiện tại và mục đã chọn.
Thích ứng màn hìnhGiữ bảng gắn với nút mở và trong màn hình trên thiết bị hẹp.

Điều khiển tái sử dụng giữ select gốc ẩn cho trạng thái biểu mẫu. Đọc đặc tả và kiểm tra tương tác thật của dự án trước khi dùng.

Phản hồi

Thông báo trạng thái

Màu trạng thái đi cùng chữ để giữ ý nghĩa khi không phân biệt màu.

Đã lưu thay đổi

Bản nháp đã mới nhất.

Không thể lưu

Kiểm tra kết nối rồi thử lại.

Ký hiệu hình ảnh

Dùng bộ biểu tượng chung

Chỉ dùng biểu tượng khi làm rõ điều khiển hoặc nhận biết hữu ích.

Thông tin Thành công Mở liên kết

Bộ biểu tượngDùng biểu tượng SVG Lucide qua thành phần chung Icon.astro thành phần.
Logo thương hiệuDùng Simple Icons cho logo bên thứ ba như Google và Apple. Màu mặc định theo chữ xung quanh. Chỉ dùng màu thương hiệu rõ khi ngữ cảnh và hướng dẫn chính thức yêu cầu.
Biểu tượng đăng nhậpTheo hướng dẫn đăng nhập hiện tại của từng nhà cung cấp. Nút Google dùng chữ G đa màu chuẩn.
Phong cách biểu tượngDùng Lucide cho mũi tên và biểu tượng đặt cạnh nhau để giữ phong cách nhất quán.
Liên kết xuống dòngGiữ nhãn hành động và biểu tượng trong cùng luồng chữ. Khi phóng lớn hoặc màn hình hẹp, biểu tượng ở cạnh từ cuối, không trôi ra cạnh xa.
Ký tựKý hiệu Space Grotesk có thể dùng cho chữ hoặc ký hiệu trình bày. Không thay biểu tượng giao diện bằng chúng khi hình dạng khác bộ biểu tượng chung.
Ký hiệu riêngKhông chèn emoji, ký hiệu hình ảnh Unicode hay mã vùng riêng vào mã trang hoặc CSS.
Ý nghĩaGiữ chữ nhìn thấy khi chỉ có biểu tượng sẽ làm nhãn hoặc hành động khó hiểu.
Khả năng tiếp cậnẨn biểu tượng trang trí khỏi công nghệ hỗ trợ. Điều khiển chỉ có biểu tượng cần tên hỗ trợ tiếp cận.

<Icon name="info" />

Biểu tượng là đồ họa vector nội tuyến và dùng màu của giao diện.

Nhóm nội dung

Thẻ nội dung

Thẻ gom nội dung liên quan. Làm rõ mục có thể tương tác và tránh lồng các vùng bấm vào nhau.

Màu nền tảng

Dùng biến theo ý nghĩa

Biến theo ý nghĩa nối thành phần với vai trò, giúp thay đổi toàn hệ thống dễ hơn.

Đọc nền tảng màu