How to make a prototype in Axure RP if you don’t understand anything

Axure RP is the most famous and popular prototyping software for websites and applications. Sufficiently deep to make complex elements, while being light enough so that after ten minutes of tinkering in the interface prepare the layout. Of course, it is far from the only one - there are many other ways to make a prototype.

One of the main features of Axure (compared to competitors) is the ability to program the behavior of buttons, containers, widgets. Based on this, the resulting prototype can be made so that it will function as a full-fledged website / application.

Disclaimer: this is my first article. I do not know how to write, but there is accumulated experience. Therefore, based on this article. I hope the material will be useful. Hyde does not claim the ultimate truth - some decisions and thoughts are subjective, although they are tested on many projects.

In terms of the structure of the guide, it will be as follows:

The article is attached to the considered prototype in the .rp format, which can be downloaded as an example. Used libraries with icons, ready-made widgets are attached to the prototype.

The considered prototype will be located on the link //fys0bf.axshare.com.

For each example considered, a video instruction is attached. So you should have no problems, as in some design textbooks.

A little bit about UX / UI

In short, UX (User Experience) is an experience, how the user perceives the interface, what emotions they experience when interacting with it. UI (User interface) - this is what he sees, what interacts with.

The interface can be anything: a hammer, pliers, a refrigerator, an airplane dashboard, a slow cooker, etc. The first three do not cause questions - you can use them without even thinking, you will have to pick it up, but you can’t handle the plane professional pilot.

If you draw a parallel with a hammer, then the hammer UI is a handle, a hammer and a sock. UX hammer is what a person feels when hammering a nail.

When designing an interface, one should strive to make it as simple as the interface of a hammer or a stick-digger. Any complication will make users strain their heads, and they do not like it.

The best interface is when users do not even notice what it is, but simply get what they need without feeling uncomfortable — place an order, read an article, buy a ticket, etc.

As Steve Jobs said: "Design is not how the device looks, but how it works." Accordingly, the main goal is to make it work so that users do not hesitate in the process. About the presence of the interface is usually remembered in two cases:

- He is uncomfortable. Small buttons, you need to "aim" to click. Line spacing is too short, you have to peer. There is a lot of useless information on the landing page, and the conversion element must also be found. Well, you understand.

- Professional. Who works with interfaces or is interested in the topic, will pay attention to how well it is made.

For those who are in the tank: where is the prototype of an online store and such high notions of "what the user feels"? And besides. The convenience of the future interface should be thought out at the level of the skeleton, the paths of a person’s passage through the site (Customer journey mapping). Naturally, at the design level, a lot of things will be adjusted, added colors, images. But the base is preserved, and it is laid just at the stage of creating a prototype.

In general, we can formulate the following "benefactors":

- Simplicity. Do not try to make it more elaborate, more difficult. Simplify, shorten.

- Templates Do not try to think of a bicycle, a new interface element, a special feature that is not found anywhere. The more typical elements on the site in their places, the greater the chance that the user will understand what they are for. This rule is suitable, of course, when creating something typical. If you are developing a new service, or an interface on a new platform (say, for virtual reality glasses), you need to experiment.

- The target audience. No matter how trite it may sound, you need to understand for which Central Asia the interface is intended. Age, gender, education, scope, level of wealth. All this should be taken into account when forming the prototype. For example, if your landing page is focused on selling very expensive watches, then you can not use screaming slogans about discounts, a huge CTA button on each screen or a flashing counter, which left 10 minutes to place an order at a bargain price. In case LP represents earnings on the Internet in the network marketing system (magic dietary supplements that allow you to talk with a deceased grandmother), then such elements will be more than appropriate. I will say even more: their use will help weed out the target treatment at the interface level.

- Competitors. Some of the famous people said: "Good artists copy, great artists steal." Actually steal ideas when designing interfaces from competitors. Competitors can be both direct and indirect. I also recommend spying on good solutions on foreign sites.

The purpose of this material is to show how to make a prototype in Axure RP. Therefore, further there will be no further questions raised as to why this element is placed so differently.

Principles and features of prototype in Axure

Before you begin designing the interface, it is important to understand for what purpose you plan to use it. It will depend on this to what extent this guide should be used as a direct instruction:

- If you make a prototype of the site, in order to later give to the design and then attach to the technical task - it is for such a scheme that the guide is calculated.

- If you are a designer, customer (and you have a product vision and need to convey it) or you need to prepare a working scheme for the demonstration - you can add more images, bother with deep programming of elements, play with color. It is also recommended to make an adaptive version within one page.

