谷歌设计总监谷歌浏览器的android新版设计过程剖析.docx

谷歌设计总监:谷歌浏览器的android新版设计过程作者: 一网学???最后更新时间：2015-12-07 09:44:49小编：最近chrome的视觉设计师负责人sebastiengabriel描述了android上的新版chrome的设计过程，于是阿里mix设计团队就将这片文章翻译过来分享给大家，从文章也能看出一些谷歌产品中material design的发展以及如何应用。正文开始：当我开始写这篇文章的时候，我并不确定有多少内容想要纳入进来。当他完成以后，由于我不愿意遗漏任何一点我认为重要的东西，因此写了很长，于是我要把文章分成两篇来增加可读性。第一部分，我讲述了这次再设计的原因，Material Design（后文简称MD）以及Chrome浏览器的交互和视觉设计哲学。然后通过浅显的技术分析聊聊我们新的风格，颜色和icon图形。介绍2014年10月安卓新版本“棒棒糖”上线，做了许多改变并且做了很多基于MD的重新设计。不仅仅是一套安卓的指导参考和最好的设计规范展现，MD也代表了谷歌的定位并且传达了它的设计和技术价值。并且MD的应用扩展来看不仅仅是谷歌的私有，更是属于想用这个设计语言让他的产品变得更好的每一个平台。作为努力推广MD的一部分，也让我们的谷歌应用与时具进能持续跟进最新的设计语言，重新设计的Chrome浏览器版本在安卓系统“棒棒糖”（注：即Android L）的第40次更新中发布了：我们称之为，Chrome Material Design。内容而不是浏览器这些年来，Chrome浏览器一直基于自身的方向和视觉选择与其他的谷歌产品相对保持了一定的距离。这是缘于实际上Chrome是寄望成为能够承载所有google产品或其他所有创造的一个载体。因此，Chrome的品牌和平台的延续性上总是在和google的品牌进行融合或者平衡。这也时常导致一个问题：我们的定位在哪里？另外当我们在UX和UI的产品设计实践中谈及一些决策的判断，可以总结为基于Chrome浏览器的三个设计理念：速度，极简和安全。从左到右依次代表了Chrome的设计理念：速度，极简，安全。还有一点，也许是对于视觉和用户体验最重要的一点：“内容呈现，而不是Chrome浏览器设计”。浏览器应该总是能尽可能的提供和传递最精准有效的内容，同时弱化浏览器本身的背景设计。因此问题在于：当我们在表现新的视觉设计方向的时候，绝不能强于我们提供的服务内容，那么要怎么样设计一个界面，让它在呈现内容的时候看起来尽可能弱，尽可能容易被忽略？，当然我确实也不知道是否我们找到了答案，但是我们确实做了这样的选择。这篇文章就是来诠释我们重新设计安卓Chrome浏览器时我们的选择和这样做的原因。平台此时已经发版过去了8个月，现在已经都尘埃落定，我感觉更加肯定的来谈论如何和为什么我们做了这些事。不仅作为一个总结审视的留档文件帮我能跳出来分析所做的事，也是作为潜在可用的资源提供给需要的设计师们。并且I/O 2015大会已经到来，这是一个好的方式，来看Material Design的设计语言是如何变的越来越成熟的。好的设计需要时间的打磨，且我也希望第一个版本后经过一年时间Chrome浏览器已然达到了一个令人满意的水平。但是开始之前，让我简单介绍一下安卓平台。如你所知，安卓用户广泛地分布在各种不同的系统版本中。每一个系统都以一种甜点的名称来命名，目前最新的系统是“棒棒糖”，之前的版本是“奇巧巧克力”，再之前是“豆豆糖”。我只提最近的这三个系统版本，因为这三个版本目前的用户最为广泛。我谈这些的原因是因为我们发布了基于两个版本系统的Chrome，一个是pre-L的另一个是L之后的版本。这些Chrome的版本，看起来视觉比较相似，但却是基于截然不同的可用性立足点。一、信息内容为王Chrome浏览器是一个要尽我们所能做好授权和服务的信息网络。抛开用新技术来支持信息传递和开发者不断提升他们应用的方式，Chrome的使命就是让信息网络建立在这样一个平台之上。在棒棒糖系统的版本中，Chrome最重要也是最大的再设计并不是更换了新的皮肤和外观，而是深入改变了用户将如何通过这个平台来处理信息的方式，我们如何推动整个内容的整合。唯一的方式就是将Chrome这个“盒子”打破，拆解它让它成为安卓平台无缝连接的一部分。整合标签页和系统程序要区别这次的迭代和之前的版本，在棒棒糖系统环境下的Chrome被称作“合并标签页和应用程序”。一个非常直白的名字来很好的描述我们做了什么。在Roma（Chrome的UX领导）的带领下做了这次概念性的努力。而我只是尽力叙述了我的思考，因为我主要负责视觉方面。简言之，“合并标签页和应用程序” 是相对于设计我们浏览器的UI，转而更依赖于整个平台的。第一步，拆解Chrome我们将Chrome的移动端分离成许多