Как да направите прототип в Axure RP, ако не разбирате нищо

Axure RP е най-известният и популярен софтуер за създаване на прототипи за уебсайтове и приложения. Достатъчно дълбоко, за да се правят сложни елементи, като същевременно са достатъчно леки, така че след десет минути бърникане в интерфейса да се подготви оформлението. Разбира се, той е далеч от единствения - има много други начини да се направи прототип.

Една от основните характеристики на Axure (в сравнение с конкурентите) е възможността за програмиране на поведението на бутони, контейнери, джаджи. Въз основа на това, полученият прототип може да бъде направен така, че да функционира като пълноправен уебсайт / приложение.

Опровержение: това е първата ми статия. Не знам как да пиша, но има натрупан опит. Следователно, въз основа на тази статия, Надявам се материалът да бъде полезен. Хайд не претендира за крайната истина - някои решения и мисли са субективни, въпреки че са тествани на много проекти.

Що се отнася до структурата на ръководството, тя ще бъде както следва:

Статията е прикрепена към разглеждания прототип в .rp формат, който може да бъде изтеглен като пример. Използвани библиотеки с икони, готови джаджи са прикрепени към прототипа.

Разглежданият прототип ще се намира на линка //fys0bf.axshare.com.

За всеки разглеждан пример е приложена видео инструкция. Така че трябва да имате никакви проблеми, както в някои учебници по дизайн.

Съдържание:

Малко за UX / UI

Накратко, UX (User Experience) е опит, как потребителят възприема интерфейса, какви емоции преживяват, когато взаимодействат с него. UI (потребителски интерфейс) - това е, което той вижда, с какво взаимодейства.

Интерфейсът може да бъде всичко: чук, клещи, хладилник, таблото за самолет, бавен котлон и т.н. Първите три не предизвикват въпроси - можете да ги използвате, без дори да мислите, ще трябва да го вземете, но не можете да се справите със самолета професионален пилот.

Ако нарисувате паралел с чук, то чукът UI е дръжка, чук и чорап. UX чукът е това, което човек чувства, когато чука.

При проектирането на интерфейс, трябва да се стремим да го направим толкова просто, колкото интерфейса на чук или багер. Всяко усложнение ще накара потребителите да натоварват главите си и не им харесва.

Най-добрият интерфейс е, когато потребителите дори не забелязват какво е то, а просто получават това, което им е необходимо, без да се чувстват неудобно - да направят поръчка, да прочетат статия, да си купят билет и т.н.

Както каза Стив Джобс: "Дизайнът не е как изглежда устройството, а как работи." Съответно, основната цел е тя да работи така, че потребителите да не се колебаят в процеса. За присъствието на интерфейса обикновено се запомня в два случая:

- Той е неудобно. Малки бутони, трябва да "се стремите" да кликнете. Разстоянието между редовете е прекалено кратко, трябва да преглеждате. На целевата страница има много безполезна информация и елементът за преобразуване също трябва да бъде намерен. Е, вие разбирате.

- Professional. Кой работи с интерфейси или се интересува от темата, ще обърне внимание на това колко добре е направен.

За онези, които са в резервоара: къде е прототипът на онлайн магазина и такива високи понятия за това, какво се чувства потребителят? И освен това. Удобството на бъдещия интерфейс трябва да бъде обмислено на нивото на скелета, пътищата на преминаване на човек през сайта (картографиране на пътуването на клиентите). Естествено, на ниво дизайн, много неща ще бъдат коригирани, добавени цветове, изображения. Но базата е запазена и е поставена точно на етапа на създаване на прототип.

Като цяло можем да формулираме следните "благодетели":

- Простота. Не се опитвайте да го направите по-сложен, по-труден. Опростете, съкратете.

- Шаблони. Не се опитвайте да мислите за велосипед, нов елемент на интерфейс, специална функция, която не се намира никъде. Колкото по-типични са елементите на сайта на техните места, толкова по-голяма е вероятността потребителят да разбере за какво са. Това правило е подходящо, разбира се, при създаването на нещо типично. Ако разработвате нова услуга или интерфейс на нова платформа (например за очила за виртуална реалност), трябва да експериментирате.

- Целева аудитория. Без значение колко банално може да звучи, трябва да разберете за коя Централна Азия е предназначен интерфейсът. Възраст, пол, образование, обхват, ниво на богатство. Всичко това трябва да се вземе предвид при формирането на прототипа. Например, ако вашата целева страница е фокусирана върху продажбата на много скъпи часовници, тогава не можете да използвате крещящи лозунги за отстъпки, огромен бутон CTA на всеки екран или мигащ брояч, който остави 10 минути за поръчка на изгодна цена. В случай, че LP представлява печалба в интернет в системата за мрежов маркетинг (магически хранителни добавки, които ви позволяват да говорите с починала баба), тогава тези елементи ще бъдат повече от подходящи. Ще кажа още повече: тяхното използване ще помогне да се премахне целевото третиране на ниво интерфейс.

- Конкуренти. Някои от известните хора казват: "Добрите художници копират, великите художници крадат." Всъщност крадете идеи при проектирането на интерфейси от конкурентите. Състезателите могат да бъдат както преки, така и непреки. Аз също препоръчвам шпиониране на добри решения на чужди сайтове.

Целта на този материал е да покаже как да се направи прототип в Axure RP. Ето защо по-нататък няма да бъдат повдигнати допълнителни въпроси относно това защо този елемент е поставен толкова различно.

Принципи и характеристики на прототипа в Axure

Преди да започнете да проектирате интерфейса, важно е да разберете с каква цел планирате да го използвате. От това зависи до каква степен това ръководство трябва да се използва като пряко указание:

- Ако направите прототип на обекта, за да можете по-късно да дадете на проекта и след това да прикачите към техническата задача - то е за такава схема, че ръководството се изчислява.

