Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX

Презентация для пользователей вашего сайта с помощью Bootstrap.

by
Read Time:11 minsLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

Когда у вас уже есть веб-приложение, которое может вызвать некоторые трудности у пользователей, требуется создание демонстрационного тура. Его создание  сделает приложение очень понятным. Именно поэтому мы и собираемся это сделать, используя Bootstrap Тур.

tour-introtour-introtour-intro

Вопросы, вопросы

Bootstrap Tour - это плагин на основе jQuery для Twitter Bootstrap, который позволяет вам легко создавать интерактивные пошаговые руководства, используя минимальное количество  конфигурации JavaScript в сочетании с существующей структурой DOM.

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

Почему я хочу создать эти инструкции?

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

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

Есть много вариантов использования интерактивного тура.

Когда следует избегать использования тура?

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

Пока разбираемся с тем, чего следует избегать, было бы разумно сделать ваш тур как можно короче. Пользователи хотят собрать всю необходимую информацию для использования вашего приложения или просмотреть вашу историю, но они также хотят, чтобы это произошло как можно быстрее. Единственным исключением из этого правила был бы сайт, который полагался бы почти исключительно на тур в качестве основной функции (описанный фотосайт был бы возможным примером), но даже в этих случаях пользователю должно быть легко выйти из тура. К счастью, это функция поддерживается в Bootstrap Tour по умолчанию; кнопка «Завершить тур» присутствует на каждом шагу.


Начинаем быстро

Bootstrap Tour использует много  элементов из Twitter Bootstrap, также как и собственный CSS-файл и файл JavaScript в дополнение к jQuery. Мы берём их из документации, прикрепленной ниже. Обратите внимание, что вам также нужно будет включить базовый CSS-файл Bootstrap для отображения всплывающего окна.

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

Запустить тур

Затем, чтобы начать тур, выполните следующие действия в своем файле JavaScript (о котором мы расскажем в ближайшее время):

Этот пример был получен непосредственно из документации, и это самый простой способ начать работу с Bootstrap Tour.


Ну, что, идем дальше?

Bootstrap Tour предлагает множество настроек для каждого шага тура, который вы создаете. По умолчанию он поддерживает localStorage (он сохраняет ваше  местоположение в туре, если вы закрыли вкладку и вернулись на нее позже), функции предыдущая и следующая, а также все виды событий, которые вы можете настроить, чтобы реагировать на действия пользователей. Он также предоставляет классные и удобные функции, такой элемент, как маркер элементов, «рефлекторный режим» (мы объясним ниже, что это такое), автоматические шаги и даже многостраничные туры.

Начальный этап

Эту демо-версию мы начнем с бесплатного шаблона с StartBootstrap.com. StartBootstrap от Iron Summit Media Strategies - это коллекция бесплатных тем класса Премиум.

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

.
├── css
│ ├── bootstrap-tour.min.css
│ ├── bootstrap.css
│ └── landing-page.css
├── font-awesome
...
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── img
│ ├── banner-bg.jpg
│ ├── doge.png
│ ├── intro-bg.jpg
│ ├── ipad.png
│ └── phones.png
├── index.html
└── js
├── bootstrap-tour.min.js
├── bootstrap.js
└── jquery-1.10.2.js

Примечание: мы пропустили внутреннюю структуру FontAwesome, так как этот этап не важен для нашего урока.

Подключаем файлы

Далее вам нужно включить CSS и JavaScript Bootstrap Tour в файл index.html. Тэг <head> вашего документа должен выглядеть так:

В  конце документа вы увидите JavaScript непосредственно перед закрывающим тегом </body> . Как только вы выполнили настройки, пришло время для настоящей работы! Конечно, вам нужно добавить свой собственный JavaScript, и мы добавляем «script.js»  после файла Bootstrap Tour.

Вы захотите объединить и минимизировать эти файлы в процессе сборки. Мы не будем освещать процессы сборки в этом уроке,  Об этом этапе вы сможете узнать в дополнительных рекомендациях по повышению производительности веб-сайта или Meet Grunt: инструмент сборки для JavaScript.

Настройка следующих  шагов

Давайте создадим несколько простых шагов со следующим кодом в нашем script.js. файле.

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

Затем мы определяем несколько классов для шагов тура и связанные с ними аргументы. Обратите внимание на  аргумент «backdrop» третьего шага; он выделяет элемент, который мы выбрали, чтобы прикрепить над ним всплывающее окно.

Изменение разметки

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

И наша страница должна выглядеть примерно так:

tour-welcometour-welcometour-welcome

На третьем шаге мы видим функцию backdrop в действии:

tour-main-sectiontour-main-sectiontour-main-section

Круто! Мы создали функциональный тур примерно в тридцать строк на JavaScript.


Использование динамического контента

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

Обратите внимание, что аргументы content и title могут быть как строкой, так и  функцией, которая позволяет изменить ее значение во время показа всплывающего окна.  Ответ функции на первом шаге получит имя пользователя (используя встроенные классы Bootstrap для стилизации), а затем мы отобразим это имя на втором и последующем  шаге. Если пользователь не указал имя или указал пробелы, мы устанавим имя по умолчанию «Friend».

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

tour-thankstour-thankstour-thanks

Будьте креативны!

Если вы хотите, чтобы ваш тур был полезным, вам нужно продумать хорошую контент-стратегию. Не просто набросайте любые предложения в свой JavaScript-; подумайте о том, хотите ли вы донести до пользователя, чтобы они начали использовать ваше приложение или просто остались довольны.

Напишите текст

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

Информируй и восхищай

Гораций однажды сказал:

Цель поэта – донести смысл или удивить, или объединить вместе эти два понятия, в том, что  говорит поэт, воплощаются в жизнь удовольствие и смысл.

Известный дизайнер Милтон Глейзер расширил это высказывание, сказав:

Целью искусства является информирование и восхищение.

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

Этот фрагмент может показать пользователю что-то в конце тура вроде «спасибо» от гида (это вы).

Использовать среду

HTML очень гибкий.  Не просто копируйте шаг за шагом, а погрузитесь в использование функций и наблюдайте за поведением пользователя, чтобы сделать тур более интерактивным. Например, вы можете использовать эту библиотеку, чтобы дать возможность «выбрать свой собственный приключенческий» стиль, который будет переносить нас между шагами, используя метод goTo(). Используйте обратные вызовы , чтобы добавить больше вариантов  поведения, например анимации или встроенный iFrame. Используйте творческий подход и помните о силе новых возможностей.


Вывод

Bootstrap Tour - мощный плагин, который поможет вам начать быстро. Если вы применяете лучшие практики UX и дизайна контента, тур может быть правильным выбором, мощным способом чтобы связаться с вашей аудиторией. Bootstrap Tour предлагает еще большую гибкость, чем мы здесь рассмотрели, поэтому, если вы хотите, чтобы вторая статья продвинулась еще дальше с Bootstrap Tour, обязательно сообщите нам об этом в комментариях! Какие еще виды применения вы можете придумать? Пусть все об этом узнают!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.