Карточный дизайн. Карточный дизайн — исчерпывающее руководство. Что такое дизайн по принципу контейнеров
Карточный интерфейс – один из популярнейших трендов последних лет. Он удобен для пользователей и отлично адаптируется к разным видам устройств.
Каким должен быть успешный карточный дизайн? Таким, чтобы пользователь хотел нажать на карточку и ознакомиться со скрытым за ней контентом. Карта должна служить в качестве контейнера для конкретного содержания - текста, формы регистрации, видео.
Freelance.
Today сегодня расскажет вам, как удачно спроектировать карточный дизайн для вашего сайта.
Начните с черно-белого макета
Начните проектирование с черно-белого каркаса. Подумайте о каждой карте, и том, какой контент будет за ней располагаться.
Планируйте такие элементы, как интервалы, изображения и шрифты, рассмотрите карты без цвета и изображений. Посмотрите, как работает каждая карта на этапе проектирования. Все элементы карты есть. Легко ли понять, для чего она здесь? Нажали бы вы на нее? Структура должна быть ясна без красной мигающей кнопки «Нажмите здесь».
Как и в любом другом проекте, если контур не работает в черно-белом варианте, окончательный дизайн, вероятно, тоже не будет эффективным.
Оставляйте между картами больше пустого пространства
Самая большая проблема, когда дело доходит до работы над компактным карточным дизайном - это не создать атмосферу суматохи. Вот где вам помогут пробелы. И чем больше пробелы, тем комфортнее будет пользователю.
Добавление пробелов даст элементам больше места, чтобы дышать; это сделает общую картину более просторной и хорошо повлияет на читаемость.
Вы можете задать расстояние в два раза большее, чем обычно. Дополнительное пространство поможет вам создать открытую конструкцию и организовать содержание более четко.
Карты могут конкурировать между собой за внимание пользователя на больших экранах. Добавление пробела поможет сделать более легкий для восприятия дизайн.
Добавьте натуральные цвета и тени
Теперь пришло время подумать о цвете и тенях для дизайна. Держите курс на естественные цвета и имитируйте реальность в стилях дизайна.
Нет, мы не говорим здесь скевоморфизме, мы говорим о создании цвета с природными контурами и тенями. Подумайте о том, как карта будет рассматриваться. Пользователь должен получить то же самое чувство, как будто держит карточку в руках, в реальности.
Использование некоторых основных правил физики позволит представить дизайн каждой карты более натурально:
Освещение должно бросать некоторые тени на заднем и нижнем плане;
Самой темной частью дизайна должны быть нижние части изображения, из-за условий освещения, которое обычно падает сверху.
Кнопки и призывы к действию должны располагаться так, чтобы с ними было легко взаимодействовать.
На одной карте должно находиться не более одного информационного посыла.
Создавайте простые слои
Используйте простые слои, и создайте единый стиль карты для всего интерфейса. Не знаете, с чего начать? Руководящие принципы Материального Дизайна от Google могут послужить вам в качестве руководства.
В материальном дизайне физические свойства бумаги переводятся на экран. Фон приложения напоминает плоскую, непрозрачную текстуру бумажного листа. В результате цифровой объект выглядит, словно настоящий, и пользователи хотят коснуться его, нажать на карту. Концепция предельно проста и гарантировано сработает.
Применяйте простые шрифты
Самое лучшее решение – это простой шрифт без засечек. Чтобы не затруднять чтение, избегайте слишком тонких или толстых вариантов. На большинстве карт отлично работают два разных шрифта (даже если они из одной семьи) – один для заголовка, другой – для основной массы текста.
Что еще важно для читаемости? Не забудьте включить контраст между цветом шрифта и фоном каждой карты.
Ограничьте количество UI-элементов
Одна карта – одно действие. Это аксиома.
Это означает, что вы не должны включать кучу UI-элементов пользовательского интерфейса, таких как кнопки. Они вообще не смотрятся на картах и фактически не нужны там.
Но если вы считаете, пользователям необходимо наглядное руководство к действию, одной кнопки достаточно. Держите формы и дизайн простыми.
Пожалуй, кнопка – это единственный элемент интерфейса, который вам нужен.
Выводы
Волшебной формулы для создания идеального карточного дизайна не существует, но есть конструктивные решения, которые поощряют каждого пользователя нажать на карту. Следуйте минималистскому подходу с самого начала, оставляйте больше свободного пространства, делайте акцент на простые шрифты, создавайте отдельное действие для каждой карты.
В результате вы получите карточный дизайн, удобный для пользователя и потрясающе выглядящий.
И как бы вы ни относились к этой концепции, карточки прочно заняли свое место в дизайне .
Что такое карточки?
Это те небольшие прямоугольники с картинками и текстом, которые служат точками входа в более углубленное изучение вопроса. Карточки - это первое, что приходит в голову, если нужно сбалансировать эстетику интерфейса и юзабилити. Все потому, что это удобный способ отображения контента, состоящего из различных элементов.
Пример карточки. Источник: Material Design.
Отличная метафора
Карточки в интерфейсе - это отличная метафора, поскольку они очень напоминают настоящие, осязаемые карты. До появления мобильных устройств, они были повсюду: визитки, бейсбольные карточки, игральные карты и т.д. Карточки, как модель взаимодействия, получили достаточно широкое распространение. Поэтому пользователи на интуитивном уровне понимают, что карточка несет в себе.
Карточки - отличный способ передачи быстрых историй . Хороший пример из реальной жизни - бейсбольные карточки. С обеих сторон небольшой карточки содержится вся ключевая информация об игроке, которая вам нужна.
Каждая карточка представляет игрока. Источник картинки: liveauctiongroup
Организация контента
Содержимое карточки подразделяется на смысловые блоки - за счет чего экономится экранное пространство. Точно так же, как предложения в тексте группируются в параграфы и формируют смысловые блоки, различные элементы, собранные на карточке, создают целостную единицу контента .
Пример подборки карточек. Источник: Material Design.
Карточные лейауты заняли ведущие позиции в дизайне, когда гиганты вроде Facebook начали внедрять карточные интерфейсы в своих десктопных и мобильных приложениях. Facebook вовсю использовал “контейнерный” дизайн , чтобы удобно группировать информацию, несмотря на практически бесконечный поток данных.
Привлекательный внешний вид
Обычно карточный дизайн сильно полагается на визуальные элементы. Изображения - это сильная сторона такого дизайна. Дизайн-студии подтверждают , что использование изображений поднимает дизайн сайта или приложения на новый уровень - ведь они мгновенно и эффективно привлекают внимание. Упор на изображения автоматически делает карточный дизайн более привлекательным для пользователей.
Взять, хотя бы, Dribbble - известный в творческом сообществе сайт, на котором дизайнеры демонстрируют свои работы. Пожалуй, карточный дизайн лучше всего подходит для отображения контента такого типа.
Сайт Dribbble.
Как спроектировать карточку
Карточки в пределах одного лейаута должны быть одинаковой ширины, а вот высота может быть разной. Максимальная высота карты ограничена доступным пространством платформы, но может быть временно увеличена (к примеру, чтобы отобразить поле с комментариями).
Высота карточки может быть фиксированной или переменной. Источник изображения: Intercom
С точки зрения дизайна, у карточки должны быть скругленные уголки и короткая тень. Благодаря скругленным уголкам карта выглядит как отдельный блок контента, а тени создают ощущение глубины.
Скругленные уголки и короткая тень. Источник: Material Design.
Эти элементы привнесут в дизайн легкую визуальную пикантность, не отвлекая пользователя от содержимого. Кроме того, благодаря им карточка будет словно выпрыгивать со страницы. Также можно применить эффекты анимации и движения.
Источник изображения: Behance
Преимущества карточек
Если применять карточки правильно, можно значительно улучшить UX приложения. Благодаря своей функциональности и форме, карты выступают интересным и интуитивным элементом интерфейса.
Легкоусвояемая форма
Как вы уже знаете, главный - контент. Карточки в дизайне - это контейнеры, которые можно заполнить чем угодно. Если поместить контент на карточки - пользователям будет проще его усваивать. Таким образом, пользователи получают легкий доступ к тому контенту, который интересен именно им - что способствует глубокой вовлеченности.
В этой подборке - карточки с разными This card collection contains cards with varied content types. Source: Material Design.
Адаптивный и мобильный дизайн
Самое важное в карточках то, что они легко поддаются всяческим манипуляциям. Карточный дизайн хорошо подходит как для десктопов, так и для мобильных устройств - ведь карты преподносят контент небольшими, легкоусвояемыми порциями. Они также хорошо подходят для адаптивного дизайна, поскольку служат контейнерами информации , которые с легкостью масштабируются.
И наконец, карточки помогают создать единую эстетику на множестве разных устройств. Поэтому карточный дизайн обеспечивает согласованный пользовательский опыт на любых устройствах.
Дизайн под большой палец
Карточки просто созданы под большой палец . Карточный дизайн словно специально адаптирован под приложения. В этом и есть главная причина популярности карточек в мобильном дизайне. Цифровые карточки в телефоне ведут себя так же, как и физические карты, что обеспечивает пользователям комфортный опыт взаимодействия. Им не приходится думать: “как же здесь все работает?” Пользователям нравится простота карточного дизайна, и они интуитивно понимают принцип: перевернуть карточку для дополнительной информации или смахнуть, чтобы увидеть следующую.
Смахивание вправо. Источник: Dribble
Где использовать?
Лента
Открытие нового
Карточки - это естественный способ отображения нового контента. Взгляните на карточный паттерн Tinder: смахивая карты справа налево, вы находите все больше новых людей, которые соответствуют вашим вкусам.
Источник изображения: Tinder.
Pinterest использует карточки-пины в своей динамической сетке, чтобы организовать контент и вовлечь пользователей в бесконечное пролистывание.
Что общего у этих двух сервисов? Они берут информацию из приложения и делают ее актуальной на данный момент.
Вы хотите разработать трендовый интерфейс в стиле карточек? Вероятно, это неплохая идея. Карточки популярны и удобны для пользователей, они подходят для всех типов цифрового дизайна и для экранов всех размеров. Ключ к успешному дизайну в карточном стиле — создание того, по чему пользователю захочется кликнуть. Карточка должна служить контейнером для определенного контента — ссылки, формы входа, видео-плеера и т. д. — с которым пользователю захочется взаимодействовать. Вот как создать такой дизайн.
Начните с черно-белых контуров
Звучит очень просто: начните с черно-белого макета вашего дизайна. Подумайте о назначении для карточек, а также о том, по какой их части будет можно кликнуть. (Вся карточка целиком может служить ссылкой).
Спланируйте элементы: свободное пространство, изображения и типографику так, чтобы вы могли видеть карточку без цвета и оформления. Думайте об этом как о стадии дизайна игровых карт. Все элементы карты на месте. Является ли макет простым для понимания?
Подумайте о том, как вы будете использовать карточки на этой стадии. Куда вы кликните для того, чтобы произвести то или иное действие? Понятны ли структура и результат? Как вы вернетесь обратно, или наоборот сделаете шаг вперед? Ответы на эти вопросы должны быть ясны без подсказок типа надписей красного цвета «Нажми сюда».
Как и в других проектах, если дизайн не работает в черно-белом макете, его финальная, полностью оформленная версия тоже не будет работать.
Используйте очень много свободного пространства
Сложнее всего в дизайне в стиле карточек — не сделать его захламленным и переполненным. Вот где большую роль играет свободное пространство. И вам захочется использовать свободное пространство в значительно большем объеме, чем это кажется комфортным.
Обилие «воздуха» даст элементам дизайна простор, сделает все карточки визуально просторнее и повысит читабельность.
Скорее всего вы захотите начать с вдвое большего чем обычно пространства между элементами. Расстояния между карточками должны быть большими, также вы можете увеличить свободное пространство за счет межстрочного расстояния. Очень большое количество воздуха поможет вам создать открытый дизайн и организовать контент наиболее очевидным образом. Карточка ограничена в размерах и должна помещаться на экране смартфона, а также логично и пропорционально менять размер для экранов планшетов и мониторов. На больших экранах карточки также могут отвлекать друг от друга внимание пользователя. Добавление «воздуха» позволит дизайну в целом выглядеть более открыто и просто для вникания в него.
Добавьте натуральные цвета и оттенки
Теперь вы готовы думать о цветах и оттенках для вашего дизайна. Старайтесь придать ему естественный вид и передать реалистичный вид карточкам при помощи теней и стилей.
Речь идет не о скеоморфизме, а о создании цветов с естественными контурами и тенями. Подумайте о том, как бы выглядела реальная карточка. У пользователя должно возникнуть чувство, будто они держать карточку в руке.
Используйте несколько физических правил, которые действуют, когда вы держите карточку в руках:
- Освещение будет давать тени под и в нижней части карточки.
- Самая темная часть дизайна в его нижней части, потому что обычно, когда вы держите в руках карточку, свет падает сверху.
- Избегайте размещение контента в местах, за которые вы бы держали карточку в руках.
- Точки соприкосновения (призывы к действию и пр.) должны быть в центре внимания и взаимодействие в ними должно быть легким и понятным. (Так же как в игральных картах, основной элемент находится в центре дизайна).
- Одна карточка — одна единица информации.
Создавайте простой стиль
Теперь, помня о физических свойствах, переходите к следующему шагу — созданию общего стиля карточек для всего интерфейса. Не знаете с чего начать? Отличной точкой старта будет руководство по Material Design от Google.
«В Material Design физические свойства бумаги перенесены на экран. Фон приложения представляет из себя плоскую, однородную текстуру бумажного листа.
Элементы приложения ведут себя как бумага — так же меняются в размере, пролистываются и собираются в стопку. Элементы, находящиеся вне приложения, такие как строка состояния, ведут себя иначе. Они отделены от контента в приложении, и не наследуют физические свойства бумаги.»
Помните об этих указаниях и попробуйте создать цифровой объект, который будет выглядеть и ощущаться как физический. Если пользователи захотят его потрогать, они кликнут по нему. Концепция проста.
Выбирайте простые шрифты
Когда речь заходит о типографике, чаще всего лучшим решением будут простые шрифты без засечек. Избегайте слишком тонких или узких шрифтов, так как это может быть тяжело для глаза.
Большинству карточек хорошо подойдут два шрифта (даже если они из одного семейства) — один для общего текста, и один для заголовка или призыва к действию. Еще один важный момент, о котором нужно помнить, работая с типографикой — контраст, благодаря которому текст будет проще читать. Не забудьте продумать контрасты между шрифтами, и между фоном и текстом для каждой карточки.
Ограничьте элементы UI
Запомните: одна карточка равняется одному действию.
Это значит что вам не понадобится раскидывать по дизайну кучу элементов интерфейса, как, например, кнопки. Они вам могут вообще не понадобиться. Но если вы все же считаете что пользователю нужна визуальная подсказка, одной кнопки вполне достаточно.
Сохраняйте формы и дизайн простыми — опять же, Material Design отличный вариант - и стремитесь не делать больше одной кнопки.
Кнопки, вероятно, вообще единственный UI-элемент, который вам понадобится. Стремитесь к этому.
Заключение
Не существует волшебного рецепта для идеального дизайна в карточном стиле, но есть конкретные приемы, которые побудят пользователя кликнуть куда вам нужно. Стремитесь быть ближе к реальности, выбирайте минимализм с большим количеством воздуха и контраста, отдавайте предпочтение простой типографике, и указывайте одно действие каждой карточке.
Перевод — Дежурка
Итак, в данной статье я объясню вам что такое «карточный дизайн», и как он влияет на веб-дизайн в целом.
Рост мобильных технологий постепенно привел к смене архитектуры веб-сайтов в сторону отзывчивости и адаптивности. Эти два параметра стали обязательными. Данные события поспособствовали большому успеху «карт» — одному из основных направлений веб-дизайна в 2015 году.
Тем не менее, мы можем с уверенностью утверждать, что карты не просто дизайнерская причуда, за ними будущее веб-разработки, так как это лучший способ организации и отображения контента в последовательной форме. Итак, в данной статье я объясню вам что такое «карточный дизайн», и как он влияет на веб-дизайн в целом. Поехали!
Карточный дизайн сквозь века
В то время как карты стали крайне популярны в веб-дизайне совсем недавно, они уже были эффективным средством визуальной коммуникации, по крайней мере, тысячу лет. Впервые представленные, как игра, в императорском Китае 9 века, позднее карты стали полезны и в деловом мире.
И действительно, в 17 веке в Лондоне впервые появились «торговые карточки», с их помощью люди находили работу: это был первый пример современных «визиток».
В настоящее время карта представляет собой обычно форму купона из магазина или супермаркета, люди их собирают, чтобы получить специальные скидки.
Большинству из нас следует только заглянуть в свой кошелек, чтобы увидеть кредитные карты, карты постоянного покупателя, карты магазинов и даже обычное водительское удостоверение. Все эти карты имеют свои стандарты.
В любом случае существует сильная связь между традиционным использованием карт и их применением в веб-дизайне: обычные карты содержат информацию на обеих сторонах, а веб-карты перенаправляют пользователей для просмотра дальнейшего контента.
Что собой представляют карты в интернете?
С точки зрения интернета мы можем определить «карту» как маленький прямоугольник, который ассоциируется с определенной мыслью. Карты полны интерактивных элементов, таких как текст, ссылки или изображения. Но все они служат одной цели – по клику направлять на дальнейший контент.
Основная цель карт обеспечить краткий обзор определенной темы в замкнутом пространстве. И если читатель заинтересовался новостью, он может по одному клику перейти на новую страницу с полным текстом. Веб-сайты Facebook или Twitter пользуются этими преимуществами, они внедрили в свой дизайн шаблон карт, отображая большие объемы контента и сохраняя при этом драгоценное пространство.
Таким образом, самой важной характеристикой карт является идея интерактивного взаимодействия. Во время разработки дизайнеры должны учитывать, что карты служат не только способом отображения новостей, а также они обязаны привлекать внимание читателя. Вот почему на карточках отображаются кнопки лайка, репоста или ссылки на полный текст статьи.
Помимо своей полезности карты являются распространенным выбором в дизайне из-за их совместимости с отзывчивыми фреймворками. С помощью «Разбитой на части» структуры можно создавать привлекательные интерфейсы, а также такая структура является идеальной для разработки на мобильных платформах. Форма карты крайне похожа на форму современного смартфона.
Мы часто говорим о «текучих» макетах. Карты предоставляют нам небольшие кусочки контента, с помощью которых можно «залить» страницу под разные размеры и формы экранов.
Почему следует применять карты?
С тех пор как карты стали универсальными, они могут быть использованы по-разному в зависимости от необходимых функций. Ниже представлено несколько причин, зачем использовать карты:
Это тренд: тенденции по своей природе временное явление, однако, используя карты, вы можете эффективно сделать ваш сайт знаменитым.
Карты вводят порядок: карты внедряют уровни организации контента.
Карты идеальны для отзывчивого дизайна: они легко подходят под веб-сайты и мобильные приложения. Самое важное, что на смартфонах карты могут легко быть сложены вертикально, создавая при этом новостную ленту.
Карты поощряют экономию мыслей: из-за своих размеров карты никогда не смогут хранить большие объемы информации. На первый взгляд это может показаться недостатком, но я считаю, что это отличная вещь! В карточке следует отображать краткий текст от полной статьи, подталкивая заинтересованных читателей пройти по ссылке.
Они социальны: карты идеально подходят к социальным медиа, и не только из-за того, что они используются в социальных сетях, а также потому, что карты упрощают пользователям возможность делиться информацией через различные социальные платформы и по почте.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Выравнивается важность контента: карты помогают справиться с задачей, какую статью лучше всего поместить вверху страницы. При использовании карт блоки с контентом равной важности могут спокойно сожительствовать на одной странице без необходимости их ранжирования. Пользователь сам решает, что ему важно, и что он хочет читать.
Кто применяет карты?
Dribbble
Макет сайта основан на карточках, содержащих изображение и немного информации о каждом дизайне. Чем мне нравится Dribbble, так это тем, что можно кликнуть на карточку и посмотреть все детали относительно дизайна, а также вы можете просто навести курсор мыши на карточку и просмотреть маленькое описание.
Говоря о карточном дизайне, нельзя не упомянуть о Pinterest. На самом деле многие думают, что Pinterest впервые применил карточный дизайн. Pinterest четко демонстрирует «важность всего контента», на сайте нет карточек, которые как-либо визуально выделяются.
Twitter, используя ограничение в 144 символа в одном сообщении, родился со «встроенным карточным макетом». В прошлом году социальная сеть запустила свой собственный продукт под названием «Twitter Cards», приложение, спроектированное помочь вам «картизировать» ваш контент, если вы постите его в системе. Разработчики описывают свое приложение, как возможность:
«прикрепить много фото, видео и другого медиа контента к твитам, что переведет трафик на ваш веб-сайт»
Как результат, домашняя страница Twitter теперь полна карточек с твитами. По клику на один из них, твит разворачивается, показывая дополнительный контент или опции.
The Guardian
Знаменитая Британская газета The Guardian применила карточный дизайн к своему веб-сайту для того, чтобы «думать по-новому и улучшить обнаружение и продвижение контента».
Они смогли создать модульную схему, состоящую из различных карт: каждая связана с заголовком, и по клику вас перенаправляет на полный текст статьи. Сайт вызывает ощущение элегантности и чистоты.
Заключение
Карты представляют собой полезный метод для создания привлекательных веб-сайтов, а также они крайне гибки, с их помощью можно реализовать различные макеты. Все это для того, чтобы пользователь остался доволен сайтом. Все больший рост доли рынка планшетов и смартфонов также надолго закрепит карточный дизайн на вершине веб-дизайна.
Благодаря визуальной привлекательности, карточные интерфейсы – это больше, чем просто тренд.
В 2014 году интернетом на мобильных устройствах впервые стали пользоваться чаще, чем на компьютерах. Поэтому сегодня веб-дизайн благоволит маленьким экранам, а адаптивный дизайн становится обязательным. Что уж говорить про 2018, когда по статитстике информационного агентства RNS уже 54% россиян используют мобильный интернет. В результате в простые стили интерфейса, такие как новый плоский дизайн, минимализм и, особенно, карточки, сейчас популярны как никогда.
Пригодность карточного UI-паттерна – это больше, чем малое время загрузки и приспособляемость к различным размерам экранов. Ограниченный в размерах контент соответствует объему внимания большинства веб-пользователей (особенно на мобильных устройствах). Взращенный Pinterest , а затем популяризованный такими соцсетями, как Facebook и Twitter, карточный шаблон сегодня можно найти на веб-сайтах всех отраслей.
В данной статье мы изучим становление карточного UI-паттерна: в чем его практичность, как он совместим с адаптивным и материальным дизайном, и что ожидать от него в будущем.
Что такое контейнерный веб-дизайн?
Чтобы понять этот шаблон, нужно сначала понять, что такое карточки сами по себе. Карточки – это обычно небольшие контейнеры с информацией. Каждая карточка имеет свою собственную тему. Карточка может содержать любой контент – визуальный, текст, ссылки, и пр. – но вся информация посвящена единой теме.
Наполнение экрана такими независимыми контейнерами с информацией и является тем, что «The Guardian» назвала «контейнерной моделью». Она предлагает чистый и понятный интерфейс, идеально подходящий для быстрого просмотра, поэтому пользователь легко может найти то, что ищет. (К тому же, этот метод идеально подходит для сенсорного управления, о чем мы напишем ниже).
Практичный и привлекательный: преимущества карточного UI-паттерна в двух словах.
Trello позволяет пользователям создавать любую карточку, какую они захотят. Каждый может создать карточки с задачами и категоризировать их, как необходимо. Это демонстрирует не только гибкость карточного шаблона, но и его силу организации. Trello процветает, потому что его карточный формат кажется проще, чем список задач традиционного планировщика.
Интересны ? Читайте свежую статью с подборкой ТОП 18 трендов 2018 года.
Карточный UI-паттерн на мобильном устройстве и адаптивный дизайн.
Как говорилось ранее, карточки невероятно совместимы с адаптивным дизайном, что делает их, словами Деса Трэйнора из Intercom, «будущим веба». Паттерн хорошо ложится на мобильные устройства по ряду причин, которые мы опишем ниже.
Во-первых, во фрэймворках, которые расширяются и сужаются, сетка карточек может реструктурировать себя, чтобы подходить любому положению или размеру экрана. Дизайнеры могут как угодно менять размеры карточек (а также подгонять их друг к другу). Например, вы можете установить фиксированную ширину и переменную высоту при постоянном промежутке между карточками. Мы постоянно этим пользуемся, создавая адаптивные сайты.
Сравните скриншот сайта The Verge наверху с его мобильной версией внизу:
Заметьте, как текст, картинки и цветовой шаблон остаются прежними. При разработке адаптивного web дизайна карточки позволяют получить постоянный дизайн на различных устройствах. Это преимущество можно увидеть в бесплатной лаборатории дизайна UXPin. Заметьте, как чисто выкладка перетекает от мобильной версии к полноэкранному режиму просмотра.
Область просмотра мобильной версии:
Область просмотра полноэкранной версии:
Другим преимуществом является то, как карточный дизайн совместим с сенсорным управлением. На сенсорных экранах карточки играют роль кнопок. Идея проста: нажмите на карточку, чтобы получить доступ к контенту. Как показывает применение закона Фиттса к веб-дизайну, чем больше кнопка для клика, тем проще с ней работать. Как часто приходится нам сражаться с крошечными кнопками на мобильных устройствах?
Карточки и материальный дизайн
Материальный дизайн, идеально подходящий для , во многом полагается на карточки, и их детальный технический анализ потребует много места. Поэтому если вам требуется всестороннее объяснение, то стоит прочесть описание карточек в руководстве по материальному дизайну.
Web разработка сайтов. Будущее карточного дизайна.
Так как карточный UI-паттерн постоянно меняет свою форму, чтобы соответствовать новым требованиям, он, вероятно, наиболее сильно повлияет на адаптивный дизайн и дизайн приложений. Это изменение частично основано на «постраничном» влиянии, которое материальный дизайн оказывает на приложения Android.
1. Технология
Карточки могут недолго оставаться статичными. По мере того, как совершенствуется веб-реализация, будет улучшаться и их способность поддерживать больший мультимедийный контент. Вероятно, мы увидим гораздо более детализированные элементы, такие как авто-обновляемый контент, который не будет замедлять общую работу.
Все чаще видео будет заменять картинки (идея, с которой некоторые дизайнеры заигрывают годами). Use Your Interface (наверху) использует анимированные GIF-карточки, которые наполняют домашнюю страницу массой информации.
2. Углубление взаимодействия
В ближайшем будущем креативность применения карточек также может возрасти, и они перестанут быть просто ссылками. Как мы видим на примере материального дизайна, карточки различаются по уровню взаимодействия между собой и окружающей средой, например, таким как автоматическая сортировка и обновления в режиме реального времени (например, прогноза погоды).
Windows Phone уже ввел автосортировку карточек, но потенциально этот подход может применяться и для пользователей других мобильных устройств.
3. Размер
Идя в ногу с трендом изображений героев комиксов, карточки также используют политику «больше, значит лучше».
Большие карточки позволяют разместить больше деталей и сложной типографики, что, в свою очередь, означает больше возможностей для восхитительного визуального дизайна. Применяемые поочередно вместе с меньшими по размеру карточками, крупные карточки дают большую свободу в визуальном смысле.
HOW Arkitekter (наверху) в навигации смешивает карточки большого и среднего размеров. Некоторые карточки являются ссылками, а некоторые – просто представляют статичную информацию. Широкие промежутки разделяют карточки, что делает дизайн воздушным.
4. Носимые устройства
Благодаря Google Glass, карточки сегодня стали основным элементом UI-дизайна носимых устройств.
Хотя критики могут считать Google Glass коммерческим провалом, некоторые полагают, что у него есть шансы на рынке. Не смотря ни на что, носимые устройства должны эффективно использовать пространство. И в этом случае карточки будут наиболее практичным выбором.
Web разработка сайтов 2016-2018. Вывод
Карточный дизайн становятся основой организации и функциональности во всех средах и устройствах. Их сегодняшняя форма может измениться, так как они развиваются параллельно с технологиями, однако их присутствие гарантировано. В конце концов, оцифрованные площади на экранах вряд ли являются первичной формой карточек. Не забывайте, что еще недавно карточка была всего лишь листом бумаги, который содержал набор информации по какой-то конкретной теме.
Читайте статью про другой - duotone или дуплекс.
