Advertisement
  1. Web Design
  2. UX
Webdesign

Прэзентацыя для карыстальнікаў вашага сайта з дапамогай Bootstrap.

by
Length:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Калі ў вас ужо ёсць вэб-дадатак, якое можа выклікаць некаторыя цяжкасці ў карыстальнікаў, патрабуецца стварэнне дэманстрацыйнага тура. Яго стварэнне зробіць прыкладанне вельмі зразумелым. Менавіта таму мы і збіраемся гэта зрабіць, выкарыстоўваючы Bootstrap Тур.

tour-intro

Пытанні, пытанні

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

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

Чаму я хачу стварыць гэтыя інструкцыі?

У выпадку, калі вам трэба азнаёміць карыстальнікаў з працай сайта, то інструкцыі могуць быць вельмі карысныя.  Пасля азнаямлення элемент можа, у пэўным сэнсе, убачыць «след» інструкцыі, пра які вы казалі ў пакрокавым кіраўніцтве. Гэта дазваляе пазбегнуць памылак пры працы з сайтам, у выпадку калі б вы выкарыстоўвалі відэа ці, яшчэ горш, тэкставае кіраўніцтва.

Іншы варыянт выкарыстання інтэрактыўнага тура - гэта апісанне фатаграфіі. Уявіце, што вы ствараеце сайт, прысвечаны панарамным малюнках прыгожых гарадоў па ўсім свеце. Калі карыстальнік націскае на горад, інтэрактыўны тур дазваляе пазначыць на фота элементы, якія ў адваротным выпадку могуць застацца незаўважанымі.

Ёсць шмат варыянтаў выкарыстання інтэрактыўнага тура.

Калі варта пазбягаць выкарыстання тура?

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

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


Хутка пачнем!

Bootstrap Tour выкарыстоўвае шмат элементаў з Twitter Bootstrap, таксама як і ўласны CSS-файл і файл JavaScript у дадатак да jQuery. З дакументацыі, вось неабходныя актывы.

Звярніце ўвагу, што вам таксама трэба будзе ўключыць базавы 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-welcome

На трэцім кроку мы бачым функцыю backdrop у дзеянні:

tour-main-section

Крута! Мы стварылі функцыянальны тур прыкладна ў трыццаць радкоў на JavaScript.


Выкарыстанне дынамічнага кантэнту

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

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

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

tour-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.