AI Engineering Tools

Lập trình

Thuật ngữ tương tác UI cho hành vi trang

Tra cứu cách mô tả hành vi của nút, menu, form, tìm kiếm, bàn phím và trạng thái phản hồi.

47 mục

Chuột và chạm

Nhấp

Click

Kích hoạt/trạng tháionClick

Ý nghĩa

Một hành động con trỏ trong đó người dùng nhấn và thả nút chuột trên một phần tử.

Hành vi mong đợi

Sử dụng click cho các hành động như mở menu, gửi nút, chọn mục hoặc điều hướng bằng liên kết.

Ví dụ yêu cầu

Khi nút menu được nhấp, hãy mở bảng điều khiển menu.

Chuột và chạm

Chạm

Tap

Kích hoạt/trạng tháitouch / pointer

Ý nghĩa

Một hành động cảm ứng trên màn hình cảm ứng mà người dùng chạm và thả một phần tử.

Hành vi mong đợi

Chạm thường thực hiện các tác vụ quan trọng tương tự như thao tác nhấp chuột trên điện thoại và máy tính bảng.

Lưu ý

Hành vi chỉ hoạt động khi di chuột không đáng tin cậy trên các thiết bị cảm ứng.

Ví dụ yêu cầu

Mở menu danh mục bằng cách chạm thay vì di chuột trên thiết bị di động.

Chuột và chạm

Di chuột

Hover

Kích hoạt/trạng thái:hover

Ý nghĩa

Trạng thái khi con trỏ chuột nằm trên một phần tử.

Hành vi mong đợi

Di chuột có thể hiển thị trước chức năng bằng cách thay đổi màu sắc, gạch chân, nền hoặc bóng.

Lưu ý

Không làm cho các hành động quan trọng phụ thuộc chỉ vào thao tác di chuột.

Ví dụ yêu cầu

Thay đổi màu nền của mục menu khi người dùng di chuột qua.

Chuột và chạm

Nhấn giữ

Long press

Kích hoạt/trạng tháitouch hold

Ý nghĩa

Một hành động cảm ứng mà người dùng giữ ngón tay trên một phần tử trong một khoảng thời gian dài hơn.

Hành vi mong đợi

Nhấn giữ thường được sử dụng cho các hành động phụ, nhưng ít được khám phá hơn so với một nút hiển thị rõ ràng.

Lưu ý

Tránh sử dụng thao tác nhấn giữ lâu như là cách duy nhất để truy cập các chức năng quan trọng.

Ví dụ yêu cầu

Không ẩn các hành động sao chép quan trọng phía sau thao tác nhấn giữ lâu.

Chuột và chạm

Kéo thả (Drag)

Drag

Kích hoạt/trạng tháipointerdown + pointermove

Ý nghĩa

Một hành động con trỏ trong đó người dùng giữ và di chuyển một phần tử hoặc lựa chọn.

Hành vi mong đợi

Các tương tác kéo thả cần có các tay cầm rõ ràng, ranh giới và các điều khiển dự phòng khi độ chính xác quan trọng.

Ví dụ yêu cầu

Thêm một tay cầm hiển thị nếu một bảng điều khiển có thể được kéo.

Chuột và chạm

Vuốt

Swipe

Kích hoạt/trạng tháitouch move

Ý nghĩa

Một cử chỉ cảm ứng mà người dùng di chuyển ngón tay nhanh trên màn hình.

Hành vi mong đợi

Vuốt có thể di chuyển các bộ sưu tập hoặc bảng, nhưng các điều khiển hiển thị vẫn phải tồn tại.

Ví dụ yêu cầu

Cho phép vuốt giữa các ví dụ, nhưng vẫn giữ các nút mũi tên hiển thị.

Bàn phím

Sự kiện bàn phím

Keyboard event

Kích hoạt/trạng tháikeydown / keyup

Ý nghĩa

Một tương tác được gây ra bởi việc nhấn hoặc thả một phím trên bàn phím.

Hành vi mong đợi

Các sự kiện bàn phím được sử dụng để đóng bằng phím Escape, gửi bằng phím Enter, điều hướng bằng phím mũi tên và các phím tắt.

Ví dụ yêu cầu

Đóng hộp thoại khi phím Escape được nhấn.

Bàn phím

Phím Escape

Escape key

Kích hoạt/trạng tháiEscape

Ý nghĩa

Một phím trên bàn phím thường được sử dụng để hủy, đóng hoặc thoát khỏi một UI tạm thời.

Hành vi mong đợi

Danh sách thả xuống, menu, hộp thoại và cửa sổ bật lên thường đóng khi nhấn phím Escape.

Ví dụ yêu cầu

Làm cho cả menu ngôn ngữ và menu trang web đóng lại khi nhấn phím Escape.

Bàn phím

Phím Enter

Enter key

Kích hoạt/trạng tháiEnter

Ý nghĩa

Một phím trên bàn phím thường được sử dụng để kích hoạt một điều khiển đang được chọn hoặc gửi một biểu mẫu.

Hành vi mong đợi

Một nút được tập trung nên được kích hoạt bằng phím Enter. Các biểu mẫu tìm kiếm có thể gửi bằng phím Enter.

Ví dụ yêu cầu

Nhấn Enter để chạy tìm kiếm khi trường tìm kiếm đang được chọn.

Bàn phím

Phím Tab

Tab key

Kích hoạt/trạng tháiTab

Ý nghĩa

Một phím trên bàn phím được sử dụng để di chuyển điểm tập trung qua các điều khiển tương tác.

Hành vi mong đợi

Thứ tự tab nên tuân theo thứ tự đọc và tương tác hiển thị.

Ví dụ yêu cầu

Giữ thứ tự tab tự nhiên trên các điều khiển tiêu đề.

Trạng thái UI

Tập trung.

Focus

Kích hoạt/trạng thái:focus / :focus-visible

Ý nghĩa

Trạng thái mà một phần tử sẵn sàng để nhập hoặc kích hoạt bằng bàn phím.

Hành vi mong đợi

Các điều khiển đang được tập trung phải có đường viền hoặc kiểu tập trung hiển thị.

Ví dụ yêu cầu

Làm cho ô nhập liệu tìm kiếm đang được chọn hiển thị rõ ràng.

Trạng thái UI

Làm mờ

Blur

Kích hoạt/trạng tháiblur / focusout

Ý nghĩa

Thay đổi trạng thái khi một phần tử mất tập trung.

Hành vi mong đợi

Hiệu ứng mờ có thể xác thực đầu vào hoặc đóng UI nhẹ, nhưng không nên gây bất ngờ cho người dùng.

Ví dụ yêu cầu

Không xóa văn bản tìm kiếm khi trường nhập liệu mất tiêu điểm.

Trạng thái UI

Trạng thái hoạt động

Active state

Kích hoạt/trạng thái:active

Ý nghĩa

Một trạng thái ngắn trong khi một điều khiển đang được nhấn.

Hành vi mong đợi

Trạng thái hoạt động có thể hiển thị hiệu ứng nhấn bằng một chút thay đổi về màu nền, đường viền hoặc vị trí.

Ví dụ yêu cầu

Thêm trạng thái nhấn tinh tế cho các nút biểu tượng.

Trạng thái UI

Trạng thái đã chọn

Selected state

Kích hoạt/trạng tháiselected / aria-current

Ý nghĩa

Trạng thái của một mục hiện đang được chọn trong danh sách, menu, nhóm tab hoặc nhóm bộ lọc.

Hành vi mong đợi

Các mục đã chọn phải có sự khác biệt về mặt hình ảnh so với các mục chưa được chọn.

Ví dụ yêu cầu

Làm cho nút phân loại đang hoạt động khác biệt rõ ràng so với các nút không hoạt động.

Trạng thái UI

Trạng thái vô hiệu hóa

Disabled state

Kích hoạt/trạng tháidisabled / aria-disabled

Ý nghĩa

Một trạng thái trong đó một điều khiển có thể hiển thị nhưng không thể sử dụng.

Hành vi mong đợi

Các điều khiển bị vô hiệu hóa phải trông không hoạt động nhưng vẫn dễ hiểu.

Ví dụ yêu cầu

Vô hiệu hóa nút gửi cho đến khi dữ liệu nhập yêu cầu hợp lệ.

