Java, UX, HTML, CSS, WEB-design

Проектирование карточных пользовательских интерфейсов

Краткое описание по статье Проектирование карточных пользовательских интерфейсов

Название: Проектирование карточных пользовательских интерфейсов . Краткое описание: [ad_1] ⭐ Ник Баб . Дата публикации: 02.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Ник Бабич

  • 0 Комментарии

Проектирование карточных пользовательских интерфейсов

  • 9 минут чтения

  • UX-дизайн, пользовательский интерфейс, дизайн опыта, спонсируемый контент

Краткое резюме ↬

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

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

В этой статье я объясню, что карты означают для дизайнеров пользовательского интерфейса, и рассмотрю три популярных сервиса на основе карт. Если вы заинтересованы в создании прототипа собственного карточного пользовательского интерфейса, вы можете загрузить и протестировать Adobe Experience Design CC для бесплатно и приступайте к работе прямо сейчас.

Дальнейшее чтение на SmashingMag:

  • Жесты в приложении и взаимодействие с пользователем мобильного приложения
  • Зона большого пальца: дизайн для мобильных пользователей
  • Как разработать состояния ошибок для мобильных приложений
  • Помимо кнопки: использование интерфейса, управляемого жестами
  • Что научная фантастика говорит дизайнерам взаимодействия о жестовых интерфейсах

Что такое карты?

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

Еще после прыжка! Продолжить чтение ниже ↓

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

Бейсбольная карточка — хороший пример из реальных объектов: основная информация, которую вам нужно знать об игроке, содержится на обеих сторонах маленькой карточки. (Изображение предоставлено oldbaseballcards) (Большой превью)

Преимущества карт

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

Разделение контента

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

Карточки — это аккуратные небольшие контейнеры для информации. (Изображение предоставлено Google) (Большой предварительный просмотр)

Легко усваивается

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

Пользователи могут быстро сканировать и проводить карты. Изображение предоставлено: Behance

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

Карточки могут дразнить пользователей визуальной информацией.
Карточки могут дразнить пользователей визуальной информацией. (Изображение предоставлено Google) (Большой предварительный просмотр)

Подходит для разных размеров экрана

Самое главное в картах то, что они почти бесконечно управляемый. Они являются хорошим выбором для адаптивного дизайна, поскольку карточки действуют как контейнеры контента которые легко масштабируются вверх или вниз. Эта функция позволяет нам создать единую эстетику на нескольких устройствах и установить постоянный опыт независимо от устройства.

Карты идеально подходят для мобильных устройств и различных размеров экрана. (Изображение предоставлено Google) (Большой предварительный просмотр)

Предназначен для больших пальцев

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

Картами почти бесконечно можно манипулировать: они могут в полной мере использовать анимацию и движение. (Изображение предоставлено Behance)

## Лучшие примеры дизайна карточек Дизайн карточек находится на пересечении дизайна для настольных компьютеров и мобильных устройств, устраняя разрыв между взаимодействием и удобством использования. Но для того, чтобы быть успешным, карточный интерфейс требует как чистой эстетики, так и прямого вовлечения пользователя в определенное действие. ### Карточки потоков могут появляться в потоке, создавая временную шкалу событий. Например, Facebook использует их, чтобы представить краткий обзор последних событий в ленте новостей. Лента новостей Facebook — это бесконечный поток, тогда как карточки физическое лицо. Суть карт здесь дезагрегация. Они берут вещи из бесконечного потока, упаковывают их и делают совместно используемый. Это действие также побуждает пользователей делиться контентом в социальных сетях.

Facebook — отличный пример дизайна карточек, ориентированного на контент.

Открытие

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

Behance использует макет карты для поддержания интуитивно понятного пользовательского интерфейса. (Большой превью)

Tinder — отличный пример того, как использование механизма обнаружения для представления следующего варианта привело к тому, что приложение стало одним из самых популярных мобильных приложений. У Tinder ужасно простой интерфейс для пролистывания карточек — вы проводите влево, если вам это не интересно, и вправо, если интересно. Этот механизм считывания карты любопытно затягивает, потому что каждое считывание собирает информацию — карты связываются с пользователями и предлагают наилучшие возможные варианты на основе принятых решений.

Изображение предоставлено: Tinder. (Большой превью)

Рабочий процесс

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

Доска Trello — это холст, заполненный карточками. (Большой превью)

Диалог

Поскольку карточки являются контейнерами содержимого, они идеально подходят для представления действий. Рассмотрим службу AirDrop на устройствах Apple. При входящем запросе на передачу данных всплывает карточка с уведомлением о принятии или отклонении передачи. Скриншоты Apple сосредоточены на фотографиях, но разработчики могут поместить в карточку что угодно — купоны, песни или веб-ссылки.

Изображение предоставлено: Apple. (Большой превью)

Приборная доска

Дизайн карт предлагает фантастическую точность, когда дело доходит до организации контента из разных источников. Используя карточки, вы можете организовывать наборы информации в логические группы, объединять контент и отображать его в зависимости от контекста. Избранный контент от множества разных поставщиков контента можно легко собрать вместе и распространить в виде «колоды» связанной информации.

Изображение предоставлено: Материальный дизайн. (Большой превью)

Карточный язык дизайна

В 2010 году Microsoft представила свой язык дизайна Metro. Ключевой принцип дизайна — лучше сосредоточиться на содержании приложений, что достигается за счет использования плоских элементов, больше полагаясь на типографику и карточки. Карточка для дизайна Metro — это больше, чем просто элемент дизайна; это важная функциональная часть, обеспечивающая простое взаимодействие.

Microsoft Windows 8. (Большой предварительный просмотр)

Подробнее о создании карты

Карты и простота

Когда вы думаете о картах, простота должно быть номер один, о котором следует помнить. Отличным советом от Кэрри Казинс является «одна часть информации на карту»: карта может содержать несколько элементов дизайна, но каждый из них должен быть сосредоточен только на одном элементе информации или содержании. Это дает пользователям возможность выбирать части вашего контента, которые они хотят потреблять или делиться ими.

ReaLync переносит карточки во все свои списки, чтобы показать самую важную информацию о местах. Кредит: Пайперлоусон. (Большой превью)

Карточки и адаптивный дизайн

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

Что хорошо в цифровой карте, так это то, что ею можно манипулировать различными способами. Например, на мобильных устройствах карточки можно складывать вертикально, как ленту активности на телефоне:

The Verge в мобильной версии. (Большой превью)

В то время как для больших экранов они могут попасть в сетку:

The Verge на рабочем столе. (Большой превью)

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

Изображение предоставлено: Интерком. (Большой превью)

Карты и типографика

Все, что касается дизайна карты, должно быть легко читаемым и понятным. Вы должны проектировать для максимальной читабельности:

  • Выбирайте простые шрифты и легко читаемые цветовые схемы (текст лучше всего читается, если он размещен на однотонном фоне с достаточным коэффициентом контрастности по отношению к тексту).
  • Попробуйте также ограничить количество шрифтов. Для большинства карточных проектов достаточно одного шрифта.
Изображение предоставлено: Материальный дизайн. (Большой превью)

Вывод

Большинство из вас, вероятно, лучше понимают, почему карточный дизайн так популярен, и его популярность будет продолжать расти. Эта тенденция не закончится в ближайшее время. Карточки никуда не делись и продолжают оставаться неотъемлемой частью дизайна приложений.

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Недавно представленное приложение Experience Design предназначено для быстрого и плавного процесса проектирования UX, поскольку оно позволяет вам набрасывать идеи, создавать интерактивные прототипы, тестировать и делиться ими в одном месте.

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

(мс, ик, иль



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Проектирование карточных пользовательских интерфейсов

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»