Разработка пользовательских интерфейсов, основанных на карточках

2/6
Добавьте к себе в ленту, чтоб не забыть:
Веб и мобильные приложения переходят от страниц к полностью персонализированным удобствам. И удобства эти основаны на объединении множества отдельных частей контента в единый информационный материал. Один из способов, как этот материал может быть представлен это карточки. Тема сегодняшних размышлений — разработка пользовательских интерфейсов, основанных на карточках. Модель взаимодействия на основе карточек распространяется довольно широко, и мы можем видеть цифровые карточки практически везде — от новостных сайтов до приложений доставки еды. В этой статье я хочу рассказать, насколько карты являются эффективным и гибким инструментом для дизайнеров пользовательского интерфейса и почему, приступая к разработке приложения Английский Экспресс, я выбрал именно карточный дизайн.

Что же такое карты?

Карты — это маленькие прямоугольники с комбинацией текста и (или) изображения, которые служат отправной точкой для получения более подробной информации. Слово «карты» — отличная метафора, поскольку в пользовательских интерфейсах они выглядят как реальные материальные карты.
До появления веб-приложений и мобильных приложений вокруг нас всегда были карточки — визитные карточки, бейсбольные карточки и даже карточки (стикеры) для заметок. Таким образом, для нас более интуитивно понятно, что эти карты представляют часть какого-то контента, как в реальной жизни.

Преимущества карт

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

Порционный контент

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

Лёгкость восприятия

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

Визуально приятный и понятный

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

Хорошо для различных размеров экрана

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

это разработка пользовательских интерфейсов
это разработка пользовательских интерфейсов, основанных на карточках
разработка пользовательских интерфейсов

Созданы для превьюшек

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

Добавьте к себе в ленту, чтоб не забыть: