View
6
Download
0
Category
Preview:
Citation preview
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.
Recommended