In general, the requirements for prototype design have been formulated long ago, in this material. I will transfer the most important and relevant ones, plus I will add from practice:

  • All through elements (hat, basement) are made through the master.
  • Do not do leapfrog with styles, fonts. It's about headlines, the main text.
  • All elements in which interactivity will be (slider, banners, drop-down lists, etc.) will be implemented through Interactions. This is necessary in order to visually understand which elements are static and which are not.
  • The ideal prototype must be linked to make it clear where the transition takes place when clicking on an element. Text links are underlined, pseudo links are indicated by a dotted line.
  • The prototype is made under typical pages. For example, an online store is: home, catalog, product card, contacts, plain text page (payment, delivery, about the company), personal account, payment steps. Depending on the volume and requirements, FAQ, articles, contacts in different cities, etc. can be added.
  • The prototype should be made on a dimensional grid.
  • If there is already a ready text for the prototype, you need to use it. It is allowed to use fish text (Lorem Ipsum), but you need to understand approximately how much text the text will have in the end.
  • Headings, text in pop-up windows, menu items - should be meaningful. Even if it is later changed during the editing phase, you can write a "working" title that conveys the meaning.
  • Everything should be very schematic, without coloring elements. But there are exceptions. To demonstrate a result close to the final type to a customer (management, colleagues, testers), sometimes it makes sense to add full-color images, logos and color solutions.
  • All interactive elements, pages, masters, some objects should be meaningfully named.
  • It is recommended to close prototypes with a password. By default, they are available simply by a direct link of the form 23oh42.axshare.com.
  • It is necessary to work out the hierarchy at the page level, so that nesting is visible.
  • For each resolution, it is recommended to make a separate page: this will help to avoid confusion when making up at all further stages: design, drawing up TK, layout, programming. Each permission to separate folders.
  • You can use the start screen on which it will be written that for the project, the version of the project, who makes the prototype and links to basic permissions. This item is optional.

Axure has its own "chips", which distinguish it from competitors, here is their incomplete set:

  • Prototypes are built on the basis of basic elements, as in the constructor. Elements in turn are combined into libraries. These can be icons, text boxes, buttons, selected fonts, as well as complex objects with many dynamic panels.
  • Most of the basic elements are rectangular containers. Even fish text or headings look like a container with a transparent background with a retracted border. In the same way, in any container you can place the text and format it in any way.
  • Dynamic panels. To create complex interactive elements you will need to use dynamic panels. This is an object or a group of objects that are transferred to a separate infinite area, within which you can also create an infinite number of working areas, states (State) both at the same level and at the next level of nesting. This scheme is best illustrated by a dream inside a dream from the movie "The Beginning". Dynamic panels themselves can be hidden, moved, changed content on pages. With their help, tabs, modal pop-ups, complex hover effects, page loads, etc. are implemented.
  • Master. As mentioned above, the master is not only an interesting feature, but also a vital condition. With it, you can implement through elements that will be unchanged on all pages: header, basement, subscription form, product card in the list. The master is essentially a dynamic panel, only it has a separate workspace (by default in the lower left corner) and the "add / remove on all pages" functionality. The question arises, what is the difficulty in simply copying the element to each new page? So it is, if the prototype consists of 2-3 pages and you can not bother with the master. But if pages 20, and in the process of work, you need to make changes to the end-to-end element, you will have to make changes on all pages, which is extremely inconvenient.

Size chart

Dimensional grid is designed to make some organization. It’s like comparing A4 album sheet and graph paper: you can draw a drawing on a blank sheet, but it's much more convenient to implement it using markup.

The prototype will use a 16-column grid for a screen width of 1280 pixels.

When calculating the size of the grid is recommended to use the service gridcalculator.dk.

The default document is missing raslinovka and guides. Therefore, before starting work on a prototype, you need to create it. For this you need:

  • Click the right mouse button on an empty space in the workspace.
  • Choose Grid and Guides à Create Guides.
  • Then you can choose from presets or set your own.

It is recommended to fasten the guides so that they do not move accidentally during work. To do this, right-click on an empty place and select Grid and Guides à Lock guides. You can also create a point grid: Grid and Guides à Show Grid.

The topic of grids for responsive design is well disclosed in this article on Habré.

Interface overview

