2014年的Google I/O app设计中的材料设计-渣渣的翻译

　　又是一篇翻译，用了三个多小时。http://android-developers.blogspot.co.id/2014/08/material-design-in-2014-google-io-app.html

2014 8 5
在2014年的google I/O app大会上的材料设计
Roman Nurik,google I/O android app的领导者

每年的google i/o大会，我们推出Android app的会议来服务两个目标。
首先，服务于来参加会议和在家研究的伙伴，个人调度，给予谈话更多
的浏览接口。第二，论证越来越重要，它会给安卓设计和开发者最好
的实践。

在设计前面，今年的I/O app使用了新的材料设计方法和Android L开发
预览版的一些特征用一个合理的，相容的，适应性和漂亮的方式来表示
内容。让我们来看一些设计决策和通知了的app设计的成果。

界面和阴影
在材料设计中，界面和阴影在传递app结构信息中扮演了一个重要的角色。
材料设计细则大纲描述了一些帮助指导何时何地阴影应该出现的原则的层次
规则。这里有一个例子，讲述我们经过的一些屏幕调度。

第一个例子有着大量的问题。首先，app bar下面的单一阴影传递了这里
有两张纸：一个是app bar，另一个是标签tabs和屏幕内容。下面的纸片太
复杂了，墨水表示的纸片内容应该相当简单，在这里墨水做了太多的工作，
结果就是视觉噪音。一个可选择的就是让标签为三分之一的纸条，并且放在
app bar和内容上面，但是太多的层次也令人分心。

第二个和第三个动作就很好，在chrome和内容之间搞了一个很干净的区分，
并且让墨水集中于文本，图标和强调的笔画。

另一个在我们的详细页面中的界面概念的区域也扮演了一个重要的角色。
在我们的第一个版本中，当你滑动详情区域，顶部条目从image区域到color
区域越来越淡，而且图片在title区域下面滑动的速度只有一半了，产生一个
parallax视差效果。我们的关注点就是这个设计弯曲了材料设计的物理效果
太多。它看起来好像文本是沿着透明的纸张滑动贯穿了整个动画。

一个更好的方法，我在在6月25号更新了app,打印的title文本是更新更短的
界面。这个界面有一个相容的颜色和不透明。在滑动之前，它跟包含了body文本
的纸条是相邻的，形成了一个裂缝。当你滑动的时候，在body文本纸条上面这个
界面会上升(并且滑动动作条绑定在上面)，运行body在它下面滑动。

这个对齐在材料设计中的物理效果会更好，并且最后的结果给用户看是更加
连续,可交互和手势故事。是更一直连续的可视化，交互和手势故事给用户。

颜色
材料设计的一个关键原则就是界面应该是黑体、图片化、有意图的,并且基于打印的
基础元素应该可视化处理。让我们来看一下下面两个这样的元素：颜色和边距。

在材料设计中，UI元素颜色调色板通常由一个主要的和一个强调的颜色组成。
大的颜色区域(像app bar背景)呈现主要的基础颜色500 shape，然而更小的区域
是使用了黑色的阴影的状态条，比如700.

强调颜色贯穿整个app是使用的更精妙，对于关键元素要注意。一个平淡的主要颜色
和一个明亮的强调颜色产生并行的结果，给app一个黑体的，五颜六色的看起来没有
压倒性优势的app的实际内容的外观。

在I/O app中，我们选择两种情况，它使用在不同的状况。大部分情况是粉500，然而
更保守的是亮蓝500是更好的适应去添加到调度按钮上，这个经常邻进颜色区域。

说到颜色区域，我们装扮每个区域的相信屏幕区域是基于区域的主题。我们通常使用
材料设计带有较小微调的颜色调色板来确保亮度兼容和优化从而与浮动活动按钮和图
片区域参照。

下面是一个来自我们最终颜色区域调色板探索文件的引用。
颜色区域，带有并行浮动活动按钮来评价对比。
减轻饱和度的颜色区域，在调色板来评估亮色的兼容性

边距
另一个重要的传统打印设计元素就是我们认为的边距，更加精确的叫做版面设计。
然而我们已经对垂直地方用4dp的grid去定制(边框和简单的List items是48dp,标准
的活动条是56dp等等)，在材料设计中版面设计的指导原则是很新的。特别地，对齐
的标题和其它文字花的条目在版面设计2(手机中是72do，平板中是80dp)在我们的屏幕
上立即滴入一个干净的、打印清楚的节奏，并且允许以一个非常快的扫描信息到一个
屏幕上。究极原则，成功！

网格
另一个在材料设计中关键的原则就是一个可适配的设计：
一个简单的根本的设计系统组织交互和空间。每个设备都反映了一个同样的根本系统
的不同布局。每个布局都是裁成大小和交互去适配每个设备。颜色，插图，层级和
控件关系保持一致。
现在，在I/O app的许多屏幕都代表的区域的收集。对于展现收藏，材料设计展示了大
量的容器：cards卡片,lists列表,和grids网格。我们传统地认为使用cards来表现
item区域，但是因为我们主要展示同质的内容，我们认为cards在我们的用例中不合适。
阴影和圆边的卡片将添加太多可视化的杂乱，并且在可视化组内容方面没有任何
帮助。一个可适配的grid网格是一个更好的选择，我们可以改变栏目大小的栏目
数字，并且我们可以在我们需要保存空间的地方自由的集成文本和图像。

愉悦的详情
在使app完美的过程中其中的两个小细节我们花了大量的时间。尤其是在L开发预览版，
触摸有波纹，并且添加到了调度的浮动活动按钮。

我们在app中使用了剪除和未剪除的波纹风格，并且确保定制波纹颜色来保证波纹可见
(但是仍然很精妙)无关背景。

但是在app中我们最喜欢的详情就是浮动活动条可以拖动区域是否显示在你的个人调度中。
我们在L预览版中使用了一些新的API方法(连同回退实现一起)来确保感觉还不错：
1.View.setOutline 和 setClipToOutline 在环形剪断和动态阴影渲染。
2.android:stateListAnimator 来提起按钮面向你的手指按压(增加拖动阴影)
3.RippleDrawable 对于在按压中的墨水触摸反馈
4.ViewAnimationUtils.createCircularReveal 对于蓝/白背景的状态显示
5.AnimatedStateListDrawable 来定义frame帧animations对于图标状态的改变
(从检查到没检查)
最后的结果是漂亮的和异想天开的我们真的很自豪的UI元素，并且希望你能从中
获取灵感并且简单地拖动到你自己的app中。

那么接下来呢？
说到拖动代码到你自己的apps中，记得所有的源代码是在app的后面，包含了L开发者
预览版功能和反馈代码区域，现在可以获得了，所以检查了看看我们是怎么实现的。
我们希望这篇帖子可以给你一些主意关于你这样使用材料设计来构建漂亮的用于大多数
平台的Android apps。保持调试更多的关于今年I/Oapp源码在接下来的几周内释放的帖子，
去获得更棒的方法来传递最好的体验给你的用户。
       

Material design in the 2014 Google I/O app
By Roman Nurik, lead designer for the Google I/O Android App

Every year for Google I/O, we publish an Android app for the conference that serves two purposes. First, it serves as a companion for conference attendees and those tuning in from home, with a personalized schedule, a browsing interface for talks, and more. Second, and arguably more importantly, it serves as a reference demo for Android design and development best practices.

Last week, we announced that the Google I/O 2014 app source code is now available, so you can go check out how we implemented some of the features and design details you got to play with during the conference. In this post, I’ll share a glimpse into some of our design thinking for this year’s app.

On the design front, this year’s I/O app uses the new material design approach and features of the Android L Developer Preview to present content in a rational, consistent, adaptive and beautiful way. Let’s take a look at some of the design decisions and outcomes that informed the design of the app.

Surfaces and shadows
In material design, surfaces and shadows play an important role in conveying the structure of your app. The material design spec outlines a set of layout principles that helps guide decisions like when and where shadows should appear. As an example, here are some of the iterations we went through for the schedule screen:

First iteration

Second iteration

Third iteration
The first iteration was problematic for a number of reasons. First, the single shadow below the app bar conveyed that there were two “sheets” of paper: one for the app bar and another for the tabs and screen contents. The bottom sheet was too complex: the “ink” that represents the contents of a sheet should be pretty simple; here ink was doing too much work, and the result was visual noise. An alternative could be to make the tabs a third sheet, sitting between the app bar and content, but too much layering can also be distracting.
The second and third iterations were stronger, creating a clear separation between chrome and content, and letting the ink focus on painting text, icons, and accent strips.
Another area where the concept of “surfaces” played a role was in our details page. In our first release, as you scroll the details screen, the top banner fades from the session image to the session color, and the photo scrolls at half the speed beneath the session title, producing a parallax effect. Our concern was that this design bent the physics of material design too far. It’s as if the text was sliding along a piece of paper whose transparency changed throughout the animation.

