1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
|
page.title=Downloads
page.tags=Icons,stencils,color swatches
@jd:body
<p>You may use these materials without restriction to facilitate your app design
and implementation.</p>
<h2 id="stencils">Phone & Tablet Stencils</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
rich typography, colors, interactive controls, and icons found throughout Android, along with
phone and tablet outlines to frame your creations. Source files for icons and controls are also
available.</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_stencils.png">
</div>
<div class="layout-content-col span-4">
<p>
<!--<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Fireworks Stencil');"
href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe® Fireworks® PNG Stencil</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Illustrator Stencil');"
href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe® Illustrator® Stencil</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'OmniGraffle Stencil');"
href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a>-->
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');"
href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a>
</p>
</div>
</div>
<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<p>Action bar icons are graphic buttons that represent the most important actions people can take
within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
<p>The download package includes icons that are scaled for various screen densities and suitable for
use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
modify to match your theme, plus source files.</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/iconography_actionbar_style.png">
</div>
<div class="layout-content-col span-4">
<p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');"
href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a>
</p>
</div>
</div>
<h2 id="Wear">Android Wear Materials</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>UI toolkit</h4>
<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');"
href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe® Illustrator® Toolkit</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit PDF');"
href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.pdf">PDF Toolkit</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Sample user flow patterns</h4>
<p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');"
href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe® Illustrator® App Patterns</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');"
href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.pdf">PDF App Patterns</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Sample app design mocks</h4>
<p>Stream cards and UI elements for some example apps in fully editable PSD format.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');"
href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe® Photoshop® mocks</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Watch faces UI toolkit</h4>
<p>Detailed specifications and measurements for the the background canvas, notification cards, and
system indicators.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');"
href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Slide watch face</h4>
<p>Example of a watch face design in AI format.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150"
style="width:150px;margin:0 auto;display:block">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');"
href="{@docRoot}downloads/design/Slide.ai">Adobe® Illustrator® Design</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Slide watch face specifications</h4>
<p>Design specifications for the Slide watch face in PSD format.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150"
style="width:150px;margin:0 auto;display:block">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
href="{@docRoot}downloads/design/Slide.psd">Adobe® Photoshop® Specifications</a>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Watch face icon example</h4>
<p>Template for creating watch face icons for the carousel on Android Wear devices.
</p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
style="width:150px;margin:0 auto;display:block">
</div>
<div class="layout-content-col span-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe® Photoshop® Icon</a>
</div>
</div>
<h2 id="style">Style</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4 id="roboto">Roboto</h4>
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
requirements of UI and high-resolution screens.</p>
<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p>
<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
</div>
<div class="layout-content-col span-4">
<p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');"
href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a>
</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Color</h4>
<p>In Android's color palette, each color has a corresponding darker
shade that can be used as a complement when needed.</p>
<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
</div>
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/downloads_color_swatches.png">
</div>
<div class="layout-content-col span-4">
<p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');"
href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
</p>
</div>
</div>
|
