Whats new in Axure 7.0?
Post on 27-Jan-2015
120 Views
Preview:
DESCRIPTION
Transcript
What‘s new in Axure 7.0?
Lennart Hennigs
Image Source: unknown
http://bit.ly/a4m_presentation!
Hey, I made a new presentation on how to build mobile prototypes. Check it out!
What’s new in Axure 7.0? Key Facts.▪ Axure 7 is currently in beta (see the list of changes) to be (hopefully) released this
year.
▪ It will be a free update to Axure 6.5.
!Biggest Improvements:
▪ Possibility to prototype responsive websites (Adaptive Layouts).
▪ Database-like functionality (Repeaters).
▪ Makes it easier to build common interaction patterns.
▪ Fast preview of your prototype.
▪ Much improved user interface.
Adaptive Layouts.Axure’s approach to responsive design.
▪ Approach to responsive design, allowing you to define breakpoints for your screen classes.
▪ Widgets have now adaptive properties (location, size, color, style, interaction styles)
▪ …and fixed properties (text, interactions, disabled by default). ▪ Your screen classes can inherit the adaptive properties from parent
classes. ▪ You can “unplace” widgets if you want to use a different
representation.
Tips for usingAdaptive Layouts.
▪ Define your breakpoints.
▪ Layout your screen(s) in your base layout.
!For Mobile First:
▪ Build you way up with “>=“ and re-layout your screens.
▪ …and set your “Page Align” to center (for the topmost view).
Repeater.Axure’s approach to database-like content.
▪ A new widget containing data in a table-based format. ▪ You define the look for a single row within the Repeater. The layout
will then be applied to all elements. ▪ You adjust the display of the content (# elements per row, # elements
per page). ▪ You can filter the elements to be displayed. ▪ You can add or remove elements. ▪ Content can be copied from existing spreadsheets into Repeaters. ▪ Not a real database but a simplified version allowing you to
displaying and manipulated dynamic content in your prototype.
Axure 7.0 Improvements for Widgets.
!− All widgets can be shown & hidden (not only panels).
− All widgets can be moved (not only panels).
− Improved “Show & Hide” actions.
− “This Widget” identifier for cases.
− Inner, Outer & Text Shadow.
− Lots of new events.
− New variables.
Widgets.Improved Hide & Show.
▪ Bring to front
à combines commonly used interactions
▪ Treat a lightbox
à Overlays
▪ Treat as flyout
à As the name says :-)
▪ Push/pull
à make place for new content
Widgets.An identifier for defining actions.
▪ This Widget
à Faster assignment of actions to
the current widget.
Widgets.Inner, Outer & Text Shadows.
New Events. for Pages!▪ OnWindowResize: When a browser window is resized (Use with [[Window.Width]] and
[[Window.Height]] vars)
▪ OnWindowScroll: When a browser window is scrolled (Use with [[Window.ScrollX]] and
[[Window.ScrollY]] variables)
▪ OnPageClick: When any part of the page that does not include a widget is clicked
▪ OnPageDoubleClick: When any part of the page that does not include a widget is double-clicked
▪ OnPageContextMenu: When any part of the page that does not include a widget is right-clicked
▪ OnMouseMove: When the mouse is moved anywhere on the wireframe
▪ OnPageKeyUp: When a keyboard key is released
▪ OnPageKeyDown: When a keyboard key is pressed
▪ OnAdaptiveViewChange
Link
New Events. For all elements.!
▪ OnDoubleClick: When a widget is double-clicked ▪ OnContextMenu: When a widget is right-clicked ▪ OnMouseUp: When a widget is clicked, this event triggers on the release ▪ OnMouseDown: When a widget is clicked but not yet released ▪ OnMouseMove: When the cursor is moved over a widget ▪ OnMouseHover: When the cursor is placed over a widget for longer than 2 seconds ▪ OnLongClick: When a widget is clicked and held for longer than 2 seconds ▪ OnKeyUp: When a keyboard key is released ▪ OnKeyDown: When a keyboard key is pressed !
Check Box/Radio Button ▪ OnCheckedChange: When a radio button or checkbox option is selected.
Link
New Events. For Panels.!▪ OnLoad
▪ OnShow / OnHide
▪ OnMove
▪ OnSwipeUp / OnSwipeDown
▪ OnScroll
▪ OnResize
Link
Editor. Embedded variable list.
Axure 7.0 Improvements for Dynamic Panels.
!− Combined “Set State” & “Show” events.
− Auto-rotate panel states.
− Push & Pull actions for “Set State” & “Show/Hide”
− “Fit to content” (auto-resize of dynamic panels based on its active state).
− Get the name of the active panel state.
− OnClick event.
− “OnLoad” event.
Dynamic Panels.Improved Set State.
▪ Show panel if hidden
à Combines Set State & Show
interactions that are commonly used
together. à Simplifies your interactions.
Dynamic Panels.Improved Set State.
▪ Auto-rotate panel states
à Can be used to create rotating content
banners. à Auto-rotation can also be stopped.
Dynamic Panels.Improved Set State.
▪ Push/pull widgets
à Tells other elements to make space
when content changes.
à Use it together with the new “Fit to
Content“ option.
à Can be used for collapsible lists.
Dynamic Panels.Fit To Content.
▪ Shall the panels auto-resize to
show all the content of it‘s
active state?
Dynamic Panels.Trigger Mouse Interaction Styles.
▪ Shall the widget styles of the
elements in the dynamic panel
be shown when you click on the
panel?
Widgets.Save the name of the current panel state in a variable.
▪ Can be used to simplify your interactions.
Dynamic Panels.OnClick and OnLoad.
▪ Finally an “OnClick” event for
Dynamic Panels.
▪ “OnLoad” allows you to
initialize a dynamic panel.
Axure 7.0 Other improvements.
!− Definition of text field types.
− Assignment of default values for variables.
− Folders for pages & libraries and on AxShare.
− View variable values from your prototype.
Text Field Types.For Mobile.
▪ This allows to show customized keyboards on mobile.
Variables.Assignment of default values.
Folders. …for Pages, Libraries & on AxShare.
View prototype.View variables and highlight elements.
!
!
!
!▪ View variable values (for debugging).
▪ Highlight interactive elements (let them glow).
top related