赞助商
立即赞助

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

品牌设计3年前 (2021)发布 流光
2.7K 0 0

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

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

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

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

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

一、我对图形的了解

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

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

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

二、Google是如何做的?

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

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

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

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

△ 图片来自 Google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、需要注意的点

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

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

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

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

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

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

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

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

总结思考

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

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

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

B端产品信息具有:信息量大、关联关系复杂,最终达到目的是用户高效率的理解信息并完成任务。本文借鉴佐藤可士的超级整理术,...
B端设计
「界面中存在的每一个元素,都是有意义的。」这是我进行产品设计时的一贯主张。 小到一个标点符号、一根分割线,大到一个图...
icon图标
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
一、CONCEPT 近几年,AR/VR 的概念非常火热,许许多多的科技公司投入到这股浪潮之中。 2017年上半年我参与了「小白墙」产品...
AR
想想图标的绘制也是有历史的,从刚开始 ps 用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普...
ICON
不出意外,这应该是 2019 年最后一波设计师干货合集了!这一次,我们汇集了 27 款超级实用的设计工具,包括在 XD 中快速生成...
干货合集
编者按:这篇来自产品设计师 Eugen Eşanu 的文章解开了我长久以来的一个疑惑,其中的思考和经验值得我们共勉。结尾的 One mor...
Eugen Eşanu
交互设计师作为近年兴起的互联网设计岗位之一,具有其岗位产生的背景的特殊性。从交互设计师岗位职能来讲,它是产品与视觉、...
交互稿