i ng iO S UIBeginn                            plicatio                                           n                        ...
Outline!   What is UI!   What is different about a mobile device!   Why is iOS so special!   Some basic principles!   UI d...
What is UI?!   User Interface!   User Interface Design
What are The Goals?
What is UI Design?!   The process of accomplishing the goals above!   The act of balancing technical functionality and    ...
Mobile Device vs. PC?        Mobile Device                                  PC!   Smaller Screen                     !   L...
iOS?!   A full design toolkit!   Inherit & Customize!   Gesture!   Different devices:   !   iPhone & iPod Touch   !   iPad...
Some Basic Principles!   MUST be functional!   KISS!   Be efficient!   Focus on the big things!   Be graphic!   Show users...
Don’t do it!!   Ignoring performance!   No interaction!   No Feedback!   Massive changes in one move!   Without consistency
UI Design In Action
List!   Screen Size!   Device Orientation!   Gesture!   User Control!   Animation!   iPad
Screen Size!   The comfortable minimum size of tappable UI    elements is 44 x 44 points.!   The quality of app artwork is...
Screen SizeDevice          Portrait        LandscapeiPhone 4        640 x 960 px    960 x 640 pxiPad            768 x 1024...
Screen Size    iPhone                               iPad        A button that has a size of 60 x 60 px
Device Orientation!   Two orientations:  !   Portrait  !   Landscape!   Different default orientations of your app:  !   T...
Gestures!   Available gestures:  !       Tap  !       Drag  !       Flick  !       Swipe  !       Double tap  !       Pinc...
Goal of Gesture Design
How to Zoom InDouble Tap       Zoom Button
Let User Control!   Two types:  !   Suggest  !   Warn!   Ways to accomplish:  !   Pop up  !   Defaults can be changed easily
Let User Control
Animation!   Communicate status!   Provide useful feedback!   Enhance the sense of direct manipulation!   Help people visu...
But!   Be aware of the performance!   Be consistent
iPad Consideration!   Use the screen size wisely!   Use Split View!   Use Popover!   Reduce Full-Screen Transitions!   Use...
Split View
Popover   Full-Screen Transitions
Segmented control
Some iOS Paradigms!   Controls should look tappable!   App structure should be clean and easy to    navigate!   User feedb...
Reference! http://www.ibm.com/developerworks/web/  library/wa-interface/! http://oleb.net/blog/2011/11/ios5-tech-talk-mark...
The EndFinally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Fin...
Beginning iOS UI
Upcoming SlideShare
Loading in …5
×

Beginning iOS UI

1,994 views

Published on

Beginning iOS UI Design

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,994
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Beginning iOS UI

  1. 1. i ng iO S UIBeginn plicatio n p ic e iOS a build a n How to Presented by Jack River
  2. 2. Outline!   What is UI!   What is different about a mobile device!   Why is iOS so special!   Some basic principles!   UI design in action
  3. 3. What is UI?!   User Interface!   User Interface Design
  4. 4. What are The Goals?
  5. 5. What is UI Design?!   The process of accomplishing the goals above!   The act of balancing technical functionality and visual!   To create a system that is not only operational but also usable and adaptable to CHANGING user needs
  6. 6. Mobile Device vs. PC? Mobile Device PC!   Smaller Screen !   Large Screen!   Touch interfaces !   Mouse & Keyboard!   Acceleration sensing !   NO Acceleration sensing!   Orientation awareness !   NO Orientation awareness!   Pervasive animation !   Almost any animation is possible!   Simulations of physical behavior !   Few simulations of physical behavior
  7. 7. iOS?!   A full design toolkit!   Inherit & Customize!   Gesture!   Different devices: !   iPhone & iPod Touch !   iPad !   …!   Full animation support and some preset animation
  8. 8. Some Basic Principles!   MUST be functional!   KISS!   Be efficient!   Focus on the big things!   Be graphic!   Show users how to use your app!   Let users choose whatever they want
  9. 9. Don’t do it!!   Ignoring performance!   No interaction!   No Feedback!   Massive changes in one move!   Without consistency
  10. 10. UI Design In Action
  11. 11. List!   Screen Size!   Device Orientation!   Gesture!   User Control!   Animation!   iPad
  12. 12. Screen Size!   The comfortable minimum size of tappable UI elements is 44 x 44 points.!   The quality of app artwork is very apparent.!   The user’s focus is on the content.
  13. 13. Screen SizeDevice Portrait LandscapeiPhone 4 640 x 960 px 960 x 640 pxiPad 768 x 1024 px 1024 x 768 pxOther devices 320 x 480 px 480 x 320 px
  14. 14. Screen Size iPhone iPad A button that has a size of 60 x 60 px
  15. 15. Device Orientation!   Two orientations: !   Portrait !   Landscape!   Different default orientations of your app: !   The orientation of Home screen on iPad !   The portrait orientation on other iOS devices
  16. 16. Gestures!   Available gestures: !   Tap !   Drag !   Flick !   Swipe !   Double tap !   Pinch !   Touch and hold !   Shake
  17. 17. Goal of Gesture Design
  18. 18. How to Zoom InDouble Tap Zoom Button
  19. 19. Let User Control!   Two types: !   Suggest !   Warn!   Ways to accomplish: !   Pop up !   Defaults can be changed easily
  20. 20. Let User Control
  21. 21. Animation!   Communicate status!   Provide useful feedback!   Enhance the sense of direct manipulation!   Help people visualize the results of their actions
  22. 22. But!   Be aware of the performance!   Be consistent
  23. 23. iPad Consideration!   Use the screen size wisely!   Use Split View!   Use Popover!   Reduce Full-Screen Transitions!   Use a segmented control in a toolbar
  24. 24. Split View
  25. 25. Popover Full-Screen Transitions
  26. 26. Segmented control
  27. 27. Some iOS Paradigms!   Controls should look tappable!   App structure should be clean and easy to navigate!   User feedback should be subtle, but clear
  28. 28. Reference! http://www.ibm.com/developerworks/web/ library/wa-interface/! http://oleb.net/blog/2011/11/ios5-tech-talk-mark- kawano-on-ios-user-interface-design/! http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/
  29. 29. The EndFinally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…

×