- Статьи
- 6 мин на чтение
- 40
Как сделать отзывчивый дизайн карточек
Красивые карточки на всех устройствах
Когда дизайнер заканчивает работу над карточками в интерфейсе, это ещё не конец. Ему придётся адаптировать их под все устройства. Если карточки не будут отзывчивыми, пользователи не смогут последовательно просматривать их, что снизит их вовлеченность. Чтобы карточки выглядели красиво в любых интерфейсах, необходимо сотрудничать с разработчиками в нескольких направлениях.
Брейкпоинты
Во-первых, разработчики должны знать, что такое брейкпоинты. Брейкпоинт — значение ширины экрана, в которой макет будет меняться, чтобы адаптироваться к его новому размеру.
Брейкпоинты нужны для того, чтобы адаптировать дизайн к размерам экранов мобильных устройств, планшетов и компьютеров.
Оптимальный брейкпоинт — наименьший средний размер экрана для каждого устройства. Если посмотреть статистику разрешений экранов по всему миру, то вы увидите следующие размеры:
• Размер мобильного экрана: 360×640
• Размер экрана планшета: 768×1024
• Размер экрана компьютера: 1280×720
Отзывчивый макет карточки зависит не от устройства, а от ширины экрана. Это означает:
• При ширине экрана более 360 px и менее 768 px следует брать макет для мобильных интерфейсов.
• При ширине экрана более 768 px и менее 1280 px — макет для планшетов.
• При ширине экрана более 1280 px — десктопная версия макета для компьютера.
Соотношение сторон
Далее необходимо определиться с соотношением сторон, которое вы хотите использовать для изображений. Есть четыре стандартных варианта на выбор:
• 16:9
• 4:3
• 3:2
• 1:1
Разница между форматами заключается в том, насколько они прямоугольные или квадратные. 16:9 — самый прямоугольный формат, далее идут 4:3, 3:2 и 1:1 — квадратный.
При изменении размера экрана размеры изображений также меняются, но соотношение их сторон всегда остаётся одним и тем же.
Дизайн карточек для мобильной версии
Область расположения карточек для мобильных интерфейсов равна 360×640. Это наименьший размер экрана, который используется в дизайне. Вам придётся принять несколько дизайн-решений, которые зависят от контента.
Количество карточек в ряду
Первое решение — сколько карточек вы хотите расположить в один ряд. На таком маленьком экране невозможно разместить больше двух карточек в ряд. В противном случае придётся уменьшить размер изображений, а текст сделать мелким, что затруднит его восприятие.
Поэтому разместите в одном ряду:
• Две карточки (2up) — если у вас много контента и вы хотите продемонстрировать его разнообразие.
• Одну карточку (1up) — если у вас немного контента и вы хотите показать изображения крупным планом.
Выбирайте 1up, если у вас немного контента и вы хотите показать изображения крупным планом.
Выбирайте 2up, если у вас много контента и вы хотите продемонстрировать его разнообразие. Так вы используете пространство более эффективно, но изображения и текст будут отображаться в меньшем масштабе.
Размер шрифта
Чем больше карточек вы показываете в одном ряду, тем меньший размер шрифта вам придётся использовать.
Если вы будете выбирать большие размеры шрифта для маленьких карточек, то вам придётся разбивать текст на две строки. В результате увеличится высота карточки, и карточки будут неровными по вертикали.
• 2up — используйте размер шрифта 12–14 px.
• 1up — можно взять шрифт большего размера, так как остаётся больше места по горизонтали, чтобы уместить текст в одну строку.
Изображения
Выбор правильного соотношения сторон зависит от самого изображения. Например, для магазина, где представлены фотографии курток, потребуется прямоугольная форма, но не слишком прямоугольная, поскольку куртки имеют квадратную форму. Здесь хорошо подойдёт соотношение сторон 3:2.
Теперь нужно определиться с правильными размерами изображения. Они будут зависеть от того, какие отступы между карточками вы выберете. Поскольку мобильная версия — самая маленькая, лучше всего использовать как можно меньший размер отступов, но при этом визуально отделить карточки друг от друга.
В данном случае 12 px — оптимальный отступ между карточками, который позволяет эффективно разместить их в один ряд. Если использовать такой размер отступов, то размер изображений при соотношении сторон 3:2 будет равен 162×108.
По мере увеличения ширины экрана карточки будут заполнять контейнер, но отступы и соотношение сторон изображений будут оставаться прежними. Расположение карточек изменится, когда ширина экрана достигнет 768 px.
Дизайн карточек для планшетной версии
Область расположения карточек для планшетных версий сайта равна 768×1024.
Количество карточек в ряду
Благодаря большему количеству горизонтального пространства вы сможете разместить больше карточек в один ряд, чем в мобильной версии. Если вы хотите максимизировать отображение контента и сохранить доступность, идеальный вариант — три карточки в ряд (3up). Если расположить больше карточек в один ряд, текст и изображения будут слишком мелкими для чтения и просмотра.
Если вы предпочитаете показывать изображения и текст крупным планом, используйте вариант 2up. Однако у него есть один недостаток — пользователю придётся больше скроллить, чтобы увидеть больше карточек. Другими словами, на видимой части страницы человек увидит меньше карточек. В результате пользователи при взгляде на страницу не смогут оценить разнообразие контента.
Отступы
В планшетной версии у вас будет возможность использовать больший размер отступов между карточками. Оптимальный размер внутренних отступов для вариантов 2up и 3up равен 18 px. Однако поскольку у вас есть запас горизонтального пространства, используйте большие внешние отступы. Внешние отступы размером 24 px добавят «воздуха» вокруг контента, что облегчит сканирование и создаст ощущение простора.
Дизайн карточек для десктопной версии
Область размещения карточек для десктопных версий сайта равна 1280×720.
Количество карточек в ряду
В десктопной версии сайта без потери удобства восприятия можно разместить пять карточек в ряд (5up). Размер шрифта при этом уменьшится, но не настолько, чтобы текст стал нечитаемым. Попытка уместить более пяти карточек приведёт к тому, что контент станет трудным для восприятия.
Если вы разместите четыре карточки в ряд (4up), то изображения и текст будут крупными. Однако пользователи увидят меньше карточек за раз на видимой части страницы. Решайте сами, что важнее — отобразить глубину или ширину контента.
При увеличении ширины экрана заполняйте карточками весь контейнер и сохраняйте размер внешних отступов. Однако невозможно бесконечно растягивать карточки, поэтому настанет момент, когда их ширина станет фиксированной.
Когда это произойдёт:
• Размер карточек останется прежним,
• Размер внешних отступов начнёт увеличиваться.
Оптимальная предельная точка в этом случае — 1600 px.
В примере ниже показано, как будет выглядеть фиксированная ширина.
• Максимальный размер изображений в варианте 5up составляет 270×180.
• Карточки выровнены по центру, а внешние отступы будут бесконечно увеличиваться после того, как ширина экрана превысит 1600 px.
Отзывчивый дизайн в упрощённом виде
В создании отзывчивого дизайна карточек нет ничего сложного, если вы поэтапно будете следовать этим простым правилам.
Вместе с разработчиком создайте правильные брейкпоинты и соотношения сторон. Тогда вместе вы красиво разместите карточки в любом интерфейсе.
Перевод статьи How to Design a Responsive Layout for Your Cards из блога UX Movement
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