- Ако сте дизайнер, клиент (и имате визия за продукта и трябва да го предавате) или трябва да подготвите работна схема за демонстрация - можете да добавите още изображения, да се занимавате с дълбоко програмиране на елементи, да играете с цвят. Също така се препоръчва да се направи адаптивна версия в рамките на една страница.

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

  • Всички през елементите (шапка, сутерен) са направени чрез капитана.
  • Не правете скок със стилове, шрифтове. Става дума за заглавия, основния текст.
  • Всички елементи, в които ще бъде интерактивност (плъзгач, банери, падащи списъци и т.н.), ще бъдат реализирани чрез Interactions. Това е необходимо, за да се разбере визуално кои елементи са статични и кои не.
  • Идеалният прототип трябва да бъде свързан, за да стане ясно къде се извършва преходът, когато се натиска елемент. Текстовите връзки са подчертани, псевдо връзки са обозначени с пунктирана линия.
  • Прототипът е изработен по типични страници. Например, онлайн магазин е: дом, каталог, карта на продукта, контакти, страница с обикновен текст (плащане, доставка, за компанията), личен акаунт, стъпки за плащане. В зависимост от обема и изискванията, могат да се добавят често задавани въпроси, статии, контакти в различни градове и др.
  • Прототипът трябва да бъде изработен върху мерна мрежа.
  • Ако вече има готов текст за прототипа, трябва да го използвате. Позволено е да се използва рибен текст (Lorem Ipsum), но трябва да разберете приблизително колко текст ще има текстът накрая.
  • Заглавията, текстът в изскачащите прозорци, елементите на менюто - трябва да имат смисъл. Дори и по-късно да се промени по време на фазата на редактиране, можете да напишете "работно" заглавие, което предава смисъла.
  • Всичко трябва да бъде много схематично, без оцветяващи елементи. Но има и изключения. За да се демонстрира резултат, близък до крайния тип на клиента (мениджмънт, колеги, тестери), понякога има смисъл да се добавят пълноцветни изображения, логотипи и цветни решения.
  • Всички интерактивни елементи, страници, майстори, някои обекти трябва да бъдат изрично означени.
  • Препоръчително е да се затворят прототипи с парола. По подразбиране те са достъпни само чрез директна връзка на формата 23oh42.axshare.com.
  • Необходимо е да се изработи йерархията на нивото на страницата, така че да се вижда вмъкването.
  • За всяка резолюция се препоръчва да се направи отделна страница: това ще помогне да се избегне объркване при съставянето на всички следващи етапи: проектиране, изготвяне на ТЗ, оформление, програмиране. Всяко разрешение за разделяне на папки.
  • Можете да използвате началния екран, на който ще бъде написано, че за проекта, версията на проекта, който прави прототипа и връзките към основните разрешения. Този елемент е по избор.

Axure има свои собствени "чипове", които го отличават от конкурентите, ето непълният им набор:

  • Прототипите са изградени на базата на основни елементи, както в конструктора. Елементите на свой ред се обединяват в библиотеки. Това могат да бъдат икони, текстови полета, бутони, избрани шрифтове, както и сложни обекти с много динамични панели.
  • Повечето основни елементи са правоъгълни контейнери. Дори рибните текстове или заглавия изглеждат като контейнер с прозрачен фон с прибрана граница. По същия начин във всеки контейнер можете да поставите текста и да го форматирате по някакъв начин.
  • Динамични панели. За да създадете сложни интерактивни елементи, трябва да използвате динамични панели. Това е обект или група обекти, които се прехвърлят в отделна безкрайна област, в рамките на която можете да създадете безкраен брой работни зони, състояния (състояние) както на едно и също ниво, така и на следващото ниво на гнездене. Тази схема най-добре се илюстрира от мечта в съня от филма "Началото". Самите динамични панели могат да бъдат скрити, преместени, променено съдържание на страниците. С тяхна помощ се въвеждат раздели, модални изскачащи прозорци, сложни ефекти на навигиране, зареждания на страници и др.
  • Учител. Както бе споменато по-горе, майсторът е не само интересна особеност, но и жизненоважно състояние. С него можете да реализирате чрез елементи, които ще бъдат непроменени на всички страници: заглавие, сутерен, абонаментна форма, карта на продукта в списъка. Капитанът е по същество динамичен панел, само че има отделно работно пространство (по подразбиране в долния ляв ъгъл) и функцията "добавяне / премахване на всички страници". Възниква въпросът, каква е трудността просто да се копира елементът на всяка нова страница? Така е, ако прототипът се състои от 2-3 страници и не можете да се занимавате с капитана. Но ако на страници 20, и в процеса на работа, трябва да направите промени в крайния елемент, ще трябва да направите промени на всички страници, което е изключително неудобно.

Таблица с размери

Размерната мрежа е проектирана да направи някаква организация. Това е като сравняването на листа с албуми в A4 и графична хартия: можете да начертаете чертеж на празен лист, но е много по-удобно да го използвате с помощта на маркиране.

Прототипът ще използва 16-колонна решетка за ширина на екрана от 1280 пиксела.

При изчисляване на размера на мрежата се препоръчва използването на услугата gridcalculator.dk.

По подразбиране документ липсва raslinovka и водачи. Ето защо, преди да започнете работа по прототип, трябва да го създадете. За това ви е необходимо:

  • Кликнете с десния бутон на мишката върху празно място в работното пространство.
  • Изберете Решетка и Ръководства → Създаване на ръководства.
  • След това можете да избирате от предварително зададени настройки или да зададете свои собствени.

Препоръчва се водачите да се закрепят така, че да не се движат случайно по време на работа. За да направите това, кликнете с десния бутон на мишката върху празно място и изберете Грид и Указатели за заключване. Можете също така да създадете координатна мрежа: Решетка и Водачи на Показване на решетката.

Темата за мрежите за отзивчив дизайн е добре разкрита в тази статия за Хабре.

Общ преглед на интерфейса

