Дизайн, просматриваемый на маленьком экране, не должен выглядеть как уменьшенная версия макета для большого экрана. Точно так же дизайн, просматриваемый на большом экране, не должен выглядеть как увеличенная версия макета для маленького экрана. Вместо этого дизайн должен быть достаточно гибким, чтобы адаптироваться ко всем размерам экрана. Успешный адаптивный дизайн максимально использует каждый форм-фактор.
Это означает, что некоторые элементы интерфейса могут выглядеть совершенно по-разному в зависимости от контекста просмотра. Возможно, вам потребуется применять совершенно разные CSS-стили к одному и тому же HTML-коду, чтобы максимально эффективно использовать экраны разных размеров. Это может стать довольно сложной задачей для дизайнера!
Вот некоторые распространенные проблемы, с которыми вы можете столкнуться.
Навигация
Отображение списка навигационных ссылок на большом экране довольно просто. Места для размещения этих ссылок предостаточно.
На маленьком экране пространство ограничено. При проектировании для таких условий возникает соблазн спрятать навигацию за кнопкой. Проблема такого решения в том, что пользователям приходится делать два шага, чтобы куда-либо попасть: открыть меню, а затем выбрать нужный пункт. Пока меню не открыто, пользователь задается вопросом: «Куда мне идти?»
Постарайтесь найти стратегию, которая позволит избежать скрытия навигации. Если у вас относительно небольшое количество элементов, вы можете оформить навигацию так, чтобы она хорошо выглядела на маленьких экранах.
Такой подход не будет масштабируемым, если в вашей навигации много ссылок. Навигация будет выглядеть загроможденной, если ссылки будут переноситься на две или три строки на маленьком экране.
Одно из возможных решений — размещать ссылки в одну строку, но обрезать список по краям экрана. Пользователи могут провести пальцем по горизонтали, чтобы отобразить ссылки, которые не видны сразу. Это и есть шаблон переполнения.
Преимущество этого метода заключается в том, что он масштабируется под любую ширину экрана устройства и любое количество ссылок. Недостаток в том, что пользователи могут пропустить ссылки, которые изначально не видны. Если вы используете этот метод для основной навигации, убедитесь, что первые несколько ссылок являются наиболее важными, и визуально укажите, что в списке есть и другие элементы. В предыдущем примере для этого используется градиент.
В крайнем случае, вы можете по умолчанию скрыть навигацию и предоставить пользователям возможность переключать отображение и скрытие ее содержимого. Это называется поэтапным раскрытием информации.
Убедитесь, что кнопка, переключающая отображение навигации, имеет соответствующую подпись. Не полагайтесь на значок для понимания.
Значок без подписи — это навигация типа «загадочное мясо»: пользователи не узнают, что внутри, пока не попробуют. Добавьте текстовую подпись, чтобы пользователи понимали, что откроет кнопка.
Карусели
То, что верно для навигации, верно и для другого контента: в любом случае, старайтесь ничего не скрывать. Карусель — распространенный способ скрыть контент. Она может выглядеть довольно аккуратно, но велика вероятность, что ваши пользователи никогда не обнаружат скрытый контент. Карусели лучше справляются с решением организационных проблем — например, с определением контента, который должен отображаться на главной странице, — чем с обслуживанием пользователей.
Тем не менее, когда пространство ограничено, карусели могут предотвратить чрезмерное удлинение и загромождение страницы. Можно использовать гибридный подход: показывать контент в виде карусели для небольших экранов, а тот же контент — в виде сетки для больших экранов.
Для узких экранов отображайте элементы в ряд с помощью flexbox. Ряд элементов будет выходить за края экрана. Используйте overflow-x: auto чтобы разрешить горизонтальное пролистывание.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Свойства scroll-snap обеспечивают плавное перемещение элементов с помощью свайпа. Благодаря параметру scroll-snap-type: inline mandatory , элементы автоматически фиксируются на своих местах.
Когда экран станет достаточно большим — в данном случае шире 50em — переключитесь в режим сетки и отобразите элементы в строках и столбцах, ничего не скрывая.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Важно отметить, что элемент в режиме карусели не занимает всю ширину экрана. В противном случае не было бы никаких указаний на то, что за пределами видимой области доступен дополнительный контент.
Карусели — ещё один пример применения паттерна переполнения. Если у вас много элементов, которые пользователи могут просматривать, вы можете продолжать использовать паттерн переполнения даже на больших экранах, включая телевизоры. Этот медиа-скроллер использует несколько каруселей для управления значительным количеством опций.
Опять же, свойства scroll-snap обеспечивают плавное взаимодействие. Также обратите внимание, что к изображениям в карусели применено loading="lazy" . В этом случае изображения находятся не ниже линии сгиба, а за её пределами, но принцип тот же: если пользователь никогда не пролистает до нужного элемента, изображение не будет загружено, что экономит трафик.
С помощью JavaScript вы можете добавить интерактивные элементы управления в карусель. Вы даже можете настроить автоматическую прокрутку элементов. Но хорошенько подумайте, прежде чем это делать — автоматическое воспроизведение может сработать, если карусель является единственным контентом на странице, но автоматически воспроизводящаяся карусель невероятно раздражает, если кто-то пытается взаимодействовать с другим контентом (например, читать текст). Вы можете ознакомиться с дополнительными рекомендациями по использованию каруселей .
Таблицы данных
Элемент table идеально подходит для структурирования табличных данных: строк и столбцов связанной информации. Но если таблица станет слишком большой, она может нарушить отображение на маленьком экране.
Шаблон переполнения можно применять и к таблицам. В этом примере таблица заключена в div с классом table-container .
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Руководящие принципы
Шаблон «переполнение» — хороший компромисс для небольших экранов, но убедитесь, что видно, что контент, находящийся за пределами экрана, доступен. Рассмотрите возможность добавления тени или градиента по краю, где контент обрезается.
Постепенное раскрытие информации — полезный способ экономии места, но будьте осторожны, используя его для очень важного контента. Он лучше подходит для второстепенных действий. Убедитесь, что элемент интерфейса, запускающий раскрытие информации, четко обозначен — не полагайтесь только на иконки.
Сначала разрабатывайте дизайн для небольших экранов. Адаптировать дизайн для маленьких экранов под большие проще, чем наоборот. Если вы сначала разрабатываете дизайн для большого экрана, есть опасность, что дизайн для маленького экрана будет выглядеть как нечто второстепенное.
Для получения дополнительной информации о шаблонах компоновки и элементов пользовательского интерфейса, ознакомьтесь с разделом «Шаблоны» на сайте web.dev.
При адаптации элементов интерфейса к различным размерам экрана медиазапросы очень полезны для определения габаритов устройства. Но такие медиа-функции, как min-width и min-height — это только начало. Далее вы откроете для себя множество других медиа-функций.