The Axure interface is fairly simple to read and has a low entry threshold. At the same time, it is complex enough to enable all its functions. The working screen can be divided into the following elements:

  1. Main Toolbar, Style Toolbar and Main Menu.
  2. Pages.
  3. Libraries.
  4. Masters.
  5. Workspace.
  6. Interactor.
  7. Outline.

Further details about each.

Main Toolbar, Style Toolbar and Main Menu

The Main Toolbar is a toolbar that, in one way or another, affects the movement of a widget or a group of widgets around the screen. Moving is meant by the workspace when working with an object, and not its interactivity for the user. In this toolbar you can:

Change the way the widget is selected (either completely or partially). Immediately Connect Tool - to connect widgets, you can use when compiling mind maps (Mind map).

Pen - pen tool as in Photoshop. You can cut an unwanted element from the widget.

More - a set of elements from which you will use only a trimming (Crop). But it will be much more convenient to use it through the context menu (right click on the element).

Zoom. Scale change. Convenient to see what the current scale is for the work area. To zoom in, I recommend using the classic functionality: Ctrl + scrolling with the mouse wheel.

Front / Back. To adjust the layers of widgets. Often, widgets are layered on each other, using these buttons you can adjust their level.

Group / Ungroup. To group widgets and remove them. It is often used if one group of elements needs to be aligned with another group of elements. Hot keys are convenient enough to use one left - Ctrl + G to group objects, Ctrl + Shift + G to remove groups.

Align / Distribute. To align objects: in the center, along the edges, evenly position objects in a row. Clearly this can be viewed at the link. From this link you can see how grouping and alignment of groups of elements work.

Lock / Unlock. Lock item Needed for fixing the element in order not to accidentally move.

Left / Right. You can remove the left and right areas with tools to allocate more space under the working area.

Preview / Share / Publish. See what the prototype looks like in a browser. Preview allows you to generate a project in the browser locally. But quickly press F5. Publish - can be sent to the Axure server, where it will be accessible to anyone (unless it is password protected).

Style Toolbar is a toolbar that is responsible for appearance, size, formatting.

  • Font formatting, type, size, color, text alignment - everything is pretty standard.
  • Also, the blocks themselves can change the size of the border, add shadow, change the color of the blocks, the color of the borders. It is possible to set different levels of transparency or a linear gradient.
  • The ability to change the position of the object along the x and y axis, the size of the length and height (with the ability to change the size proportionally).
  • The ability to make the object invisible (Hidden).

Interaction with the Style Toolbar can be viewed in the video link.

Pages

In this block, the prototype hierarchy is formed, the pages themselves. You can also create folders for easy page breaks. To quickly create a page, you can press Ctrl + Enter. To correct the hierarchy, either the arrows in the interface, or Ctrl + arrows on the keyboard.

Libraries

Themselves widgets with the ability to choose a library. Widget libraries are standard ones that come with the program. The Internet is full of user libraries (google with the query "Axure libraries download"). You can even make the library yourself for convenience - for example, a library of specialized icons, toolbars, tabs, etc. Together with a ready-made prototype, as mentioned in the beginning, an extensive library will be attached, use it to your health.

The toolbar itself is fairly easy to use - just drag the desired widget onto the workspace.

Masters

The block with the masters, as mentioned above. Wizards on the pages can be added either manually by dragging onto the workspace as a widget, or via Add Pages (right mouse button on the wizard). Creating, adding and working with masters can be viewed on the video. The master can be created of two types: locked in one place and with the ability to move. The site header can be created fixed on that place (Lock to Master Location) where it was created, and the rest can be done better without (Place Anywhere).

Workspace

The workspace is the place where the prototype is constructed. Used pages, wizards, dynamic panels are arranged in tabs above the working area.

Interactor

In short, with the help of this toolbar, the whole action is programmed. It consists of three tabs: Properties, Notes, Style.

Properties

A set of events that can be enabled for a specific interaction of an element or group of elements. There are only about 30 of them, but they are usually used in pieces of 5 of them:

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

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

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

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

Shape

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

Interaction styles

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

  • MouseOver - change object on hover. Used to highlight links, borders of an element.
  • MouseDown - click on the item. At the same time, the element itself supports this change while the mouse button is held down.
  • Selected - change for the selected value. It works in conjunction with changing the value in Interactions.
  • Disabled - similar in mechanics to selected, only the semantic meaning is "disabled".

Notes

Allows you to leave comments on each item. This can be useful when you need to describe the work of the widget, but there is no possibility to program it, or it is not so visual and it is necessary to explain it with the text.

Style

