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

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

Источник: Formerly Yes

Источник: Formerly Yes

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

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

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

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

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

Источник: Trello
Источник: Trello

Источник: Trello

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

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

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

Источник: The Verge

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

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

4
4

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

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

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

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

Источник: UXPin
Источник: UXPin

Источник: UXPin

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

6
6

Источник: UXPin

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

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

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

Источник: Google
Источник: Google

Источник: Google

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

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

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

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

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

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

Источник: Google
Источник: Google

Источник: Google

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

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

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

Источник: How Arkitekter
Источник: How Arkitekter

Источник: How Arkitekter

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

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

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

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

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

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

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

untitled-2
untitled-2

Оригинал: designmodo.com
Автор: Jerry Cao (Джерри Цао)
Об авторе: Джерри Цао создаёт контент для онлайн-платформы UXPin и одноимённого приложения для разработки схем и прототипов.

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

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