This document provides guidelines for various icon designs used in Android mobile interfaces. It outlines specifications for size, color, shading, and other details for launcher icons, menu icons, status bar icons, tab icons, dialogue icons, and list view icons. The guidelines aim to promote usability, consistency, and accessibility across different screen densities. Developers are advised to follow best practices like filling screens sparingly, using large touch targets, and designing for localization and one-handed use.
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Visual Aspects of Mobile UI Design Standards
1. The visual aspects of mobile user interface design standards With emphasis on the Android icons
2. ICON DESIGN GUIDELINES Launcher Icon Menu Icon Dialogue Icon Tab Icon Status Bar Icon List Icon
3. Launcher Icon A Launcher icon is a graphic that represents your application on the device's Home screen and in the Launcher window. SIZE: 56-72 sqrd. px (high-density), 38-48 sqrd. px (medium-density), 28-36 sqrd. px (low-density) COLOR: Neutral & primary colors; not over-saturated, limited color palette SHADING: Top-lit OTHER DETAILS: Clean and contemporary, Simple and iconic, Tactile and textured, Forward-facing
4. Menu Icons Menu icons are graphical elements placed in the options menu shown to users when they press the Menu button. SIZE: 44-72 sqrd. px (high-density), 30-48 sqrd. px (medium-density), 22-36 sqrd. px (low-density) COLOR: Greyscale SHADING: slight deboss used to create depth OTHER DETAILS: flat, pictured face on, 2 pxcorner radius, when appropriate
5. Status Bar Icons Status bar icons are used to represent notifications from your application in the status bar. SIZE: 24w x 38h px/ 24w x 24h px (high-density), 16w x 25 px/ 16w x 16w (medium-density), 12w x 19h px/ 12w x 12h px (low-density) COLOR: #828282 to #919191 SHADING: #FFFFFF, 10% opacity, angle 90°, distance 1px OTHER DETAILS: Flat, matte, and pictured face-on
6. Tab Icons Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. SIZE: 42-48 sqrd. px (high-density), 28-32 sqrd. px (medium-density), 22-24 sqrd. px (low-density) COLOR: #808080 (unselected), #FFFFFF (selected) SHADING: No shadows OTHER DETAILS: Flat, matte, and pictured face-on
7. Dialog Icons Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame COLOR/ SHADING: Light gradient and inner shadow in order to stand out against a dark background OTHER DETAILS: Flat and pictured face-on
9. List View Icons List view icons are used with ListView to graphically represent list items. An example is the Settings application. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame -- based on a 32x32 pixel artboard size in Photoshop COLOR/ SHADING: Light/ black gradient, 57 % opacity, angle 120°, distance 1px, size 1px OTHER DETAILS: Flat and pictured face-on with an inner shadow
11. Final art must be exported as a transparent PNG file. Link to android icon templates pack http://developer.android.com/shareables/icon_templates-v2.3.zip
12. Best practices Fill screens sparingly Be consistent with user interface workflows, menu types & buttons Make Touch Mode “hit areas” large enough Use big readable fonts & large icons Integrate tightly with other applications on the system Keep localization in mind Reduce keys or clicks Don’t assume that specific input mechanisms are available Encourage “thumbing” by default