Partially duplicates the Style Toolbar functionality, with only a few features. With the selected element allows you to edit the line spacing, as well as internal indents for the text in the container. If the item is not selected, the following options appear:

  • Set color for all pages.
  • Pour the image on the background.
  • Make the prototype black and white.
  • Apply a hand-drawn sketch to the prototype.
  • The ability to set the positioning (Page Alignment) of the prototype in the center of the page, and not by default to the left.

Outline

This toolbar contains all the widgets that are used on the page. When you click on an item in the list, it will be highlighted in the workspace. Most often, this area will be used to search for dynamic panels and their states (State).

Hot Keys and LifeHacks

There are hotkeys for many actions in Axure. But far from all of them are convenient to press, because you need to use two hands, which is sometimes not justified and easier to click the mouse. Therefore, the list will be at least small, but tested and recommended for use. Here I will also include some techniques that help speed up the workflow.

  1. The clamped space allows you to move the workspace instead of a vertical or horizontal scroll.
  2. Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 - standard functionality, it is recommended to use.
  3. With the cipher clamped, you can move the widget along the working area exactly along the x and y axis.
  4. Pressing Ctrl while the selected object will copy the widget. If you hold Shift while holding the copied object, it will remain in line with the original.
  5. Ctrl + G - grouping widgets. Ctrl + Shift + G - remove grouping.
  6. F5 - browser preview mode. In the future, you can simply update the tab in the browser to see the changes.
  7. F6 - opens a window for publishing a prototype to the Axure server.
  8. Unfortunately, in Axure there is no built-in ability to estimate the distance between objects, as implemented in Sketch and in the new Adobe XD. But you can use the "crutch" in the form of a regular rectangle. The procedure is simple, but for every fireman there is a video.
  9. Axure provides smart guides. This is necessary for accurate positioning of objects relative to each other. When you drag them, the borders and center of other objects are shown (by default, in the form of turquoise lines). Accordingly, when dragging, it is recommended to navigate to them so that the prototype is smooth and clear.
  1. It is recommended to set the positioning on the center of the page. The point is not only that it looks more pleasant to the eye, but also in the positioning of objects. If dynamic panels are pinned to a specific place on the screen, an offset will occur if the page content is by default (left).
  2. Dynamic panels or objects that will later be used in interaction programming should be meaningfully named. Otherwise, the desired object will be difficult to find in the list.

The prototype of the main online store (desktop).

Entry ended, and the discussion of the prototype began. An online store was chosen, since it has the most various functional chips that can be shown, as well as a landing page, the elements of which will be displayed on the main page. It is important to note that this prototype is primarily important in order to show the functionality, how it works, and not as a finished product. Therefore, in order to maximally distance myself from the final application, I chose the topic of selling bonsai, adding a little trash. Accordingly, take the main as a certain set of elements for use, and not as a final instruction on your projects.

The purpose of the prototype is to show the functional, therefore it will be missing pages like "Contacts", "News", "Articles", since these pages in terms of functionality cannot demonstrate anything new.

Cap

The cap is implemented using the wizard. How to create a master has been described previously. In the cap are a few elements that are worth staying in more detail.

Logo

There is no difficulty in this, but one life hack is associated with it. If an element that needs to be active (link to a page or a specific hover action, click), but it itself consists of several elements, you can insert a transparent container on top of it. Thus, in the prototype implemented a logo, a card with relevant articles.

Menu

Bottom underscore is implemented using the Inspector -> Properties -> Interaction Styles -> MouseOver toolbar. In the window that appears, put a tick in the Underline.

Pop-up menu can be implemented in different ways. If it is simple (without additional pop-ups), you can use the ready-made widget.

In the case of the online store selling bonsai, it is difficult. The mechanics are as follows:

  • At the first level there is one dynamic panel with two states (State). In the first state - the text widget "Directory". In the second state, the same widget, only with all menu items. Hovering over an element (OnMouseOver) triggers a switch to the second state (Set Panel State -> choose dynamic panel -> State2 and "Ok"). If the selection from the dynamic panel is deselected (OnMouseOut), it switches to the first state (Set Panel State -> select dynamic panel -> State2 and "OK").
  • Within the second state, another dynamic panel is created, which is hidden (Hidden). Inside we make two states in the form of two product cards with a price, a name and an image. Hovering over the name (OnMouseOver) will cause a transition to the next state (SetPanelState -> choose the dynamic panel -> choose Next). You can make so that the transition to a specific state, respectively, each name to tie your card. To do this, instead of Next, you must select the appropriate state. Be sure to tick the "Show panel if Hidden".
