Bootcards — это пользовательский интерфейс для карточных интерфейсов. Как следует из его названия, он основан на платформе Bootstrap и обладает возможностью двойной панели как для настольных компьютеров, так и для мобильных устройств.
В наши дни информация повсюду, и иногда ее огромное количество может сбить нас с толку. С появлением мобильных устройств дизайнеры UX пытаются создавать минималистичные интерфейсы, не перегружающие пользователей информацией.
Карточные интерфейсы приобретают все большую популярность, в основном потому, что они сосредоточены на том, что важно, и графически бросаются в глаза.
Загрузочные карты в основном используются в списках, сводных картах, различных типах файловых карт и медиа-картах, таких как карты Twitter. Фреймворк полезен, когда мы хотим создать списки, которые содержат больше информации, чем обычно. Другой пример использования Bootcards связан с Summary Cards, которые являются отличным способом создания панелей мониторинга на основе карт.
Почему карты
Карты в моде в наше время. Они показывают именно то, что хотят пользователи, сосредоточив внимание только на ключевых моментах. Вы можете использовать карточки для отображения контактных данных, резюме, информации о файле и многого другого. Этот шаблон разбивает содержимое на маленькие компоненты и размещает их в привлекательных дизайнах.
Многие крупные компании, такие как Google, Spotify, Pinterest и Amazon, использовали карты в своих разработках, особенно в мобильных устройствах. Карты приобрели важность, когда впервые привыкли к Twitter. Карты Twitter были представлены в 2012 году, и с тех пор ажиотаж поднялся.
Карточный макет состоит из текста, изображений, видео и многого другого, и все это создает ценную смесь информации. Твиттер использует карты для создания связи между пользователями и контентом: пользователи могут быстро определить важную для них сводку, не просматривая весь контент. Еще одна веская причина для использования Twitter Cards — привлечь внимание к твитам.
Слоган Google Now Cards — предоставлять правильную информацию в нужное время. Google Now Cards выполняет это, показывая только ценную информацию с акцентом на потребности мобильных пользователей.
Bootcards предлагает полный набор функций для создания высококачественных карт. Каркас оптимизирован для всех устройств и медиа-запросов. Другим хорошим моментом является его родной внешний вид. Он предлагает отдельные таблицы стилей для каждой платформы: iOS, Android или Desktop.
Быстрый старт с загрузочными картами
В этом разделе мы узнаем, как создавать карточки с помощью Bootcards. Для начала, перед добавлением файлов Bootcards нам нужно добавить Bootstrap . Затем вы можете добавить специфичные для ОС файлы Bootcards для ОС (для настольных ПК, Android или iOS) и файл JavaScript.
Причина, по которой Bootcards имеет специфичные для ОС CSS-файлы, заключается в предоставлении пользовательского интерфейса, который может изменять свой внешний вид в зависимости от используемой вами платформы. Различные CSS-файлы изменят цвета заголовков по умолчанию, сделают панель навигации разборной и другие изменения пользовательского интерфейса. Будьте осторожны, вам нужно будет загрузить только один тип файла CSS в зависимости от устройства, используемого для просмотра вашей веб-страницы.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <!-- Important: you'll only need one of the Bootcards CSS files below for every platform --> <!-- Bootcards CSS for iOS: --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-ios.min.css"> <!-- Bootcards CSS for Android: --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-android.min.css"> <!-- Bootcards CSS for desktop: --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css"> <!-- Bootstrap and Bootcards JS --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script> Вы можете начать работу с загрузочными картами, просто добавив их CSS-файлы, но для повышения удобства использования убедитесь, что вы включили функцию JavaScript ниже:
bootcards.init({ offCanvasBackdrop: true, offCanvasHideOnMainClick: true, enableTabletPortraitMode: true, disableRubberBanding: true });
Эти параметры особенно полезны, если вы ориентируетесь на пользователей мобильных устройств или iOS. Чтобы показать фон при отображении меню offcanvas, установите для offCanvasBackdrop значение true . Если вы хотите скрыть меню offcanvas при щелчке за его пределами, вы можете использовать offCanvasHideOnMainClick . Вы также можете включить однопанельный режим для планшетов в портретном режиме, установив для параметра enableTabletPortraitMode значение true . Последний параметр выше, disableRubberBanding , используется для отключения эффекта резиновых полос на устройствах iOS.
Создавайте лучшие карты
После того, как мы настроили среду, мы можем начать создавать образцы карточек. Вы можете найти эти образцы на GitHub , если хотите следовать. Мы обсудим наиболее часто используемые компоненты этой платформы и их назначение.
Подробные списки и базовая карта
Первый пример Bootcards, который мы создадим, — это список контактов, в котором отображаются данные о компаниях и форма поиска сверху. Список контактов будет расширен, когда мы нажмем на названия компаний. Этот список состоит из двух компонентов: подробных списков и базовых карт.
Подробные списки могут использоваться для отображения названий компаний и некоторых небольших деталей о них. Если пользователи хотят узнать больше о конкретной компании, они могут щелкнуть ссылку в подробном списке для этой компании, чтобы открыть соответствующую базовую карту с соответствующими данными о компании.
Базовые карты — лучший тип карт для подробного описания, потому что они отображают информацию в списках. Каждый список разделен разделителями.
Наконец, подробные списки и базовые карты взаимосвязаны: в нашем демо каждая компания в подробных списках отображает свою полную информацию в соответствующей базовой карте.
Медиа карты
Вторая карта, которую мы собираемся создать, — это карта Twitter с большим изображением. Мы будем использовать компонент Media Cards для создания этой карты. Медиа-карты используются для отображения информации, содержащей текст с изображениями или видео.
Но сначала давайте поговорим о картах Twitter. Сводная карта Twitter предназначена для быстрого просмотра контента для читателя. После того, как пользователи нажмут на Сводную карту, они будут перенаправлены на соответствующий контент карты для получения более подробной информации.
Медиа-карты, как и большинство других типов карт, состоят из трех областей: header и footer . Базовая структура медиа-карты показана ниже:
<div class="panel panel-default bootcards-media"> <div class="panel-heading">....</div> <div class="panel-body"> ... </div> <img src="http://www.linkofphoto.com/path"/> <div class="panel-footer">...</div> </div>
В нашем примере с Twitter Card мы удалили panel-heading , оставив при этом элементы panel-footer .
Большая часть содержимого находится внутри div panel-body , где мы разместили логотип, заголовок и основной контент карты. Вместо этого мы поместили кнопки «Ответить», «Ретвит» и «Мне нравится» в область нижнего колонтитула.
Сводные карты
Иногда нам нужно создавать информационные панели или структуры на основе вкладок, которые представляют информацию с помощью значков или логотипов. Для отображения такого рода структур среда Bootcards использует Сводные карты .
Сводные карты можно использовать с другими типами карт. В нашем примере мы использовали карты диаграмм и таблиц вместе с картами сводных данных. В этом случае сводные карты можно рассматривать как дверь к информации, отображаемой этими другими типами карт.
Для создания карт в разделе «Финансы и рост» мы использовали Morris.js . Это очень полезно для создания инфографики и диаграмм. Так что, если вы используете Chart Cards в своем проекте, не забудьте добавить эти файлы:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
Файловые карты
Другой тип карт, который очень полезен в Интернете, — это файловая карта . Основной функцией файловых карт является отображение информации для PDF-файлов, документов Word, электронных таблиц и других форматов, не связанных с мультимедиа.
Для загружаемых файлов файловые карты являются одним из наиболее привлекательных способов отображения этой функциональности для пользователей.
Структура файловых карт состоит из трех разделов: page-header page-footer и list-group . Единственное отличие карт мультимедиа состоит в том, что вместо класса .list-group .page-body он использует .list-group для элемента контейнера.
list-group — это место, где мы разместим наш дополнительный контент. Внутри list-group мы могли бы поместить как можно больше
<div class="list-group"> <div class="list-group-item">content</div> <div class="list-group-item">content</div> </div>
В нашем примере мы использовали два list-group-items : один для названия заголовка файла, его типа и размера, а другой для описания.
Раздел нижнего колонтитула действительно делает File Cards интересным для просмотра. Он содержит три кнопки, которые предлагают пользователям следующие возможности: скачать файл , сохранить его на потом или отправить кому-то по электронной почте .
В четырех примерах Bootcards, представленных здесь, показаны некоторые ключевые функции, позволяющие лучше понять структуру и помочь вам создавать свои собственные карты.
Вывод
Bootcards — это отличный фреймворк, сочетающий концепцию карт с мощью Bootstrap. Пока использование мобильных устройств продолжает расти, а популярные платформы, такие как Google и Twitter, продолжают его использовать, карточный дизайн будет оставаться сильным.