por UI toolkit 6-20 jk€¦ · “ok google” 12 32 “ok google” 12 32 8 dp block 36 dp app...
Transcript of por UI toolkit 6-20 jk€¦ · “ok google” 12 32 “ok google” 12 32 8 dp block 36 dp app...
“Ok Google”1232
“Ok Google”
1232
8 DP BLOCK
36 DP APP ICON
14 DP INDICATOR
ROBOTO THIN 52 SP
ROBOTO LIGHT 16 SP
4 DP BLOCK
40 DP 24 DP
12 DP
16 DP
92 DP
26 DP
218 DP
240 DP
MAX PEEK HEIGHT88 DP
PADDING FROMTOP OF CARD
32 DP
Circle position ONE
“Ok Google”
“Ok Google”
Snippet text
Snippet text
14 DP INDICATOR
8 DP BLOCK
28 DP APP ICON
ROBOTO LIGHT 16 SP
ROBOTO LIGHT 18 SP
4 DP BLOCK
40 DP 40 DP8
16 DP38 DP
218 DP
240 DP
MIN PEEK HEIGHT52 DP
Snippet text
Circle position TWO
“Ok Google”
“Ok Google”
Snippet text
40 DP 40 DP8
218 DP
MIN PEEK HEIGHT52 DP
14 DP INDICATOR
8 DP BLOCK
28 DP APP ICON
ROBOTO LIGHT 16 SP
ROBOTO LIGHT 18 SP
4 DP BLOCK
84 DP106 DP
240 DP
Snippet text
Circle position THREE
“Ok Google”
“Ok Google”
Snippet text
40 DP 40 DP8
218 DP
MIN PEEK HEIGHT52 DP
14 DP INDICATOR
8 DP BLOCK
28 DP APP ICON
ROBOTO LIGHT 16 SP
ROBOTO LIGHT 18 SP
4 DP BLOCK
116 DP138 DP
218 DP
240 DP
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
632
SamWanna do lunch?
632
SamWanna do lunch?
632“Ok Google”
Ambient mode while device is being charged
Interactive mode while device is being charged
Interactive mode with hotword
“Ok Google” “Ok Google”632 632 632
104 DPMAXHEIGHT
12 DP
2 DP
52 DP14 DP14 DP
8 DP
Ambient mode while device is being charged
Google CustomHotword + Indicator Position
Hotword appears when entering interactive mode and disappears after 3 seconds
12 DP
8 DP BLOCK
32 DP BLOCK
Snippet text
“Ok Google”
“Ok Google”
“Ok Google”
Snippet text Snippet text
ROBOTO LIGHT 16 SP
Position: BOTTOMPosition: MIDDLE Position: TOP
12 DP
86 DP
8 DP
8 DP BLOCK
24 DP BLOCK
CENTER RIGHT
14 DP
14 DP96 DP
40 DPMIN CARD
14 DP14 DP
12 DP
LEFT CENTER RIGHTLEFT CENTER RIGHTLEFT
40 DPMIN CARD
36 DP
118 DP
64 DP
104 DPMAX HEIGHT
12 DP 12 DP8 DP 8 DP
Snippet text
“Ok Google”“Ok Google”
“Ok Google”“Ok Google”
LEFT
14 DP
14 DP 16 DP
18 DP
22 DP
COLOR #000OPACITY 30%
12 DP
System indicator background protection.
8 DP BLOCK
Archive
Label with one line
Labels with two lineslook like this
Labels with two lineslook like this
Reply
ROBOTO LIGHT 16 SP ROBOTO LIGHT 20 SP
16 DP
12 DP
104 DP104 DP
16 DP16 DP 16 DP
24 DP 24 DP
12 DP
8 DP BLOCK
64 DP ICONASSET SIZE
Big action buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.
Big actions use big icons.ic_full_*
BLUE CIRCLECOLOR #2878ff
PRESSEDCOLOR #2955C5
104 DP
48 DPINTERIOR
Reply
SamWanna do lunch?
632
CURRENT PAGE
NEXT PAGE
12 DP
8 DP
8 DP BLOCK
Sam Blitzstein
Sam Blitzstein
Sam BlitzsteinWanna do lunch?
632632
ROBOTO LIGHT 16 SPCOLOR #434343
40 DP
Regular peek card Short peek card with custom clockface
12 DP
8 DP BLOCK
12 DP 8 DP
8 DP
8 DP
8 DP
8 DP BLOCK
On long press, grow dot outward from center.
Apply 50% black on top of background.
Press state for quit button.
RED CIRCLECOLOR #ff5151ic_full_cancelPRESSEDCOLOR #b83120
104 DP
100% DOMINANT COLOR
OVERLAY20% #000
100% DOMINANT COLOR
OVERLAY20% #000
100% DOMINANT COLOR
OVERLAY20% #000
Blue BirdStandard two line text notification
FireStandard two line text notification
SnapperStandard two line text notification
8 DP BLOCK
MoneyMoney Money (Remix)
Artist
Track title
Naomi PilgrimNaomi Pilgrim
Money Money (Remix)
Naomi Pilgrim
ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2
ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343
COLOR #02a8f3
12 DP
2 DP
12 DP 12 DP
COLOR #02a8f3OPACITY 50%
HEIGHT 2 DPINSET ON CARD
8 DP 12 DP12 DP 8 DP 12 DP
20 DP
20 DP20 DP
Artist one line onlyTrack title on two lines max
Artist one line onlyTrack title on one line
8 DP BLOCK 32 DP ICON
12 DP
12 DP
2 DP
PreviousNext
Label with one line
Thumbs up
ROBOTO LIGHT 20 SP
16 DP
12 DP
104 DP104 DP
16 DP16 DP 16 DP
24 DP 24 DP
12 DP
8 DP BLOCK
64 DP ICONASSET SIZE
Big action buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.
Big actions use big icons.ic_full_*
BLUE CIRCLECOLOR #2878ff
PRESSEDCOLOR #2955C5
104 DP
48 DPINTERIOR
+3 more
ROBOTO LIGHT 14 SP#434343
12 DP
36 DP
Airplane modeEnabled
Don’t forgetyour phone!
Battery is at20%
Roboto Condensed Light20 SP
632 632 632
32 DP ICON24 DP INTERIOR
COLOR #434343
12 DP
12 DP
8 DP12 DP 12 DP
20 DP
20 DP
Dismissable card added to stack.ic_alert_airplanemode
When breaking connection with your phone, vibrate and dosplay this card. ic_alert_nophone
When battery is at 20%ic_alert_lowbattery
8 DP BLOCK 32 DP ICON
32 DP APP ICON
12 DP16 DP16 DP
12 DP
12 DP 12 DP
12 DP
12 DP
16 DP 16 DP12 DP
8 DP BLOCK
Card title
Card Body
PRIMARY TEXT COLOR#434343
SECONDARY TEXT COLOR#a2a2a2
ROBOTO CONDENSED LIGHTSIZE 20 SP
ROBOTO CONDENSED LIGHTSIZE 20 SP
Abc
Abc
Card title
Card title
Large 40
Cras nec enim in felis vulputate sed malesuada a vitae blandit ipsum.
32 DP APP ICON
12 DP
12 DP
4 DP
4 DP
16 DP12 DP
12 DP
12 DP
16 DP12 DP
8 DP BLOCK
30th and Mission
Header
Secondary
Navigate to 30th and MissionNavigate to
ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2
ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343
12 DP
2 DP
12 DP
8 DP 12 DP12 DP
12 DP
32 DP
8 DP BLOCK 32 DP ICON
32 DP ICON24 DP INTERIOR
64 DP ICONASSET SIZE
GREEN CIRCLECOLOR #1ce8b5104 DP
48 DPINTERIOR
Austin RobisonStandard two line text notification
Austin RobisonStandard three line text notification will look just like this
Austin RobisonStandard four line text notification will look just like this example here
632 632 632
96 DP96 DP 96 DP
8 DP BLOCK
Every line of text adds 24 DP to the height of the card.
Oh man that’s so cool!
If a card is any taller than 96 DP we have to push a bit
of it below the fold.
Austin RobisonStandard five line text notification will look just like this example here that contains five lines
Austin RobisonThis is an example of the maximum card height before we truncate, fanny pack umami kitsch authentic pop-up bicycle rights wolf moon cardigan
Austin RobisonThis is an example of a card exceeding the max height and truncating the card. Tapping this card will expand the card and reveal more text
632 632 632
96 DP 96 DP 96 DP
8 DP BLOCK Taller than 240 DP or 9 lines of text? We fade you out at the
bottom and truncate you.
9 lines of text, or 240 DP is safe. This is the max size
before we need to truncate.
Cond Light 20Cond Light 20gluten-free vneck
HeaderBody
Austin RobisonStandard four line text notification will look just like this example here
Austin RobisonThis is an example of a card exceeding the max height and truncating the card. Tapping this card will expand the card and reveal more text
632 632 63228 DP
96 DP28 DP
24 DP
16 DP
12 DP
12 DP
8 DP BLOCK 32 DP APP ICON
COLOR #a2a2a2
COLOR #434343
16 DP
12 DP
28 DP 28 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
16 DP
16 DP
Austin RobisonStandard two line text notification
Cond Light 20Cond Light 20 SP
Austin RobisonStandard one line!
632 632 632
28 DP
28 DP
16 DP
12 DP72 DP
8 DP BLOCK
This just so happens to be the smallest card you’ll ever see. Imagine that. It’s only 72 DP!
At 96 DP, this sucker is the tallest card that will ever float on your home screen.