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

2018年5月9日凌晨1点，Google 开发者大会是对的 Material Design 更新的解释给我留下了深刻的印象 Google 单独拿出图形语言做一个模块来解释，如下图所示。

是的！就是这样 SHAPE 为什么我如此重视单词？我们应该知道构成设计语言的四个基本原子是字体/颜色/网格系统/图形。这里的图形包括图标和一些辅助图形。它有什么区别？让我们看看以前的版本。材料设计语言中没有单独讨论形状元素。当然，也有更好的产品，如韩国29厘米和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 早在年初就思考过延续，如何在产品设计中体现品牌语言？

当时我明白，首先要了解我们品牌的核心是什么？我们的品牌理念和品牌标志，我们应该向用户传达什么样的感受，然后如何巧妙地提取产品 logo 其中的视觉基因，如某一图形元素，如线条/点/特殊图形符号，必须易于扩展，扩展性强。

然后应用到产品的每一个细节，如图标、按钮、异常状态、启动页面、操作横幅、情感设计等。现在 Google 它已经这样做了，而且非常系统，包括动态效果是标准的。

当时，一些产品已经这样做了，比如韩国29厘米，设计细节非常好，图形应用非常到位。国内天猫猫头的应用也渗透到产品中，Google 这次给我们一些大胆的思考，可以应用这么广泛的范围。

三、需要注意的点

Google 举几个反面例子，我们在提取图形或使用图形时需要注意以下几点：

注意图形的方向性和触摸尺寸，不要影响用户的正常使用

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

不要用形状来暗示其他含义。 这个对话框的形状表明它与它背后的卡片有关。

总结思考

Google 在这种材料设计语言的更新中，我相信一些产品会慢慢融入更多的品牌符号语言，以创造一些品牌基调。当然，我们必须克制和统一，这是最困难的部分。虽然 Google 系统地解释了图形的意义和延伸，但有些地方有点太多了，所以我们正在设计和提取它 DNA 当我们需要克制和统一时，我们可以学习如何使我们的产品更加差异化。在同质化的今天，你如何创造个性化和基调的产品？

如今 AI 机器人对设计有很大的影响 Google 本次更新迭代中大量提到 AI 对产品的影响，以及如何学习用户的习惯，然后预测用户的下一个需求，产品将越来越智能，越来越了解人性，除了硬件升级，加强研发能力，我们还应该考虑如何创造独特的产品。如何创造无缝体验、多平台、跨语言产品的视觉统一体验。

苹果在跨平台多终端体验方面做得很好，当然也有 soptiy 音乐产品无缝跨平台，听歌/切歌/选歌体验。我相信这只是一个开始，未来会有更多的亮点。

欢迎关注作者微信微信官方账号:我们的设计日记，每周分享最新的设计趋势和经验，科学的设计方法。

「设计采用品牌基因法」

“如何将品牌基因融入产品设计？这是高级设计师的方法！”“如何找到修订的切入点？我用它「品牌探索」这个方法！”“使用品牌基因法，三个步骤来帮助您完成图标设计！”“使用品牌基因法进行图标设计，这是高级用户界面设计师的技术！”“使用品牌基因法进行图标设计，高级用户界面设计师将进行技术！（升级）、“使用品牌基因法进行图标设计，高级用户界面设计师将进行技术！（实际战斗）、“网络高级设计师：视觉设计如何继承品牌基因？”

================推荐明星栏目================

优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。

设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com