Школа
Интерфейс

Отступ слева и справа от названия кнопки

Добрый день! Проектируя кнопки в интерфейсе, с одной стороны хочется, чтобы слева и справа от названия до края кнопки был один и тот же отступ. С другой стороны, из‑за разной длины названия, некоторые кнопки уж очень различаются по ширине, и их хочется сделать одинаковыми, нарушив равенство отступов. Есть ли какая‑то общая практика, как поступать в таких случаях? Делать ли ширину кнопки одинаковой, ориентируясь на кнопку с самым длинным названием, или сделать ширину динамически изменяемой, но с равными отступами по бокам?

Александр Барац
5 июля 2022
👁 6578  
Интерфейс

Отступ слева и справа от названия кнопки

Добрый день! Проектируя кнопки в интерфейсе, с одной стороны хочется, чтобы слева и справа от названия до края кнопки был один и тот же отступ. С другой стороны, из‑за разной длины названия, некоторые кнопки уж очень различаются по ширине, и их хочется сделать одинаковыми, нарушив равенство отступов. Есть ли какая‑то общая практика, как поступать в таких случаях? Делать ли ширину кнопки одинаковой, ориентируясь на кнопку с самым длинным названием, или сделать ширину динамически изменяемой, но с равными отступами по бокам?

Александр Барац
5 июля 2022
👁 6578  
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 35
35
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Александр, как раз, когда кнопки сильно отличаются по ширине, беды особой нет, разница в размерах выглядит оправданной:

Искусственно растянутая кнопка бросается в глаза:

При горизонтальном размещении то же самое. Нормально:

Туповато:

А вот когда кнопки отличаются чуть‑чуть, наоборот раздражает, что они не «подружились»:

При горизонтальном расположении это же проявляется в едва заметной асимметрии:

Тут уж лучше растянуть до одинаковой ширины:

Общего закона тут нет. Надо проанализировать разные ситуации в вашем продукте и придумать себе принципы. Может, вы просто сделаете сетку размеров, по которой ширина кнопки должна быть кратна 20 пикселям.

Не забудьте ещё об удобстве прицеливания и законе Фиттса. Обтягивающая кнопка с коротким текстом становится слишком мелкой:

Нужно предусматривать минимальную ширину

ИнтерфейсЗакон ФиттсаМодульная сетка
Полезно
 35
35
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы