浅析从品牌到UI设计

今天分享的题目是从品牌到UI，用设计的思想与这个世界和解；这里的我说的和解比较宽泛，大家可以理解成与客户和解，也可与产品经理和解，也可以是与自己和解；

为什么选这个主题呢，原因是之前在网上听一群人总是说互联网走到了下半场，我和好奇，就去查这个下半场到底是什么，后来总算知道了，互联网行业走到现在，已经从增量时代转为存量时代，这个存量时代就是下半场，人口、流量、资本的红利都逐渐收紧。

在这种情况下我的产品如何从同类产品中脱颖而出，或许增加品牌属性是种方法，希望大家在听完这个分享后，会有一些启发。

在互联网的增量时代，品牌设计与UI设计是两条平行线，几乎没有交集，你做你的画册、slogan、包装，我做我的网站、app、微信小程序，偶尔互相模仿，但也不是主流，毕竟两者载体不同，目的不同，用户也不同；

但是到了存量时代，影响用户选择的一个重要因素是「品牌」，一个产品要想从同类产品中区别出来，需要有个性，UI+品牌成为产品生命周期中重要的一环，下面我们看看如何在用户心中植入产品品牌；

在在品牌植入方便，国外很多产品已经走在了我们前面，我们来看看谷歌，谷歌开发者大会上对 Material（ Design做了更新，我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它，它提取了圆形作为视觉DNA，并沿用到产品的每一个控件；

当然，如果我们想传达我们产品的品牌理念，只在图标组件里运用是远远不够的。

诞生于1886年的可口可乐，每年都做产品运营推广，不断大量的重复它logo的弧线元素和瓶子的外形；

还有刚刚过去的双11，从2012年11月11日开始的天猫节，现在是全球最大的B2C平台，天猫猫头运用也是渗透到全产品线里面去了，问大家个问题，大家有没有人知道这个猫头品牌是谁创立的？其实就是马云的继任者，现任阿里巴巴集团董事局主席张勇；讲的有点远了，我们再回到我们的主题；

这个图很好的解释了品牌与产品与用户的关系，产品需要品牌牵引、支撑，现在互联网产品越来越趋于同质化，UI 设计师已经不能局限于界面的表现层，更要了解产品背后的逻辑，然后以业务为依据设计品牌，以品牌为基准去设计产品。

 

第一章意义Significance，这个章节我们讲讲从品牌到UI的意义

第一个意义是对内：可以规范统一，高效协作

品牌本身就可以作为设计规范的一个重要指导原则，通过对配色、文字、图标、控件等建立设计规范，可以有效减少设计决策时间，传达一致的品牌调性。

第二个意义是对外：可以提高认知，溢价增值

如果一个产品失去了个性，不看 logo，单纯看界面的话，很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响，肯定能更好地提高用户对产品的认知，当你对一件产品注入了感情，同时也就为产品提供了营销推广的立足点；也可以这么说，设计师创造的情感性价值，直接实现了产品的溢价增值；

第二章感知Perception

有位设计界的前辈讲过，品牌知名度其实就是信任度的体现，他说世界上最成功的品牌就是宗教，这里没有诋毁任何宗教的意思，但是宗教建立的品牌信任度，远远超过了任何商品；

这里我们从用户的角度出发，看下用户是如何从产品感知品牌的；

在设计产品的时候常常会发现我们觉得理所当然的地方，用户往往没按我们想的方式去使用。那是因为设计师通常有整体观，站在金字塔顶端去规划一个产品的设计，而用户则恰恰相反，在金字塔底端往上爬，他们不知道这个金字塔多高，也不知道从哪一面开始最好爬，所以会遇到各种问题。

同样，用户对品牌的感知由低向高的，用户通过各种场景接触到产品，再通过产品的视觉呈现、功能体验、信息内容等感知品牌，最后在心中形成印象，构建品牌信念，从而影响下次产生相应需求时对产品的选择；

可以联想下我们的购物体验，是不是总是从同一个地方shopping，这就是购物APP品牌价值已经使你已经形成了习惯选择；

作为设计师，我们需要充分理解品牌内核，由内向外将抽象的品牌内核转化为具象的视觉符号，再延伸到用户与产品的各个接触点，从而将品牌理念植入用户内心。

第三章融合Integration既然上面我们讲品牌和UI最终要走的一起，这一章我们讲他们如何在工作融合

 第一步，明确定位，提取关键词，建立情绪板

当代广告教皇，美国奥美广告创始人大卫.奥格威说，“最重要的决定是如何定位你的产品。”

在大师的指引下，我们发现首先找到品牌定位，定位自己的细分市场和目标用户；

2.围绕品牌定位提取关键词；

3.建立情绪版，将抽象的概念转化为可感知的视觉；

第二步，提取视觉表现元素，并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。

有时甚至不需要任何图形，单凭颜色就能产生对某一事物的联想。

现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。

颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。

现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。

图形

我们知道颜色是抽象感知，图形是相对具象的表现方式。

一旦某个特有的图形在用户心中形成烙印，用户见到相似的图形组合都能往该图形联想，从而关系到图形背后所代表的品牌，这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因，因为这样能有效降低用户的认知负担，提高品牌认知。

图形通常从 logo 本身提取，并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度，传递友好、温暖的品牌形象。

飞猪提取了 logo 中「猪的发型」用于搜索框，韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。

纹理

在 UI 设计或者运营推广运用中，通过提取品牌图形元素，再运用分形、排列、重复、平铺等设计手法形成品牌纹理。

我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景；

国外著名的聊天应用 Whatsapp，在聊天页的背景用涂鸦插图纹理做背景；

还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理，辅助品牌的视觉表现。

我们还在聊图形复制变形的时候，国外的UI设计已经细化到了十分惊人的程度

例如UBER 在做的品牌升级，设计师出来将每个国家富有代表性的图形提炼， 然后重复运⽤平铺，形成带有地域特色的⼏何纹理，运⽤到闪屏和线上线下的产品当中。

字体

字体是最容易被忽视的设计元素，很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用，很多品牌都把字体设计当成品牌基因中重要一部分。

字体的选择需要契合产品功能特点与品牌调性。

微信读书使用了方正宋三，让人阅读起来有种文字秀丽的浸入感；每日故宫使用了方正清刻悦宋体，字里行间隐含着历史古韵，渗透着文化气息；澎湃新闻使用方正准雅宋体，体现其作为新闻产品「专注时政与思想」的严肃一面。

英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。

第三步，融入品牌触点

这里我解释下品牌触点这概念，是指一款产品中品牌信息接触点，是决定用户对产品品牌印象的关键；

我们看几个案例，

启动页：知乎的启动页采用 slogan 加 logo 的方式来体现品牌，这也是绝大多数应用的做法；每日故宫启动的时候伴随着一声钟声，页面会有一个光线流动的动画，极具仪式感，一下子就把用户带入故宫庄严的氛围当中。

图标：东家的每一个图标都融入了印刷式字体的元素，体现其匠人的品牌基因；mono 则直接把产品名称「 M O N O」用于导航栏。

插图：Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。

 

品牌触点式多样的，除了上面的启动页、图标、插图之外，还有预加载图、loading、动效、新手引导等等都能体现品牌触点，这些品牌触点，都是讲述品牌故事的关键载体，帮助产品从同行业中脱颖而出，这里由于时间的关系我们就不展开讲了，有兴趣的同学，我们可以单独交流哦

互联网行业已经过了拓荒时代，行业沉淀下了许多有价值的知识，也有许多非常好的 UI 组件和规范文档可以直接使用；

另一方面，很多公司对于 UI 设计在整个产品生命周期中的价值，普遍觉得不是非常重要，UI 设计部门只是一个业务支持部门，起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮，肯定是不行了。

设计师不仅需要对产品业务和商业有深入了解，更重要的是对于品牌在整个产品链路中的应用与把控。

我们需要走出舒适圈，主动去挖掘更深层次的设计价值，提升自我价值。

诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试，就像不停的迭代做新产品一样，不能因为一两次的失败打消掉设计的积极性。

设计的终极最后就是和解 Compromise

开篇我提到了与世界和解，分享下我是怎么和这个世界和解的，我相信三句话，可以跟这个世界和解

再次谢谢大家听我叨叨，如果大家喜欢，下次我们可以叨叨点关于设计的更有意思的事，谢谢