Столь же функциональные, сколько и красивые, карточные интерфейсы — не просто тренд. С тех пор как в 2014 году мобильный интернет-трафик превысил трафик с десктопов, адаптивный дизайн становится стандартом отрасли, и веб-дизайнеры бросают основные силы на маленькие экраны. В результате небывалую популярность приобретают простые стили, такие как флэт, минимализм и особенно — карточки.
Источник: Formerly Yes
Карточный паттерн удобен не только тем, что сокращает время загрузки страниц и упрощает масштабирование интерфейсов под разные экраны. Небольшие кусочки контента соответствуют по своему объёму вниманию веб-пользователей (особенно тех, кто использует мобильные устройства). Вдохновлённые Pinterest и получившие популярность благодаря соцсетям вроде Facebook и Twitter, карточные интерфейсы сегодня можно увидеть на сайтах любой тематики. В этой статье мы рассмотрим карточный UI-паттерн во весь рост: чем он хорош, как он вписывается в концепции адаптивного и material design и чего от него ждать в будущем.
Что такое дизайн по принципу контейнеров?
Чтобы понять паттерн, необходимо для начала понять идею самой карточки.
По сути карточки — это небольшие контейнеры для кусочков информации, причём каждая карточка несёт в себе самостоятельную мысль. Она может содержать любой вид контента: изображение, текст, ссылки и т.д. — при этом все карточки объединены какой-то общей темой.
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 провалом с коммерческой точки зрения, есть мнения, что они могут заинтересовать корпоративных клиентов. Как бы то ни было, в носимых устройствах эффективное использование пространства особенно важно. Карточки здесь наиболее целесообразны.
Выводы
Во всех информационных средах, для всех устройств карточки становятся основой структуры и функционала. По мере развития технологий их форма может видоизменяться, но само их присутствие в интерфейсах будущего не вызывает сомнений.
Да и в конце концов, цифровые квадраты нельзя назвать первой версией карточек. Не забывайте: не так давно карточки представляли собой обычные листы бумаги, несущие на себе часть информации по одной большой теме.
Об авторе
Оригинал: designmodo.com
Автор: Jerry Cao (Джерри Цао)
Об авторе: Джерри Цао создаёт контент для онлайн-платформы UXPin и одноимённого приложения для разработки схем и прототипов.
