UXPUB

UXPUB - сообщество из 3,050 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Дизайн и проектирование лучших кнопок
Редакция
Редакция

Опубликовано

Дизайн и проектирование лучших кнопок

#ui

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

Кнопка – это интерактивный элемент, который приводит к описанному на ней действию. Вы можете быть уверены, что, если на кнопке написано «сохранить», то она что-то «сохранит». Это также один из важнейших интерактивных элементов любого цифрового продукта.

Она может привести к покупке, загрузке, отправке и многим другим важным действиям. Цифровые кнопки являются потомками физических кнопок, например, на пульте ДУ, проигрывателе или игровом контроллере.

Самое важное

Кнопка должна выглядеть, как кнопка

Самое важное правило при проектировании кнопки – она должна достаточно выделяться, чтобы ее не спутали с другими элементами.

При удалении элементов из кнопки ее функция начинает растворяться и исчезать. Она становится украшением или текстом, теряя свои действенные качества

Знакомое = хорошее

Мы привыкли к определенным фигурам и формам, которые обычно связаны с действием. Чем больше кнопка похожа на то, что мы ассоциируем с кнопками – тем лучше. Вот почему прямоугольник (или прямоугольник с закругленными углами) всегда самый надежный вариант для кнопки.

Люди сразу будут идентифицировать этот элемент, как кнопку

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

Чтобы понять, что эти элементы подразумевают действие, потребуется гораздо больше времени

Разбор кнопки

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

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

Отступы и выравнивание

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

Помимо методов, основанных на сетке, надежный способ выбора расстояния между кнопками – использовать заглавную букву «W». Если по крайней мере 1 W помещается с каждой стороны метки кнопки, все хорошо. Еще лучше использовать по бокам от метки 2 x W для повышения читабельности.

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

Подходящий размер

Как веб-, так и мобильные кнопки должны иметь правильный минимальный размер. Если ваши кнопки слишком маленькие, на них будет сложно нажать. Это приводит к разочарованию и может стать причиной удаления пользователями вашего приложения. Лучше всего начать с 44x44 pt для всех интерактивных элементов на мобильных устройствах.

Золотая середина для мобильных кнопок – примерно 50 pt. В случае устройств, управляемых курсором – 32x32 pt. Помните, что даже на настольных компьютерах, чем больше кнопка, тем легче ее использовать

Хорошие примеры

Важные кнопки также хорошо сочетать с иконками. Оформление заказа быстро идентифицируется по иконке корзины или продуктовой тележке, но только в том случае, если сопровождается словом «checkout».

Стрелка вправо или шеврон, помещенные после метки кнопки, усиливают сообщение. Пользователь охотнее нажмет на нее. Это хороший вариант, если вы хотите укрепить свой призыв к действию.

Кнопки с тенями также более «кликабельны» и пользователи их быстрее заметят, чем плоские. Добавьте едва заметную тень на кнопку, чтобы она больше выделялась на фоне.

Закругленные углы

Закругленные кнопки считаются более дружелюбными и позитивными, чем кнопки с острыми краями. Однако, в то же время, они значительно усложняют проектирование контента вокруг них. Если вы разместили выше кнопки выровненный по левому краю текст, то, чем больше закруглен угол, тем меньше текст будет визуально соответствовать кнопке. Кажется, будто левое поле находится в двух местах одновременно.

Выравнивание иконок

Правильное выравнивание иконок на кнопках – одна из самых сложных задач. Во многих случаях отношение веса шрифта и веса иконки напрямую связано. Однако существует простое и полезное правило, которое работает в большинстве случаев.

В зависимости от радиуса нашего угла мы создаем круг или квадрат размером с высоту нашей кнопки. Внутри него мы создаем другую фигуру для размещения иконки. Внутри более крупной фигуры она должна иметь отступ, который соответствует размеру текста. Затем мы помещаем иконку в меньшую фигуру.

В случае с шевроном, лучше, чтобы он был такой же высоты, как текст, и вы сможете проверить ширину строки по ширине шрифта. Чем ближе соответствие, тем лучше конечный результат.

Баланс краев

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

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

Отступ по диагонали больше (слева) и меньше (справа), чем отступ сбоку. Это заставляет край слишком сильно выделяться и отвлекает внимание от самой кнопки

Вывод

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

Не забывайте:

  • Сделайте вашу кнопку похожей на кнопку
  • Центрируйте метку по центру, как вертикально, так и горизонтально
  • Выставите правильные отступы внутри кнопки
  • Если вы используете иконку, выберите правильный размер и выровняйте ее
  • Установите радиус границы в зависимости от того, где будет использоваться кнопка
  • А затем проверьте, сочетается ли этот радиус с другими элементами на экране.
  • Выберите правильный размер! Чем больше кнопка, тем проще ее использовать. Это касается и десктопных приложений!

Удачи!

Это отрывок из бесплатной главы моей будущей книги. Скачать всю главу в виде PDF-файла можно здесь.


Перевод статьи Michal Malewicz

Обсуждение (0)