Часто бывает так, что, казалось бы в элементарных вещах, случаются ошибки. И это, конечно, выдает новичка. Для того, чтобы разобраться с кнопками и не допускать визуальных недочетов, читай эту статью.
Всего я выделила 10 пунктов, по которым чаще всего встречаются ошибки у начинающих дизайнеров интерфейсов.
1. Пропорции кнопки
Соблюдай соотношение отступов по бокам от текста у кнопки.
Хорошее соотношение x/y от 1 до 2.
Все что больше или меньше этого значения чаще всего выглядит неаккуратно.
2. Цвет кнопки и подписи на ней
Соблюдай достаточный контраст между цветом кнопки и цветом шрифта на ней. Но и перебарщивать не стоит.
3. Размер кнопки
У кнопки может быть несколько размеров в проекте.
Все зависит от окружения и ее соседей, с которыми она используется.
Если это главная СТА кнопка, то старайся сделать ее как можно заметнее, обычно она располагается рядом с крупным заголовком.
Чаще всего СТА кнопки делают размером 40-60 пикселей в высоту,
а размер шрифта выбирают равным 18-22 пикселям.
4. Подпись на кнопке
Не стоит делать длинные подписи к кнопкам, когда кнопка становится
уже не похожа на кнопку. Старайся емко дать понять пользователю,
что последует за нажатием.
Также подписывай кнопку относительно действий пользователя, а не системы.
Помни, дружелюбные подписи на кнопке – важная часть UX.
Не забывай проверять, понятно ли пользователю, что произойдет,
если он нажмет на кнопку.
5. Кнопки с иконками
Иконка и текст всегда должны быть по центру кнопки.
Убедись, что иконка находится ближе к тексту, чем к краю кнопки (используй правило близости).
Иконка должна стилистически сочетаться с текстом и быть соизмеримой ему.
6. Скругления
Скруглённые углы легче воспринимаются мозгом, потому что требуют меньше когнитивных усилий для визуальной обработки.
Скруглённые углы также являются удобными контейнерами для информации, потому что направляют взгляд к центру прямоугольника. Внимание концентрируется на содержании внутри контейнера.
7. Второстепенные кнопки
Как правило, вам понадобятся кнопки только двух стилей, потому
что большинство действий пользователей делятся на две категории:
1. Основные действия, которые помогают достичь наших целей
2. Второстепенные действия, которые не помогают
Стиль основной кнопки: она должна быть контрастной по отношению к фону (другого цвета или оттенка).
Стиль второстепенной кнопки: она должна быть минимально контрастна по отношению к фону (похожего цвета или оттенка).
В некоторых случаях, существует какое-то одно особое, существующее только на вашем сайте действие, которое требует особого подхода и внимания. Создайте для такого действия специальную кнопку, которая будет выделяться из вашего дизайна (разрывать шаблон).
8. Поведение кнопки
Любая кнопка должна реагировать на наведение, чтобы пользователь понимал, что на нее можно нажать. Чаще всего кнопка реагирует
и на нажатие.
Также, некоторые сценарии подразумевают, что у кнопки может быть неактивное состояние.
Оптимально продумать все возможные состояния кнопки и занести кнопку и ее состояния в компоненты, используя функционал figma variants.
Игровая площадка от figma, которая расскажет все, что вам нужно знать, чтобы начать с ними работать – https://www.figma.com/community/file/903303571898472063
9. Мобильная версия
В маленькие элементы управления намного сложнее попасть пальцем, чем в большие. Когда вы проектируете мобильный интерфейс, лучше всего сразу это предусмотреть и сделать эти элементы побольше. Таким образом вы облегчите жизнь пользователя тач-устройства.
Размер кнопок на мобильных устройствах должен находиться в диапазоне от 40 до 72 пикселей
(по советам разных платформ).
При этом кнопки с максимальным приоритетом делаются крупнее остальных.
10. Выравнивание кнопок
При помещении элементов в контейнер используй базовую линию для выравнивания объектов. В рамках одного модуля следует использовать один и тот же тип выравнивания (только по левому краю или только по центру, но не одновременно) — это позволяет собрать более крепкую композицию. Да и взгляду проще сканировать страницу, когда контент находится на одной линии.
Используй эти правила, при создании своих интерфесов!
А еще больше актуальных тем для новичков здесь – https://t.me/designhappenss