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

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

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

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

Самое важное

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок
При удалении элементов из кнопки ее функция начинает растворяться и исчезать. Она становится украшением или текстом, теряя свои действенные качества

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок
Люди сразу будут идентифицировать этот элемент, как кнопку

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок
Чтобы понять, что эти элементы подразумевают действие, потребуется гораздо больше времени

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

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

Баланс краев

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок
Отступ по диагонали здесь тот же, что и слева, и снизу. В результате получается намного приятнее, быстрее обрабатывать внешний край
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и проектирование лучших кнопок

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

Вывод

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

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

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

Удачи!

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

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: Michal Malewicz

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Как создавать темные темы. Руководство от Superhuman

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

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Основы иерархии в дизайне интерфейса (UI)

Понятие иерархии, ресурсы и значение иерархии для дизайна интерфейсов