Интерфейсът на Axure е доста лесен за четене и има нисък праг на въвеждане. В същото време тя е достатъчно сложна, за да може да изпълнява всичките си функции. Работният екран може да бъде разделен на следните елементи:

  1. Основна лента с инструменти, лента с инструменти и главно меню.
  2. Страници.
  3. Библиотеки.
  4. Masters.
  5. Workspace.
  6. Интерактора.
  7. Outline.

Повече подробности за всеки.

Основна лента с инструменти, лента с инструменти и главно меню

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

Променете начина, по който е избрана джаджата (изцяло или частично). Незабавно Connect Tool - за да свържете джаджи, можете да го използвате, когато компилирате карти на ума (Mind map).

Инструмент за писалка като в Photoshop. Можете да изрежете нежелан елемент от приспособлението.

Още - набор от елементи, от които ще използвате само подстригване (Crop). Но ще бъде много по-удобно да го използвате през контекстното меню (десен бутон върху елемента).

Zoom. Смяна на мащаба. Удобно е да видите каква е текущата скала за работната зона. За да увеличите, препоръчвам да използвате класическата функционалност: Ctrl + превъртане с колелото на мишката.

Отпред / отзад. За да коригирате слоевете на приспособленията. Често, джаджи са наслоени един върху друг, като използвате тези бутони, можете да регулирате тяхното ниво.

Група / Разгрупиране. За да групирате джаджи и да ги премахнете. Често се използва, ако една група от елементи трябва да бъде подравнена с друга група елементи. Горещите клавиши са достатъчно удобни, за да използвате едно ляво - Ctrl + G за групиране на обекти, Ctrl + Shift + G за премахване на групи.

Подравняване / разпределение. За да подравните обекти: в центъра, по ръбовете, поставете обектите в един ред. Ясно е, че това може да се види на линка. От тази връзка можете да видите как работи групирането и подравняването на групи елементи.

Заключване / Отключване. Заключване на елемент Необходим за фиксиране на елемента, за да не се премести случайно.

Ляво / дясно. Можете да премахнете лявата и дясната област с инструменти, за да разпределите повече пространство под работната зона.

Визуализация / Споделяне / Публикуване. Вижте как изглежда прототипът в браузъра. Преглед ви позволява да генерирате проект в браузъра локално. Но бързо натиснете F5. Публикуване - може да бъде изпратено до сървъра на Axure, където ще бъде достъпно за всеки (освен ако не е защитено с парола).

Лента с инструменти за стил е лента с инструменти, която отговаря за вида, размера и форматирането.

  • Форматиране на шрифт, тип, размер, цвят, подравняване на текст - всичко е доста стандартно.
  • Също така, самите блокове могат да променят размера на границата, да добавят сянка, да променят цвета на блоковете, цвета на границите. Възможно е да се зададат различни нива на прозрачност или линеен градиент.
  • Възможността за промяна на позицията на обекта по оста х и у, размерът на дължината и височината (с възможност за пропорционална промяна на размера).
  • Способността да се направи обект невидим (скрит).

Взаимодействието с лентата с инструменти на стила може да се види във видео връзката.

Страници

В този блок се формира йерархията на прототипа, самите страници. Можете също така да създавате папки за лесно прекъсване на страници. За да създадете бързо страница, можете да натиснете Ctrl + Enter. За да коригирате йерархията, или стрелките в интерфейса, или Ctrl + стрелките на клавиатурата.

библиотеки

Самите джаджи с възможност за избор на библиотека. Widget библиотеките са стандартни, които идват с програмата. Интернет е пълен с потребителски библиотеки (Google с заявката "Изтегляне на библиотеки на Axure"). Можете дори сами да направите библиотеката за удобство - например библиотека със специализирани икони, ленти с инструменти, табулатори и др. Заедно с готов прототип, както бе споменато в началото, ще бъде прикрепена обширна библиотека, която ще бъде използвана за вашето здраве.

Самата лента с инструменти е доста лесна за използване - просто плъзнете желаната джаджа в работното пространство.

Masters

Блокът с майсторите, както бе споменато по-горе. Магьосниците на страниците могат да бъдат добавени или ръчно чрез плъзгане върху работното пространство като приспособление, или чрез Добавяне на страници (десен бутон на мишката върху съветника). Създаването, добавянето и работата с майстори може да се види на видеото. Капитанът може да бъде създаден от два вида: заключен на едно място и с възможност за движение. Заглавната част на сайта може да бъде създадена фиксирана на това място (Lock to Master Location), където е създадена, а останалото може да се направи по-добре без (Place Anywhere).

Workspace

Работното пространство е мястото, където се изгражда прототипът. Използваните страници, магьосници, динамични панели са разположени в раздели над работната зона.

интерактора

Накратко, с помощта на тази лента с инструменти е програмирано цялото действие. Състои се от три раздела: Свойства, Бележки, Стил.

Имоти

Набор событий, которые можно задействовать для определенного взаимодействия элемента или группы элементов. Их всего около 30, но обычно используются в штук 5 из них:

  • OnClick - как понятно из названия, срабатывание по клику. Например, нужно сделать так, чтобы при клику по кнопке появлялось модальное окно. Самое часто используемое событие.
  • OnMouseEnter/OnMouseOut - действие, которое будет происходить при наведении на элемент, снятие наведения.
  • OnSwipeLeft/OnSwipeRIght - свайп, прокрутка пальцем на мобильных устройствах.

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

  • OnPageLoad - действие, которое запустится, как только загрузится страница. Пример - пролистывания у слайдера, анимация элементов.
  • OnWindowScroll - событие, которые сработает как только пользователь доскроллит до определенного маркера. Пример - анимация в лендингах, появление кнопки "наверх".

Примеры использования этих событий будут рассмотрены дальше в прототипе.

Shape

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

Interaction styles

