Types and sizes

BlackBerry smartphones use different sizes for in-app icons and indicators.

Keep the main graphical elements within the inner area of the icon or indicator to allow for a UI buffer zone.

For best results on devices with a screen resolution of 720 x 1280 pixels, scale your in-app icon images to 83% of the size of an in-app icon for devices with a screen resolution of 720 x 720 or 768 x 1280 as shown in the examples below.

Action bar and menu icons

Large icons

Diagram showing large icon measurements.

81 x 81 pixels (for devices with a 720 x 720 or 768 x 1280 screen resolution).

Diagram showing large icon measurements for devices with a 720 by 1280 screen resolution.

67 x 67 pixels (for devices with a 720 x 1280 screen resolution).

Large icons are the most common. Apps use them most often in these UI contexts:

Action bar with tab icons

Device showing an action bar.

Action menu icons

Device showing an action menu.

Tab menu icons

Device showing a tab menu.

Content area icons

Device showing icons associated with list items.

Application menu icons

Device showing an application menu.

Context menu icons

Device showing a context menu with only the icons visible.

Components and small buttons

Medium icons

Use the medium icon size for components.

Diagram showing the measurements for medium icons.

Components: 71 x 71 pixels (for devices with a 720 x 720 or 768 x 1280 screen resolution), 59 x 59 pixels (for devices with a 720 x 1280 screen resolution).

Small icons

Use the small icon size for small buttons.

Diagram showing the measurements for small icons.

Small buttons: 61 x 61 pixels (for devices with a 720 x 720 or 768 x 1280 screen resolution), 51 x 51 pixels (for devices with a 720 x 1280 screen resolution).

Device showing components, including small buttons.

Indicators

Indicators are small icons used in the content area to show extra information (for example, status). If you create an indicator, follow the design guidelines for icons listed above. Reduce the amount of detail, and reduce the number of pixels by one for the largest lines. Follow the size and alignment guidelines below:

Large indicators

Diagram showing measurements for large indicators.

46 x 36 pixels (for devices with a 720 x 720 or 768 x 1280 screen resolution), 38 x 30 pixels (for devices with a 720 x 1280 screen resolution).

Small indicators

Diagram showing measurements for small indicators.

31 x 26 pixels (for devices with a 720 x 720 or 768 x 1280 screen resolution), 26 x 22 pixels (for devices with a 720 x 1280 screen resolution).

Device showing examples of indicators associated with list items.

Alignment

Diagram showing acceptable indicator alignment.

Recommended: Make indicators smaller than the adjacent text. Bottom-align indicators to the baseline.

Diagram showing unacceptable indicator alignment.

Not recommended: The first indicator is not bottom-aligned. The second indicator is larger than the text.

comments powered by Disqus