Когда у нас в библиотеке в eLama было довольно много компонентов, мы заметили, что наведения не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д. Мы сделали это не со злого умысла; в некоторых проектах это работало лучше, но взглянув на интерфейс в целом, стало понятно, что это проблема.
Даже у похожих компонентов были разные наведения
Не все так, как кажется
При разработке интерфейсов мы исходим из принципа: то, что вы делаете, должно работать так, как ожидает пользователь.Если пользователь видит перед собой кнопку, то он будет ожидать от нее поведения кнопки, а значит, она должна вести себя так, как ожидается.
Например, в нашей библиотеке есть ссылка и кнопка, визуально похожая на ссылку.
В связи с тем, что сильной разницы в их поведении при наведении не было, мог возникнуть вопрос, что произойдет при нажатии — перенесется на другую страницу, или действие будет на текущей странице.
Поначалу были даже случаи, когда разработчики использовали кнопку в качестве ссылки, руководствуясь тем, что при наведении она выглядела и вела себя как ссылка.
Оказалось, что не всем может быть очевидно, что это два разных компонента.
Какие ховеры бывают?
1. Изменение фона (внешний вид фона или изменение его цвета)
Вот как это выглядит в Notion 2. Изменение границы (внешний вид или изменение цвета)
Вот как ведет себя кнопка фильтра в Jira 3. Измените цвет значка или текста.
Пример с Хабра 4. Изменить местоположение
Посмотреть можно на главной странице Яндекса.
5. Добавление эффектов (теней, градиентов и т.д.) 
Кнопка Календаря Google 6. Сложные ховеры (изменение размера, формы и т.д.) 
Необычная кнопка с сайта nyc.awwards.com На самом деле типов наведения может быть и больше, здесь перечислены, наверное, самые основные, и я думаю, вы сможете упомянуть еще о некоторых в комментариях.
Наведение порядка
Кнопка, SelectList, Таблица, Чип, Метка, Переключатель, Нумерация страниц, Навигация по левому меню Какой тип вы решили использовать: Изменение фона Кнопки в этой группе оказались самыми проблемными — у них было сразу 3 типа наведения.
Мы решили сделать фон одним цветом для кнопок, которые изначально не имеют фона.
Кнопки, визуально похожие на ссылки, имеют важное отличие от ссылок при наведении.
Мы оставили изменение цвета иконки для активного состояния кнопки (например: всплывающая подсказка или кнопка фильтра) и для случая, когда область наведения больше стандартного размера кнопки (например, в нашем случае это кнопка закрытия тоста) 
Пример активной кнопки Рейтинг Какой тип вы решили использовать: Изменение фона и изменение цвета значка В данном случае мы не меняли наведение как оно было.
Кнопка рейтинга похожа на обычную кнопку-значок, она также имеет активное состояние, но имеет более эмоциональное значение.
Поэтому для его усиления мы используем сразу два типа наведения.
RadioLine, CheckLine и Tab Какой тип вы решили использовать: Изменение цвета текста Приводим наведение в RadioLine, CheckLine к виду текущего наведения во вкладках - меняем только цвет текста при наведении.
Убиваем двух зайцев: избавляемся от типа наведения с появлением обводки и улучшаем анимацию RadioLine - в версии с обводкой при перемещении синего фона обводка иногда заметно пропадает, что выглядит уродливый.
Анимация в замедленном режиме Флажок Какой тип вы решили использовать: Изменение фона и границы Здесь все просто: у компонента есть два состояния — выделенное и не выбранное — и, соответственно, два типа наведения — меняется фон и меняется граница.
Ввод, MultiInput, TextArea, Выбор, Радиокнопка Какой тип вы решили использовать: Изменение границы 
Наведите курсор на сложные элементы
Для сложных элементов вроде карточки задачи на канбан-доске мы решили добавить анимацию добавления эффекта при наведении — появления тени.Мы выбирали между тенью и внешним видом обводки, но обводка была неглубокой, поскольку обводка может частично потеряться в элементе, имеющем темные части по краям.
Но есть исключения
Входной файл Этот компонент имеет два типа наведения — обычное наведение мыши и перетаскивание файла.Появление фона при перетаскивании файлов — обычное поведение такой кнопки, поэтому для обычного наведения мы оставляем изменение цвета значка, чтобы эти два типа оставались отличимыми друг от друга.
Кнопка ссылки Мы не добавляем внешний вид фона, чтобы визуально отличаться от кнопки при наведении.
Об анимации при наведении
Почти все наши компоненты при наведении имеют плавную анимацию, но это не всегда необходимо.Можно обойтись и без такой анимации в боковом меню, выпадающем списке и таблице.
Тем, что он имеет строковую структуру.
Плавная анимация в таких случаях может выглядеть очень медленной, если делать ее слишком медленно, поскольку она не поспевает за курсором.
А если сделать это слишком быстро, будет чрезмерное мерцание.
Но может быть и частичная анимация, например, так мы сделали с пагинацией — при наведении курсора на номер страницы фон появляется плавно, но когда курсор покидает его, фон мгновенно исчезает. Это сделано для того, чтобы избежать ситуации, когда быстро водишь курсор по цифрам и одновременно видно несколько фонов, ведь новые появляются тогда, когда предыдущие еще не исчезли.
Теги: #интерфейсы #веб-дизайн #система дизайна #библиотека компонентов #hover
-
Каковы Уникальные Преимущества Quickbooks?
19 Oct, 24 -
Зачем Нам Так Много Разработчиков?
19 Oct, 24 -
Центр Истории Вычислений В Кембридже
19 Oct, 24 -
Асус А6Р И Убунту 8.10
19 Oct, 24 -
Занимательная Математика
19 Oct, 24
