User Interface Guidelines

The Qt Components provide a set of components that is used to create applications that have same look & feel as the system delivered components. However, the Qt Components itself does not guarantee a common look & feel. It is also important to use certain commonly used values like fonts, marging and spacings. This page lists the most common used ones.

Common Margins and Sizes

Default Margin

Most commonly used margin is 16 pixels. It is used around the containers that contains the actual UI elements. For example pages will always have a 16 pixel margin on right and left. If any content is placed inside - for example text box with border - the content again has the 16 pixel marging to the parent container.

The default margin is accessed by DefaultMargin variable.

 UiConstants.DefaultMargin

Buttons

Placing of buttons follows the default margin in most of cases. However, if you place the buttons in a column the prefered spacing between the buttons is 6 pixels.

The default spacing is accessed with ButtonSpacing variable.

 UiConstants.ButtonSpacing

Headers

When you create a header use margins and spacings:

Header height:

72 pixels in portrait
46 pixels in landscape

Spacing:

20 pixels on top and bottom in portrait
16 pixels on top and 14 pixells at bottom in landscape

If the header is just used for text input is a special case, then the height is 80 pixels and margins at top and bottom is 14 pixels.

 UiConstants.HeaderDefaultHeightPortrait
 UiConstants.HeaderDefaultHeightLandcape

 UiConstants.HeaderDefaultTopSpacingPortrait
 UiConstants.HeaderDefaultBottomSpacingPortrait

 UiConstants.HeaderDefaultTopSpacingLandscape
 UiConstants.HeaderDefaultBottomSpacingLandscape

List Item

List Items cover all common cases when things are presented in lists.

Height

Three different heights are used for list items

Small list items: 64 pixel height
Default height: 80 pixels
Some special cases: more than 80 pixels

These heights are accessed in the following way:

 UiConstants.ListItemHeightSmall
 UiConstants.ListItemHeightDefault

When placing items inside the list item the following common values are used:

Margin on top of picture is 8 pixels
Padding between items placed inside list is 16 pixels
Padding between small items inside list 8 pixels
Bottom margin 12 pixels

Text

The font used by the application is called "Nokia Pure Text". It is set by default if developer uses Label as the text component.

The most commonly used text styles are:

Header: style: "Light", size: 32 pixels
Group header (groups item inside the pages): style: "Bold", size: 18 pixels
Title (for example in list items): style: "Bold", size: 26 pixels
Small Title: style: "Bold", size 24 pixels
Field label: style: "Light", size 22 pixels
Subtitle (for example inside list items): style "Light", size: 22 pixels
Default bodytext: style: "Ligth", size 24 pixels

You can access them directly using following:

 UiConstants.HeaderFont
 UiConstants.GroupHeaderFont
 UiConstants.TitleFont
 UiConstants.SmallTitleFont
 UiConstants.FieldLabelFont
 UiConstants.SubtitleFont
 UiConstants.BodyTextFont

Access the field label font color using:

 UiConstants.FieldLabelColor

Contents