A better approach, which we introduced in the app update on June 25th, was to introduce a new, shorter surface on which the title text was printed. This surface has a consistent color and opacity. Before scrolling, it’s adjacent to the sheet containing the body text, forming a seam. As you scroll, this surface (and the floating action button attached to it) rises above the body text sheet, allowing the body text to scroll beneath it.

This aligns much better with the physics in the world of material design, and the end result is a more coherent visual, interaction and motion story for users. (See the code: Activity, Layout XML)

Color
A key principle of material design is also that interfaces should be “bold, graphic, intentional” and that the foundational elements of print-based design should guide visual treatments. Let’s take a look at two such elements: color and margins.

In material design, UI element color palettes generally consist of one primary and one accent color. Large color fields (like the app bar background) take on the main 500 shade of the primary color, while smaller areas like the status bar use a darker shade, e.g. 700.

The accent color is used more subtly throughout the app, to call attention to key elements. The resulting juxtaposition of a tamer primary color and a brighter accent, gives apps a bold, colorful look without overwhelming the app’s actual content.

In the I/O app, we chose two accents, used in various situations. Most accents were Pink 500, while the more conservative Light Blue 500 was a better fit for the Add to Schedule button, which was often adjacent to session colors. (See the code: XML color definitions, Theme XML)

And speaking of session colors, we color each session’s detail screen based on the session’s primary topic. We used the base material design color palette with minor tweaks to ensure consistent brightness and optimal contrast with the floating action button and session images.

Below is an excerpt from our final session color palette exploration file.

Session colors, with floating action button juxtaposed to evaluate contrast

Desaturated session colors, to evaluate brightness consistency across the palette
Margins
Another important “traditional print design” element that we thought about was margins, and more specifically keylines. While we’d already been accustomed to using a 4dp grid for vertical sizing (buttons and simple list items were 48dp, the standard action bar was 56dp, etc.), guidance on keylines was new in material design. Particularly, aligning titles and other textual items to keyline 2 (72dp on phones and 80dp on tablets) immediately instilled a clean, print-like rhythm to our screens, and allowed for very fast scanning of information on a screen. Gestalt principles, for the win!

Grids
Another key principle in material design is “one adaptive design”:

A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.
Now, many of the screens in the I/O app represent collections of sessions. For presenting collections, material design offers a number of containers: cards, lists, and grids. We originally thought to use cards to represent session items, but since we’re mostly showing homogenous content, we deemed cards inappropriate for our use case. The shadows and rounded edges of the cards would add too much visual clutter, and wouldn’t aid in visually grouping content. An adaptive grid was a better choice here; we could vary the number of columns on screen size (see the code), and we were free to integrate text and images in places where we needed to conserve space.

Delightful details
Two of the little details we spent a lot of time perfecting in the app, especially with the L Developer Preview, were touch ripples and the Add to Schedule floating action button.

We used both the clipped and unclipped ripple styles throughout the app, and made sure to customize the ripple color to ensure the ripples were visible (but still subtle) regardless of the background. (See the code: Light ripples, Dark ripples)

But one of our favorite details in the app is the floating action button that toggles whether a session shows up in your personalized schedule or not:

We used a number of new API methods in the L preview (along with a fallback implementation) to ensure this felt right:

View.setOutline and setClipToOutline for circle-clipping and dynamic shadow rendering.
android:stateListAnimator to lift the button toward your finger on press (increase the drop shadow)
RippleDrawable for ink touch feedback on press
ViewAnimationUtils.createCircularReveal for the blue/white background state reveal
AnimatedStateListDrawable to define the frame animations for changes to icon states (from checked to unchecked)
The end result is a delightful and whimsical UI element that we’re really proud of, and hope that you can draw inspiration from or simply drop into your own apps.

What’s next?
And speaking of dropping code into your own apps, remember that all the source behind the app, including L Developer Preview features and fallback code paths, is now available, so go check it out to see how we implemented these designs.

We hope this post has given you some ideas for how you can use material design to build beautiful Android apps that make the most of the platform. Stay tuned for more posts related to this year’s I/O app open source release over the coming weeks to get even more great ideas for ways to deliver the best experience to your users.

Join the discussion on
+Google Design