• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何将品牌与UI完美结合?Google新规范告诉你答案

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

作者:Tony 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Google,UI组件,产品设计,品牌,品牌基因法,经验分享等相关知识,Tony希望在学习及工作中可以帮助到您

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 音乐产品无缝跨平台,听歌/切歌/选歌体验。相信这只是一个开始,后续会有更多精彩。

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

「用品牌基因法做设计」

  • 《如何将品牌基因融入到产品设计中?这是高级设计师的方法!》
  • 《如何找到改版的切入点?我用「品牌探索」这个方法!》
  • 《用品牌基因法,三步帮你搞定图标设计!》
  • 《用品牌基因法做图标设计,这是高级UI设计师才会的手法!》
  • 《用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)》
  • 《用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)》
  • 《网易资深设计师:视觉设计如何继承品牌基因?》

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

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 我们能从Google的全新UI中学到的知识(图文)
  • 在谷歌当了半年设计师,我学到这些经验
  • 谷歌所说的“整体网页设计”到底是什么概念?
  • 如何将品牌与UI完美结合?Google新规范告诉你答案
  • 新版抢先看!Material Design 的7个重大更新
  • Google I/O 大会之后,Material Design 发生了这些变化
  • 2018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
  • Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 实战教程来咯!超实用的VR界面设计实践指南

相关文章

  • 2018-08-23天猫设计师:互联网职场“向上管理”的4个心得
  • 2018-08-23氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 2017-08-06网站的视觉设计路径应顺应用户习惯
  • 2017-08-06一个新的CSS图片替换的技巧(背景显示与文本移离屏)告别9999px
  • 2018-08-23轻松看懂规范!详解组件控件结构体系之单元控件类
  • 2018-08-23设计反复修改?可能是你的信息层级没有梳理好!
  • 2017-08-06rgba alpha 透明度的转换计算表
  • 2017-08-06B2C 网站用户体验细节设计参考
  • 2017-08-06facebook交友网站设计的用户体验分析
  • 2018-08-23关于形态创意,大师们都这么玩儿

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 腾讯好文!如何设计内容精确、体验友好的Dashboard?(上篇)
    • 手机APP用户界面设计的10点建议
    • 新鲜出炉!2018年的用户体验设计趋势(上)
    • 如何做落地页设计?这儿有20个顶尖的案例和优点分析
    • 秋风渐起,大咖们都跟随这些趋势做网页设计
    • 想做好产品功能,不妨试试这个「亲亲原则」
    • 学会CTA 设计方法后,按钮的点击率高了49%!
    • 版式设计中的文字层级怎么学?来看高手的实例演练!
    • 毕业生来收!国内顶级设计大厂的春招流程+经验总结
    • 对html制作新手以及菜鸟的一些建议,大牛可以忽略

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有