Имеет 4 значения:

  • MouseOver - промяна на обекта при навъртане. Използва се за маркиране на връзки, граници на елемент.
  • MouseDown - кликнете върху елемента. В същото време самият елемент поддържа тази промяна, докато натискате бутона на мишката.
  • Избрано - промяна за избраната стойност. Тя работи в комбинация с промяна на стойността в Interactions.
  • Забранено - подобно на избраната механика, само семантичното значение е "забранено".

бележки

Позволява ви да оставяте коментари за всеки елемент. Това може да бъде полезно, когато трябва да опишете работата на джаджа, но няма възможност да го програмирате, или не е толкова визуално и е необходимо да го обясните с текста.

стил

Частично дублира функционалността на лентата с инструменти на стила само с няколко функции. С избрания елемент можете да редактирате разстоянието между редовете, както и вътрешните отстъпки за текста в контейнера. Ако елементът не е избран, се появяват следните опции:

  • Задайте цвят за всички страници.
  • Изсипете изображението на фона.
  • Направете прототипа черно-бял.
  • Нанесете ръчно рисувана скица към прототипа.
  • Възможност за задаване на позиционирането (Page Alignment) на прототипа в центъра на страницата, а не по подразбиране вляво.

очертание

Тази лента с инструменти съдържа всички приспособления, които се използват на страницата. Когато кликнете върху елемент от списъка, той ще бъде маркиран в работното пространство. Най-често тази област ще се използва за търсене на динамични панели и техните състояния (State).

Горещи клавиши и лаптопи

Има горещи клавиши за много действия в Axure. Но далеч от всички те са удобни за натискане, защото трябва да използвате две ръце, което понякога не е оправдано и по-лесно да кликнете с мишката. Следователно списъкът ще бъде поне малък, но тестван и препоръчан за употреба. Тук ще включа и някои техники, които спомагат за ускоряване на работния процес.

  1. Затвореното пространство ви позволява да преместите работното място вместо вертикален или хоризонтален скрол.
  2. Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 - стандартна функционалност, препоръчва се да се използва.
  3. Когато шифърът е притиснат, можете да преместите приспособлението по работната зона точно по оста х и у.
  4. Натискането на Ctrl, докато избраният обект ще копира притурката. Ако задържите Shift докато държите копирания обект, той ще остане в съответствие с оригинала.
  5. Ctrl + G - групиране на приспособления. Ctrl + Shift + G - премахване на групирането.
  6. F5 - режим на преглед на браузъра. В бъдеще можете просто да актуализирате раздела в браузъра, за да видите промените.
  7. F6 - отваря прозорец за публикуване на прототип към сървъра на Axure.
  8. За съжаление, в Axure няма вградена възможност за оценка на разстоянието между обектите, както е приложено в Sketch и в новия Adobe XD. Но можете да използвате "патерица" под формата на правилен правоъгълник. Процедурата е проста, но за всеки пожарникар има видео.
  9. Axure предоставя интелигентни ръководства. Това е необходимо за точното позициониране на обектите по отношение на всеки друг. Когато ги плъзнете, се показват границите и центъра на други обекти (по подразбиране, под формата на тюркоазени линии). Съответно, при плъзгане се препоръчва да се придвижите до тях, така че прототипът да е гладък и ясен.
  1. Препоръчително е да настроите позиционирането в центъра на страницата. Въпросът е не само, че изглежда по-приятен за окото, но и в позиционирането на обектите. Ако динамичните панели са прикачени към определено място на екрана, ще се появи отместване, ако съдържанието на страницата е по подразбиране (вляво).
  2. Динамичните панели или обекти, които по-късно ще бъдат използвани в програмирането на взаимодействието, трябва да бъдат означени по подходящ начин. В противен случай е трудно да се намери желания обект в списъка.

Прототипът на основния онлайн магазин (десктоп).

Влизането приключи и обсъждането на прототипа започна. Избран е онлайн магазин, тъй като той разполага с най-различни функционални чипове, които могат да бъдат показани, както и целевата страница, чиито елементи ще бъдат показани на главната страница. Важно е да се отбележи, че този прототип е от първостепенно значение, за да се покаже функционалността, как работи, а не като краен продукт. Затова, за да се дистанцирам максимално от крайното приложение, избрах темата за продажба на бонсай, добавяйки малко боклук. Съответно, вземете основната като определен набор от елементи за употреба, а не като последна инструкция за вашите проекти.

Целта на прототипа е да покаже функционалността, затова ще липсват страници като "Контакти", "Новини", "Статии", тъй като тези страници по отношение на функционалност не могат да покажат нищо ново.

шапка

Капачката се изпълнява с помощта на съветника. Как се създава майстор е обяснено по-рано. В шапката са няколко елемента, които си струва да останат по-подробно.

лого

В това няма трудности, но с него е свързан един живот. Ако елемент, който трябва да бъде активен (връзка към страница или конкретно действие при придържане, кликнете), но той се състои от няколко елемента, можете да поставите прозрачен контейнер върху него. По този начин, в прототипа внедрени лого, карта със съответните членове.

меню

Долната долна черта се реализира с помощта на Инспектор -> Свойства -> Стилове на взаимодействие -> MouseOver лента с инструменти. В появилия се прозорец поставете отметка в Подчертанието.

Изскачащото меню може да бъде приложено по различни начини. Ако е прост (без допълнителни изскачащи прозорци), можете да използвате готовата джаджа.

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

  • На първо ниво има един динамичен панел с две държави (държава). В първото състояние - текстовата джаджа "Directory". Във второто състояние, една и съща джаджа, само с всички елементи от менюто. Завиване над елемент (OnMouseOver) задейства превключвател към второто състояние (Set Panel State -> изберете динамичен панел -> State2 и "Ok"). Ако изборът от динамичния панел не е избран (OnMouseOut), той превключва на първото състояние (Set Panel State -> изберете динамичен панел -> State2 и "OK").
  • Във второто състояние се създава друг динамичен панел, който е скрит (скрит). Отвътре правим две състояния под формата на две продуктови карти с цена, име и изображение. Завиването над името (OnMouseOver) ще доведе до преход към следващото състояние (SetPanelState -> изберете динамичния панел -> изберете Напред). Можете да направите така, че преходът към конкретна държава, съответно, всяко име да завърже картата ви. За да направите това, вместо Next, трябва да изберете подходящото състояние. Уверете се, че сте маркирали "Покажи панел, ако е скрит".
