x
 
Игорь Старков
17 октября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Добрый день!

Вопрос про кнопки и поля ввода — должны ли они быть по высоте или ширине одинаковы? Или не должны? А если должны, то в каких случаях — да, а в каких — нет?


Игорь!

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

А вот по высоте кнопки и поля вырав­ни­вать нужно. Не слу­чайно в гайд­лай­нах опе­ра­ци­он­ных систем высоте интер­фейс­ных эле­мен­тов уде­ля­ется много внимания.

Нару­шать вырав­ни­ва­ние кно­пок и полей по высоте стоит очень осто­рожно и отда­вая себе отчёт в том, какого эффекта вы хотите достичь. Напри­мер, в вашем скрин­шоте внизу при­ве­дена форма каль­ку­ля­тора с про­мо­стра­ницы Шоп­фанса, кото­рую сде­лали в бюро. Мы спе­ци­ально сде­лали все эле­менты интер­фейса раз­ной высоты и формы, чтобы под­дер­жать стиль сер­виса и страницы.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.
Типографика и вёрстка — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Иван Титов
17 октября 2018

Для верстальщиков дам небольшую подсказку.

Это известная проблема, что у полей ввода есть обводка, а у кнопок нет, поэтому их трудно с ходу выравнять по высоте: получается разница в 2 пикселя (при однопиксельной толщине обводки).

Одно из решений: имитировать border с помощью внутренней тени в 1 пиксель, тогда высота элемента не изменится. Сейчас свойство box-shadow поддерживают почти все современные браузеры.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

12 1




Недавно всплыло

6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 Как попросить клиента помочь с дебагом? 1 Как вести себя с человеком, который Джима Кемпа не читал и вину не признаёт? 2