Trạng thái UI

Trạng thái đã kiểm tra

Checked state

Kích hoạt/trạng tháichecked

Ý nghĩa

Trạng thái "bật" hoặc trạng thái được chọn của một hộp kiểm, nút radio hoặc công tắc.

Hành vi mong đợi

Trạng thái đã kiểm tra phải được hiển thị rõ ràng và được thông báo bởi các quy tắc điều khiển.

Ví dụ yêu cầu

Hiển thị trạng thái đã chọn rõ ràng cho các tùy chọn đã chọn.

Mở và đóng

Chuyển đổi

Toggle

Kích hoạt/trạng tháitoggle state

Ý nghĩa

Một hành động để chuyển đổi giữa hai trạng thái, chẳng hạn như mở và đóng hoặc bật và tắt.

Hành vi mong đợi

Một nút chuyển đổi nên hiển thị trạng thái hiện tại của nó và cập nhật trạng thái đó một cách dự đoán.

Ví dụ yêu cầu

Sử dụng một nút để bật và tắt từng danh mục menu.

Mở và đóng

Mở / đóng.

Open / close

Kích hoạt/trạng tháiopen / closed

Ý nghĩa

Một trạng thái hiển thị mà trong đó một bảng, menu hoặc phần được hiển thị hoặc ẩn.

Hành vi mong đợi

Trạng thái mở và đóng phải được điều khiển nhất quán bằng các nút, nhấp ngoài, phím Escape hoặc lựa chọn.

Ví dụ yêu cầu

Đóng menu trang web khi hộp thoại ngôn ngữ mở ra.

Mở và đóng

Danh sách thả xuống (Dropdown)

Dropdown

Kích hoạt/trạng tháibutton -> panel

Ý nghĩa

Một danh sách nổi xuất hiện từ một nút hoặc trường.

Hành vi mong đợi

Danh sách thả xuống thường đóng lại sau khi chọn, nhấp ngoài hoặc nhấn phím Escape.

Ví dụ yêu cầu

Khi một ngôn ngữ được chọn, hãy đóng menu thả xuống.

Mở và đóng

Accordion (thanh trượt)

Accordion

Kích hoạt/trạng tháisection toggle

Ý nghĩa

Một mẫu UI trong đó các tiêu đề phần mở hoặc đóng nội dung của chúng.

Hành vi mong đợi

Các thanh trượt (accordions) nên chỉ rõ các phần nào đang mở.

Ví dụ yêu cầu

Giữ tất cả các danh mục accordion ở trạng thái đóng theo mặc định.

Mở và đóng

Cửa sổ hội thoại

Modal

Kích hoạt/trạng tháiopen dialog

Ý nghĩa

Một lớp phủ nổi được tập trung xuất hiện phía trên trang và thường chặn nội dung nền.

Hành vi mong đợi

Cửa sổ hội thoại cần các điều khiển đóng, hành vi khi nhấn phím Escape, xử lý tập trung và mục đích rõ ràng.

Ví dụ yêu cầu

Thêm một nút đóng và hành vi đóng bằng phím Escape cho hộp thoại (modal).

Mở và đóng

Nhấp ngoài.

Outside click

Kích hoạt/trạng tháidocument pointerdown

Ý nghĩa

Một cú nhấp chuột hoặc chạm bên ngoài một bảng điều khiển tạm thời như một menu thả xuống, menu hoặc cửa sổ bật lên.

Hành vi mong đợi

Các bảng điều khiển tạm thời thường đóng khi người dùng nhấp chuột ra ngoài chúng.

Lưu ý

Các điều khiển thuộc cùng một nhóm tiêu đề có thể không được tính là nằm ngoài phạm vi trừ khi logic được viết như vậy.

Ví dụ yêu cầu

Đóng menu khi người dùng nhấp chuột ngoài bảng điều khiển menu.

Mở và đóng

Chế độ tập trung.

Focus trap

Kích hoạt/trạng tháimodal open

Ý nghĩa

Một hành vi giữ cho con trỏ bàn phím nằm trong một hộp thoại hoặc cửa sổ trong khi nó đang mở.

Hành vi mong đợi

Chế độ tập trung ngăn người dùng sử dụng bàn phím vô tình di chuyển ra khỏi modal đang hoạt động.

Ví dụ yêu cầu

Giữ tập trung bên trong hộp thoại cho đến khi nó được đóng.

Điều hướng

Điều hướng bằng liên kết

Link navigation

Kích hoạt/trạng tháilink click

Ý nghĩa

Chuyển đến một trang, đường dẫn hoặc phần khác thông qua một liên kết.

Hành vi mong đợi

Các liên kết phải sử dụng các đích chính xác và đóng các menu tạm thời sau khi điều hướng.

Ví dụ yêu cầu

Đóng menu sau khi một liên kết menu được nhấp.

Điều hướng

Định tuyến thay đổi.

Route change

Kích hoạt/trạng tháirouter navigation

Ý nghĩa

Một thay đổi từ một tuyến ứng dụng hoặc đường dẫn URL sang một tuyến khác.

Hành vi mong đợi

Các thay đổi định tuyến nên cập nhật nội dung trang, siêu dữ liệu và trạng thái điều hướng đang hoạt động.

Ví dụ yêu cầu

Cập nhật trạng thái điều hướng đang hoạt động sau khi thay đổi đường dẫn.

Điều hướng

Cuộn

Scroll

Kích hoạt/trạng tháiwheel / touch scroll

Ý nghĩa

Di chuyển vùng hiển thị trên màn hình thông qua nội dung lớn hơn kích thước màn hình.

Hành vi mong đợi

Cuộn có thể xảy ra trên trang hoặc bên trong một bảng điều khiển có tràn riêng.

Ví dụ yêu cầu

Làm cho các menu thả xuống dài có thể cuộn bên trong bảng điều khiển thay vì mở rộng ra ngoài màn hình.

Điều hướng

Cuộn neo

Anchor scroll

Kích hoạt/trạng tháihref=#id

Ý nghĩa

Một hành vi liên kết cuộn đến một phần tử có `id` trùng khớp trên cùng một trang.

Hành vi mong đợi

Các liên kết neo rất hữu ích để chuyển đến các công cụ, tài liệu tham khảo hoặc các phần.

Ví dụ yêu cầu

Làm cho nút "Browse tools" cuộn đến phần công cụ.

Nhập liệu và biểu mẫu

Loại

Type

Kích hoạt/trạng tháiinput event

Ý nghĩa

Nhập văn bản hoặc giá trị vào một ô nhập liệu hoặc khu vực văn bản.

Hành vi mong đợi

Gõ có thể cập nhật trạng thái ngay lập tức, xác thực đầu vào hoặc chờ cho đến khi gửi.

Ví dụ yêu cầu

Cập nhật kết quả tìm kiếm khi người dùng nhập liệu.

Nhập liệu và biểu mẫu

Gửi

Submit

Kích hoạt/trạng tháisubmit event

Ý nghĩa

Gửi hoặc nhập dữ liệu từ biểu mẫu.

Hành vi mong đợi

Nút gửi phải xác thực dữ liệu nhập, ngăn chặn việc tải lại vô tình khi cần thiết và hiển thị phản hồi.

Ví dụ yêu cầu

Ngăn không cho biểu mẫu tự động tải lại trang khi gửi.

Nhập liệu và biểu mẫu

Đặt lại

Reset

Kích hoạt/trạng tháireset action

Ý nghĩa

Đặt các điều khiển hoặc giá trị về trạng thái mặc định.

Hành vi mong đợi

Việc đặt lại phải có thể dự đoán được và tránh xóa dữ liệu quan trọng mà không có cảnh báo.

Ví dụ yêu cầu

Thêm một nút "Đặt lại" để xóa tìm kiếm và trả về tất cả các danh mục.

Nhập liệu và biểu mẫu

Xác thực

Validation

Kích hoạt/trạng tháiinput / submit

Ý nghĩa

Kiểm tra xem dữ liệu nhập từ người dùng có đầy đủ và hợp lệ hay không.

Hành vi mong đợi

Xác thực nên giải thích điều gì không đúng và cách khắc phục.

Ví dụ yêu cầu

Hiển thị thông báo xác thực khi giá trị đầu vào không hợp lệ.

Tìm kiếm và lọc

