На основе интерактивных карточек, которые содержат изображения, контент, гиперссылки. Впервые стиль Metro использовала Microsoft в 2010 году в дизайне интерфейса своих продуктов. Преимуществами данного стиля, по мнению разработчиков компании, были стильный и современный вид, а также функциональность. Пользователь не отвлекался на посторонние элементы, все его внимание было сконцентрировано на карточках-указателях, которые предоставляют ему искомый контент. Такой дизайн считался интуитивно понятным и упрощал работу пользователя.
Сегодня карточный дизайн можно встретить на таких известных ресурсах, как Twitter, Pinterest, Google и других.
Особенности карточного стиля
Метро стиль в дизайне очень популярен, его широко используют для улучшения юзабилити и облегчения восприятия большого количества контента. Карточный стиль имеет характерные особенности:
- Адаптивность. Дизайн корректно отображается на любых устройствах.
- Минималистичность, отсутствие отвлекающих элементов. Все внимание - функциональным карточкам.
- Современный и эстетичный внешний вид, широкая палитра используемых цветов.
- Применение легкочитаемых шрифтов (Segoe), четких тематических изображений.
- Доступность, интуитивное понимание функционала для пользователя.
- Динамичность. Использование анимационных эффектов.
- Присутствие рисованных элементов: иконок, объемных кнопок, инфографики, которые облегчают восприятие и стимулируют к целевым действиям.
Для каких сайтов подходит Metro стиль в дизайне
Лаконичный и современный карточный дизайн используется на сайтах различной тематики: портфолио, блоги, корпоративные сайты, сайты-визитки, интернет-магазины, и даже лендинг пейдж. Например, сайт Microsoft до сих выглядит именно в стиле метро (https://www.microsoft.com/uk-ua): на главной странице расположены крупные табы с продуктами компании и ссылкой на страницы с детальной информацией о них. Между ними расположены карточки стандартного вида с кратким описанием и гиперссылками на контент. Присутствуют эффекты анимации - при наведении курсора подсвечиваются изображения, кнопки, подчеркиваются ссылки. Отсутствуют посторонние элементы.
Столь же функциональные, сколько и красивые, карточные интерфейсы - не просто тренд. С тех пор как в 2014 году мобильный интернет-трафик превысил трафик с десктопов , адаптивный дизайн становится стандартом отрасли, и веб-дизайнеры бросают основные силы на маленькие экраны. В результате небывалую популярность приобретают простые стили, такие как флэт , минимализм и особенно - карточки.
Карточный паттерн удобен не только тем, что сокращает время загрузки страниц и упрощает масштабирование интерфейсов под разные экраны. Небольшие кусочки контента соответствуют по своему объёму вниманию веб-пользователей (особенно тех, кто использует мобильные устройства). Вдохновлённые Pinterest и получившие популярность благодаря соцсетям вроде Facebook и Twitter , карточные интерфейсы сегодня можно увидеть на сайтах любой тематики. В этой статье мы рассмотрим карточный UI-паттерн во весь рост: чем он хорош, как он вписывается в концепции адаптивного и material design и чего от него ждать в будущем.
Источник: Formerly Yes
Что такое дизайн по принципу контейнеров?
Чтобы понять паттерн, необходимо для начала понять идею самой карточки.
По сути карточки - это небольшие контейнеры для кусочков информации, причём каждая карточка несёт в себе самостоятельную мысль. Она может содержать любой вид контента: изображение, текст, ссылки и т.д. - при этом все карточки объединены какой-то общей темой.
Пользователи Trello могут создавать любые карточки, какие только захотят. Любой человек может создавать карточки со списками задач и сортировать их нужным ему образом.
Этот пример показывает, насколько гибкими могут быть карточки, и, кроме того, демонстрирует их возможности в плане организации информации. Trello обязан своей популярностью тому, что карточки кажутся пользователям проще обычных списков задач, используемых другими таск-менеджерами.
Карточки в интерфейсах мобильных и адаптивных сайтов
Как я уже писал, карточные интерфейсы отлично сочетаются с адаптивными фреймворками, благодаря чему сам Дес Трейнор (Des Traynor) из Intercom назвал их будущим веба . Этот UI-паттерн отлично транслируется на мобильные устройства по многим причинам - о них мы сейчас и поговорим.
Источник: The Verge
Во-первых, в масштабируемых фреймворках карточные структуры могут перестраиваться под любой брейкпойнт или размер экрана. Дизайнеры имеют возможность поиграть с соотношением ширины и высоты карточки и тем, как группы карточек соотносятся между собой. Например, у карточек может быть фиксированная ширина и разная высота при заданном интервале между ними.
Сравните десктопный (выше) и мобильный (ниже) вьюпорты сайта The Verge:
Источник: The Verge (мобильный сайт)
Обратите внимание на тексты, изображения, градиенты - в обоих версиях они одинаковы. Карточки позволяют создавать единый пользовательский опыт и транслировать его через все устройства.
Вы можете увидеть этот принцип в действии, посетив страницу бесплатной библиотеки для дизайнеров на сайте UXPin. Заметьте, как гладко происходит масштабирование разметки от мобильного до полноэкранного вьюпорта.
Мобильный вьюпорт:
Источник: UXPin
Экран с большим разрешением:
Источник: UXPin
Ещё одно преимущество карточек заключается в том, что они отлично работают в качестве элементов жестового управления. На сенсорных экранах карточки без каких-либо дополнительных усилий превращаются в кнопки. Идея проста: коснитесь карточки, чтобы начать взаимодействовать с контентом.
Будущее карточек
Основанный на карточках UI-паттерн постоянно видоизменяется в соответствии с новыми вызовами, при этом большая часть их коснётся адаптивного дизайна и дизайна приложений. Как мы уже писали в статье «Тренды веб-дизайна 2015-2016 годов» (Web Design Trends 2015 & 2016), эти перемены отчасти связаны с тем, какое влияние Material Design оказывает на приложения под Android.
1. Технологии
Вскоре карточки могут стать динамичными. По мере роста производительности сайтов появляются возможности поддерживать более сложные мультимедийные ресурсы. Возможно, мы увидим элементы с большим числом деталей, например, самообновляющийся контент, при этом взаимодействие с интерфейсом не будет замедляться.
Итак, вы наверняка хотите чтобы ваш трендовый дизайн с карточками не только потрясно смотрелся, но и был максимально удобен пользователям? Давайте разберёмся, как этого достичь на примерах известных мировых медиа.
Сама по себе идея сделать дизайн, основанный на карточках, просто отличная.
Во-первых , это довольно популярное веяние в оформлении контента, дающее возможность отобразить достаточно большое количество контента и сделать это красиво!
Во-вторых , конечно же такой дизайн ещё и достаточно удобен до пользователей.
В-третьих , такой дизайн отлично смотрится на всех типах экранов во всех возможных разрешениях.
Самое важное в любом дизайне, основанном на карточках, создать что-то, по чему пользователю захочется кликнуть - это и есть самая сложная и большая задача для дизайнеров. Каждая карточка должна служить одной специфической цели - содержать картинку со ссылкой на полную новость, форму подписки, видео плеер или любой другой кусочек контента, с которым пользователь будет взаимодействовать.
Начните с чёрно-белого каркаса
Всё кажется довольно простым: начните с чёрно-белого каркаса. Подумайте о карточках и о том, какие её части будут кликабельны, а какие будут содержать только графический контент. Вполне нормальной практикой будет сделать кликабельной всю карточку.
Спланируйте отступы, изображения, типографику и все остальные мелкие моменты. "Соберите" карточки воедино чтобы в конечном итоге понять, работает ли дизайн, понятна ли структура, удобно ли всем этим пользоваться? Подумайте, как вы будете использовать это набор элементов в общей структуре дизайна.
Попробуйте думать как конечный пользователь:
- Куда бы вы кликнули, чтобы перейти на следующий шаг?
- Получаете ли вы тот контент, который ожидаете получить при клике на тот или иной элемент карточки?
- Удобна ли навигация между экранами?
Используйте увеличенные отступы
Конечно же вы не должны использовать мигающие элементы или красные кнопки "Кликни тут", как в дизайне 90-х. Но не забудьте и про акценты, не стоит прятать колл-ту-экшны за слишком серые цвета. Посмотрите, как грамотно обыграны цвета в следующем дизайне:
Самым большим вызовом в создании карточек является создание компактного дизайна, без ощущения захламлённости ненужными элементами. Именно тут на помощь приходит белое пространство . В некоторых случаях, как например карточке продукта, оно может отлично помочь в фокусировке внимания на нужных зонах. Чем менее загруженным будет экран, тем больше внимание пользователь посвятит тому объекту, который должен разглядывать:
Теперь самое время подумать о цветах и затемнениях. Делайте их натуральными и стилизированными в одной общей концепции. Нет, мы конечно же не обсуждаем здесь скевоморфизм, мы говорим лишь о создании дизайна с натуральными контурами и тенями. Придайте вашим карточкам такой вид, который они бы имели, если бы вы держали их в руках.
Используйте базовые принципы и законы физики чтобы представить и задизайнить каждую карту, как если бы вы держали их перед собой в руках:
- Освещение должно отбрасывать небольшие тени на низ и бок карточки.
- Самое тёмное место карточки - это её основание.
- Не размещайте контент слишком близко к краям.
- Кликабельные элементы должны быть расположены в наиболее легкодоступных частях карточки в любых разрешениях. Их должно быть также легко нажать мышкой, как и нажать пальцем на смартфоне.
- Одна карточка - один кусочек информации.
Создавайте простые слои
Теперь, когда вы уже заморочились над физикой, сделайте унифицированную карточку для всех частей интерфейса. Не знаете, с чего начать? Инструкции Google по Matherial Design - отличная отправная точка.
В Matherial design физические свойства бумаги транслируются на экран. Бэкграунд приложения в то же время напоминает плоский, непрозрачный лист бумаги.
"Свойства приложения копируют способность бумаги к изменению размеров, перемешиванию и складыванию воедино из нескольких составляющих. Элементы управления и индикации обычно обрабатываются по-другому. Они отличаются от контента и не соблюдают физические свойства бумаги. "
Собственно, в том и задача, чтобы создать такой цифровой объект, который выглядел бы как материальный. И если пользователь захочет притронуться к нему, значит он захочет и кликнуть по нему. Да, концепция настолько проста.
Придерживайтесь простых интерфейсов
Когда дело подходит к типографике sans serifs - всегда ответ. Избегайте использования слишком тонких шрифтов или же плохочитаемых вариантов, потому как текст потом будет довольно сложно читать.
Большинство карточек прекрасно работает с системой из двух шрифтов (даже если они из одного семейства) - один для основного текста, а второй для заголовка или колл-ту-экшн"а. Самое важное здесь состоит в том, чтобы правильно поработать с контрастом, чтобы текстовые элементы хорошо читались. Обязательно сделайте контраст между шрифтами, а также контраст между фоном и текстовыми элементами для каждой карточки.
Уменьшите количество элементов UI
Повторите: одна карточка - одно действие .
И это вероятно значит, что вам не стоит включать охапку элементов пользовательского интерфейса типа кнопок и прочего. Вообще-то в карточном дизайне вообще можно обойтись без кнопок. Но если вам кажется, что пользователям нужна подсказка - одной кнопки достаточно. Придерживайтесь простых форм и простого дизайна, подход Matherial Design"а вполне хорош в этом случае - придерживайтесь правила одной кнопки. Да и вообще, кнопка - единственный элемент, который вам понадобится. Это ваша цель в дизайне.
Вывод
Волшебной формулы для идеального карточного дизайна попросту не существует. Но есть подходы, используя которые вы наверняка сможете заставить пользователя кликнуть или нажать пальцем по элементу. Следуйте минимализму с большим количеством свободного пространства и контраста, поставьте ударение на простую типографику и придерживайтесь принципа одного действия для одной карточки . Следование данным принципам лучше представить и концептуализировать проэкты с карточным дизайном. Скомбинируйте эти дизайнерские теории и ваши скиллы, и вы наверняка получите потрясный, удобный для пользователей, и трендовый дизайн.
Веб-дизайн очень динамичен. Мы постоянно видим, как внешний вид сайтов меняется с появлением новых технологий, методов, направлений и стилей. Так, сегодня лидирующей концепцией является карточный дизайн.
Вы можете увидеть его повсюду: от сайтов агентств по продаже недвижимости до новостных порталов. На самом деле, такие Интернет-гиганты, как Twitter, Facebook и Google, также используют карточный дизайн.
Карточки, в данном случае, это маленькие прямоугольники, заполненные интерактивными изображениями и информацией. Они стали популярными, прежде всего, благодаря своей отзывчивости, эстетичности и практичности.
Хотя, существует много неправильных представлений о том, какой дизайн может считаться карточным, одно можно сказать наверняка: карточки - это не просто прямоугольники на сайтах. Чтобы квалифицировать определенную конструкцию в качестве карточной, она должна иметь функциональные возможности и быть самодостаточной.
Пожалуй, лучшей метафорой для описания карточного дизайна является следующее изречение: «Карточка - плоская, но у нее две стороны». То есть, каждая карточка должна не только содержать какой-то контент, но и предоставлять его потребителям возможность некоего взаимодействия с ним.
Проще говоря, карточки - это не только красивый дизайн, но удобство в использовании.
Различные типы карточного дизайна
Карточный дизайн претерпел значительные изменения с момента своего появления. И теперь он может быть выполнен в следующих стилях.
1. Плоский дизайн
Впервые карточный плоский дизайн был представлен компанией Microsoft в 2006 году и был основан на стиле оформления графического интерфейса Metro, который выглядит довольно солидно и красочно. Правда, в его современной версии более широко применяются градиенты, тени и сквеморфизм.
2. Журнальный стиль
Дизайну в журнальном стиле необходим хороший визуальный баланс. Карточки в данном случае содержат блок с изображением и текстом, которые выполняют роль «тизера», то есть завлекают посетителя к более подробной информации на другой странице или сайте. Как явствует из названия, такой дизайн используется на сайтах журналов и новостных порталах, но также подходит и для других ресурсов, ориентированных на большое количество контента, таких как блоги или портфолио, а также для сайтов, которые регулярно обновляются.
Этот стиль воплощен на сайте социального сервиса Pinterest и стал популярной тенденцией в оформлении тем для платформы WordPress. Изначально карточки содержали только ссылки и некоторое количество определенного типа контента. Теперь они могут содержать больше ссылок и типов контента, включая видео, формы, изображения и инструменты для шаринга в социальных сетях. В некоторых интерфейсах карточки предоставляют возможность мини-взаимодействия, например, включение/отключение уведомлений в Facebook.
Также известный, как стиль «masonry» («масонри», он содержит блоки, соединенные между собой или распределенные по всему макету.
Как эффективно использовать карточный дизайн?
Есть целый ряд причин, почему дизайн в карточном стиле столь популярен. Вот лишь некоторые из них:
- Множество стилей дизайна совместимы с этим форматом, начиная с плоского и заканчивая более сложными разновидностями.
- Он хорошо работает с различными типами контента, а также облегчает его потребление.
- Он хорошо работает с отзывчивыми фреймворками.
- Он придает организованный и структурированный вид большому количеству информации.
Для данного типа дизайна не существует каких-либо фиксированных правил. Тем не менее, в эффективных карточных макетах почти всегда присутствуют два элемента - простота и богатое разнообразие контента. Также существуют приемы, способствующие повышению эстетичности и функциональности карточного дизайна.
Пустое пространство
Общим элементом в карточном дизайне является пустое пространство. Это необходимо, чтобы все элементы были хорошо заметны и понятны. Ведь все, что у вас есть, это область размером 600 пикселей, и нужно сделать так, чтобы заголовок, кнопка с призывом к действию, изображения и текст ссылки были заметными и эффективно выполняли свою функцию.
Большое количество пустого пространства вокруг каждого элемента дает посетителям сайта время на осмысление увиденного, когда они переводят взгляд с одной карточки на другую.
Для каждой карточки свой контент
Четкие изображения
В дизайне на основе карточек критически важны изображения. Они должны быть безупречны, даже будучи размещенными в ограниченном пространстве, чтобы привлекать внимание. Если изображения отсутствуют, используйте художественный шрифт или креативный заголовок, чтобы привлечь внимание посетителей.
Простые шрифты
Шрифт не должен отвлекать внимание от изображения. Для этого, используйте простой шрифт удобного для чтения цвета, то есть, черный и серый. Наиболее популярными, благодаря их нейтральному дизайну и легкой читаемости, являются шрифты без засечек. Кроме того, целесообразно использовать один вид шрифта различных размеров.
Неожиданные детали
Элемент неожиданности творит чудеса. Попробуйте добавить неожиданные детали, наподобие 3D-эффекта или нестандартным образом обработать края изображения, чтобы сделать свой дизайн более оригинальным. Другими методами, доказавшими свою эффективность, являются эффекты, проявляющиеся при наведении указателя мыши, и наложение цвета. Вы также можете применять эффект только к наиболее значимому контенту, чтобы сбалансировать визуальный вес каждой карточки.
Открытая сетка
Насколько важны элементов внутри каждой карточки, настолько же важное значение имеет пространство между ними. Создайте сеточный фреймворк, который придаст некоторый контраст, а также обеспечит равное расстояние между карточками и их элементами. Это становится еще более важным, если учесть расположение точек разрыва в отзывчивом макете.
Юзабилити
Дизайн - это не только эстетика, но и удобство использования. Дизайн должен подстрекать пользователей в действию: кликнуть по кнопке подписки, прочитать статью полностью или купить товар. Конечная цель вашего интерфейса - обеспечение легкого взаимодействия, которое приведет пользователей к совершению нужных вам действий.
Помимо этого, вы также должны проверить, как работает каждый элемент интерфейса, особенно в мобильной версии сайта. То есть, нужно думать не только о том, насколько удобно щелкать по элементам мышью, но и о том, насколько удобно взаимодействовать с ними при помощи таких приемов, как свайп (скольжение пальцем по экрану) и тэп (короткое прикосновение к экрану). Также убедитесь, что кнопки хорошо видны и их легко использовать. Для этого, конечно же, нужно, чтобы между элементами было достаточно места, дабы предотвратить случайное касание не той кнопки или инициацию не того действия.
Сортировка карточек
После того как разработка карточного дизайна закончена, следующим шагом является определение того, какую информацию будут содержать эти карточки. Должен быть контент сгруппирован по типу или тематике? К какой категории отнести тот или иной контент? Лучший способ организовать весь этот контент в удобном для пользователя виде - это сортировка карточек.
Вы можете сделать это, используя ручку и бумагу, или же можете воспользоваться такими сайтами, как ConceptCodify или Optimal Workshop. Каждый способ имеет свои преимущества и недостатки, хотя оффлайновый метод предполагает более индивидуальный подход.
Карточный дизайн является одним из наиболее гибких форматов макета сайта, что позволяет создать отменный пользовательский опыт. Карточки также эстетически приятны для глаз. Пользователи постоянно ищут способы быстрого потребления большого количества информации, ну а карточный дизайн как раз позволяет делать это легко и быстро.
Карточный интерфейс – один из популярнейших трендов последних лет. Он удобен для пользователей и отлично адаптируется к разным видам устройств.
Каким должен быть успешный карточный дизайн? Таким, чтобы пользователь хотел нажать на карточку и ознакомиться со скрытым за ней контентом. Карта должна служить в качестве контейнера для конкретного содержания - текста, формы регистрации, видео.
Freelance.
Today сегодня расскажет вам, как удачно спроектировать карточный дизайн для вашего сайта.
Начните с черно-белого макета
Начните проектирование с черно-белого каркаса. Подумайте о каждой карте, и том, какой контент будет за ней располагаться.
Планируйте такие элементы, как интервалы, изображения и шрифты, рассмотрите карты без цвета и изображений. Посмотрите, как работает каждая карта на этапе проектирования. Все элементы карты есть. Легко ли понять, для чего она здесь? Нажали бы вы на нее? Структура должна быть ясна без красной мигающей кнопки «Нажмите здесь».
Как и в любом другом проекте, если контур не работает в черно-белом варианте, окончательный дизайн, вероятно, тоже не будет эффективным.
Оставляйте между картами больше пустого пространства
Самая большая проблема, когда дело доходит до работы над компактным карточным дизайном - это не создать атмосферу суматохи. Вот где вам помогут пробелы. И чем больше пробелы, тем комфортнее будет пользователю.
Добавление пробелов даст элементам больше места, чтобы дышать; это сделает общую картину более просторной и хорошо повлияет на читаемость.
Вы можете задать расстояние в два раза большее, чем обычно. Дополнительное пространство поможет вам создать открытую конструкцию и организовать содержание более четко.
Карты могут конкурировать между собой за внимание пользователя на больших экранах. Добавление пробела поможет сделать более легкий для восприятия дизайн.
Добавьте натуральные цвета и тени
Теперь пришло время подумать о цвете и тенях для дизайна. Держите курс на естественные цвета и имитируйте реальность в стилях дизайна.
Нет, мы не говорим здесь скевоморфизме, мы говорим о создании цвета с природными контурами и тенями. Подумайте о том, как карта будет рассматриваться. Пользователь должен получить то же самое чувство, как будто держит карточку в руках, в реальности.
Использование некоторых основных правил физики позволит представить дизайн каждой карты более натурально:
Освещение должно бросать некоторые тени на заднем и нижнем плане;
Самой темной частью дизайна должны быть нижние части изображения, из-за условий освещения, которое обычно падает сверху.
Кнопки и призывы к действию должны располагаться так, чтобы с ними было легко взаимодействовать.
На одной карте должно находиться не более одного информационного посыла.
Создавайте простые слои
Используйте простые слои, и создайте единый стиль карты для всего интерфейса. Не знаете, с чего начать? Руководящие принципы Материального Дизайна от Google могут послужить вам в качестве руководства.
В материальном дизайне физические свойства бумаги переводятся на экран. Фон приложения напоминает плоскую, непрозрачную текстуру бумажного листа. В результате цифровой объект выглядит, словно настоящий, и пользователи хотят коснуться его, нажать на карту. Концепция предельно проста и гарантировано сработает.
Применяйте простые шрифты
Самое лучшее решение – это простой шрифт без засечек. Чтобы не затруднять чтение, избегайте слишком тонких или толстых вариантов. На большинстве карт отлично работают два разных шрифта (даже если они из одной семьи) – один для заголовка, другой – для основной массы текста.
Что еще важно для читаемости? Не забудьте включить контраст между цветом шрифта и фоном каждой карты.
Ограничьте количество UI-элементов
Одна карта – одно действие. Это аксиома.
Это означает, что вы не должны включать кучу UI-элементов пользовательского интерфейса, таких как кнопки. Они вообще не смотрятся на картах и фактически не нужны там.
Но если вы считаете, пользователям необходимо наглядное руководство к действию, одной кнопки достаточно. Держите формы и дизайн простыми.
Пожалуй, кнопка – это единственный элемент интерфейса, который вам нужен.
Выводы
Волшебной формулы для создания идеального карточного дизайна не существует, но есть конструктивные решения, которые поощряют каждого пользователя нажать на карту. Следуйте минималистскому подходу с самого начала, оставляйте больше свободного пространства, делайте акцент на простые шрифты, создавайте отдельное действие для каждой карты.
В результате вы получите карточный дизайн, удобный для пользователя и потрясающе выглядящий.
