Download - Visual Aspects of Mobile UI Design Standards
![Page 1: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/1.jpg)
THE VISUAL
ASPECTS OF MOBILE USER
INTERFACE DESIGN
STANDARDSWith emphasis on the Android icons
![Page 2: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/2.jpg)
ICON DESIGN GUIDELINES Launcher Icon Menu Icon Dialogue Icon Tab Icon Status Bar Icon List Icon
![Page 3: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/3.jpg)
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
![Page 4: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/4.jpg)
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
![Page 5: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/5.jpg)
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
![Page 6: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/6.jpg)
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
![Page 7: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/7.jpg)
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
![Page 8: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/8.jpg)
DIALOG ICONS
![Page 9: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/9.jpg)
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
![Page 10: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/10.jpg)
LIST VIEW ICONS
![Page 11: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/11.jpg)
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.
![Page 12: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/12.jpg)
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
![Page 13: Visual Aspects of Mobile UI Design Standards](https://reader033.vdocuments.us/reader033/viewer/2022061103/5404b4f98d7f729b768b4892/html5/thumbnails/13.jpg)
THANK YOU