Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Building Mobile Prototypes with Axure 7.0 (and Beta) 8.0

2.966 visualizaciones

Publicado el

This slideset shows you how to get started with mobile prototyping with Axure. It also takes a look at the new capabilities of Axure RP 8.0

Publicado en: Diseño

Building Mobile Prototypes with Axure 7.0 (and Beta) 8.0

  1. 1. BUILDING MOBILE PROTOTYPES
 WITH AXURE RP 7.0 AND (BETA) 8.0 LENNART HENNIGS
  2. 2. www.axureformobile.com bit.ly/a4m_newsletter
  3. 3. POP QUIZ ▪ Ever used a dynamic panel? ▪ Created a master? ▪ Set a variable? ▪ Created a specification with Axure? ▪ Asked a question in the forum? ▪ Played with the Axure 8.0 beta? ▪ Created a mobile prototype?
  4. 4. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. VIEWING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  5. 5. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. VIEWING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  6. 6. „Prototyping is practice for people who design and make things. It’s not simply another tool for your design toolkit – it’s a design philosophy.” Todd Zaki Warfel
  7. 7. SHOW NON-DESIGNERS WHAT THE UX WILL BE LIKE…
  8. 8. CREATE SOMETHING TANGIBLE.
 SHOW, DON’T TELL. http://bit.ly/1KBSTpN
  9. 9. FAIL EARLY, FAIL FAST & FAIL OFTEN. gapingvoid.com
  10. 10. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. VIEWING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENT
  11. 11. AXURE IS ONLY ONE TOOL OF MANY…
 Omnigraffle Microsoft Visio Adobe Illustrator Adobe Fireworks Balsamiq Quartz Composer Tumult Hype Indigo Studio Justinmind Prototyper Invision proto.io Pixate
  12. 12. REASON #1: PAGES, LAYERS AND CODE, OH MY.
  13. 13. #1: PAGES VS. LAYERS(A.K.A DYNAMIC PANELS)
  14. 14. #2: LEVELS OF FIDELITY. 1. Visual Design 2. Interactivity Gail Swanson – The Right Type of Prototype
  15. 15. #2: LEVELS OF FIDELITY. 1. Visual Design 2. Interactivity 3. Structure Gail Swanson – The Right Type of Prototype
  16. 16. HORIZONTAL VS. VERTICAL PROTOTYPES. tour of the house spot light
  17. 17. #3: AXURE CAN COVER YOUR FULL WORKFLOW. UI  lowsSpecifications PrototypesWireframes Information Architecture
  18. 18. STRENGTHS & MOBILE CAPABILITES. ▪ Low learning curve (after some getting used to). ▪ No coding skill required (but some basic knowledge is helpful). ▪ You can host it for free online. ▪ UI Libraries are available online.
 ▪ Axure is a layer-based (read: panels) prototyping tool. ▪ Thus offers a lot of flexibility.
 ▪ Detect and work with gestures. ▪ Prototype animations and transitions. ▪ Build responsive adaptive prototypes. ▪ It outputs HTML (you can view it on any device).
  19. 19. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. VIEWING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  20. 20. #1: THE USER INTERFACE
  21. 21. iOS. FROM SKEUMORPHIC DESIGN TO FLAT DESIGN
  22. 22. ANDROID. MATERIAL DESIGN
  23. 23. MATERIAL DESIGN
  24. 24. WHEN SHOULD I USE MATERIAL DESIGN ON iOS?
  25. 25. USE STYLES TO CREATE YOUR OWN UI ELEMENTS.
  26. 26. #2: USER ACTIONS. Luke Wroblewski – Touch Gesture Reference Cards
  27. 27. Luke Wroblewski – Touch Gesture Reference Cards #2: USER ACTIONS.
  28. 28. USER ACTIONS. AXURE EVENTS
  29. 29. #3: ANIMATIONS AND TRANSITIONS. bit.ly/a4m_238 Animations: Move, Scroll To, Set Panel Size Transitions: Set Panel to State, Toggle Visibility, Show & treat as…
  30. 30. #3: ANIMATIONS AND TRANSITIONS. bit.ly/a4m_245
  31. 31. Picture by Cynthia Boris #4: LET’S TALK ABOUT RESOLUTIONS…
  32. 32. iOS VS. ANDROID. opensignal.com, 07/2013
  33. 33. Paint Code – The Ultimate Guide To iPhone Resolutions http://www.idev101.com/code/User_Interface/sizes.html iOS.
  34. 34. ANDROID. LDPI 0.75 MDPI 1.0 HDPI 1.5 XHDPI 2.0 XXHDPI 3.0 XXXHDPI 4.0
  35. 35. TOOLS THAT HELP YOU DETERMINE YOUR SCREEN SIZE http://bit.ly/a4m_resolutionhttp://screensiz.eshttp://mydevice.io
  36. 36. WHAT DO I HAVE TO PUT IN HERE? width: initial scale: Auto detect: User scalable: hide browser nav: status bar: device-width 1.0 no, minimal-ui ☑ default The initial scale setting defines the effective screen size of your prototype. If you do, add maximum scale settings as well.
  37. 37. #5: RESPONSIVE WEB DESIGN. http://mediaqueri.es
  38. 38. ADAPTIVE LAYOUTS - AXURE’S APPROACH TO RWD. http://www.axure.com/c/forum/tips-tricks-examples/15130-responsive-design-possible-axure-rp.html ▪ Axure cannot create fluid websites ▪ …only adaptive ones.
 ▪ You must define a set of breakpoints ▪ … and create a single layout for each.
 ▪ UI elements have now… ▪ adaptive properties
 (location, size, color, style, interaction styles) ▪ fixed properties 
 (text, interactions, disabled by default). ▪ Your screen classes can inherit the properties from its parents. ▪ “Unplace” elements to use a different representation.
  39. 39. CREATING ADAPTIVE LAYOUTS. ▪ First, define your breakpoints. ▪ Start mobile first. ▪ Then, build you way up with “>=“ ▪ …and set your “Page Align” to center
 ▪ Start layouting your base view, 
 then do the others
  40. 40. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. SHARING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  41. 41. PAGES VS. PANELS.
  42. 42. USING PAGES.
  43. 43. USING PANELS.
  44. 44. PAGES vs. PANELS. Pages ▪ No learning curve ▪ The back button will work Panels ▪ Gestures ▪ Animations & Transitions ▪ No page transitions in Axure Broad over-simplification: ▪ use it for websites ▪ use it for apps
  45. 45. USE MOBILE UI PATTERNS. inspired-ui.com mobile-patterns.com pttrns.com androidpatterns.com
  46. 46. USE MOBILE UI PATTERNS.
  47. 47. COMMERCIAL BREAK. ▪ Dialogs and Popups ▪ Text Fields and Forms ▪ Tabs ▪ Accordion Lists ▪ Splash Screen ▪ Drag to Refresh ▪ Lists with Selection Highlight ▪ Sliding Menus ▪ Fullscreen on Scroll ▪ Sticky Headers for Lists ▪ How embed audio & video files ▪ Enhance the HTML output ▪ How to use Webfonts ▪ How to use Adaptive Views
  48. 48. UI PATTERNS COVERED IN THE BOOK. ▪ Dialogs and Popups ▪ Text Fields and Forms ▪ Tabs ▪ Accordion Lists ▪ Splash Screen ▪ Drag to Refresh ▪ Lists with Selection Highlight ▪ Sliding Menus ▪ Fullscreen on Scroll ▪ Sticky Headers for Lists ▪ How embed audio & video files ▪ Enhance the HTML output ▪ How to use Webfonts ▪ How to use Adaptive Views
  49. 49. TEXT FIELDS AND FORMS. bit.ly/a4m_forms
  50. 50. ACCORDION LISTS. bit.ly/a4m_accordion
  51. 51. SCROLLING DETECTION & FULL SCREEN ON SCROLL. bit.ly/a4m_fullscreen
  52. 52. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. SHARING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  53. 53. THERE IS (NOW) AN APP FOR THAT…
  54. 54. AXURE SHARE.
  55. 55. MIRROR YOUR PHONE VIA REFLECTOR.
  56. 56. 1. WHY PROTOTYPE? 2. WHY USE AXURE FOR IT? 3. SOME MOBILE BASICS 4. STRUCTURING YOUR PROTOTYPE 5. SHARING YOUR PROTOTYPE. 6. BONUS MATERIAL 
 TABLE OF CONTENTS
  57. 57. 0WTre SiP  %-­ ! 7now XoTr RIorSDTSR# bit.ly/a4m_260
  58. 58. 59 STRG+L position & place SHIFT-key proportional scaling. ALT-key and drag create a copy of a widget cursor keys + SHIFT move an element by 10 pixels TAB visit the elements on a page AXURE TIP #1: KNOW YOUR SHORTCUTS.
  59. 59. 0WTre SiP  2-­ ! 4iUe eUerXSIinH a naMe# Image Source: thebricktestament.com
  60. 60. AXURE TIP #2: GIVE EVERYTHING A NAME. ▪ Only label key elements (used in your interactions) ▪ widgets ▪ dynamic panels ▪ interaction cases ▪ Use CamelCaseSyntax (e.g. loginSubmitBTN) ▪ role + place + element ▪ Name the element for their purpose in the prototype ▪ Be consistent in your naming ▪ Same name for single state panels and their state
  61. 61. 0WTre SiP  3-­ ! TTrn eUerXSIinH XoT re-TRe inSo MaRSerR#
  62. 62. 0WTre SiP  4-­ :Lan aIeaE#
  63. 63. 64 ▪ What are dynamic elements in your prototype? ▪ What are static elements? ▪ Do your static elements have dynamic content? ▪ Think about the (stacking) order of your panels.
 ▪ Be lazy, try not to repeat similar actions – put them in one place. ▪ Do the structure first, add the interaction later. ▪ Do small experiments before you make major changes. AXURE TIP #4: PLAN AHEAD.
  64. 64. SSiDK So SIe KeX TRe DaReR#
  65. 65. :roSoSXPe SIe 20! SIaS wiLL Ce TReE 80! oG SIe SiMe#
  66. 66. Harrelson & Buley – Sketchboards and Prototypes, 2008. ?IaS iR DriSiDaL Gor HooE U@ anE DoMPLeW Gor SIe TRer.
  67. 67. 0WTre SiP  5-­ 2onYS HeS LoRS in 0WTre#
  68. 68. 0WTre SiP  6-­ 1oMPLeWiSX wiLL GiHIS CaDK#
  69. 69. 0WTre SiP  7-­ 4ooE enoTHI 6S R3088A HooE enoTHI!
  70. 70. www.axureformobile.com bit.ly/a4m_newsletter
  71. 71. www.axureformobile.com www.usercentered.de @8ennarS5enniHR

×