add Design guide for Wear. adds new Devices section to sidenav. (80e1a0cf) · Commits · e / os / android_frameworks_base

docs/html/design/auto/index.jd

0 → 100644

+35 −0

Original line number	Diff line number	Diff line
		page.title=Auto
		@jd:body

		<style>
		.auto-img-container-cols {
		position:relative;
		margin-bottom:25px;
		margin-top:25px;
		}
		.auto-img-frame-cols {
		z-index:2;
		position:relative;
		}
		.auto-img-shot-cols {
		position:absolute;
		top:5px;
		left:2px;
		z-index:1;
		}
		</style>

		<div class="auto-img-container-cols" style="float:right; margin:0 0 40px 40px;width:460px">
		<img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png">
		<img class="auto-img-shot-cols" src="/auto/images/assets/03_a_musict.png">
		</div>

		<p>Android Auto is <strong>coming soon</strong> and brings apps to the car,
		integrating with the vehicle's input controls and display.</p>

		<p>The future design guidelines provide templates that define the user interaction model for all apps and let you hook into a standard UI with touch and voice controls. The templates meet international best practices for reducing driver distraction while still letting you customize and brand them to properly deliver your content.</p>

		<p><a href="{@docRoot}auto/index.html">Learn more about Android Auto</a>.</p>

docs/html/design/design_toc.cs

+20 −20

Original line number	Diff line number	Diff line
		@@ -5,7 +5,26 @@
		<ul>
		<li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li>
		<li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li>
		<li><a href="<?cs var:toroot ?>design/get-started/ui-overview.html">UI Overview</a></li>
		</ul>
		</li>

		<li class="nav-section">
		<div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
		<ul>
		<li><a href="<?cs var:toroot ?>design/handhelds/index.html">Phones & Tablets</a></li>
		<li class="nav-section">
		<div class="nav-section-header">
		<a href="<?cs var:toroot ?>design/wear/index.html">Wear</a></div>
		<ul>
		<li><a href="<?cs var:toroot ?>design/wear/creative-vision.html">Creative Vision</a></li>
		<li><a href="<?cs var:toroot ?>design/wear/principles.html">Design Principles</a></li>
		<li><a href="<?cs var:toroot ?>design/wear/structure.html">App Structure</a></li>
		<li><a href="<?cs var:toroot ?>design/wear/patterns.html">UI Patterns</a></li>
		<li><a href="<?cs var:toroot ?>design/wear/style.html">Style</a></li>
		</ul>
		</li>
		<li><a href="<?cs var:toroot ?>design/tv/index.html">TV</a></li>
		<li><a href="<?cs var:toroot ?>design/auto/index.html">Auto</a></li>
		</ul>
		</li>

		@@ -66,25 +85,6 @@
		</ul>
		</li>

		<li class="nav-section">
		<div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
		<ul>
		<!-- wear design goes here -->
		<li class="nav-section">
		<div class="nav-section-header">
		<a href="<?cs var:toroot ?>design/tv/index.html">TV</a></div>
		<ul>
		<li><a href="<?cs var:toroot ?>design/tv/principles.html">Design Principles</a></li>
		<li><a href="<?cs var:toroot ?>design/tv/ui-overview.html">UI Overview</a></li>
		<li><a href="<?cs var:toroot ?>design/tv/style.html">Style</a></li>
		<li><a href="<?cs var:toroot ?>design/tv/patterns.html">Patterns</a></li>
		</ul>
		</li>

		</ul>
		</li>


		<li class="nav-section">
		<div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
		</li>

docs/html/design/devices.jd

0 → 100644

+37 −0

Original line number	Diff line number	Diff line
		page.title=Devices
		page.viewport_width=970
		section.landing=true
		header.hide=1
		footer.hide=1
		@jd:body

		<style>
		#landing-graphic-container {
		position: relative;
		}

		#text-overlay {
		position: absolute;
		left: 0;
		top: 420px;
		width: 360px;

		}
		#hero-image {
		}
		</style>

		<div id="landing-graphic-container">
		<div id="text-overlay">
		<p itemprop="description">The device-centric UI principles, overviews, and detailed guidelines
		described here build on the core <a href="{@docRoot}design/get-started/principles.html">Android Design Principles</a>
		to provide more specific design guidance for different form factors.
		</p>
		<p>
		<a href="{@docRoot}design/handhelds/index.html" class="landing-page-link">Phones & Tablets</a></p>
		</div>
		<a id="hero-image" href="{@docRoot}design/handhelds/index.html">
		<img src="{@docRoot}design/media/device_family.png">
		</a>
		</div>

docs/html/design/get-started/creative-vision.jd

+4 −4

Original line number	Diff line number	Diff line
		@@ -6,10 +6,10 @@ page.title=Creative Vision
		<div class="vspace size-1"> </div>

		<p itemprop="description">
		We focused the design of Android around three overarching goals, which apply
		to our core apps as well as the system at large. As you design apps to work
		with Android, consider these goals: <em>Enchant me</em>, <em>Simplify my
		life</em>, and <em>Make me amazing</em>
		Starting with Ice Cream Sandwich, we focused the design of
		Android around these three overarching goals, which apply
		to our core apps as well as the system at large.
		As you work with Android, consider these goals.
		</p>

		<div class="vspace size-1"> </div>

docs/html/design/get-started/principles.jd

+11 −4

Original line number	Diff line number	Diff line
		page.title=Design Principles
		page.title=Android Design Principles
		@jd:body

		<p>These design principles were developed by and for the Android User Experience Team to keep users'
		best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
		with purpose.</p>
		<p>These design principles were developed by and for the Android
		User Experience Team to keep users' best interests in mind.
		For Android developers and designers, they continue to
		underlie the more detailed design guidelines for different
		types of devices.</p>

		<p>
		Consider these principles as you apply your own
		creativity and design thinking. Deviate with purpose.
		</p>

		<h2 id="enchant-me">Enchant Me</h2>