If you need to program several typical interactions (for example, the effect on hover), it is recommended that you first fully adjust one object, and then multiply it. This will speed up the work.

Callback Order

A call back order consists of a trigger, in our case, a button and the most model callback order window.

The button is made through a normal container, to which we apply Interaction Styles MouseOver. The hover effect can be shown in any way, depending on your designer skill. If it is not enough, you can simply change the shades of gray on the button. The example changes the fill, font color and border color of the container.

We make a modal window using a dynamic panel with one state and immediately hide it (Hidden). Before proceeding to the content, it is necessary to provide for the placement of the modal window exactly in the middle of the screen. You can of course align manually, but due to the fact that different users have different heights and widths of the screen, they may not appear in the middle. Therefore, we do the following:

  • Right-click on the dynamic panel.
  • Choose Pin to Browser.
  • Put a tick "Pin to browser window".
  • Select Center and Middle, then click "OK".

What is nice, after that the dynamic panel can be removed anywhere, and it will still appear exactly in the middle.

The appearance of a modal window is done as follows:

  • Select the trigger button.
  • In Interactions select OnClick.
  • In the block Widgets choose Show / Hide.
  • Find the desired widget.
  • Parameter Visibility translate to Show.
  • In more Options, select treat as lightbox and select something gray and translucent as the background.

A modal window consists of two Input Field widgets (called the Input Field (selected)), an “Order” button, a cross to close the window, and two labels that will appear when the form is sent correctly and incorrectly.

The cross is an ordinary icon from the Icons set. Action - hide the modal window when clicking on the cross. It is done in the same way as the appearance of a modal window, only in the Visibility parameter we translate the radio button to the Hide position.

A simple validation for filling is programmed in the callback order form. If no characters are entered in the "phone" field, a message will appear: "Do not forget to specify a phone number!". If any character is entered, the message "The application has been sent successfully! Our specialists will contact you shortly!"

For input fields you can set hint text - text with a hint what to enter in this field.

Validation is programmed as follows:

  • We create two blocks with the text of successful sending and unsuccessful. Translate to the Hidden position.
  • On the trigger button set the action OnClick.
  • At the very top of the window, select Edit Condition.
  • In the window that appears, type: text on widget, input field widget with phone, equals, value, empty value. In the Description field the following should be written: "if text on" The name of the input field widget with the phone "equals" "". Click Ok.
  • Choose Show. You can add an animation, for example, just fade (appearance) for 1 millisecond.
  • Add Wait in the left block, you can put 2 seconds. Used for counting, for example, waiting between actions.
  • Put Hide and select a widget with a warning that you need to fill in the data.

Thus, if the input field with the phone number is empty, when you click on the "Order" button, a warning will appear that you need to fill it. Disappear in 2 seconds.

The success message is configured via the second condition (Case):

  • In the Interactions of the button "Order" click on OnClick, Case 2 is created automatically.
  • We show the text with successful sending through Show.
  • Next, wait (Wait), for example, seconds 3.
  • And hide (Hide) modal window.

It turns out that if the first condition is not satisfied (i.e., there is some value in the input field with a phone number), then the second condition is satisfied. A message appears that the experts will contact soon, and after 3 seconds the modal window will disappear.

Up button

The "up" button is used to scroll to the first screen. Let me remind you that we are still within the “Cap” wizard. We implement it as follows:

  • Add an icon in the form of an arrow to the workspace, or, as an example, use a container triangle.
  • We translate into a dynamic panel and hide it (it is the panel, not the element itself).
  • Next, we fix the panel in one place in the browser. Right-click on the panel -> Pin to browser. In the window choose which side to attach it. The example is used on the right and below (Right and Bottom) with an indent of 30 pixels.

Now you need to provide for the button itself to appear when scrolling to a certain point on the page. Click on an empty place in the workspace -> in Interactions select OnWindowScroll -> at the very top of the window click on Edit Condition -> In conditions choose value -> click on fx -> in the window that appears click on Insert Variable of Function -> select the function in Window Window.scrollY and click "Ok" -> the following values ​​should be Is greater than and value -> In the last input field, specify the number of pixels scrolled up the button appears up. The example uses 600 px. As a result, the following should be written in the Description field: if "[[Window.scrollY]]" is greater than "600". Now you have to choose the action itself. In Widgets, select Show / Hide -> click in the list on the dynamic panel; buttons upward -> in the options, select Bring to front.