Ако трябва да програмирате няколко типични взаимодействия (например ефекта при навъртане), препоръчва се първо да настроите един обект и след това да го умножите. Това ще ускори работата.

Поръчка за обратно извикване

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

Бутонът е направен чрез нормален контейнер, към който прилагаме MouseOver за стилове на взаимодействие. Ефектът на придвижване може да се покаже по какъвто и да е начин, в зависимост от уменията на вашия дизайнер. Ако не е достатъчно, можете просто да промените нюансите на сивото върху бутона. Примерът променя запълването, цвета на шрифта и цвета на рамката на контейнера.

Ние правим модален прозорец с помощта на динамичен панел с едно състояние и веднага го скриваме (Hidden). Преди да пристъпите към съдържанието, е необходимо да се предвиди разположението на модалния прозорец точно в средата на екрана. Разбира се, можете да ги подравните ръчно, но поради факта, че различните потребители имат различни височини и ширини на екрана, те може да не се появят в средата. Затова правим следното:

  • Кликнете с десния бутон върху динамичния панел.
  • Изберете Закрепване към браузъра.
  • Поставете отметка "Завъртане в прозореца на браузъра".
  • Изберете Център и среда, след което кликнете върху „ОК“.

Какво е хубаво, след това динамичният панел може да бъде премахнат навсякъде и все пак ще се появи точно в средата.

Появата на модален прозорец се извършва както следва:

  • Изберете бутона за задействане.
  • В Interactions изберете OnClick.
  • В блока Widgets изберете Show / Hide.
  • Намерете желаната джаджа.
  • Параметърът Видимост се превежда на Покажи.
  • В повече опции изберете третира се като lightbox и изберете нещо като сиво и прозрачно като фон.

Модален прозорец се състои от два джаджа Input Field (наречени полето за въвеждане (избрано)), бутон „Поръчка“, кръст за затваряне на прозореца и два етикета, които ще се появят, когато формулярът е изпратен правилно и неправилно.

Кръстът е обикновена икона от набора Икони. Действие - скрийте модалния прозорец, когато щракнете върху кръста. Това се прави по същия начин, както и изгледът на модален прозорец, само в параметъра Видимост превеждаме радио бутона в позиция Скрий.

В заявката за обратна връзка се програмира проста проверка за попълване. Ако в полето "телефон" не бъдат въведени никакви символи, ще се появи съобщение: "Не забравяйте да посочите телефонен номер!". Ако е въведен някакъв символ, съобщението "Приложението е изпратено успешно! Нашите специалисти ще се свържат с Вас скоро!"

За полета за въвеждане можете да зададете текст за намек - текст с намек какво да въведете в това поле.

Проверката е програмирана както следва:

  • Създаваме два блока с текст на успешно изпращане и неуспешен. Превод в Скритата позиция.
  • На бутона за задействане задайте действие OnClick.
  • В най-горната част на прозореца изберете Edit Condition.
  • В прозореца, който се появява, въведете: text on widget, притурка за поле за въвеждане с телефон, равна, стойност, стойност за празно. В полето Описание трябва да се напише следното: "if text on" Името на притурката за поле за въвеждане с телефона "е равно на" ". Кликнете върху ОК.
  • Изберете Покажи. Можете да добавите анимация, например, само да избледнявате (външен вид) за 1 милисекунда.
  • Добавяне Изчакайте в левия блок, можете да поставите 2 секунди. Използва се за преброяване, например, изчакване между действия.
  • Поставете Скрий и изберете приспособление с предупреждение, че трябва да попълните данните.

Така, ако полето за въвеждане с телефонен номер е празно, когато кликнете върху бутона "Поръчка", ще се появи предупреждение, което трябва да го попълните. Изчезва след 2 секунди.

Съобщението за успех се конфигурира чрез второто условие (случай):

  • При взаимодействието на бутона "Поръчка" кликнете върху OnClick, случай 2 се създава автоматично.
  • Показваме текста с успешно изпращане чрез Show.
  • След това изчакайте (изчакайте), например, секунди 3.
  • И скрий (Скрий) модален прозорец.

Оказва се, че ако първото условие не е изпълнено (т.е. има някаква стойност в полето за въвеждане с телефонен номер), то второто условие е изпълнено. Появява се съобщение, че експертите ще се свържат скоро и след 3 секунди модалният прозорец ще изчезне.

Бутон нагоре

Бутонът "нагоре" се използва за превъртане до първия екран. Позволете ми да ви напомня, че все още сме в съветника „Cap“. Прилагаме го както следва:

  • Добавете икона под формата на стрелка в работното пространство или, например, използвайте триъгълник на контейнера.
  • Превеждаме в динамичен панел и го скриваме (това е панелът, а не самият елемент).
  • След това фиксираме панела на едно място в браузъра. Щракнете с десния бутон на мишката върху панела -> Заключи към браузъра. В прозореца изберете коя страна да го прикачите. Примерът се използва отдясно и отдолу (дясно и долно) с отстъп от 30 пиксела.

Сега трябва да предвидите самият бутон да се показва при превъртане до определена точка на страницата. Кликнете върху празно място в работното пространство -> в Interactions изберете OnWindowScroll -> в най-горната част на прозореца кликнете върху Edit Condition -> В условията изберете value -> кликнете на fx -> в прозореца, който се появява кликнете върху Insert Variable of Function -> изберете функцията в Window Window.scrollY и щракнете върху "OK" -> следващите стойности трябва да бъдат По-големи от и стойност -> В последното поле за въвеждане посочете броя на пикселите, превъртани нагоре. Примерът използва 600 пиксела. В резултат на това в полето Описание трябва да се напише следното: ако "[[Window.scrollY]]" е по-голямо от "600". Сега трябва да изберете самото действие. В Widgets, изберете Show / Hide -> кликнете в списъка на динамичния панел, бутоните нагоре -> в опциите, изберете Bring to front.

