Текст занимает пространство по-разному
Представим карточку городского события. В первом варианте заголовок состоит из двух слов, во втором подробно называет выставку и её тему. При одинаковой ширине второй заголовок займёт больше строк. Если для текста выделена жёсткая высота без возможности роста, нижние строки могут перестать помещаться. Уменьшение шрифта ради сохранения прежней картинки переносит проблему на читателя. Более устойчивый замысел учитывает изменение высоты блока и оставляет следующие элементы после текста. Дизайнеру важно показать такое поведение в нескольких состояниях, а не надеяться, что все будущие названия останутся короткими.
Узкое окно меняет расположение элементов
Два соседних блока на широком экране могут потребовать последовательного расположения на узком. При этом смысловой порядок должен оставаться понятным: название события, описание, дата и действие. Простое уменьшение всей композиции превращает текст в мелкую копию большого макета. Перекомпоновка устроена иначе: содержимое переносится и продолжает читаться в доступной ширине. Для обычного текста нежелательно заставлять человека двигать страницу вправо и влево ради каждой строки. Сложная карта или большая таблица имеют особые требования, но карточку с описанием нельзя автоматически относить к таким исключениям.
Увеличение текста проверяет доступность содержания
Пользователь может увеличить текст, потому что исходный размер ему неудобен. После этого важны не только буквы, но и сохранность информации и действий: виден ли весь заголовок, читается ли подпись кнопки, не перекрывает ли соседний блок описание. Увеличение текста и сужение окна связаны, однако являются разными проверками поведения. Рисунок в графическом редакторе помогает обнаружить риск, но не доказывает работоспособность готовой страницы. Окончательная проверка проводится в работающем интерфейсе с реальными настройками отображения и разным содержанием.
Проверка начинается с неудобных примеров
Для вымышленной карточки подготовьте короткое название, длинное название и название с длинным словом. Отдельно добавьте описание из одного предложения и из нескольких абзацев. Цель состоит не в том, чтобы придумать максимально странный текст, а в проверке ожидаемых ситуаций. Зафиксируйте, какие элементы могут расширяться, какие переходят на следующую строку и что остаётся рядом по смыслу. Если изменение одного заголовка требует вручную двигать все соседние карточки, правило компоновки ещё недостаточно ясно. Полезный результат проверки представляет собой объяснимое поведение, которое можно последовательно реализовать.
Попробуйте на практике
Проверьте карточку вымышленной выставки на бумаге, не создавая сайт.
- Нарисуйте широкую карточку с заголовком из двух слов, описанием, датой и кнопкой. Пронумеруйте порядок чтения.
- Замените заголовок длинным названием выставки из десяти слов. Покажите, куда смещаются следующие элементы при увеличении числа строк.
- Нарисуйте узкую версию и затем вариант с заметно более крупными буквами. Сохраните все сведения и действие.
- Подпишите два правила поведения блоков и одно место, которое обязательно потребуется проверить в работающей странице.
Как проверить результат. Во всех вариантах информация остаётся читаемой, заголовок не обрезан, а кнопка не перекрывает текст. Из рисунков понятно, какие блоки растут и как сохраняется порядок чтения.
Частые вопросы
Достаточно ли сделать отдельную мобильную картинку?
Она показывает одно состояние. Реальные размеры окна и объём текста меняются, поэтому нужны понятные правила между состояниями и проверка готового интерфейса.
Можно ли всегда сокращать длинные заголовки многоточием?
Такое решение зависит от задачи и возможности получить полную информацию. Оно не должно скрывать смысл, необходимый для выбора. Сокращение текста не заменяет продуманное поведение всей карточки.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.