Tìm kiếm

Search

Kích hoạt/trạng tháiquery change

Ý nghĩa

Tìm các mục phù hợp dựa trên văn bản do người dùng nhập.

Hành vi mong đợi

Nên kiểm tra các trường hữu ích như tên, bí danh, mô tả và ví dụ.

Ví dụ yêu cầu

Cho phép tìm kiếm khớp với các từ tiếng Hàn, thuật ngữ tiếng Anh, tên gọi khác và ví dụ yêu cầu.

Tìm kiếm và lọc

Lọc.

Filter

Kích hoạt/trạng tháifilter state

Ý nghĩa

Thu hẹp danh sách thành các mục phù hợp với một điều kiện đã chọn.

Hành vi mong đợi

Các bộ lọc nên hiển thị điều kiện nào đang hoạt động và số lượng mục còn lại khi có thể.

Ví dụ yêu cầu

Thêm bộ lọc theo danh mục phía trên các thẻ tương tác UI.

Tìm kiếm và lọc

Sắp xếp

Sort

Kích hoạt/trạng tháisort option

Ý nghĩa

Thay đổi thứ tự của các mục theo một quy tắc như tên, ngày, mức độ ưu tiên hoặc danh mục.

Hành vi mong đợi

Việc sắp xếp không nên loại bỏ các mục; nó chỉ thay đổi thứ tự của chúng.

Ví dụ yêu cầu

Sắp xếp các thuật ngữ phù hợp theo thứ tự bảng chữ cái sau khi lọc.

Tìm kiếm và lọc

Chống rung (debounce)

Debounce

Kích hoạt/trạng tháidelayed input

Ý nghĩa

Chờ một khoảng thời gian ngắn sau khi người dùng ngừng gõ trước khi thực hiện một hành động tốn kém.

Hành vi mong đợi

Chống rung ngăn chặn các thao tác tìm kiếm, xác thực hoặc gọi API không thực hiện trên mỗi lần nhấn phím.

Ví dụ yêu cầu

Sử dụng chống rung cho ô nhập liệu tìm kiếm nếu nó hoạt động chậm khi có nhiều mục.

Tìm kiếm và lọc

Xóa

Clear

Kích hoạt/trạng tháiclear action

Ý nghĩa

Loại bỏ một giá trị đã nhập, bộ lọc đã chọn hoặc trạng thái tạm thời.

Hành vi mong đợi

Các hành động xóa chỉ nên ảnh hưởng đến trường hoặc trạng thái dự định.

Ví dụ yêu cầu

Thêm một nút "Xóa" bên trong trường tìm kiếm.

Phản hồi

Đang tải

Loading

Kích hoạt/trạng tháipending state

Ý nghĩa

Một trạng thái tạm thời trong khi dữ liệu, nội dung trang hoặc một hành động vẫn đang được chuẩn bị.

Hành vi mong đợi

Thông báo "Đang tải" cho người dùng biết ứng dụng đang hoạt động và ngăn chặn các thao tác lặp đi lặp lại khi cần thiết.

Ví dụ yêu cầu

Hiển thị trạng thái đang tải trong khi kết quả chuyển đổi đang được chuẩn bị.

Phản hồi

Biểu tượng quay

Spinner

Kích hoạt/trạng tháiloading visual

Ý nghĩa

Một chỉ báo hình ảnh cho biết một cái gì đó đang tải hoặc xử lý.

Hành vi mong đợi

Biểu tượng quay hoạt động tốt nhất cho các khoảng thời gian chờ ngắn; các khoảng thời gian chờ dài hơn có thể cần một chỉ báo tiến trình hoặc văn bản rõ ràng hơn.

Ví dụ yêu cầu

Hiển thị một bộ đếm nhỏ bên trong nút khi gửi.

Phản hồi

Thông báo

Toast

Kích hoạt/trạng tháitemporary message

Ý nghĩa

Một thông báo tạm thời ngắn xuất hiện sau một hành động.

Hành vi mong đợi

Các thông báo hữu ích để xác nhận các thao tác như sao chép, lưu hoặc cập nhật.

Ví dụ yêu cầu

Hiển thị thông báo toast sau khi sao chép văn bản vào clipboard.