The button appears, now we need to make it disappear when we are transferred to the first screen. To do this, once again click in Interactions on OnWindowScroll -> Case 2 will appear, with the condition Else If True -> in Widgets select Show / Hide -> look for the up button and select hide.

Optionally, you can make an effect when you hover the button up, using two states (State), OnMouseEnter and OnMouseOver.

Full-width background

Many elements on the site stretch the entire width of the screen, including the cap. This can be done in two ways: through a regular container and OnPageLoad and with the help of dynamic panels. For the cap, choose the second option.

  • We translate any container into a dynamic panel, leaving it empty (removing the container or making it transparent).
  • In the Properties of the dynamic panel we find the record 100% Wide (browser only) and put a tick.
  • In the Style in the back color we set the color, in the case of our prototype it is white or #FFFFFF.

Now the panel will automatically stretch to any resolution.

Fixed menu

The fixed menu is when, when scrolled down, a part of the navigation elements from the header remain at the very top of the screen.

This is done as follows:

  • To begin with, we determine which elements will be in a fixed cap. In the example, this is a smaller version of the logo, a menu with no pop-up elements, and a call order button.
  • Next, copy the selected elements and translate into a separate dynamic panel.
  • Hidden (dynamic) panel.
  • Substrate second caps do the entire width, as in the previous example.
  • Right-click on the panel -> Pin to browser -> In the Horisontal Pin, select Center, in the Vertical Pin - Top. And OK.
  • Now you need to set the appearance of a fixed cap. This is done by analogy with the button up. To do this, in the Interactions page in OnWindowScroll we create the third case (right-click on OnWindowScroll -> Add Case).
  • Add a condition. In the conditions, select value -> click on fx -> in the window that appears, click on Insert Variable of Function -> Select Window.scrollY function in Window and click "OK" -> the following values ​​should be Is greater than and value -> In the last field input we specify through what number of pixels scrolled fixed cap appears. Specify the height of the cap - 120px. As a result, the following should be written in the Description field: if "[[Window.scrollY]]" is greater than "120". Now you have to choose the action itself. In Widgets, select Show / Hide -> click in the list on the dynamic panel of the fixed header -> in the options, select Bring to front. For a smooth appearance of the caps, you can specify a slide down animation.
  • It is also important to change the triggering condition of the third case, since the default is Else if true, i.e. before that, the If condition has already been set for the up button. Therefore, now you need to right-click on case 3 and select Toggle if / if else.
  • Next, set the condition 4 Case (Add Case), where the fixed header will be hidden if we scrolled up and crossed the border of 120 pixels. In this case, it suffices to hide the fixed header (Hide).

The first screen or how to make parallax and stretch the image to the width.

In addition to the main image, to which we want to apply the parallax effect and stretch it, there is an arrow, when clicked, it scrolls to the second screen. It does this by analogy with the button up.

  • Name the element (you can create a transparent point created in advance) to which the scroll should be performed.
  • Select the arrow, in Properties click on OnClick.
  • In the Actions list, select Scroll to Widget (Anchor link), then find our element, mark Scroll vertically only. You can also select an animation, such as Swing.

Stretch image to width

Previously, we stretched the dynamic panels across the entire width of the screen, only using the fill. Let me show you how to stretch the image. For this:

  • Create a dynamic panel based on any element, then delete it and distribute the panel to the estimated size in height of the image.
  • In the Properties of the dynamic panel we find the record 100% Wide (browser only) and put a tick.
  • In Style we find Back image -> click import and select the image on your computer.
  • In the drop-down menu, where No repeat is selected, select Stretch to Cover.

The example shows that the dynamic panel itself has a width of 300 px, while stretching to the entire width of the screen.

How to make a parallax effect

The parallax effect (for example, vertical) is created by slowing the scrolling of some elements against the background of others. It is set as follows:

  • In the Interactions page (i.e. when no element is selected) using the OnWindowScroll function.
  • In Widgets, select Move -> click on the desired element (in our case, this is a dynamic panel with the image of bonsai) -> in the properties, Move to should be selected, and in the input field y click on fx.
  • As in the previous example with the button up, choose Window.scrollY -> then you will have to adjust the formula with your hands, adding in the input field to get the following values: [[Window.scrollY * 0.25]]. A value of 0.25 means the delay with which the element will move. It can be adjusted to your taste.

Second screen or tackle benefits

