drgreen/android_frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
android_frameworks_base/docs/html/design/downloads/index.jd
Ricardo Cervera 23efef3ca9 docs: Design guidelines for watch faces draft. 
Bug: 18338418

Change-Id: Ibf699ee48b7d4ac2800a435e4d95c2b15278861f
2014-12-09 09:19:17 -08:00

276 lines
9.5 KiB
Plaintext
Raw Blame History

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 &amp; 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&reg; Fireworks&reg; 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&reg; Illustrator&reg; 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&reg; OmniGraffle&reg; 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&reg; Photoshop&reg; 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&reg; Illustrator&reg; 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&reg; Illustrator&reg; 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&reg; Photoshop&reg; 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&reg; Illustrator&reg; 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&reg; Photoshop&reg; 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&reg; Photoshop&reg; 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>
Reference in New Issue View Git Blame Copy Permalink