LOLLIPOPANDROID SSP – ANDROID 5.0 – DESIGN SPECS-V1

12-28-2014

BRANDON MCRAE | DESIGNER

GENERAL INFO

• BACKWARD COMPATIBILITY WITH ANDROID 5.0 APPS

• ANIMATION CODING GUIDELINES. WE NEED TODISCUSS THE DESIGN AND IMPLEMENTATION OFTHE SCREEN TRANSITIONS.

HUB – APPS TAB • SYSTEM BAR SPECS HERE. • 20% BLACK OVER DARK BRAND COLORS, WHITE ICONS.

• 20% WHITE OVER LIGHT BRAND COLORS, BLACK ICONS.

• APP BAR SPECS ONLINE HERE.

• FILL USES BRAND COLOR.

User can tap or swipe between tabs.

User can tap View All to drill in and see all apps.

HUB – APPS TAB NAVIGATION BAR – DARK VERSION ONLY, REGARDLESS OFBRAND COLOR.

SPECS: HUBLAYOUT, MARGINS & PADDING

Additional specs online here.

SPECS: HUB TAB CONTROL• FIXED-WIDTH TAB CONTROL SPECS ONLINE HERE.

• FILL USES BRAND COLOR.

SPECS: HUB BUTTONS• SEARCH BUTTON (FLOATING ACTION BUTTON) SPECS ONLINE

HERE. FILL USES BRAND COLOR (WHITE OR BLACK ICONDEPENDING ON COLOR.)

• FLAT AND RAISED BUTTON SPECS HERE.

States

Dimensions

HUB – VIEW ALL NAVIGATION • VIEW ALL BUTTON NAVIGATES TO > APPS SCREEN W/ ALL

TAB IN FOCUS.

HUB – DEVICES LIST• GRAY BOXES ARE PLACEHOLDER FOR DEVICE ICONS.

Additional specs online here.

CONTACT IT TAB

DIVIDER SPECS:

CONTACT IT TAB

8dp

16dp

16dp

Divider: 1dp high, color: black 12% opacity,

Margins: 8dp above divider16dp below divider

List items 72 dp high

OVERFLOW MENU • OVERFLOW MENU HOSTS SECONDARY NAVIGATION

• MENU ANIMATION EXAMPLE HERE. (APP BAR EXAMPLE)

• ANIMATION DEV SPECS HERE.

PROFILE

APP DETAILS• VERTICAL MARGINS

APP DETAILS• HORIZONTAL MARGINS AND SPACING

16dp

24dp

24dp

Link and Button text color: #4184F3

Flat and Raised button specs here.

DEVICE DETAILS

16dp

DEVICE DETAILS

24dp

24dp

ALERT DIALOG• DIALOG GUIDELINES HERE.

• MODAL DIALOG SPECS HERE.

• TEXT FIELD SPECS HERE.

ALERT DIALOG• DIALOG GUIDELINES HERE.

• MODAL DIALOG SPECS HERE.

USER PROFILE• IMAGE SIZE AVAILABLE FROM AAD (INVESTIGATING…)

USER PROFILE

PROFILE - EDIT MODE• TEXT FIELD SPECS HERE.

SEARCH

BASIC SEARCH• RESULTS SHOW ON SEPARATE SCREEN, AFTER USER

COMPLETES QUERY.

BASIC SEARCH• KEYBOARD COMES UP

• SCREEN DIMS (50%)

• APP BAR CHANGES TO SEARCH WIDGET

• WATERMARK TEXT: WHITE, 50% OPACITY

• INPUT TEXT: WHITE, 100%

Initiates Voice Search.

Clears the input only.

Dismisses Search mode.

Executes Search query, navigates to search

results screen.

BASIC SEARCH

Specs for keyboard floating action button

SEARCH RESULTS• FOR LIST SPECS SEE: HUB/APPS TAB.

ENRICHED SEARCH• SEARCH W/ AUTO-FILL

• WILL PROVIDE SPECS IF FEATURE IS BUILT.

IN-APP NOTIFICATIONS• ANDROID DOESN’T CURRENTLY HAVE A NOTIFICATION MENU

ON THE HOME SCREEN, LIKE THE OTHER PLATFORMS.

• COMMUNICATIONS FROM OUTSIDE THE APP, WHICH DO NOTRESULT FROM USER ACTION.

IN-APP NOTIFICATIONS

NOTIFICATION MENU• NOTIFICATIONS SHOW IN BOTTOM SHEET

• SLIDES UP FROM BOTTOM

• DIMS BACKGROUND

Additional Bottom sheet specs here.

SNACKBAR• NOTIFICATIONS IN RESPONSE TO DIRECT USER ACTION.

Snackbar specs here.