Создаем кнопки на основе первой и второй эвристики


03.11.2021 Время чтения - 2 минуты 553

Другими словами, мы воспринимаем кнопки как трехмерные объекты, поэтому и проектировать их лучше так, чтобы они выглядели как трехмерные объекты.

Будем предполагать, вы знаете о существовании эвристической оценки Якоба Нильсена. Для начала представлю вторую эвристику.

анимация кнопок в нормальном состоянии, при наведении, нажатии и загрузке
Конечный результат

№ 2: Соответствие системы и реального мира

Дизайн должен говорить на языке пользователей. Используйте слова, фразы и понятия, знакомые пользователю, а не внутренний жаргон. Следуйте правилам из реального мира, чтобы информация выглядела естественной и логической.

Дизайн должен вдохновляться реальным миром. Так как мы воспринимаем кнопки как трехмерные объекты, лучше всего и создавать их дизайн так, чтобы они выглядели как трехмерные объекты.

В реальном мире мы привыкли видеть, что кнопки выступают над поверхностью, поэтому у них есть тени.

Тени в реальном мире создаются несколькими источниками света, поэтому все они имеют полутень.

По этой причине рекомендую создавать несколько теней на кнопке. SmoothShadow – отличный плагин в Figma, который позволяет использовать несколько теней.

В реальном мире, когда мы наводимся на кнопку, тень от нашего пальца падает на нее, делая ее темнее.

Следовательно, для состояния наведения кнопки используем оттенок цвета дефолтного состояния.

С другой стороны, когда мы нажимаем на кнопку, она сравнивается с поверхностью или даже уходит немного внутрь.

По мере того, как нажатая кнопка удаляется от зрителя, она становится меньше. Как при дизайне с перспективой.

Итак, если вы хотите создать нажатое состояние кнопки, нужно либо убрать все тени, либо использовать внутреннюю тень, либо уменьшить кнопку.

Если решите использовать внутреннюю тень, важно продумать направление и интенсивность источника света.

№ 1: Видимость состояния системы

Дизайн должен всегда информировать пользователей о том, что происходит. И делать это посредством подходящей обратной связи и в разумные сроки.

Основываемся на правиле номер один из 10 эвристик юзабилити для UI-дизайна. Когда на кнопки нажимают в реальном мире, именно их движение и тень сообщают нам, что кнопка нажата.

Кроме того, когда мы в жизни нажимаем на кнопку (кнопку лифта, например), иногда для открытия его двери требуется некоторое время. Лифт в этом сценарии каким-то образом информирует пользователя о том, что его запрос получен и находится в обработке. Следовательно, пользователь ждет вместо того, чтобы повторно нажимать на кнопку.

Когда запросы пользователей занимают более 400 миллисекунд (Порог Доэрти), мы должны обозначить это визуально.

Поэтому, когда пользователь нажимает на кнопку, которой нужно время на обработку, используйте анимированную иконку загрузки.

Можете опробовать эту кнопку в Codepen.