Next, we implement another effect when scrolling, namely, the beautiful appearance of advantages. This element of creativity was not enough, so I called them according to their position. It is just two text widgets with a title and fish text, as well as an icon. If at creation of a prototype it is necessary to provide this content, then we do it more deliberately, rather than by example.

The appearance algorithm is about the same as that of the upward button. The main thing here is to guess when they reach the distance. The appearance itself can be realized through the Move, but the example made it easier. The elements themselves do not move anywhere, they appear (Show) with animation (Animate) sliding to the left (slide left), up (slide up) and to the right (slide right).

The third half-screen or types of goods

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

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

  • Берем контейнер заданного размера (или подходящее изображение, как на примере) и переводим в динамическую панель (назовем ее "Бонсай в сортах").
  • Внутри динамической панели с изображением создаем контейнер с прозрачностью (29 на примере), добавляем текстовые блоки с описанием (белого цвета для контрастности). Потом все это переводим в динамическую панель (назовем "Бонсай в сортах слайд"). Расположим его сразу после основного изображения. Таким образом, через окошко динамической панели "Бонсай в сортах" в 300 на 300 пикселей, динамическая панель ("Бонсай в сортах слайд"), которая находится внутри, не будет видна.
  • Далее, делаем так, что при наведении на динамическую панель "Бонсай в сортах" передвигалась панель "Бонсай в сортах слайд". To do this, select the panel "Bonsai in varieties", select in Interactions OnMouseEnter.
  • In Widgets, select Move, select "Bonsai in slide varieties" in the list of elements and in the conditions where y we set -300 (movement along the y axis by minus 300 pixels, i.e. up). At move should be the value of by. You can add animation, for example, Swing.
  • In order for the panel to disappear, the procedure is identical, only you need to select OnMouseOut, and the value must be positive.

When one element is ready, it can be multiplied by four. And there, if necessary, in each change the image and description.

Fourth screen or stock action

In this block there is some hooliganism and senseless decorations.

Reverse Report

With these elements, it is usually not worth bothering, it is enough sometimes to designate a picture or a block. But if there is a desire, you can implement a change of minutes and seconds. The only negative thing is that it is not as technologically advanced as it may seem (if Axure masters read this article, and who know how to do it with a short formula, write, because this knowledge was not found in the bourgeoisie).

  • We create several containers for each digit, which we call in order not to get confused (by the example, "Units, seconds", "Tens of seconds").
  • In the Interaction page (remember, remove the selection from the element) click on OnPageLoad.
  • In Widgets, take Set Text and in the elements select "Units of seconds" and set the value to 8.
  • In Widgets, we take Wait and set the value to 1000 ms (that is, 1 second).
  • In Widgets, take Set Text and in the elements select "Units of seconds" and set the value to 7.
  • In Widgets, we take a Wait. We set the value to 1000 ms.

Repeat as many times as you are not satisfied with the result. Once counted to 10, we change tens of seconds, and having counted up to 60 minutes. At the same time, it is not necessary to select elements in Widgets each time with pens. In the Organize actions field you can copy and paste them.

Tilting elements

To rotate an element, just move the cursor to its corner and hold down the Ctrl key. Next, turn the mouse. The developers did not invent a bicycle and implemented it as in all graphic editors.

Immediately after the counter there is an element that is constantly changing its position. Its implementation is similar to the previous example with a timer, with the only difference that the implementation is simpler:

  • Take the text widget, set the value to "1000 rubles", tilt in one direction.
  • We translate it into a dynamic panel and copy the first state (State).
  • The second state is tilted in the other direction.
  • In the Interactions page, select OnPageLoad.
  • In Widgets, select Set Panel State and in the Select state column, select next. We tick the wrap from last to first (using this we loop the process). Also, put a tick in Repeat every. The number in milliseconds indicates the speed with which the state will replace each other. You can also add animation. And click "OK".

This way you can implement any animation. As an example, I did a rabbit animation, and, more appropriately for work, a loading animation.

Cut Out Effect

Another life hack is the imposition of a custom-cut container on another object, such as an image. To do this, take the container, in Properties -> Select shape -> Convert to custom shape. And then clicking on the elements or adding new ones will give any shape.

Fifth screen or how to upload Youtube video to prototype

You can simply make a video in the prototype. In the default library, you need to find the Inline Frame widget. Post it on the workspace as you would like the video to be located. Then click on this item. In the appeared select link to an external url or file and in the input field enter the url of the form //www.youtube.com/embed/b5dexpeO-l4. You can get it on YouTube by clicking on the "share" button under the video and selecting the html code. We ignore the code itself, copying only the URL from the example above.

