×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Patterns: Screen Transitions

From Nokia Developer Wiki
Jump to: navigation, search
prakash.raman (Talk | contribs)
prakash.raman (Talk | contribs)
m
Line 5: Line 5:
  
  
===Description===
+
=Description=
 
Transition means, "The act of passing from one state to the next". This section describe different type of  
 
Transition means, "The act of passing from one state to the next". This section describe different type of  
 
transitions you can provide on phones. An interesting transition gives that extra touch to your device.  
 
transitions you can provide on phones. An interesting transition gives that extra touch to your device.  
 
Transitions mainly occur as effect of events, which can be key events or touch. You can choose your screen transition on basis of how you want your next data to be presented, and how the transition adds effect to your application.
 
Transitions mainly occur as effect of events, which can be key events or touch. You can choose your screen transition on basis of how you want your next data to be presented, and how the transition adds effect to your application.
 
   
 
   
=== Screen Slide Away Transition===  
+
= Screen Slide Away Transition =
 
As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.
 
As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.
  
Line 21: Line 21:
  
  
=== Screen Zoom in and out Transition===  
+
= Screen Zoom in and out Transition =
 
As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.
 
As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.
  
Line 32: Line 32:
  
  
=== Screen Fade in and out Transition===  
+
= Screen Fade in and out Transition=
 
As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.
 
As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.
  
Line 43: Line 43:
  
  
=== Screen Push in and out Transition===  
+
= Screen Push in and out Transition=
 
As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.
 
As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.
  
 
[[Image:Push.gif]]
 
[[Image:Push.gif]]

Revision as of 16:30, 26 May 2009


This design pattern is part of the Mobile Design Patterns series.


Contents

Description

Transition means, "The act of passing from one state to the next". This section describe different type of transitions you can provide on phones. An interesting transition gives that extra touch to your device. Transitions mainly occur as effect of events, which can be key events or touch. You can choose your screen transition on basis of how you want your next data to be presented, and how the transition adds effect to your application.

Screen Slide Away Transition

As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.

Slide.gif




Screen Zoom in and out Transition

As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.

Zoom.gif




Screen Fade in and out Transition

As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.

Fade.gif




Screen Push in and out Transition

As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.

Push.gif

70 page views in the last 30 days.