Category: axure Rp

Axure RP – Condition Logic ”; Previous Next In this chapter, we will discuss the conditional logic used in Axure RP. If – Then – Else in Axure Just like any other programming tools, Axure also supports conditional logic to create enhanced interactions in prototypes. Once you are familiar with how you can provide interactions, providing conditional logic to the interactions is the next level. Following is the simple and concise flow for conditional logic − If, a particular widget/screen is clicked Then, perform a particular action/interaction Else, keep/change the state of the widget or the screen To understand this better, let us resume our flow from the previous example. For this purpose, its required for us to get acquainted with the Condition Builder. The Condition Builder Double-click any of the interactions, for instance OnClick. You will be able to see the Case Editor as shown in the following screenshot. Click the button – Add Condition near the Case Name. It will show below in the dialog box. As shown under the Description, the condition builder will create the If-Then-Else flow as per the conditions chosen in the condition section. Let us create a condition on this button. We want to show the hide image button, once the dynamic panel is visible. We made the dynamic panel visible on the Show Image button click in the previous example. Now, let us make another button Hide Image visible. Close the condition builder, and come back to the design area. Insert the Hide Image button from the Libraries under common libraries. To reiterate, it is a best practice to name the UI element right after you’ve inserted it in the design area. Right-click the Hide Image button and click Set Hidden. The button will be hidden from the design area as shown in the following screenshot. Now, let us come back to the interactions for Show Image button. First, under the Show Image button interactions, double-click Case 1, you will be able to see the case editor. Use the Show/Hide action, to select hideImageButton and set its visibility to show. Similarly, using the Show/Hide action, select showImageButton and set its visibility to hide. We have managed the visibility of Hide Image button such that, when we click the Show Image button, the button will be shown. A complete condition will be as shown in the following screenshot. Let us build the condition. Under the design area, click the Hide Image button. From the Inspector section, click Add Case. Under Add Case, click Add Condition button. As per the background provided earlier, create the condition set using the dropdown values in the Condition Builder. In simple words, with the above condition, we are checking whether the dynamic panel showImageDynamicPanel is visible or not Now, let us design the interaction for Hide Image button, configure it as follows − Select Show/Hide action. Select the widget showImageDynamicPanel. Set the visibility to Hide. Similarly, repeat the drill for showing showImageButton and hiding the hideImageButton. Once done, click OK to close Case Editor. Then, click Preview to see the changes done. The successful results will be as shown in the following screenshots. When the Show Image button is clicked − When the Hide Image button is clicked − Print Page Previous Next Advertisements ”;

Axure RP – Exporting Prototype ”; Previous Next Axure RP 8 supports collaboration with the feature − Team Projects. This feature is not only beneficial for the distributed teams but also for the single user. The benefit to the single user is the ability to create versioning on the work in progress. Working with Team Projects In the Team Projects scenario, each team member has a copy of the project on their computer. This project will be synced with a shared repository. This shared repository is connected to other members of the team. After the course of a day”s work, each team member will create new elements, check out files, and generally edit the project. Check Out is a commonly used term for indicating the work in progress for a particular file. The changes will not be reflected in the shared repository until the team member checks in all their checked out elements. The Manage Team Project console provides all team members with a real-time view of the availability status of the elements that are managed by the system. This view provides the details of an element that is checked out by another team member. Initiate a team project For working with or creating a team project, head over to the Team menu. Click Team and then select Create Team Project from Current File. Following screen pops up. Available options for hosting a team project are − using AxShare and SVN. We will discuss AxShare in the next section. SVN is the commonly used Version Controlling System, which provides a server to host your documents. Follow the on-screen guidelines for creating a team project and then you will be able to start collaborating with a single Axure file across the team/use it for your own historical storage. Axure Share When it comes to showcasing your prototype, there are multiple options available as per the environment you are in. Most commonly used method to export your prototype is to use Axure Share (aka AxShare). With Axure Share, the following collaboration capabilities are possible. Prototypes can be hosted on Axure Share and shared with the involved team members/clients. With the discussion/comments feature, you can get the on-the-go inputs on the prototype in the making. Once you are ready with the prototype, you can upload the prototype to AxShare using Publish → Publish to Axure Share. Following dialog box will be displayed. You must create an account at AxShare.com in order to progress ahead. If you already have an account, you can use the ‘Log In’ option to log in and upload your work to AxShare. The uploaded data is in HTML, CSS, and JavaScript. Once uploaded, you are provided with a link, which you can provide to the intended stakeholders/team. Print Page Previous Next Advertisements ”;

Axure RP – User Interface ”; Previous Next Once you install Axure, you will be presented with an interface as shown in the following screenshot. This screen will always be shown at the startup until you opt for not to show it. On this screen, you have the following options − Start a New File in Axure Open an existing Axure project Let us now create a new file with Axure. When you click the button “NEW FILE”, you will be presented with the following screen to create a new prototype. As shown in the figure above, the workspace is divided into 6 parts. Pages Libraries Inspector Outline Masters Design Area Let us walk through these parts one by one. Pages This section shows the pages you are working on. These pages are shown in a default tree structure as follows. Home page has the following child pages. Home Page 1 Page 2 Page 3 You can continue with the structure given or you can change it as per your needs. For doing so, right-click on any of the page, then you will be presented with the options such as – Add, Move, Delete, Rename, Duplicate, etc. Like most of the different tools available, this section allows you to interact with the pages in your prototype. You can use it to plan the screens in the intended prototype. Libraries Pane In the libraries pane, most of the controls required for the prototype are available. Typical controls available in this section are – Box, Image, Placeholder, Buttons, etc. Axure RP provides a rich set of UI controls categorized according to their area of applications. As shown in the figure above (a), the libraries have the categories as – Common, Forms, Menus and Table, and Markup. All these categories are expanded when you open the application. For convenience, it is collapsed in this screenshot. Common libraries include basic shapes, buttons, heading text, Hot Spot, Dynamic panel, etc. With Axure RP, for all your prototyping requirements, there comes a very effective control called Hot Spot. Using this control, you can provide click interaction to almost any control in the UI. An example will be provided in the proceeding pages. In the forms library, as the name suggests, List Box, Checkbox, radio button, text area, and text field controls are included. For designing a user input form, you may use controls from this section under the library. Menus and tables have a traditional structure. Such structure, maybe in a horizontal or a vertical form, is available under this library called Menus and tables. Last, but not the least, comes the Markup library, which is inclusive of stickies, markers, and arrows. Mostly, this will be used for annotations in your prototype. Design Area This is the actual playground for the UX engineers. This space will be used for creating the prototypes as per your requirement. To start with, refer to the area highlighted with number 6 in the following screenshot. In this area, you can drag and drop your desired controls from the library. Let us create a quick menu bar using the library. Example – Menu Bar From the libraries, under Menus and Table, drag Classic Menu − Horizontal control to design area. Once you’ve dragged the control in the design area, you will see the following screen. As shown in the screen above, Axure RP is intelligent enough to show the intended text in a menu. Considering it is a menu bar, Axure RP has automatically created File, Edit and View as menus in the control. As pointed by the arrow, the inspector section shows the properties of the control. Use this section to create a name for your control for unique identification, when creating complex prototypes. Let us give a name to this control as TestMenu. We will use this name in the proceeding examples. Page Properties When planning for a prototype, it makes sense to have a clear idea of the user and hence the device on which the prototype will be showcased/viewed. For the best experience of interacting with prototype, Axure has provided a feature to set the page properties. As shown in figure above, the area denoted by number 3 is the page properties section. In this section, you will be able to see the interactions dropdown and the sub-section Adaptive. Let us discuss these sections in detail. Interactions section deals with the possible interactions (cases) with the page. As you can see, the interaction case OnPageLoad handles the events when the page loads. In most of the prototypes, the UX engineers prefer to put an animation to make the first impression. This particular event for showing the animation is usually triggered on OnPageLoad case. Similarly, other cases include – OnWindowResize, OnWindowScroll. In the dropdown, More Events, you can see other supported cases to configure the interactions related to the page. With the Adaptive section, Axure RP enters into a responsive web design. Nowadays, designing an experience for websites is not sufficient, along with this, businesses prefer mobile sites to co-exist with the websites. The same page, as viewed from different screen sizes and layouts constitute different adaptive views. Commonly, adaptive views are designed for mobiles and tablets. Axure provides this feature of adaptive views, so that the UX engineers have a grip over the responsive aspect of the prototypes right from the scratch. The Inspector Pane for Widget The Widget Interactions pane is the critical most section in Axure. You can see this pane by clicking any widget in the design area. Consider an example of the menu item that we used in previous section. Select the menu item named TestMenu and observe the section highlighted in the following screenshot. As you can see under Properties tab, there are different interactions such as OnMove, OnShow, OnHide and OnLoad. These are specific to the Menu control as a whole. Now, click File from the menu control. You will notice a change in the type of