x
 
↑
•

4 •
Октябрь
2 •
2 •
•
↓
Илья Пашнин
31 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Посоветуйте, пожалуйста, пока не сошёл с ума.

Часто бывает, что какая-то из плашек на всю ширину окна браузера (шапка в данном случае), и, например, справа кнопка со своими внутренними отступами, а слева логотип или пункты меню, как в этом случае.

По той причине, что текст у кнопки смещён за счёт своих полей, а также потому что у контента ниже есть внутренний отступ, хочется сделать отступ и у меню слева. Но как только сделаешь его — сразу заметно, что у шапки по правому краю никакого отступа нет и она становится «перекошенной».

Отдельным вопросом идёт случай, когда пункты меню имеют свои внутренние отступы, которые явно видно только при наведении, например (последний пример — рамка при наведении). Тогда без отступа не обойтись, но, опять же, всё встает на места только при наведении на первый пункт, а я на скриншоте навёл на второй — опять шапка «перекошена».

Извините за запутанный текст и спасибо.

«Использование плашек создаёт дизайнеру определённые проблемы», — пишет Мюллер-Брокман:




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

Если вы хотите выравнивать текст (или вообще хоть что-то) с меню, то вам придётся придумать другой дизайн меню, в котором левый край не менялся бы при наведении. А выравнивать текст внутри кнопки с чем-либо за её пределами — точно не нужно.

Кстати, в вашем случае никакого выделения тексту вообще не требуется, так что плашки из-под него можно безболезненно убрать.
Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

Комментарии
Илья Харитонов
31 октября 2017

Всегда придерживался простого принципа — если плашка светлая, не сильно активная, то выравнивать надо по тексту. Если плашка контрастная, тёмная, то выравнивать надо по ней.
Эдик Цветцих
31 октября 2017

Илья, конфликт выравнивания в вашем примере создается из-за того, что плашка и её текст недостаточно контрастны, и сходу не понятно, у кого больше вес.

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

За правым краем следить требуется очень редко, разве что в каких-то плиточных системах, поэтому там можно поступать в формате «как разработчику будет проще».

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

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

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

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

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

1 • Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 • 1 • 1 •