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

Click

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

Ý nghĩa

A pointer action where the user presses and releases a mouse button on an element.

Hành vi mong đợi

Use click for actions such as opening menus, submitting buttons, selecting items, or navigating with links.

Ví dụ yêu cầu

When the menu button is clicked, open the menu panel.

Chuột và chạm

Tap

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

Ý nghĩa

A touch-screen action where the user touches and releases an element.

Hành vi mong đợi

Tap should generally do the same important work as click on phones and tablets.

Lưu ý

Hover-only behavior is unreliable on touch devices.

Ví dụ yêu cầu

Make the category menu open by tap instead of hover on mobile.

Chuột và chạm

Hover

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

Ý nghĩa

The state when a mouse pointer is over an element.

Hành vi mong đợi

Hover can preview affordance with color, underline, background, or shadow changes.

Lưu ý

Do not make essential actions depend only on hover.

Ví dụ yêu cầu

Change the menu item background when it is hovered.

Chuột và chạm

Long press

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

Ý nghĩa

A touch action where the user holds a finger on an element for a longer moment.

Hành vi mong đợi

Long press is often used for secondary actions, but it is less discoverable than a visible button.

Lưu ý

Avoid long press as the only way to access important functionality.

Ví dụ yêu cầu

Do not hide essential copy actions behind long press only.

Chuột và chạm

Drag

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

Ý nghĩa

A pointer action where the user holds and moves an element or selection.

Hành vi mong đợi

Drag interactions need clear handles, boundaries, and fallback controls when precision matters.

Ví dụ yêu cầu

Add a visible handle if a panel can be dragged.

Chuột và chạm

Swipe

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

Ý nghĩa

A touch gesture where the user moves a finger quickly across the screen.

Hành vi mong đợi

Swipe can move carousels or panels, but visible controls should still exist.

Ví dụ yêu cầu

Allow swipe between examples, but keep arrow buttons visible.

Bàn phím

Keyboard event

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

Ý nghĩa

An interaction caused by pressing or releasing a keyboard key.

Hành vi mong đợi

Keyboard events are used for Escape-to-close, Enter-to-submit, arrow navigation, and shortcuts.

Ví dụ yêu cầu

Close the dropdown when the Escape key is pressed.

Bàn phím

Escape key

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

Ý nghĩa

A keyboard key commonly used to cancel, close, or exit a temporary UI.

Hành vi mong đợi

Dropdowns, menus, modals, and popovers should usually close on Escape.

Ví dụ yêu cầu

Make both the language dropdown and site menu close on Escape.

Bàn phím

Enter key

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

Ý nghĩa

A keyboard key often used to activate a focused control or submit a form.

Hành vi mong đợi

A focused button should activate with Enter. Search forms may submit with Enter.

Ví dụ yêu cầu

Let Enter run the search when the search field is focused.

Bàn phím

Tab key

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

Ý nghĩa

A keyboard key used to move focus through interactive controls.

Hành vi mong đợi

The Tab order should follow the visible reading and interaction order.

Ví dụ yêu cầu

Keep the tab order natural across the header controls.

Trạng thái UI

Focus

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

Ý nghĩa

The state where an element is ready for keyboard input or activation.

Hành vi mong đợi

Focused controls should have a visible outline or focus style.

Ví dụ yêu cầu

Make the focused search input clearly visible.

Trạng thái UI

Blur

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

Ý nghĩa

The state change when an element loses focus.

Hành vi mong đợi

Blur can validate input or close lightweight UI, but it should not surprise users.

Ví dụ yêu cầu

Do not clear the search text when the input loses focus.

Trạng thái UI

Active state

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

Ý nghĩa

A short state while a control is being pressed.

Hành vi mong đợi

Active state can show a pressed effect with a slight background, border, or position change.

Ví dụ yêu cầu

Add a subtle pressed state to icon buttons.

Trạng thái UI

Selected state

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

Ý nghĩa

The state of an item that is currently chosen in a list, menu, tab group, or filter group.

Hành vi mong đợi

Selected items should be visually different from unselected items.

Ví dụ yêu cầu

Make the active category chip clearly different from inactive chips.

Trạng thái UI

Disabled state

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

Ý nghĩa

A state where a control is visible but cannot be used.

Hành vi mong đợi

Disabled controls should look inactive but remain understandable.

Ví dụ yêu cầu

Disable the submit button until required input is valid.

Trạng thái UI

Checked state

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

Ý nghĩa

The on or selected state of a checkbox, radio, or switch-like control.

Hành vi mong đợi

Checked state should be visibly clear and announced by the control semantics.

Ví dụ yêu cầu

Show a clear checked state for selected options.

Mở và đóng

Toggle

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

Ý nghĩa

An action that switches between two states, such as open and closed or on and off.

Hành vi mong đợi

A toggle should show its current state and update that state predictably.

Ví dụ yêu cầu

Use one button to toggle each menu category open and closed.

Mở và đóng

Open / close

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

Ý nghĩa

A visibility state where a panel, menu, or section is shown or hidden.

Hành vi mong đợi

Open and close states should be controlled consistently by buttons, outside click, Escape, or selection.

Ví dụ yêu cầu

Close the site menu when the language dropdown opens.

Mở và đóng

Dropdown

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

Ý nghĩa

A floating list that appears from a button or field.

Hành vi mong đợi

Dropdowns usually close after selection, outside click, or Escape.

Ví dụ yêu cầu

When a language is selected, close the dropdown.

Mở và đóng

Accordion

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

Ý nghĩa

A UI pattern where section headers open or close their content.

Hành vi mong đợi

Accordions should clearly indicate which sections are open.

Ví dụ yêu cầu

Keep all accordion categories closed by default.

Mở và đóng

Modal

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

Ý nghĩa

A focused overlay that appears above the page and usually blocks the background content.

Hành vi mong đợi

Modals need close controls, Escape behavior, focus handling, and clear purpose.

Ví dụ yêu cầu

Add a close button and Escape-to-close behavior to the modal.

Mở và đóng

Outside click

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

Ý nghĩa

A click or tap outside a temporary panel such as a dropdown, menu, or popover.

Hành vi mong đợi

Temporary panels commonly close when the user clicks outside them.

Lưu ý

Controls that belong to the same header group may not count as outside unless the logic is written that way.

Ví dụ yêu cầu

Close the menu when the user clicks outside the menu panel.

Mở và đóng

Focus trap

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

Ý nghĩa

A behavior that keeps keyboard focus inside a modal or dialog while it is open.

Hành vi mong đợi

Focus trap prevents keyboard users from accidentally moving behind an active modal.

Ví dụ yêu cầu

Trap focus inside the modal until it is closed.

Điều hướng

Link navigation

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

Ý nghĩa

Moving to another page, route, or section through a link.

Hành vi mong đợi

Links should use correct destinations and close temporary menus after navigation.

Ví dụ yêu cầu

Close the menu after a menu link is clicked.

Điều hướng

Route change

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

Ý nghĩa

A change from one application route or URL path to another.

Hành vi mong đợi

Route changes should update page content, metadata, and active navigation state.

Ví dụ yêu cầu

Update the active navigation state after route changes.

Điều hướng

Scroll

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

Ý nghĩa

Moving the visible viewport through content that is larger than the screen.

Hành vi mong đợi

Scrolling can happen on the page or inside a panel with its own overflow.

Ví dụ yêu cầu

Make long dropdown menus scroll inside the panel instead of extending off screen.

Điều hướng

Anchor scroll

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

Ý nghĩa

A link behavior that scrolls to an element with a matching id on the same page.

Hành vi mong đợi

Anchor links are useful for jumping to tools, references, or sections.

Ví dụ yêu cầu

Make the Browse tools button scroll to the tools section.

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

Type

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

Ý nghĩa

Entering text or values into an input or textarea.

Hành vi mong đợi

Typing can update state immediately, validate input, or wait until submission.

Ví dụ yêu cầu

Update search results as the user types.

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

Submit

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

Ý nghĩa

Sending or applying form input.

Hành vi mong đợi

Submit should validate required input, prevent accidental reloads when needed, and show feedback.

Ví dụ yêu cầu

Prevent the form from reloading the page when it submits.

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

Reset

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

Ý nghĩa

Returning controls or values to their default state.

Hành vi mong đợi

Reset should be predictable and avoid erasing important work without warning.

Ví dụ yêu cầu

Add a reset button that clears search and returns to all categories.

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

Validation

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

Ý nghĩa

Checking whether user input is complete and valid.

Hành vi mong đợi

Validation should explain what is wrong and how to fix it.