Sixth screen or how to make a slider in Axure

Reached a typical element that you probably already know how to do. But if you scroll here only for this I will repeat from the very beginning:

  • We take a container or any other object that may indicate the contents of the slider.
  • We translate it into a dynamic panel.
  • Copy or add state (State). For example, the usual container was copied, on which it was written "Slide 1".
  • Add items that can be a trigger to switch the slider. You can make it switch automatically, using the example that was previously discussed using the Interactions page and OnPageLoad. Here we use the arrow icons, placing them on the left and right.
  • On the icon in Properties we hang OnClick. In Widgets on the left, select Set Panel State. In the list we find the required dynamic slider panel. In Select state, on the button to the right, select Next, on the button on the left - Previous and tick Wrap from first to last. Animation is done respectively on the button to the left slide left, right slide right.

The seventh and eighth screen or company information and recent articles

Typical objects that can be placed as you like (naturally following the logic and dimensional grid). The block "New materials in our blog" is implemented through a transparent container that is displayed forward (Front). Hover edge is specified via MouseOver.

Ninth screen or how to pass

The card can be designated in several ways:

  1. A container by signing it is a card.
  2. Screenshot from Google Maps or Yandex.Maps.
  3. By inserting a full interactive map into the prototype.

How to do the first in the first two cases, you yourself can figure it out, but how to implement the third option, you need to consider in more detail.

First you need to use the same default widget that we used to insert a video from YouTube - Inline Frame. Place it on the working area, as it will be convenient. Next, you need to take with Yandex.Maps the code that you already have to place by reference in the widget itself:

  • Double click on the element inline frame
  • Insert Link Link to an external url or file.

Now let's look at how to get the code from Yandex.Maps:

  • Go to //yandex.ru/maps/.
  • We drive in the desired address from the contacts.
  • In the lower left corner next to the tools print and feedback, we find the button "share" and click on it.
  • From the field "insert code to the site" we copy only a part of the URL, which looks like this: //yandex.ru/map-widget/v1/-/CBQX48GkdD

Now we have to stretch the map to the full width of the screen. It’s impossible to implement through a dynamic panel, you need to use the second method:

  • In the Interactions page, select OnPageLoad.
  • In Actions, select Set Size and click on our Inline Frame element.
  • In Width click on fx.
  • Click on Insert Variable of Function.
  • From the list, select Window.width and click on "OK".
  • In the Anchor drop-down list, select Top or Center.

Basement

Elements in the basement can be divided into two blocks conditionally - the subscription form and the type of additional information itself. The latter does not make sense to describe separately, but on the subscription form it is worthwhile to stop in more detail, since it is a slightly complicated version of the callback order.

In the callback form, we indicated that if the field is empty, then it is filled incorrectly. With the subscription form, you can indicate the presence of the @ symbol.

  • We create two blocks with the text of successful sending and unsuccessful. Translate to the Hidden position.
  • On the trigger button we set the OnClick action.
  • At the very top of the window, select Edit Condition.
  • In the window that appears, type: text on widget, widget input fields from e-mail, does not contain, value, @. The Description field should write the following if text on E-mail does not contain "@". Click Ok.
  • Choose Show. You can add an animation, for example, just fade (appearance) for 1 millisecond.
  • Add Wait in the left block, you can put 2 seconds. Used for counting, for example, waiting between actions.
  • Put Hide and select a widget with a warning that you need to fill in the data.
  • Add the second case (Case).
  • Choose Show / Hide.
  • Click on the text widget with a successful design.
  • Select Wait and set the value to 2,000.
  • Hide the message about successful sending via Hide.

Conclusion

As mentioned in the beginning, this is only the first part. In future articles there will be a catalog, product card, personal account and other permissions. You can also leave in the comments questions on the implementation of the elements - perhaps I will talk about them in the following articles.

As promised, I provide free libraries of elements, as well as a ready-made prototype, which we considered in this article. For this we use a service that will provide a link for sharing on the social network.

Download libraries (elements and icons) and the finished prototype Axure. kak-sdelat-prototip-v-axure-rp-esli-nichego-v-etom-ne-ponimaesh
#
UsabilityInstrumentsWeb Development

Watch the video: Emulating Stored Functions in Axure RP (December 2019).

Loading...

Leave Your Comment