Top Banner
Axure for Mobile Lennart Hennigs Axure World 2012
32

Axure for Mobile Prototyping

Jan 27, 2015

Download

Technology

Lennart Hennigs

This is the presentation I gave at the http://www.axureworld.org on "Mobile Prototyping with Axure."
This is content of my ebook on the same topic. Visit http://www.axureformobile.com for more details
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure for Mobile Prototyping

Axure for Mobile

Lennart  Hennigs  Axure  World  2012  

Page 2: Axure for Mobile Prototyping

Hey,  I  made  a  new  presentation  covering  Axure  7.0.  Check  it  out!  

http://bit.ly/a4m_presentation!

Page 3: Axure for Mobile Prototyping

http://www.axureformobile.com  

@LennartHennigs  

I  like  this  topic  so  much,  I  even  wrote  a  book  about  it…  

Page 4: Axure for Mobile Prototyping

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  

 

Page 5: Axure for Mobile Prototyping

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!

Page 6: Axure for Mobile Prototyping

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!

Page 7: Axure for Mobile Prototyping

Axure for Mobile    Capabilities  

Can  do  -­  Create  Mobile-­friendly  .html  -­  Offers  swiping  support  -­  Supports  Basic  Transitions  

-­  UI  Libraries  for  all  mobile  platforms  

 

Page 8: Axure for Mobile Prototyping

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  

Page 9: Axure for Mobile Prototyping

Artifacts of Axure  

Prototypes  Wireframes  

Specifications  

Page 10: Axure for Mobile Prototyping

Artifacts of Axure  for  Mobile      

UI  Flows  Specifications  

Prototypes  Wireframes  

Page 11: Axure for Mobile Prototyping

Page-­based  

Wireframes  

Web  &  PC    

Page 12: Axure for Mobile Prototyping

Page-­based  

Wireframes  for  Mobile  

-­  You  can  place  your  wireframes  inside  a  mobile  -­  Good  for  viewing  on  a  larger  screen.  

Page 13: Axure for Mobile Prototyping

Page-­based  

Wireframes  with  a  frameset  

-­  You  can  place  your  wireframes  inside  a  mobile  -­  Good  for  viewing  on  a  larger  screen.  

Page 14: Axure for Mobile Prototyping

Properties  of

Mobile Experiences  -­  Transitions    -­  Animations    -­  Gestures  Support    

Page 15: Axure for Mobile Prototyping

Panel-­based  

Wireframes  -  Create  a  Dynamic  Panel  with  states  for  each  key  screen  

Page 16: Axure for Mobile Prototyping

Panel-­based  

Wireframes  -  Create  a  Dynamic  Panel  with  states  for  each  key  screen  

-  Create  Dynamic  Panels  for  key  screen  and  its  variants  

Page 17: Axure for Mobile Prototyping

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)  

Page 18: Axure for Mobile Prototyping

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  

Page 19: Axure for Mobile Prototyping

Get  some    

Mobile Axure Resources  -­  Axure  Libraries  

-­  Photoshop  Resources    

-­  Icons  Libraries  !

!!!!!

http://www.axureformobile.com/mobile-resources/!

Page 20: Axure for Mobile Prototyping

Make  Axure’s    

.html Mobile-friendly Well,  it’s  actually  the  .css  code…  !      

Page 21: Axure for Mobile Prototyping

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!

!

Page 22: Axure for Mobile Prototyping

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; } !

Page 23: Axure for Mobile Prototyping

Let  Axure    

Auto-generate QR codes

Page 24: Axure for Mobile Prototyping

Let  Axure    

Auto-generate QR codes

Page 25: Axure for Mobile Prototyping

Let  Axure    

Auto-generate QR codes

Page 26: Axure for Mobile Prototyping

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 !

Page 27: Axure for Mobile Prototyping

 Line  84:  

!treeUl += "<img id ='qr' />”;!

Let  Axure    

Auto-generate QR codes

Page 28: Axure for Mobile Prototyping

 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); !!

Page 29: Axure for Mobile Prototyping

Let  Axure    Auto-generate QR codes  

Page 30: Axure for Mobile Prototyping

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…  

Page 31: Axure for Mobile Prototyping

http://www.axureformobile.com  

LennartHennigs  

Please  stop  by  if  you  want  to  

Find out more.  

Page 32: Axure for Mobile Prototyping

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!

!