Phản hồi

Trạng thái lỗi

Error state

Kích hoạt/trạng tháierror

Ý nghĩa

Một trạng thái cho biết có điều gì đó không ổn.

Hành vi mong đợi

Thông báo lỗi nên cụ thể, dễ đọc và giải thích hành động tiếp theo hữu ích.

Ví dụ yêu cầu

Hiển thị thông báo lỗi rõ ràng khi không thể chuyển đổi đầu vào.

Phản hồi

Trạng thái thành công

Success state

Kích hoạt/trạng tháisuccess

Ý nghĩa

Một trạng thái xác nhận rằng một hành động đã hoàn thành thành công.

Hành vi mong đợi

Các trạng thái thành công có thể tinh tế khi kết quả đã hiển thị.

Ví dụ yêu cầu

Hiển thị thông báo thành công nhỏ sau khi lưu cài đặt.

Phản hồi

Trạng thái trống

Empty state

Kích hoạt/trạng tháiempty result

Ý nghĩa

Một trạng thái được hiển thị khi không có dữ liệu hoặc không có kết quả phù hợp.

Hành vi mong đợi

Các trạng thái trống nên giải thích lý do tại sao không có gì được hiển thị và gợi ý bước tiếp theo.

Ví dụ yêu cầu

Hiển thị thông báo "không có kết quả" khi tìm kiếm không trả về bất kỳ kết quả nào.

Phản hồi

Sao chép vào bộ đệm

Copy to clipboard

Kích hoạt/trạng tháinavigator.clipboard

Ý nghĩa

Một hành động để đưa văn bản vào bảng tạm của người dùng.

Hành vi mong đợi

Các hành động sao chép nên cung cấp phản hồi để người dùng biết rằng văn bản đã được sao chép.

Ví dụ yêu cầu

Sao chép thuộc tính CSS khi nhãn thuộc tính được nhấp vào.

Chuyển động và thời gian

Chuyển đổi

Transition

Kích hoạt/trạng tháiCSS transition

Ý nghĩa

Một thay đổi mượt mà giữa hai trạng thái hình ảnh, chẳng hạn như màu sắc, độ mờ hoặc vị trí.

Hành vi mong đợi

Các hiệu ứng chuyển đổi có thể làm cho UI trông chuyên nghiệp hơn, nhưng chúng nên diễn ra nhanh chóng đối với các công cụ.

Ví dụ yêu cầu

Thêm một hiệu ứng chuyển đổi nhẹ cho màu sắc khi di chuột qua các mục menu.

Chuyển động và thời gian

Hoạt ảnh

Animation

Kích hoạt/trạng tháiCSS animation

Ý nghĩa

Một chuỗi chuyển động hình ảnh có thể chạy một hoặc nhiều lần.

Hành vi mong đợi

Hoạt ảnh nên hỗ trợ tác vụ, không gây xao nhãng khi đọc hoặc thực hiện các công việc lặp đi lặp lại.

Ví dụ yêu cầu

Sử dụng hiệu ứng trượt xuống nhẹ nhàng khi menu thả xuống mở ra.

Chuyển động và thời gian

Độ trễ

Delay

Kích hoạt/trạng tháisetTimeout / delay

Ý nghĩa

Một khoảng thời gian chờ trước khi có điều gì xảy ra hoặc biến mất.

Hành vi mong đợi

Độ trễ có thể làm cho phản hồi dễ đọc hơn, nhưng độ trễ dài có thể khiến UI cảm thấy chậm.

Ví dụ yêu cầu

Giữ thông báo toast đã sao chép hiển thị trong khoảng một giây.

Chuyển động và thời gian

Giới hạn tốc độ

Throttle

Kích hoạt/trạng tháilimited repeated events

Ý nghĩa

Hạn chế tần suất mà một trình xử lý sự kiện lặp lại có thể chạy.

Hành vi mong đợi

Giới hạn tốc độ hữu ích cho các trình xử lý cuộn hoặc thay đổi kích thước khi chúng được kích hoạt nhiều lần.

Ví dụ yêu cầu

Sử dụng giới hạn tốc độ cho trình xử lý cuộn nếu trang web hoạt động không ổn định.