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

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

Распространение экранов разного размера и запуск HTML5/CSS3 в начале десятилетия, позволили карточкам принять форму. Они были отличным представителем новой сети, в которой соц. медиа сайты, такие как Facebook, Twitter, и Pinterest становились мейнстримом. Веб стал еще более персонализированным и социализированным чем прежде, а карточки стали его вместилищем.

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

 

Форма карточек

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

1-dAcqhaROvQ4WWrjc1SRJMg

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

 

Разбор карточки

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

1-pI3d6mbBfL4A4SUEKSA1SQ
Деконструирование карточного элемента

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

 

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

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

Что карточки говорят о нашем месте в истории

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

1-nxIBEK_YsoczJg4PeqcOAw

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

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

Только нам решать судьбу богатства или бедности нашей сети. Карточка — это всего лишь контейнер.

Перевод статьи Эндрю Койла