Ví dụ yêu cầu

Show a validation message when the input value is invalid.

Tìm kiếm và lọc

Search

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

Ý nghĩa

Finding matching items based on text entered by the user.

Hành vi mong đợi

Search should check useful fields such as names, aliases, descriptions, and examples.

Ví dụ yêu cầu

Make the search match Korean words, English terms, aliases, and request examples.

Tìm kiếm và lọc

Filter

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

Ý nghĩa

Narrowing a list to items that match a selected condition.

Hành vi mong đợi

Filters should show which condition is active and how many items remain when useful.

Ví dụ yêu cầu

Add category filters above the UI interaction term cards.

Tìm kiếm và lọc

Sort

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

Ý nghĩa

Changing the order of items by a rule such as name, date, priority, or category.

Hành vi mong đợi

Sorting should not remove items; it only changes their order.

Ví dụ yêu cầu

Sort matching terms alphabetically after filtering.

Tìm kiếm và lọc

Debounce

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

Ý nghĩa

Waiting briefly after the user stops typing before running an expensive action.

Hành vi mong đợi

Debounce prevents search, validation, or API calls from running on every single keystroke.

Ví dụ yêu cầu

Debounce the search input if it becomes slow with many items.

Tìm kiếm và lọc

Clear

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

Ý nghĩa

Removing a typed value, selected filter, or temporary state.

Hành vi mong đợi

Clear actions should affect only the intended field or state.

Ví dụ yêu cầu

Add a clear button inside the search field.

Phản hồi

Loading

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

Ý nghĩa

A temporary state while data, page content, or an action is still being prepared.

Hành vi mong đợi

Loading feedback tells users that the app is working and prevents repeated actions when needed.

Ví dụ yêu cầu

Show a loading state while the conversion result is being prepared.

Phản hồi

Spinner

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

Ý nghĩa

A visual indicator that something is loading or processing.

Hành vi mong đợi

Spinners work best for short waits; longer waits may need clearer progress or text.

Ví dụ yêu cầu

Show a small spinner inside the button while submitting.

Phản hồi

Toast

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

Ý nghĩa

A short temporary message that appears after an action.

Hành vi mong đợi

Toasts are useful for confirmations such as copied, saved, or updated.

Ví dụ yêu cầu

Show a toast after copying text to the clipboard.

Phản hồi

Error state

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

Ý nghĩa

A state that tells the user something went wrong.

Hành vi mong đợi

Error messages should be specific, readable, and explain the next useful action.

Ví dụ yêu cầu

Show a clear error message when the input cannot be converted.

Phản hồi

Success state

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

Ý nghĩa

A state that confirms an action completed successfully.

Hành vi mong đợi

Success states can be subtle when the result is already visible.

Ví dụ yêu cầu

Show a small success message after settings are saved.

Phản hồi

Empty state

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

Ý nghĩa

A state shown when there is no data or no matching result.

Hành vi mong đợi

Empty states should explain why nothing is shown and suggest a next step.

Ví dụ yêu cầu

Show a no-results message when search returns no matching terms.

Phản hồi

Copy to clipboard

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

Ý nghĩa

An action that puts text into the user's clipboard.

Hành vi mong đợi

Copy actions should give feedback so users know the text was copied.

Ví dụ yêu cầu

Copy the CSS property when the property chip is clicked.

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

Transition

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

Ý nghĩa

A smooth change between two visual states, such as color, opacity, or position.

Hành vi mong đợi

Transitions can make UI feel polished, but should stay quick for tools.

Ví dụ yêu cầu

Add a short transition to menu item hover colors.

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

Animation

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

Ý nghĩa

A visual motion sequence that can run once or repeatedly.

Hành vi mong đợi

Animation should support the task, not distract from reading or repeated work.

Ví dụ yêu cầu

Use a subtle slide-down animation when the dropdown opens.

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

Delay

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

Ý nghĩa

A wait before something happens or disappears.

Hành vi mong đợi

Delays can make feedback readable, but long delays can make the UI feel slow.

Ví dụ yêu cầu

Keep the copied toast visible for about one second.

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

Throttle

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

Ý nghĩa

Limiting how often a repeated event handler can run.

Hành vi mong đợi

Throttle is useful for scroll or resize handlers that fire many times.

Ví dụ yêu cầu

Throttle the scroll handler if the page becomes janky.