THE VISUAL ASPECTS OF MOBILE USER INTERFACE DESIGN STANDARDS With emphasis on the Android icons
Visual Aspects of Mobile UI Design Standards
Sep 01, 2014
The visual aspects of mobile user interface design from an aesthetic and functional perspective -- emphasizing Android icon design
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
THE VISUAL
ASPECTS OF MOBILE USER
INTERFACE DESIGN
STANDARDSWith emphasis on the Android icons
ICON DESIGN GUIDELINES Launcher Icon Menu Icon Dialogue Icon Tab Icon Status Bar Icon List Icon
LAUNCHER ICONA 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
MENU ICONSMenu 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 px corner radius, when appropriate
STATUS BAR ICONSStatus 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
TAB ICONSTab 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
DIALOG ICONSDialog 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
DIALOG ICONS
LIST VIEW ICONSList 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
LIST VIEW ICONS
LINK TO ANDROID ICON TEMPLATES PACK http://developer.android.com/
shareables/icon_templates-v2.3.zip
Final art must be exported as a transparent PNG file.
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
THANK YOU
Related Documents
