Beginning iOS UI
Upcoming SlideShare
Loading in...5

Beginning iOS UI



Beginning iOS UI Design

Beginning iOS UI Design



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Beginning iOS UI Beginning iOS UI Presentation Transcript

  • i ng iO S UIBeginn plicatio n p ic e iOS a build a n How to Presented by Jack River
  • Outline!   What is UI!   What is different about a mobile device!   Why is iOS so special!   Some basic principles!   UI design in action
  • 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 visual!   To create a system that is not only operational but also usable and adaptable to CHANGING user needs
  • 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
  • iOS?!   A full design toolkit!   Inherit & Customize!   Gesture!   Different devices: !   iPhone & iPod Touch !   iPad !   …!   Full animation support and some preset animation
  • 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
  • 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 very apparent.!   The user’s focus is on the content.
  • 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
  • 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: !   The orientation of Home screen on iPad !   The portrait orientation on other iOS devices
  • Gestures!   Available gestures: !   Tap !   Drag !   Flick !   Swipe !   Double tap !   Pinch !   Touch and hold !   Shake
  • 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 visualize the results of their actions
  • 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 a segmented control in a toolbar
  • 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 feedback should be subtle, but clear
  • Reference! library/wa-interface/! kawano-on-ios-user-interface-design/! #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/
  • The EndFinally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…Finally…