Программирование
Поиск терминов для поведения кнопок, меню, форм, поиска, клавиатуры и состояний обратной связи.
47 результатов
Указатель и касание
Click
onClickДействие указателя, при котором пользователь нажимает и отпускает кнопку мыши на элементе.
Используйте клик для действий, таких как открытие меню, нажатие кнопок, выбор элементов или навигация по ссылкам.
При нажатии на кнопку меню откройте панель меню.
Указатель и касание
Tap
touch / pointerДействие на сенсорном экране, при котором пользователь касается элемента и отпускает его.
Нажатие обычно выполняет ту же важную функцию, что и щелчок на телефонах и планшетах.
Поведение, основанное только на наведении курсора, ненадежно на устройствах с сенсорным экраном.
Откройте категорийное меню при касании, а не при наведении курсора на мобильных устройствах.
Указатель и касание
Hover
:hoverСостояние, когда указатель мыши находится над элементом.
При наведении курсора можно предварительно отобразить эффект с помощью изменения цвета, подчеркивания, фона или тени.
Не делайте важные действия зависящими только от наведения курсора.
Измените стиль фона элемента меню при наведении курсора.
Указатель и касание
Long press
touch holdЖест прикосновения, при котором пользователь удерживает палец на элементе в течение более длительного времени.
Долгое нажатие часто используется для выполнения дополнительных действий, но его сложнее обнаружить, чем видимую кнопку.
Избегайте длительных нажатий в качестве единственного способа доступа к важным функциям.
Не скрывайте важные действия копирования только с помощью длительного нажатия.
Указатель и касание
Drag
pointerdown + pointermoveДействие указателя, при котором пользователь удерживает и перемещает элемент или выделение.
Перетаскивание требует четких элементов управления, границ и резервных вариантов, когда важна точность.
Добавить видимую ручку, если панель может быть перетащена.
Указатель и касание
Swipe
touch moveЖест прикосновения, при котором пользователь быстро перемещает палец по экрану.
Свайп может перемещать карусели или панели, но видимые элементы управления должны оставаться.
Разрешить переключение между примерами, но сохраняйте видимыми кнопки со стрелками.
Клавиатура
Keyboard event
keydown / keyupВзаимодействие, вызванное нажатием или отпусканием клавиши клавиатуры.
События клавиатуры используются для закрытия окна клавишей Escape, отправки данных клавишей Enter, навигации с помощью клавиш-стрелок и для создания сочетаний клавиш.
Закройте выпадающее меню при нажатии клавиши Escape.
Клавиатура
Escape key
EscapeКлавиша клавиатуры, обычно используемая для отмены, закрытия или выхода из временного UI.
Выпадающие списки, меню, модальные окна и всплывающие окна обычно должны закрываться при нажатии клавиши Escape.
Закройте выпадающее меню выбора языка и главное меню при нажатии клавиши Escape.
Клавиатура
Enter key
EnterКлавиша клавиатуры, часто используемая для активации выбранного элемента управления или отправки формы.
Нажатие клавиши Enter должно активировать кнопку с фокусом. Формы поиска могут отправляться с помощью клавиши Enter.
Нажмите Enter, чтобы запустить поиск, когда поле поиска активно.
Клавиатура
Tab key
TabКлавиша клавиатуры, используемая для перемещения фокуса между интерактивными элементами управления.
Порядок табуляции должен соответствовать порядку видимого чтения и взаимодействия.
Обеспечьте естественный порядок переходов по элементам управления заголовка.
Состояния UI
Focus
:focus / :focus-visibleСостояние, когда элемент готов к вводу с клавиатуры или активации.
Элементы управления, находящиеся в фокусе, должны иметь видильную обводку или стиль фокуса.
Сделайте поле поиска, находящееся в фокусе, четко видимым.
Состояния UI
Blur
blur / focusoutИзменение состояния, когда элемент теряет фокус.
Blur может проверять входные данные или закрывать легкий UI, но это не должно удивлять пользователей.
Не очищайте текст поиска, когда поле ввода теряет фокус.
Состояния UI
Active state
:activeКороткое состояние, когда кнопка удерживается.
Активное состояние может отображать эффект нажатия с небольшим изменением фона, границы или положения.
Добавить тонкий эффект нажатия к кнопкам с иконками.
Состояния UI
Selected state
selected / aria-currentСостояние элемента, который в данный момент выбран в списке, меню, группе вкладок или группе фильтров.
Выбранные элементы должны визуально отличаться от невыбранных элементов.
Сделайте активный элемент управления визуально отличным от неактивных.
Состояния UI
Disabled state
disabled / aria-disabledСостояние, в котором элемент управления виден, но недоступен для использования.
Отключенные элементы управления должны выглядеть неактивными, но оставаться понятными.
Отключите кнопку отправки до тех пор, пока введенные данные не будут действительными.
Состояния UI
Checked state
checkedСостояние "включено" или выбранное для флажка, радиокнопки или элемента управления, похожего на переключатель.
Проверенное состояние должно быть четко видно и сообщаться посредством управляющей логики.
Отображать четкое состояние выбранного элемента.
Открытие и закрытие
Toggle
toggle stateДействие, которое переключает между двумя состояниями, такими как открыто/закрыто или включено/выключено.
Переключатель должен отображать свое текущее состояние и предсказуемо обновлять это состояние.
Используйте одну кнопку для открытия и закрытия каждой категории меню.
Открытие и закрытие
Open / close
open / closedСостояние видимости, при котором панель, меню или раздел отображаются или скрываются.
Состояния открытия и закрытия должны контролироваться последовательно с помощью кнопок, кликов вне области, клавиши Escape или выбора.
Закройте системное меню при открытии выпадающего меню выбора языка.
Открытие и закрытие
Dropdown
button -> panelПлавающее меню, которое появляется из кнопки или поля.
Выпадающие списки обычно закрываются после выбора, при клике вне списка или нажатии клавиши Escape.
После выбора языка закройте выпадающее меню.
Открытие и закрытие
Accordion
section toggleШаблон пользовательского интерфейса UI, при котором заголовки разделов открывают или закрывают свой контент.
Аккордеоны должны четко указывать, какие разделы открыты.
По умолчанию скрывайте все категории аккордеона.
Открытие и закрытие
Modal
open dialogПанель с фокусом, которая появляется над страницей и обычно блокирует содержимое фона.
Модальные окна должны иметь элементы управления для закрытия, корректное поведение при нажатии клавиши Escape, обработку фокуса и четкое назначение.
Добавить кнопку закрытия и поведение закрытия с помощью клавиши Escape к модальному окну.
Открытие и закрытие
Outside click
document pointerdownЩелчок или касание вне временной панели, такой как выпадающее меню, меню или всплывающее окно.
Временные панели обычно закрываются, когда пользователь щелкает за их пределами.
Элементы управления, принадлежащие к одной группе заголовков, могут не считаться находящимися за пределами, если логика написана таким образом.
Закройте меню, когда пользователь нажимает вне панели меню.
Открытие и закрытие
Focus trap
modal openПоведение, которое сохраняет фокус клавиатуры внутри модального окна или диалогового окна, пока оно открыто.
Захват фокуса предотвращает случайное перемещение пользователей клавиатуры за активное модальное окно.
Зафиксируйте фокус внутри модального окна, пока оно не будет закрыто.
Навигация
Link navigation
link clickПереход на другую страницу, маршрут или раздел по ссылке.
Ссылки должны использовать правильные адреса и закрывать временные меню после навигации.
Закройте меню после нажатия на ссылку меню.
Навигация
Route change
router navigationПереход от одного маршрута или пути URL-адреса приложения к другому.
Изменения маршрута должны обновлять содержимое страницы, метаданные и активное состояние навигации.
Обновляйте состояние активной навигации после изменения маршрута.
Навигация
Scroll
wheel / touch scrollПеремещение видимой области просмотра по содержимому, превышающему размер экрана.
Прокрутка может происходить на странице или внутри панели со своим собственным переполнением.
Сделайте длинные выпадающие меню прокручиваемыми внутри панели, а не за пределами экрана.
Навигация
Anchor scroll
href=#idПоведение ссылки, которое прокручивает элемент с соответствующим идентификатором на той же странице.
Якорные ссылки полезны для перехода к инструментам, ссылкам или разделам.
Сделайте кнопку "Инструменты" прокручиваемой к разделу "Инструменты".
Ввод и формы
Type
input eventВвод текста или значений в поле ввода или текстовую область.
Ввод может немедленно обновлять состояние, проверять входные данные или ждать, пока будет отправлена форма.
Обновляйте результаты поиска по мере ввода текста пользователем.
Ввод и формы
Submit
submit eventОтправка или применение входных данных формы.
Отправка должна проверять обязательные поля ввода, предотвращать случайную перезагрузку, когда это необходимо, и отображать обратную связь.
Предотвращает перезагрузку страницы формы при ее отправке.
Ввод и формы
Reset
reset actionВозврат элементов управления или значений в их исходное состояние.
Сброс должен быть предсказуемым и не должен приводить к потере важной работы без предупреждения.
Добавить кнопку сброса, которая очищает поиск и возвращает ко всем категориям.
Ввод и формы
Validation
input / submitПроверка, является ли ввод пользователя полным и допустимым.
Валидация должна объяснять, что не так и как это исправить.
Отображать сообщение о проверке, если значение ввода недействительно.
Поиск и фильтрация
Search
query changeПоиск соответствующих элементов на основе текста, введенного пользователем.
Поиск должен проверять полезные поля, такие как имена, псевдонимы, описания и примеры.
Сделайте поиск соответствующим корейским словам, английским терминам, псевдонимам и примерам запросов.
Поиск и фильтрация
Filter
filter stateСужение списка до элементов, соответствующих выбранному условию.
Фильтры должны показывать, какое условие активно, и сколько элементов осталось, когда это полезно.
Добавьте фильтры по категориям над карточками элементов взаимодействия с UI.
Поиск и фильтрация
Sort
sort optionИзменение порядка элементов по правилу, например, по имени, дате, приоритету или категории.
Сортировка не должна удалять элементы; она только меняет их порядок.
Сортируйте соответствующие термины в алфавитном порядке после фильтрации.
Поиск и фильтрация
Debounce
delayed inputКраткая задержка после того, как пользователь прекращает ввод, прежде чем выполнять дорогостоящее действие.
Защита от дребезга предотвращает выполнение поисковых запросов, проверок или вызовов API при каждом нажатии клавиши.
Используйте защиту от дребезга для поля ввода поиска, если оно работает медленно при большом количестве элементов.
Поиск и фильтрация
Clear
clear actionУдаление введенного значения, выбранного фильтра или временного состояния.
Действия очистки должны влиять только на предназначенное поле или состояние.
Добавить четкую кнопку внутри поля поиска.
Обратная связь
Loading
pending stateВременное состояние, пока данные, содержимое страницы или действие находятся в процессе подготовки.
Сообщение о загрузке сообщает пользователям, что приложение работает, и предотвращает повторные действия, когда это необходимо.
Отображать состояние загрузки, пока готовится результат преобразования.
Обратная связь
Spinner
loading visualВизуальный индикатор, показывающий, что что-то загружается или обрабатывается.
Индикаторы загрузки лучше всего подходят для коротких ожиданий; для более длительных ожиданий может потребоваться более четкий индикатор прогресса или текст.
Отображать небольшой индикатор загрузки внутри кнопки при отправке.
Обратная связь
Toast
temporary messageКороткое временное сообщение, которое появляется после выполнения действия.
Уведомления полезны для подтверждений, таких как скопировано, сохранено или обновлено.
Отображать всплывающее уведомление после копирования текста в буфер обмена.
Обратная связь
Error state
errorСостояние, указывающее пользователю на возникновение ошибки.
Сообщения об ошибках должны быть конкретными, понятными и объяснять следующее полезное действие.
Отображать четкое сообщение об ошибке, если ввод не может быть преобразован.
Обратная связь
Success state
successСостояние, подтверждающее успешное выполнение действия.
Состояния успеха могут быть незаметными, когда результат уже виден.
Отображать небольшое сообщение об успехе после сохранения настроек.
Обратная связь
Empty state
empty resultСостояние, отображаемое при отсутствии данных или отсутствия соответствующих результатов.
Пустые состояния должны объяснять, почему ничего не отображается, и предлагать следующий шаг.
Отображать сообщение "нет результатов", если поиск не возвращает соответствующих терминов.
Обратная связь
Copy to clipboard
navigator.clipboardДействие, которое помещает текст в буфер обмена пользователя.
Операции копирования должны предоставлять обратную связь, чтобы пользователи знали, что текст был скопирован.
Копирует свойство CSS при нажатии на "чип" свойства.
Движение и тайминг
Transition
CSS transitionПлавное изменение между двумя визуальными состояниями, такими как цвет, непрозрачность или положение.
Переходы могут сделать UI более привлекательным, но они должны быть быстрыми для инструментов.
Добавить небольшую анимацию при наведении курсора на элементы меню.
Движение и тайминг
Animation
CSS animationПоследовательность визуального движения, которая может воспроизводиться один раз или многократно.
Анимация должна поддерживать задачу, а не отвлекать от чтения или повторяющейся работы.
Используйте плавную анимацию "сдвига вниз" при открытии выпадающего списка.
Движение и тайминг
Delay
setTimeout / delayЗадержка перед тем, как что-то произойдет или исчезнет.
Задержки могут сделать обратную связь читаемой, но длительные задержки могут сделать UI медленным.
Оставляйте скопированное всплывающее окно видимым примерно одну секунду.
Движение и тайминг
Throttle
limited repeated eventsОграничение частоты выполнения повторяющегося обработчика событий.
Ограничение полезно для обработчиков прокрутки или изменения размера, которые срабатывают много раз.
Ограничьте обработчик прокрутки, если страница работает медленно.