如何将品牌与UI完美结合？Google新规范告诉你答案

2018年5月9凌晨1点，Google 开发者大会上 Material Design 做了更新讲解，其令我印象深刻是 Google 图形语言单独拿出来做个模块来解释，如下图我标红地。

！是这个 SHAPE 单词，为什么我会如此看，大家应该知构成设计语言四大基础原子是：体/颜色/网格系统/图形，这里图形括图标和些辅助图形。它有什么不呢？大家看前以往版本，材质设计语言里没有单独去说形状这元素，然也有做比较好品，比如韩国29cm和11街，国内天猫、网易蜗读书等等。

图形语言对我们产品影响极其大，之前网上也有样的文章，比提取 logo 上面视基因，运用到图标里面。对，个没错，但是我得不够，不。今天和大家一来分析下 Google 是何做的。

一、我对图形的了解

图形处不在，眼图形识能力远远高于体，图形便于记忆，传播，这是为何做 LOGO 时候都需要去考虑图形延展。目为了传播品牌，在户心中打产形象，如可口可乐弧线，阿迪达斯，苹果 logo 这些国际性大牌子的 logo 都是易于记忆与传播的。

那么在产品设计中如何体现呢？如我们在图标里面展现一些牌元素，如天猫猫头直接和图标融合，这是一个很成功的例子。还有韩国的 Genie 音乐产是直接 logo 和图标集合。

那么仅仅是这些吗？然不够，如我们想传我们品品理念，深入到用户心，在图标里运用是不够。比如可口可乐年做品运广，不断大量复它 logo 弧线元素，这样能长期在用户心形成记忆。

二、Google是如何做的？

Google 这让我们打开眼界，下是 Google 原话：

形状可以引导注意力，让用户易于识组件，沟状态和品语言传。

此有了些更深刻认识，其实形状运用不止我们平常所理解，下图是来自材质语言截图。

△ 图片来自 Google

Google 的想法非常大胆，一个方形的变化，延伸出不同的形状，当并不是单独一个产品设计里面放么形状，而是不同产品，运用不同的图形，传达其特殊品牌，大局统一，局部战略整。

比上图中凹槽图形用在主 TAB 上，形成视焦点，容易吸引用户去关注它，一般核心功能此设计。

Google 已提到以用区分不同组件，观点我很赞同，之前我对爱奇艺做视分析，现它们一级导航和二级导航样式一样，么用户该何区分？

图形以用表达某一正在互的状态，比选中状态，当并不是单独去使用，Google 特定强，需要和其他视元素集合来使用，比颜。比我们的 check box 控件，选中前状态不一样。不 Google 个是否略显夸？

最，比还以用表达品牌语言，么图形来自哪里？用在哪里？

如图一 Crane 的应用，他们 logo 中间一图形加外椭圆底。

这 Google 提取了椭圆作为视觉 DNA，并沿用产品的每一个控件。

同一产品多终端统一符号语言。

如下图提取 LOGO 关键殊符号。

下图 Shrine 提取菱形棱角图形运用产品计细节面。

其实说实话，于品 DNA 延续早在年初时候思考过，如何去把品语言在品设计里体现？

我当时理是，首先要我们的品牌核心是什么？我们的品牌理念、品牌solgan，我们要给用户传达一种什么样的情怀，何去巧妙提取产品 logo 里面的视基因，比某一图形元素，比条/点/某一特殊图形符号，图形一定是易延展，拓展强的。

然后运用到产品的每一细节里面，比如图标，按钮，异常状态，启动页，运营banner，感化设，如今 Google 已去这样了，且得很系统，包括动效都规范。

当也有一些产品已经这做了，比如韩国29cm，计细节非常好，图形运用非常位。国内猫猫头运用也是渗透产品面去了，Google 这次给一些大胆的思考，能运用这广的范围。

三、需要注意的点

Google 举了几反面例子，我们提取图形或者使用时需注意的几点，如下：

注意图形的指向性触摸小，千万别影响用户常使用

同一含义的组件样式必须一致，

别使用形状暗示其他含义。 这对话框的形状表明它与它背后的卡片相关。

总结思考

Google 的次材质设计语言的更新，我相信续有一产品为打造一品牌，也慢慢去融更的品牌符号语言，当我们一定要克与统一，是最难做的一部分。虽 Google 此次系统的释图形的意义及延伸使用，但是某地方稍微有，所以我们在设计提取 DNA 时需要克与统一，么我们以从中吸取学习到何才能让我们的产品更加差异化。在同质化的今天，你是何打造个化与具有的产品呢？

如今 AI 已临，机器人对设影响极其，从 Google 本次新迭中就提到了 AI 对产品的影响，以及如何去学习用户的习惯，然后预测用户的下一需求，以后产品会越越智能，越越了解人性，除了硬件的升级，研发能力加强，我们也多去思考，如何打造独具匠的产品。如何打造一无缝体验，多平台，跨语言产品视觉统一体验。

这方面跨多终端体验，苹果已经做得不错了，当然还有 soptiy 音产品无缝跨，听歌/切歌/选歌体验。相这只是一个开始，后续会有更多彩。

注作者的微信公众号：我们的设计日记，每周分享最设计趋势和设计经验，科设计方法。