Бутонът се появява, сега трябва да го направим да изчезне, когато се прехвърлим на първия екран. За да направите това, кликнете отново върху Interactions on OnWindowScroll -> Case 2 ще се появи, с условието Else If True -> в Widgets изберете Show / Hide -> потърсете бутона up и изберете hide.

По избор можете да направите ефект, когато задържите бутона нагоре, като използвате две състояния (State), OnMouseEnter и OnMouseOver.

Фон с пълна ширина

Много елементи на обекта се простират по цялата ширина на екрана, включително капачката. Това може да стане по два начина: чрез обикновен контейнер и OnPageLoad и с помощта на динамични панели. За капачката изберете втората опция.

  • Ние превеждаме всеки контейнер в динамичен панел, оставяйки го празен (премахване на контейнера или прозрачност).
  • В Свойствата на динамичния панел откриваме рекорда 100% Wide (само браузър) и поставяме отметка.
  • В Стил в цвят на гърба ние поставяме цвета, в случая на нашия прототип е бял или #FFFFFF.

Сега панелът автоматично ще се простира до всяка резолюция.

Фиксирано меню

Фиксираното меню е, когато при превъртане надолу част от навигационните елементи от заглавието останат в най-горната част на екрана.

Това се прави, както следва:

  • Първо, определяме кои елементи ще бъдат във фиксирана капачка. В примера това е по-малка версия на логото, меню без изскачащи елементи и бутон за поръчка за повикване.
  • След това копирайте избраните елементи и преведете в отделен динамичен панел.
  • Скрит (динамичен) панел.
  • Вторият капак на субстрата прави цялата ширина, както в предишния пример.
  • Щракнете с десния бутон на мишката върху панела -> Завърти към браузъра -> В хоризонталния щифт, изберете Център, във Вертикалната Pin - Top. И добре.
  • Сега трябва да настроите външния вид на фиксирана капачка. Това се прави по аналогия с бутона нагоре. За да направите това, в страницата Interactions в OnWindowScroll създаваме третия случай (щракнете с десния бутон върху OnWindowScroll -> Add Case).
  • Добавете условие. В условията, изберете стойност -> кликнете върху fx -> в прозореца, който се появява, щракнете върху Вмъкване на променлива на функцията -> Изберете функция Window.scrollY в прозореца и натиснете "OK" -> следващите стойности трябва да бъдат По-големи от и стойност -> В последното поле въвеждане, което посочваме чрез броя на пикселите, които се превъртат с фиксирана капачка. Посочете височината на капачката - 120px. В резултат на това в полето Описание трябва да се напише следното: ако "[[Window.scrollY]]" е по-голямо от "120". Сега трябва да изберете самото действие. В Widgets, изберете Show / Hide -> щракнете в списъка в динамичния панел на фиксирания заглавие -> в опциите, изберете Bring to front. За плавен външен вид на капачките, можете да зададете анимация надолу.
  • Също така е важно да се промени състоянието на задействане на третия случай, тъй като по подразбиране е Else if true, т.е. преди това условието If е вече зададено за бутона за нагоре. Затова сега трябва да щракнете с десния бутон на мишката върху случай 3 и да изберете Toggle if / if else.
  • След това задайте условието 4 Case (Добавяне на случай), където фиксираната заглавка ще бъде скрита, ако превъртим нагоре и пресечем границата от 120 пиксела. В този случай е достатъчно да скриете фиксирания заглавие (Hide).

Първият екран или как да направите паралакс и разтегнете изображението до ширината.

В допълнение към основното изображение, на което искаме да приложим паралаксния ефект и да го разтегнем, има стрелка, при щракване върху нея, тя се придвижва към втория екран. Той прави това по аналогия с бутона нагоре.

  • Дайте име на елемента (можете да създадете прозрачна точка, създадена предварително), към която трябва да се извърши свитъка.
  • Изберете стрелката, в Properties кликнете OnClick.
  • В списъка Действия изберете Превъртете до Приспособление (Anchor link), след което намерете нашия елемент, маркирайте Scroll вертикално само. Можете също да изберете анимация, например Swing.

Разтегнете изображението по ширина

Преди това разтягахме динамичните панели по цялата ширина на екрана, като използвахме само запълването. Нека ви покажа как да разтегнете изображението. За това:

  • Създайте динамичен панел на базата на който и да е елемент, след което го изтрийте и разпределете панела към приблизителния размер по височина на изображението.
  • В Свойствата на динамичния панел откриваме рекорда 100% Wide (само браузър) и поставяме отметка.
  • В Style ще намерите Back image -> click import и изберете изображението на компютъра.
  • В падащото меню, където е избрано Без повторение, изберете Stretch to Cover.

Примерът показва, че самият динамичен панел е с ширина 300 пиксела, като се простира до цялата ширина на екрана.

Как да направим паралакс ефект

Ефектът на паралакса (например вертикален) се създава чрез забавяне на превъртането на някои елементи на фона на други. Той се задава, както следва:

  • В страницата за взаимодействие (т.е., когато не е избран елемент), използвайки функцията OnWindowScroll.
  • В Widgets, изберете Move -> кликнете върху желания елемент (в нашия случай това е динамичен панел с изображението на bonsai) -> в свойствата трябва да бъде избран Move to, щракнете върху полето за въвеждане y на fx.
  • Както и в предишния пример с бутона нагоре, изберете Window.scrollY -> тогава ще трябва да настроите формулата с ръцете си, като добавите в полето за въвеждане, за да получите следните стойности: [[Window.scrollY * 0.25]]. Стойност 0,25 означава закъснението, с което елементът ще се движи. Може да се регулира според вашия вкус.

