- Статьи
- 2 мин на чтение
- 22
Нарезка карточек: Простой метод создания оптимальной композиции
Отказ от базовых сеток
В макете страницы большинство дизайнеров используют базовую сетку. Она отображает содержимое в ячейках, одинаковых по размеру, форме и стилю. Однако базовая сетка не всегда обеспечивает лучший пользовательский опыт. Чтобы создать более привлекательную и интересную композицию, используйте метод нарезки карточек.
Базовые сетки могут перегружать пользователей слишком большим количеством текста. Поскольку каждый элемент контента ограничен узкой колонкой, это приводит к нагромождению и объединению текста. Пользователю трудно считывать информацию в таком тесном пространстве.
Единый стиль контента не сразу привлекает внимание пользователей. В результате они склонны просматривать страницу линейно, и последовательно переходить от одного ряда элементов к следующему. С таким подходом человек будет просматривать контент без удовольствия и исследовательского любопытства.
Нарезка карточек
Если вы хотите сделать сетку более привлекательной и лёгкой для восприятия, попробуйте использовать метод нарезки карточек. Он предполагает создание базовой карточки, а затем разработку дополнительных карточек, нарезанных пропорционально.
Сделайте размеры базовой карточки кратными четырём или шести. Эта карточка будет служить основой для всех остальных карточек.
Она должна соответствовать ширине самого маленького размера мобильного экрана, для которого вы разрабатываете дизайн. Если его размер составляет 360 px, ширина и высота карточки, равная 348 px (кратная шести), поместится на всю ширину экрана вместе с внутренними отступами от краёв, равными 6px с каждой стороны.
После того как вы сделали базовую карточку, настало время нарезать её на дополнительные карточки. При нарезке учитывайте отступы между карточками. В данном случае я хочу разрезать базовую карточку на трети с отступами, равными 12px. В результате вы получите группу горизонтальных карточек, которые идеально сочетаются с базовой карточкой.
Вы можете сделать больше вариантов карточек, если разрежете базовую карточку по вертикали на две половинки. Теперь можно использовать в макете три варианта карточек.
От этих половинок оставьте ⅔ карточки и таким образом вы получите новый вариант. Однако чем больше пространства вы отрежете от карточки, тем меньше места останется для демонстрации контента.
В результате нарезки у вас есть четыре варианта карточек для того, чтобы «поиграть» с ними. Вы можете сочетать их, чтобы создать уникальные и интересные композиции. Какую бы комбинацию вы ни выбрали, карточки будут сохранять свои пропорции и гармонично сочетаться друг с другом.
Карточки легко сделать отзывчивыми, потому что все они красиво идут друг за другом. Таким образом, вы можете поддерживать последовательную компоновку в мобильных и планшетных версиях дизайна.
Когда же использовать базовую сетку?
Иногда лучше выбрать базовую сетку вместо нарезки карточек. Например, при просмотре страницы результатов поиска пользователи предпочитают сканировать каждый элемент по отдельности, чтобы убедиться, что они ничего не пропустили. В этом случае базовая сетка облегчит им эту задачу.
Разнообразие карточек позволяет заинтересовать и привлечь людей к просмотру контента. Однако иногда базовая сетка необходима для создания более структурированного макета. Если вы будете знать, когда стоит отойти от традиционных подходов к дизайну, то научитесь создавать первоклассный пользовательский опыт.
Перевод статьи Card Slicing: A Simple Method for Designing Better Grid Layouts из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
