Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Application tray

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Adding missing translation link)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
[[Category:Mobile_Design]][[Category:UI]][[Category:Mobile_Design_Patterns]]
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090618
 +
|author= [[User:Manikantan]]
 +
}}
 +
[[Category:UI]][[Category:Mobile Design Patterns]]
 
== Description ==
 
== Description ==
  
Line 5: Line 27:
  
  
[[Image:E71_edit.jpg]]
+
[[File:E71 edit.jpg]]
  
 
''Shows the Application tray in action''
 
''Shows the Application tray in action''
Line 22: Line 44:
 
The Dock essentially needs to be a transparent/translucent container (panel) for icons, for a better visual experience.
 
The Dock essentially needs to be a transparent/translucent container (panel) for icons, for a better visual experience.
  
[[Image:Dock.jpg]]
+
[[File:Dock.jpg]]
 
   
 
   
 
''This image shows the Dock in action on a Ubuntu PC.''
 
''This image shows the Dock in action on a Ubuntu PC.''
Line 34: Line 56:
 
On a touch phone, its simple and straightforward to keep them on the same size.  
 
On a touch phone, its simple and straightforward to keep them on the same size.  
  
[[Image:X-dock.JPG]]
+
[[File:X-dock.JPG]]
  
 
''All items are of same size. Ideal for a touch-enabled phone''
 
''All items are of same size. Ideal for a touch-enabled phone''

Latest revision as of 03:26, 9 May 2012

Article Metadata
Article
Created: manikantan (18 Jun 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Description

The application tray is generally a desktop component that acts as a container for application shortcuts. In MAC terms, this is also called as Dock. In most cases the Dock is placed at the bottom of the screen, with the application shortcuts placed horizontally.


E71 edit.jpg

Shows the Application tray in action

[edit] Advantage

Quick access to frequent applications. And better usage of screen real estate with enhanced legibility.

[edit] Use when

Use when many icons and items need to be displayed along a straight line, in a simple and fancy fashion.


[edit] Use how

The Dock essentially needs to be a transparent/translucent container (panel) for icons, for a better visual experience.

Dock.jpg

This image shows the Dock in action on a Ubuntu PC.

[edit] Adaptations

Depending on whether it was a touch or keying mobile, the dock’s settings can be changed.

On a keying device, it would be more allusive to have a small tween involving a scaling. Like in the image shown below.the item under focus can be magnified and moved to the center of the panel. Others should be smaller in size.

On a touch phone, its simple and straightforward to keep them on the same size.

X-dock.JPG

All items are of same size. Ideal for a touch-enabled phone

[edit] Design Tips

1. Accommodate a maximum of 4-5 icons on the mobile’s dock. More icons can be added by having a LEFT / RIGHT button. The component can be flexible in the arrangement of icons. Most used icons, can be placed on the screen while others appear as LEFT/RIGHT is pressed.

2. Make the tray movable(drag-enabled) on the screen.

[edit] Ideal for

Devices such as N97 or 5800 or any display with a landscape mode. More landscape means, more icons can be placed.Not suitable for Series 40 devices which possess a small screen and lack landscape orientation support.


[edit] Author

--manikantan 14:34, 18 June 2009 (EEST)

This page was last modified on 9 May 2012, at 03:26.
108 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×