[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438","\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0439_ui","\u043a\u0430\u0440\u0442\u043e\u0447\u043d\u044b\u0435_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0430\u043b\u0435\u043a\u0441\u0435\u0439_\u043a\u043e\u043f\u044b\u043b\u043e\u0432","\u0435\u0433\u043e\u0440_\u0433\u0438\u043b\u0435\u0432"], "comments": 33, "likes": 20, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "4434" }
Alexander Lashkov
12 004

Визуальное представление контента: карточные интерфейсы

Дизайнер Крис Це (Chris Tse) выступил с презентацией, в которой затронул тему карточного UI и объяснил реальный потенциал подобных интерфейсов. ЦП публикует главные тезисы этого выступления и мнения отечественных экспертов в рубрике «Интерфейсы».

Дизайнеры используют карточки в интерфейсах для того, чтобы добиться их «отзывчивости» на различных устройствах и размерах экрана. Карточки есть в проектах Twitter, Google Now, Passbook, Pinterest, Facebook Paper и т.д. Эти сервисы вывели карточные интерфейсы на уровень мейнстрима, но не раскрывают весь потенциал подобной организации контента, уверен Крис Це.

Что такое карточки

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

Карточки используются в мобильных приложениях, веб-версиях сайтов и даже в интерфейсах операционных систем для компьютеров (например, Windows 8). По мнению Криса Це, одним из главных их плюсов является тот факт, что подобная организация контента позволяет пользователю сразу понять суть того, что ему предлагается сделать, отсекая всю лишнюю информацию.

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

Карточки в интерфейсе Facebook сообщают пользователю о возможных действиях

Карточки могут быть представлены различным образом. Це называет варианты структуры контейнерами, и приводит некоторые примеры — «доски» Pinterest, коллажи Flipboard, ленту Facebook, стек Google Now и т.д.

Возможности карточек

Крис Це говорит, что при правильном использовании, карточки могут выглядеть, как адаптивный веб-контент, работать, как мобильное приложение и казаться обычным файлом, который можно сохранить и использовать снова — для реализации всего перечисленного не нужно ничего, кроме стандартных средств CSS, JavaScript и HTML5.

В рамках презентации Це рассказал о подходе Card Runtime, с помощью которого разработчики смогут создавать в своих проектах карточки с контентом сторонних приложений.

Перспективы

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

Благодаря HTML5 карточки можно переносить между различными приложениями, устройствами, пользователями и даже отдельными сервисами. А это, в свою очередь, позволяет создавать «цепочки» карточек, говорит Це. В конце своего выступления он представил ссылку на сервис по созданию HTML5-карточек и контейнеров CardStack.io.

Полное видео презентации представлено ниже:

Редакция ЦП задала отечественным экспертам вопрос о том, считают ли они карточки полезным средством представления информации:

Алексей Копыловдиректор UX-практики компании iDecide

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

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

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

Егор ГилевUX-директор Acronis

Используя карточки в интерфейсах, важно выйти за рамки банального подражания Pinterest и Flipboard. Попробуем копнуть глубже, и сформулировать: что такое карточки, и зачем они нужны? Предположим, у нас есть какая-то повторяющаяся группа элементов интерфейса с четко обозначенными границами. Карточка? Да, конечно! Минимальные требования соблюдены: «повторяющаяся» и «четко очерченная».

Ответив на вопрос «что», попробуем разобраться, «зачем». Когда нужно представить на экране массив данных, состоящий из элементов с хоть сколько-нибудь сложной структурой (больше 2-3 полей), у нас не так много годных вариантов: карточки, таблица, или же какая-то конструкция с отношениями master-detail.

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

Какие преимущества у карточек перед таблицами? Гибкость при размещении на экране. Широкий экран можно замостить в несколько колонок, а на телефоне показать только одну (адепты адаптивности в восторге). На сенсорных экранах в карточку проще попасть пальцем. Больше свободы в способах представления информации: фотографии, диаграммы. Таблицы скучны! Зато, как правило, таблицы компактнее. Удобнее сравнивать параметры, скользя взглядом по колонке. Легче организовать сортировку.

Третий путь: конструкции с отношениями master-detail. Всегда можно представить набор элементов простым списком (или иерархическим деревом), а дополнительные атрибуты показывать только для выбранного элемента. В таком случае у нас еще больше свободы самовыражения в области подробностей, но страдает наглядность представления списка: можем там показать только название элемента и какую-то картинку (иконку). Если же усложнять представление списка, получатся опять-таки карточки, будь они неладны (или таблица — как повернуть).

Вот между этими тремя соснами мы и ходим. Не заблудитесь!

#Интерфейсы #карточки #карточный_UI #карточные_интерфейсы #Алексей_Копылов #Егор_Гилев

Статьи по теме
Радиокнопки: стоит ли по умолчанию выбирать ответ за пользователя
Новый тренд веб-дизайна: контурные кнопки
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления