Whats new in Axure 7.0?


Published on

This presentation gives a brief overview of the biggest changes and improvements of the upcoming Axure version.

Published in: Technology

Whats new in Axure 7.0?

  1. 1. What‘s new in Axure 7.0? Lennart  Hennigs Image  Source:  unknown
  2. 2. http://bit.ly/a4m_presentation! Hey,  I  made  a  new  presentation  on  how  to  build  mobile  prototypes.     Check  it  out!  
  3. 3. 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.
  4. 4. 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.
  5. 5. Tips  for  using
 Adaptive 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).
  6. 6. 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.
  7. 7. 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.
  8. 8. 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
  9. 9. Widgets.
 An  identifier  for  defining  actions. ▪ This Widget à Faster assignment of actions to the current widget.
  10. 10. Widgets.
 Inner,  Outer  &  Text  Shadows.
  11. 11. 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
  12. 12. 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
  13. 13. New Events.
 For  Panels. ! ▪ OnLoad ▪ OnShow / OnHide ▪ OnMove  ▪ OnSwipeUp / OnSwipeDown ▪ OnScroll ▪ OnResize Link
  14. 14. Editor.
 Embedded  variable  list.
  15. 15. 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.
  16. 16. Dynamic Panels.
 Improved  Set  State. ▪ Show panel if hidden à Combines Set State & Show interactions that are commonly used together. à Simplifies your interactions.
  17. 17. Dynamic Panels.
 Improved  Set  State. ▪ Auto-rotate panel states à Can be used to create rotating content banners. à Auto-rotation can also be stopped.
  18. 18. 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.
  19. 19. Dynamic Panels.
 Fit  To  Content. ▪ Shall the panels auto-resize to show all the content of it‘s active state?
  20. 20. 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?
  21. 21. Widgets.
 Save  the  name  of  the  current  panel  state  in  a  variable. ▪ Can be used to simplify your interactions.
  22. 22. Dynamic Panels.
 OnClick  and  OnLoad. ▪ Finally an “OnClick” event for Dynamic Panels. ▪ “OnLoad” allows you to initialize a dynamic panel.
  23. 23. 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.
  24. 24. Text Field Types.
 For  Mobile. ▪ This allows to show customized keyboards on mobile.
  25. 25. Variables.
 Assignment  of  default  values.
  26. 26. Folders. 
 …for  Pages,  Libraries  &  on  AxShare.
  27. 27. View prototype.
 View  variables  and  highlight  elements. ! ! ! ! ▪ View variable values (for debugging). ▪ Highlight interactive elements (let them glow).