Правила создания лендинга. Идеальная структура landing page по версии LPgenerator. Ограничьте возможный выбор

26.12.2016

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

Грамотно реализованный карточный дизайн может улучшить UX (User Experience) вашего приложения. В этой статье я опишу 5 полезных техник для реализации карточного дизайна и приведу несколько занимательных примеров.

• Читайте также:

1. Следуйте правилу “Одна карточка - один концепт”

2. Вся поверхность карточки должна быть кликабельной

Следуйте Правилу Фита (Fitts’s Law) и позвольте пользователям кликать/нажимать на любую часть карточки, а не только на текстовые ссылки или картинки. Большая зона соприкосновения существенно улучшает юзабилити как на тачскринах (Touchscreen), так и на девайсах, использующих мышь.

Совет: хорошо, когда карточки отбрасывают тень, показывая глубину - это визуально подтверждает кликабельность карточки .

3. Делайте карточки привлекательными

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

Когда дело доходит до разработки дизайна карточек, нужно сфокусироваться на следующих моментах:

Изображения

Упор на изображения - это сила карточного дизайна. Исследования подтверждают , что изображения “поднимают” дизайн. Таким образом, акцент на использовании изображений делает дизайн карточного интерфейса более привлекательным для пользователей.

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

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

Типографика

Также вы можете привлечь внимание пользователя с помощью текста. Всё в карточном дизайне должно быть легко читаемым и понятным:

• Используйте простые шрифты и цветовые палитры (текст наиболее хорошо читается на контрастирующем фоне).
• Старайтесь использовать минимальное количество шрифтов. Для карточного дизайна одного шрифта более чем достаточно.

Совет : шрифт sans-serif с обычным начертанием отлично подходит для карточек.

• Читайте также:

4. Ограничивайте содержимое карточки

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

Ниже расположен пример карточного интерфейса. Обратите внимание на карточку по середине. Проблема в том, что в ней очень много информации, что делает карточку сложной для восприятия.

5. Используйте примущества анимации и движения

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

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

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

Визуальный фидбэк

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

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