Руководство по созданию идеальных кнопок
В этой статье вы найдёте несколько важных советов, которые помогут научиться проектировать идеальные кнопки — простые в использовании, удобные и визуально привлекательные.
Ниже информация о том, как разрабатывать кнопки, на которые пользователям понравится нажимать.
Разберитесь в стандартных размерах
Высота стандартного размера кнопки для мобильных интерфейсов должна быть не менее 44 pt. Что касается ширины, то, как правило, кнопку делают во всю ширину экрана с отступами не менее 16 pt по бокам, поэтому её ширина составляет 343 pt.
Обратите внимание на расположение кнопок
По возможности старайтесь размещать кнопки призыва к действию на расстоянии вытянутого большого пальца, особенно если это важные навигационные кнопки. При этом располагайте кнопки, которые выполняют потенциально деструктивное действие или функцию поддержки, вне пределов досягаемости.
Используйте соответствующий радиус границы кнопки
Пользователи лучше различают закругленные границы прямоугольника, что снижает когнитивную нагрузку на них. Такие границы также кажутся более «дружелюбными» и доступными, в то время как острые углы могут показаться более «профессиональными» и «серьёзными». Используйте их соответствующим образом.
Продумайте различные состояния кнопок
Каждое состояние кнопок должно быть легко различимым. В мобильных интерфейсах не имеет значения наличие состояния hover (при наведении) или focused (при выделении), но состояния default (по умолчанию), active (активное) и disabled (неактивное) должны отличаться друг от друга.
Используйте визуальную иерархию
Иерархия стилей крайне важна для передачи важности каждого действия. Главной кнопкой должна быть наиболее заметная кнопка призыва к действию (CTA), дополнительной, или вторичной — кнопка со средним акцентом, а третичную кнопку следует использовать для наименее важных действий.
Помните о «невидимой» плашке
При проектировании групп кнопок всегда помните о областях касания. Не позволяйте разработчикам исправлять ваш дизайн, помните о минимальных требованиях доступности, чтобы создать хороший опыт взаимодействия с пользователями.
Ограничьте текст одной строкой
При разработке дизайна кнопок помните об отзывчивости и о том, как ваши кнопки будут выглядеть на экранах небольших устройств. Не делайте текст слишком длинным, если вы не можете вместить его в пределы фрейма. Старайтесь оформлять текст одной строкой.
Доступность превыше всего
Для того, чтобы людьми с ограниченными возможностями могли считать элементы дизайна, коэффициент контрастности должен быть равен не менее 3,5-4,0 для крупного текста и 4:5 для мелкого. Вы делаете дизайн для целого спектра пользователей. Если вы можете без труда прочитать текст, это не значит, что все смогут его прочесть.