Втори екран или ползи за справяне с проблема

След това прилагаме друг ефект при превъртане, а именно красивия външен вид на предимствата. Този елемент на творчеството не беше достатъчен, затова ги нарекох според позицията им. Това са само два текстови джаджа с текст за заглавие и риба, както и икона. Ако при създаването на прототип е необходимо да се осигури това съдържание, тогава го правим по-съзнателно, а не по пример.

Алгоритъмът за външен вид е приблизително същият като този на бутона нагоре. Най-важното тук е да се отгатне, когато достигнат разстоянието. Самият външен вид може да бъде реализиран чрез движението, но примерът го улесни. Самите елементи не се движат никъде, те се появяват (Покажи) с анимация (Анимация), плъзгаща се наляво (плъзгайте се наляво), нагоре (плъзгайте нагоре) и надясно (плъзнете надясно).

Третият полу-екран или видове стоки

Цель данного блока показать, какую можно сделать анимацию при наведении на карточку товара или категорию, как на примере. Для этого, как ранее говорилось достаточно создать один элемент, заранее подогнанным по размеру. На примере, его ширина составляет 300 px, т. е. на экране уместиться ровно 4 элемента.

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

  • Берем контейнер заданного размера (или подходящее изображение, как на примере) и переводим в динамическую панель (назовем ее "Бонсай в сортах").
  • Внутри динамической панели с изображением создаем контейнер с прозрачностью (29 на примере), добавляем текстовые блоки с описанием (белого цвета для контрастности). Потом все это переводим в динамическую панель (назовем "Бонсай в сортах слайд"). Расположим его сразу после основного изображения. Таким образом, через окошко динамической панели "Бонсай в сортах" в 300 на 300 пикселей, динамическая панель ("Бонсай в сортах слайд"), которая находится внутри, не будет видна.
  • Далее, делаем так, что при наведении на динамическую панель "Бонсай в сортах" передвигалась панель "Бонсай в сортах слайд". За да направите това, изберете панела „Бонзай в разновидности“, изберете в „Interactions OnMouseEnter“.
  • В Widgets, изберете Move, изберете "Bonsai в разновидности на слайда" в списъка на елементите и в условията, където y сме зададени -300 (движение по оста y с минус 300 пиксела, т.е. нагоре). На ход трябва да бъде стойността на от. Можете да добавите анимация, например Swing.
  • За да изчезне панелът, процедурата е еднаква, само трябва да изберете OnMouseOut и стойността трябва да е положителна.

Когато един елемент е готов, той може да се умножи по четири. И там, ако е необходимо, във всяка промяна на изображението и описанието.

Четвърти екран или действие на акции

В този блок има някакво хулиганство и безсмислени декорации.

Обратен доклад

С тези елементи обикновено не си струва да се притеснява, а понякога е достатъчно да се определи картина или блок. Но ако има желание, можете да приложите промяна на минути и секунди. Единственото отрицателно нещо е, че то не е толкова технологично напреднало, колкото изглежда (ако майсторите на Axure прочетат тази статия и знаят как да го направят с кратка формула, пишат, защото това знание не се намира в буржоазията).

  • Създаваме няколко контейнера за всяка цифра, които наричаме, за да не се объркваме (например, "Единици, секунди", "Десетки секунди").
  • В страницата за взаимодействие (запомнете, премахнете избора от елемента) кликнете върху OnPageLoad.
  • В Widgets, вземете Set Text и в елементите изберете "Units of seconds" и задайте стойността на 8.
  • В Widgets вземаме Wait и задаваме стойността на 1000 ms (т.е. 1 секунда).
  • В Widgets, вземете Set Text и в елементите изберете "Units of seconds" и задайте стойността на 7.
  • В Widgets ние вземаме Wait, залагаме стойността на 1000 ms.

Повторете толкова пъти, колкото не сте доволни от резултата. Веднъж преброен до 10, променяме десетки секунди и преброяваме до 60 минути. В същото време не е необходимо всеки път да избирате елементи в Widgets с писалки. В полето Организиране на действия можете да ги копирате и поставите.

Накланящи се елементи

За да завъртите елемент, просто преместете курсора в ъгъла и задръжте клавиша Ctrl. След това завъртете мишката. Разработчиците не са измислили велосипед и са го внедрили както във всички графични редактори.

Веднага след брояча има елемент, който постоянно променя позицията си. Реализацията му е подобна на предишния пример с таймер, с единствената разлика, че изпълнението е по-просто:

  • Вземете текста джаджа, задайте стойността на "1000 рубли", наклонете в една посока.
  • Превеждаме го в динамичен панел и копираме първото състояние (State).
  • Второто състояние се накланя в другата посока.
  • На страницата за взаимодействие изберете OnPageLoad.
  • В Widgets, изберете Set Panel State и в колоната Select state изберете next. Отбелязваме обвивката от последното към първото (използвайки този цикъл). Също така поставете отметка в Repeat всеки. Числото в милисекунди показва скоростта, с която държавата ще се заменя. Можете също да добавите анимация. И кликнете върху „OK“.

По този начин можете да приложите всяка анимация. Като пример направих заек анимация и по-подходящо за работа, анимация за зареждане.

Ефект на изрязване

Друг хакер на живота е налагането на контейнер, наречен "нарязан по поръчка" на друг обект, като например изображение. За да направите това, вземете контейнера, в Properties -> Select shape -> Convert to custom shape. След това кликнете върху елементите или добавите нови.

Пети екран или как да качите YouTube видео към прототип

