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

Частая проблема интернет-магазинов — названия товаров умещаются то в одну строку, то в три. Из-за этого в модулях с короткими названиями образуются дырки. Что с этим делать, если названия невозможно привести к единообразию?


Надя!

В разном количестве строк нет ничего страшного, модульность не страдает. Хуже то, что цена и кнопка покупки одного товара может связаться с товаром ниже. Чтобы этого не произошло, рекомендую уменьшить количество элементов и не отрывать кнопку от названия:

Было

Стало

Чтобы усилить чувство порядка, можно поставить фотографии товаров на плашки или придумать разделительные линейки.

Если же хочется более капитальных изменений, то могу предложить два пути. Первый — сломать матрицу. Проблема уйдёт, появится приятное глазу разнообразие:

Второй путь — обрезать длинные названия, если они не так важны:

P. P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

Комментарии

Алексей Самохин
15 марта 2017

Мне кажется, что текст, который не так важен, лучше не показывать вообще, чем автоматически резать.
Иначе может получиться так: http://cs4.pikabu.ru/post_img/2015/07/16/11/1437071270_193211813.jpg

Иван Фоменко
16 марта 2017

Совсем простой вариант — верстать таблицей. Например, как в Связном: http://www.svyaznoy.ru/catalog/new

Егор Чистяков
16 марта 2017

Регулярную таблицу легче считывать. Приятное глазу разнообразие, упомянутое выше, это зачастую сбивающее пользователя отсутствие однообразия. Появляются мнимые соподчинения, уменьшается возможность оценки объёма, тяжелее сравнивать однотипные позиции.

Почему, например, рыспыляемый клей-герметик такой огромный, а банка эмали, которая его больше в пару раз, такая маленькая? Продавец хочет обратить внимание на клей? К сожалению, наверняка нет, а просто Умный Движок подогнал все картинки по одной ширине. Движку, а значит и сайту, а значит и магазину, фиолетов котент, и пользователь это наивно чувствует.

Увы, за модным сломом матрицы всё ещё крайне мало смысла.

Артём Сущев
17 марта 2017

Ещё есть вариант визуально связять элементы в блок при помощи добавления границы. Пример — coursera.org:


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

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

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

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

1 3




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

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Это какие‑то другие пиксели? Как они соотносятся? 2 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Визуализация проявляет 4