Axure for Mobile Lennart Hennigs Axure World 2012
Jan 27, 2015
Axure for Mobile
Lennart Hennigs Axure World 2012
Hey, I made a new presentation covering Axure 7.0. Check it out!
http://bit.ly/a4m_presentation!
http://www.axureformobile.com
@LennartHennigs
I like this topic so much, I even wrote a book about it…
Table of
Contents - Axure’s Mobile Prototyping Capabilities - Differences btw. Regular and Mobile Prototpyes - Mobile Prototype Structure - Making Axure (even more) mobile-friendly
- Shameless book promotion
Axure for Mobile?
- New OnSwipeLeft & OnSwipeRight events
- New options in "Set Panel state(s) to State(s)" action: next, previous, value
http://www.axure.com/new-in-65!
Axure for Mobile?
- New OnSwipeLeft & OnSwipeRight events
- New options in "Set Panel state(s) to State(s)" action: next, previous, value
- Add app icons and splash screen
- Options to hide the address bar and browser navigation
- Block the page from scrolling
- Inertial dynamic panel scrolling (for iOS 5)
- Ability to format status bar style
- iPhone web-app features
http://www.axure.com/new-in-65!
Axure for Mobile Capabilities
Can do - Create Mobile-friendly .html - Offers swiping support - Supports Basic Transitions
- UI Libraries for all mobile platforms
Axure for Mobile Capabilities
Can do - Create Mobile-friendly .html - Offers swiping support - Supports Basic Transitions
- UI Libraries for all mobile platforms
Can’t do - Long press - Multi-touch gestures - Editing the HTML
- Responsive layouts - Orientation Change detection
Artifacts of Axure
Prototypes Wireframes
Specifications
Artifacts of Axure for Mobile
UI Flows Specifications
Prototypes Wireframes
Page-based
Wireframes
Web & PC
Page-based
Wireframes for Mobile
- You can place your wireframes inside a mobile - Good for viewing on a larger screen.
Page-based
Wireframes with a frameset
- You can place your wireframes inside a mobile - Good for viewing on a larger screen.
Properties of
Mobile Experiences - Transitions - Animations - Gestures Support
Panel-based
Wireframes - Create a Dynamic Panel with states for each key screen
Panel-based
Wireframes - Create a Dynamic Panel with states for each key screen
- Create Dynamic Panels for key screen and its variants
Panel-based
Wireframes - Create a Dynamic Panel with states for each key screen
- Create Dynamic Panels for key screen and its variants
- Turn the main panel into a Master (and other key screens)
How to Make
Axure Mobile-friendly
1. Define your screen estate 2. Configure your Mobile Settings 3. Get some mobile Axure resources 4. Make the .html output more mobile friendly 5. Embed fonts 6. Let Axure auto-generate QR codes
Get some
Mobile Axure Resources - Axure Libraries
- Photoshop Resources
- Icons Libraries !
!!!!!
http://www.axureformobile.com/mobile-resources/!
Make Axure’s
.html Mobile-friendly Well, it’s actually the .css code… !
Make Axure’s
.html Mobile-friendly Well, it’s actually the .css code…
! ! Contents > Resources > DefaultSettings > ! ! !!! ! Prototype_Files > resources > css!
!! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !!! ! Prototype_Files > resources > css!
!
Make Axure’s
.html Mobile-friendly Well, it’s actually the .css code…
! ! Contents > Resources > DefaultSettings > ! ! !!! ! Prototype_Files > resources > css!
!! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !!! ! Prototype_Files > resources > css!
!axure_rp_page.css!!
* {!!-webkit-tap-highlight-color:rgba(0,0,0,0);!!outline: none; !!-webkit-text-size-adjust: none; !!-webkit-touch-callout: none; !!-webkit-user-select: none; } !
Let Axure
Auto-generate QR codes
Let Axure
Auto-generate QR codes
Let Axure
Auto-generate QR codes
Let Axure
Auto-generate QR codes
! ! Contents > Resources > DefaultSettings >!! ! Prototype_Files > plugins > sitemap!
!! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !!! ! Prototype_Files > plugins > sitemap!
!sitemap.js !
Line 84:
!treeUl += "<img id ='qr' />”;!
Let Axure
Auto-generate QR codes
Line 84:
!treeUl += "<img id ='qr' />”;
Let Axure
Auto-generate QR codes
Line 37:!!$('#qr').attr('src',"http://chart.apis.google.com/
chart?cht=qr&chs=200x200&chl="+pageLoc); !!
Let Axure Auto-generate QR codes
Axure for Mobile – the ebook
- Mobile App Design Basics
- What to Prototype
- Setting up Axure
- Building a mobile prototype
- Presenting your prototype
- Mobile Interaction Paradigms
- Animations and Transitions
- Viewing your Prototype
- Creating Documentation
- Appendix I – Axure Basics
- Appendix II – Mobile Platform Cheat Sheets
Coming very soon…
http://www.axureformobile.com
LennartHennigs
Please stop by if you want to
Find out more.
Resources used in the presentation - Chris Spooner’s Sketch Icons http://blog.spoongraphics.co.uk/!
!
- Sketch Rockwell Font http://www.urbanfonts.com/fonts/Sketch_Rockwell.htm!
!
- Hand of Sean Font !http://www.dafont.com/hand-of-sean.font!
!