Можете просто да направите видео в прототипа. В библиотеката по подразбиране трябва да намерите приспособлението Inline Frame. Публикувайте го в работното пространство, както бихте искали да бъде разположен видеоклипът. След това кликнете върху този елемент. В появилата се връзка изберете външен url или файл и в полето за въвеждане въведете url на формата //www.youtube.com/embed/b5dexpeO-l4. Можете да го получите в YouTube, като кликнете върху бутона „споделяне“ под видеото и изберете кода на html. Пренебрегваме самия код, като копираме само URL от примера по-горе.

Шести екран или как да направите плъзгач в Axure

Достигнахте типичен елемент, който вероятно вече знаете как да го направите. Но ако вие свиквате само за това, ще повторя от самото начало.

  • Взимаме контейнер или друг обект, който може да посочи съдържанието на плъзгача.
  • Превеждаме го в динамичен панел.
  • Копиране или добавяне на състояние (държава). Например, обичайният контейнер е копиран, на който е написано "Slide 1".
  • Добавете елементи, които могат да бъдат спусъка, за да превключите плъзгача. Можете да го превключите автоматично, като използвате примера, който по-рано беше обсъден, като използвате страницата Interactions и OnPageLoad. Тук използваме иконите със стрелки, като ги поставяме отляво и отдясно.
  • На иконата в Properties висим OnClick. В Widgets вляво изберете Set State State. В списъка ще намерите необходимия динамичен плъзгач. В състояние Избор, от бутона вдясно, изберете Напред, от бутона вляво - Предишен и отбележете Преливане от първо към последно. Анимацията се извършва съответно от бутона вляво, ляво, ляво, дясно.

Седмият и осмият екран или информацията за компанията и последните статии

Типични обекти, които могат да се поставят, както ви харесва (естествено следвайки логиката и мерната мрежа). Блокът "Нови материали в нашия блог" се реализира чрез прозрачен контейнер, който се показва напред (Front). Ръчката за навигация е зададена чрез MouseOver.

Девети екран или как да мине

Картата може да бъде обозначена по няколко начина:

  1. Контейнер с подпис е карта.
  2. Снимка от Google Карти или Яндекс.Карта.
  3. Чрез вмъкване на пълна интерактивна карта в прототипа.

Как да направите първия в първите два случая, можете сами да го разберете, но как да приложите третия вариант, трябва да разгледате по-подробно.

Първо трябва да използвате същата джаджа по подразбиране, която използвахме, за да вмъкнем видео от YouTube - Inline Frame. Поставете го на работната зона, тъй като ще бъде удобно. След това трябва да вземете с Yandex.Maps кода, който вече трябва да поставите чрез препратка в самата притурка:

  • Кликнете два пъти върху рамката на вградения елемент
  • Вмъкване на връзка към външен URL адрес или файл.

Сега да разгледаме как да получим кода от Яндекс.Карта:

  • Отидете на //yandex.ru/maps/.
  • Карам в желания адрес от контактите.
  • В долния ляв ъгъл до инструментите печат и обратна връзка, ние намираме бутона "споделяне" и кликнете върху него.
  • От полето "insert code to the site" копираме само част от URL адреса, която изглежда така: //yandex.ru/map-widget/v1/-/CBQX48GkdD

Сега трябва да разтегнем картата до пълната ширина на екрана. Не е възможно да се приложи чрез динамичен панел, трябва да използвате втория метод:

  • На страницата за взаимодействие изберете OnPageLoad.
  • В Action (Действия) изберете Set Size (Настройка на размера) и кликнете върху нашия елемент Inline Frame.
  • В Ширина кликнете върху fx.
  • Кликнете върху Insert Variable of Function.
  • От списъка изберете Window.width и кликнете върху „OK“.
  • В падащия списък Anchor изберете Top или Center.

мазе

Елементите в сутерена могат условно да бъдат разделени на два блока - формуляр за абонамент и вид на самата допълнителна информация. Последното няма смисъл да се описва отделно, но на абонаментната форма си струва да се спре по-подробно, тъй като това е леко сложна версия на поръчката за обратно извикване.

В формата за обратно извикване ние посочихме, че ако полето е празно, то тогава се попълва неправилно. С формуляра за абонамент можете да укажете наличието на символа @.

  • Създаваме два блока с текст на успешно изпращане и неуспешен. Превод в Скритата позиция.
  • На бутона за задействане ние поставяме OnClick действие.
  • В най-горната част на прозореца изберете Edit Condition.
  • В появилия се прозорец въведете: text on widget, поле за въвеждане на притурка от e-mail, не съдържа стойност, @. Полето Описание трябва да напише следното, ако текстът на имейла не съдържа "@". Кликнете върху ОК.
  • Изберете Покажи. Можете да добавите анимация, например, само да избледнявате (външен вид) за 1 милисекунда.
  • Добавяне Изчакайте в левия блок, можете да поставите 2 секунди. Използва се за преброяване, например, изчакване между действия.
  • Поставете Скрий и изберете приспособление с предупреждение, че трябва да попълните данните.
  • Добавете втория случай (Дело).
  • Изберете Покажи / Скрий.
  • Кликнете върху текстовата джаджа с успешен дизайн.
  • Изберете Wait и задайте стойността на 2,000.
  • Скриване на съобщението за успешно изпращане чрез Hide.

заключение

Както бе споменато в началото, това е само първата част. В бъдещите статии ще има каталог, продуктова карта, личен акаунт и други разрешения. Можете също така да оставите в коментарите въпроси относно изпълнението на елементите - може би аз ще говоря за тях в следващите статии.

Както обещах, предоставям безплатни библиотеки от елементи, както и готов прототип, който разглеждахме в тази статия. За целта използваме услуга, която ще осигури връзка за споделяне в социалната мрежа.

Изтеглете библиотеки (елементи и икони) и готовия прототип Axure. KAK-sdelat-prototip-V-axure-RP-esli-nichego-V-etom-Ne-ponimaesh
#
Използване наИнструментиУеб програмиране

Гледайте видеоклипа: Показаха прототип на хуманоиден робот холограма във Варна (Април 2020).

Loading...

Оставете Коментар