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