Карточный интерфейс – один из популярнейших трендов последних лет. Он удобен для пользователей и отлично адаптируется к разным видам устройств.
Каким должен быть успешный карточный дизайн? Таким, чтобы пользователь хотел нажать на карточку и ознакомиться со скрытым за ней контентом. Карта должна служить в качестве контейнера для конкретного содержания — текста, формы регистрации, видео.
Freelance.Today сегодня расскажет вам, как удачно спроектировать карточный дизайн для вашего сайта.
Начните с черно-белого макета
Начните проектирование с черно-белого каркаса. Подумайте о каждой карте, и том, какой контент будет за ней располагаться.
Планируйте такие элементы, как интервалы, изображения и шрифты, рассмотрите карты без цвета и изображений. Посмотрите, как работает каждая карта на этапе проектирования. Все элементы карты есть. Легко ли понять, для чего она здесь? Нажали бы вы на нее? Структура должна быть ясна без красной мигающей кнопки «Нажмите здесь».
Как и в любом другом проекте, если контур не работает в черно-белом варианте, окончательный дизайн, вероятно, тоже не будет эффективным.
Оставляйте между картами больше пустого пространства
Самая большая проблема, когда дело доходит до работы над компактным карточным дизайном — это не создать атмосферу суматохи. Вот где вам помогут пробелы. И чем больше пробелы, тем комфортнее будет пользователю.
Добавление пробелов даст элементам больше места, чтобы дышать; это сделает общую картину более просторной и хорошо повлияет на читаемость.
Вы можете задать расстояние в два раза большее, чем обычно. Дополнительное пространство поможет вам создать открытую конструкцию и организовать содержание более четко.
Карты могут конкурировать между собой за внимание пользователя на больших экранах. Добавление пробела поможет сделать более легкий для восприятия дизайн.
Добавьте натуральные цвета и тени
Теперь пришло время подумать о цвете и тенях для дизайна. Держите курс на естественные цвета и имитируйте реальность в стилях дизайна.
Нет, мы не говорим здесь скевоморфизме, мы говорим о создании цвета с природными контурами и тенями. Подумайте о том, как карта будет рассматриваться. Пользователь должен получить то же самое чувство, как будто держит карточку в руках, в реальности.
Использование некоторых основных правил физики позволит представить дизайн каждой карты более натурально:
— освещение должно бросать некоторые тени на заднем и нижнем плане;
— самой темной частью дизайна должны быть нижние части изображения, из-за условий освещения, которое обычно падает сверху.
Кнопки и призывы к действию должны располагаться так, чтобы с ними было легко взаимодействовать.
На одной карте должно находиться не более одного информационного посыла.
Создавайте простые слои
Используйте простые слои, и создайте единый стиль карты для всего интерфейса. Не знаете, с чего начать? Руководящие принципы Материального Дизайна от Google могут послужить вам в качестве руководства.
В материальном дизайне физические свойства бумаги переводятся на экран. Фон приложения напоминает плоскую, непрозрачную текстуру бумажного листа. В результате цифровой объект выглядит, словно настоящий, и пользователи хотят коснуться его, нажать на карту. Концепция предельно проста и гарантировано сработает.
Применяйте простые шрифты
Самое лучшее решение – это простой шрифт без засечек. Чтобы не затруднять чтение, избегайте слишком тонких или толстых вариантов. На большинстве карт отлично работают два разных шрифта (даже если они из одной семьи) – один для заголовка, другой – для основной массы текста.
Что еще важно для читаемости? Не забудьте включить контраст между цветом шрифта и фоном каждой карты.
Ограничьте количество UI-элементов
Одна карта – одно действие. Это аксиома.
Это означает, что вы не должны включать кучу UI-элементов пользовательского интерфейса, таких как кнопки. Они вообще не смотрятся на картах и фактически не нужны там.
Но если вы считаете, пользователям необходимо наглядное руководство к действию, одной кнопки достаточно. Держите формы и дизайн простыми.
Пожалуй, кнопка – это единственный элемент интерфейса, который вам нужен.
Выводы
Волшебной формулы для создания идеального карточного дизайна не существует, но есть конструктивные решения, которые поощряют каждого пользователя нажать на карту. Следуйте минималистскому подходу с самого начала, оставляйте больше свободного пространства, делайте акцент на простые шрифты, создавайте отдельное действие для каждой карты.
В результате вы получите карточный дизайн, удобный для пользователя и потрясающе выглядящий.
0 комментариев