20 октября 2016

Карточки — сильнейший тренд веб-дизайна в 2016 году

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

Карточный паттерн удобен не только тем, что сокращает время загрузки страниц и упрощает масштабирование интерфейсов под разные экраны. Небольшие кусочки контента соответствуют по своему объёму вниманию веб-пользователей (особенно тех, кто использует мобильные устройства). Вдохновлённые Pinterest и получившие популярность благодаря соцсетям вроде Facebook и Twitter, карточные интерфейсы сегодня можно увидеть на сайтах любой тематики. В этой статье мы рассмотрим карточный UI-паттерн во весь рост: чем он хорош, как он вписывается в концепции адаптивного и material design и чего от него ждать в будущем.

Источник: Formerly Yes

Что такое дизайн по принципу контейнеров?

Чтобы понять паттерн, необходимо для начала понять идею самой карточки.

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

The Guardian называет заполнение пространства экрана подобными независимыми контейнерами информации «контейнерной моделью». Она обеспечивает понятный и мгновенно считываемый интерфейс, позволяющий быстро выделить нужный контент в общем потоке и переключиться на него. (Кроме того, этот метод отлично работает в условиях жестового управления, к чему мы ещё вернёмся.)

Функциональные и красивые: карточные интерфейсы сочетают в себе оба достоинства.

Источник: Trello

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

Карточки в интерфейсах мобильных и адаптивных сайтов

Как я уже писал, карточные интерфейсы отлично сочетаются с адаптивными фреймворками, благодаря чему сам Дес Трейнор (Des Traynor) из Intercom назвал их будущим веба. Этот UI-паттерн отлично транслируется на мобильные устройства по многим причинам — о них мы сейчас и поговорим.

Ис­точ­ник: The Verge

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

Сравните десктопный (выше) и мобильный (ниже) вьюпорты сайта The Verge:

Источник: The Verge (мобильный сайт)

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

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

Мобильный вьюпорт:

Источник: UXPin

Экран с большим разрешением:

Источник: UXPin

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

Согласно закону Фиттса, применённому к веб-дизайну, чем больше кликабельная область кнопки, тем проще с ней взаимодействовать. Вспомните, как часто вам приходилось мучаться с крохотными текстовыми ссылками на экране мобильного устройства?

Карточки и Material Design

Карточки служат одним из основных принципов Material Design, и проведённый Google всесторонний анализ метода внушает доверие. Если вам нужно подробное объяснение, изучите описание карточек в руководстве по материальному дизайну.

Источник: Google

Будущее карточек

Основанный на карточках UI-паттерн постоянно видоизменяется в соответствии с новыми вызовами, при этом большая часть их коснётся адаптивного дизайна и дизайна приложений. Как мы уже писали в статье «Тренды веб-дизайна 2015-2016 годов» (Web Design Trends 2015 & 2016), эти перемены отчасти связаны с тем, какое влияние Material Design оказывает на приложения под Android.

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

Источник: Use Your Interface

Использование вместо изображений видео (идея, с которой многие дизайнеры заигрывают уже несколько лет) может стать более популярной. На сайте Use Your Interface (скриншот выше) мы видим анимированные карточки-гифки, превращающие главную страницу в захватывающее зрелище.

2. Более тесное взаимодействие
В ближайшем будущем карточки могут превратиться в нечто более интересное, чем просто ссылки. Как мы видим в примерах Material Design, карточки могут меняться в зависимости от конкретных интеракций благодаря таким функциям, как автосортировка или обновление в реальном времени (например, для прогноза погоды).

Источник: Google

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

3. Размер
Для карточек действует правило: больше значит лучше. Это объединяет их с баннерами в верхней части страницы.

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

Источник: How Arkitekter

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

4. Носимые устройства
Благодаря Google Glass карточки стали фундаментом интерфейсов для носимых устройств.

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

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

Выводы

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

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

  • Евгений

    емкий обзор, первое про карточки, что мне понравилось

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

16 июня 2016

Микромоменты: руководство по успешному мобильному маркетингу

7 сентября 2017

Сколько вариаций нужно проверить в A/B тестировании?

27 августа 2017

Время UX-писателей

10 октября 2016

«Мемфис» в веб-дизайне: как «яркий» тренд из 80-х возвращается в 2016 году

19 декабря 2016

Разрушаем шесть мифов о веб-лейаутах

21 июля 2016

Что ждёт цифровой банкинг в 2016—2017