Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. UI/UX >
  4. Лучшие практики карточного дизайна!

Лучшие практики карточного дизайна!

Карточки выбирают почти всегда, когда нужно найти баланс между чистой эстетикой и простым юзабилити. Впервые они появились на сервисах вроде Pinterest и Facebook, а сегодня распространились во многих индустриях.

Лучшие практики карточного дизайна!

При правильном использовании карточки способны улучшить UX вашего приложения. Эта статья содержит описание 5 полезных практик карточного дизайна и примеры их применения.

1. Следуйте простому правилу: одна карточка — одна идея

Все содержимое карточки должно передавать только одну идею, фокусироваться только на одной концепции. Так вы даете пользователям возможность выбирать тот контент, с которым они хотят ознакомиться или которым поделиться.

Следуйте простому правилу: одна карточка — одна идея

2. Сделайте всю карточку кликабельной

Следуйте закону Фиттса (Fitts's Law) и позвольте посетителям кликать по любой части карточки, а не только по текстовым ссылкам или картинкам. Чем больше зона касания, тем лучше пользовательский опыт и на сенсорных экранах, и на устройствах с мышью.

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

Сделайте всю карточку кликабельной

3. Сделайте карточки визуально привлекательными

Карточный дизайн работает благодаря красоте и хорошему юзабилити. Он будет выглядеть знакомо, но необычно, если вы придадите карточкам немного эстетического лоска.

Сделайте карточки визуально привлекательными

В дизайне карточек вам стоит сконцентрироваться на следующих элементах:

Картинки

Большой упор на изображения — это сила карточного дизайна. Исследования подтверждают, что фотографии улучшают дизайн, так что акцент на них делают карточный дизайн особенно привлекательным для пользователей.

Картинки

Тени и градиенты

Тени и градиенты помогают пользователям взаимодействовать с карточками как с физическими объектами. Однако используйте эти инструменты осторожно: если тени окружают карточку со всех сторон, иллюзия ее материальности разрушается.

Благодаря скругленным уголкам карточка напоминает игральную карту

Благодаря скругленным уголкам карточка напоминает игральную карту

Типографика

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

  • Выбирайте простые шрифты и цветовые схемы, позволяющие легко читать текст. Он наиболее читабелен на однотонном фоне при высоком контрасте между цветом текста и фона.
  • Не используйте слишком много разных шрифтов. Для большинства сайтов с карточным дизайном достаточно одного шрифта.
  • Шрифт без засечек подходит больше всего.
Шрифт с засечками отличается небольшими декоративными завитушками на концах линий, из которых состоят буквы и символы. Шрифт без засечек не имеют таких завитушек.

Шрифт с засечками отличается небольшими декоративными завитушками на концах линий, из которых состоят буквы и символы. Шрифт без засечек не имеют таких завитушек.

4. Ограниченный объем контента

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

В примере ниже обратите внимание на карточку в центре: на ней слишком много информации, и поэтому ее трудно «сканировать».

Ограниченный объем контента

5. Используйте анимацию

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

Визуальные подсказки

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

Визуальные подсказки

Визуальная обратная связь

Визуальная обратная связь очень важна в разработке UI. В реальной жизни объекты реагируют на взаимодействия с ними, и люди ждут того же онлайн. Вы можете использовать hover effect в приложениях и на сайтах, чтобы показать, какие элементы интерактивны. Такая анимация делает интерфейс более понятным, а опыт — более занимательным.

hover-эффект

Также с помощью hover-эффекта можно предлагать варианты действий. В примере ниже он позволяет посетителям выделять сообщения цветом, отвечать на них или удалять.

hover-эффект

Зум

Такая анимация обеспечивает плавный переход от превью к просмотру деталей: пользователь выбирает объект (карточку) и сразу же видит подробную информацию, связанную с ним. Единственная сложность — добиться, чтобы пользователь не выпадал из контекста.

Зум

Заключение

Карточки — это не просто тип дизайна, а один из самых гибких форматов разметки, подходящий для разработки замечательного пользовательского опыта.

Высоких вам конверсий!

По материалам: uxplanet.org.

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний