当界面遇上品牌
有人问我，UI和VI是一样的东西吗，有什么不同？UI和VI这两个英文缩写确实长得很像，如果手写时不注意，可能会写成一样的，但UI和VI是两个不同的东西。UI是用户界面(user interface)，VI是（Visual Identity）视觉识别系统，属于品牌范畴。但是要说这两个完全不相关，也不太对，因为他们都是服务于产品，都属于设计范畴。在现在互联网思维大行其道之前，是广告狂人的时代，品牌思维是当时最热门的思维方式。
一、什么是品牌
品牌在百度百科里，是指消费者对产品及产品系列的认知程度。
广义的“品牌”是具有经济价值的无形资产，用抽象化的、特有的、能识别的心智概念来表现其差异性，从而在人们的意识当中占据一定位置的综合反映。品牌建设具有长期性。
狭义的“品牌”是一种拥有对内对外两面性的“标准”或“规则”，是通过对理念、行为、视觉、听觉四方面进行标准化、规则化，使之具备特有性、价值性、长期性、认知性的一种识别系统总称。这套系统我们也称之为CIS（corporate identity system）体系。
CIS体系主要是由3个部分组成：MI （理念识别）、BI（行为识别）及VI（视觉识别）。
品牌CIS体系
这是百度百科上关于品牌的定义，可以这么说，品牌是一种感觉，我们对某种事物的感觉，这里我们主要讲是品牌设计。
二、为什么要在界面设计中运用品牌
品牌是任何商业设计的核心，不管是实物还是虚拟的产品和服务，品牌都能增加其产品附加值，帮助用户之间产生联系。公司/产品的品牌定义了公司/产品的核心竞争力，品牌展示了公司与其他竞争者的不同之处。而UI设计师在设计过程中，不仅要满足产品基本需求，赋予产品漂亮的界面，还要继续深入，把品牌基因也融入到界面设计之中，加强用户对于产品的印象及帮助品牌传播。品牌设计是基于品牌定义下的视觉沟通，协助企业发展的形象体，除了UI设计师应该主动思考，在当前互联网大环境下，品牌设计也应当包括UI模块。
三、如何在设计中应用品牌元素
那么如何在日常设计用应用品牌元素，强化品牌概念呢？
1.APP中闪屏页/启动页
这个是最“纯粹”的品牌UI元素，因为闪屏页/启动页的目的，就是在开启软件时为其塑造品牌概念，就像进入家时的门牌一样，为接下来的操作建立最基础的印象。一般有以下三种方式：
1.知乎：logo和slogan。2.QQ：再设计的logo。3.logo、slogan和表达概念的图像（来自软件截屏）
1.logo和slogan：告诉用户这个应用是什么，有什么标语/口号
2.再设计/形象化/概念化的logo：告诉用户应用名称之外，由于再设计logo，也会加强对logo印象
3.logo、slogan和表达概念的图像(一般是slogan)：除了告诉用户应用名称标语外，还加强标语、口号、愿景等印象
除此之外，也可以作为营销使用，特别在一些工具软件使用中，闪屏页/启动页是他们为数不多的运营位置了。
随手记闪屏页（来自软件截屏）
2.WEB中登录页及弹窗
在APP中可以使用闪屏页/启动页上增加logo来加深品牌印象，但是在WEB中并没有闪屏页这样的概念，那WEB还有什么方式可以加强品牌概念呢？有一个页面作用和闪屏页非常相似的，那就是登录页：
左侧虾米音乐登录页，右侧蓝湖登录页（来自官网截图）
登录页有弹窗模式和页面模式，无论哪种模式，输入框/二维码侧边的空间都是展示品牌的好位置，方式和闪屏相似，并且由于网页特性，还能使用视频、动画等方式，这里 就不多说。除了登录页，还可以在弹窗之中体现品牌元素，下面举例如何在弹窗中增强品牌视觉，如下图：
随便做的弹窗，仅供示意
这是一个非常简洁明了的弹窗，希望用户知晓的信息都体现出来了，在各大WEB端都很常见，已经完全够用了；但是现在是在说品牌，以品牌属性来说，它还不够，不能第一眼看出是属于哪个产品。那么我们改怎么增加品牌元素来使得弹窗具有品牌视觉效果呢？下面有两种方法，仅供参考。
随便做的弹窗，仅供示意
假设这是百度云盘的WEB端，这是第一种，在弹窗顶部使用了品牌颜色，相比上面的弹窗，这个弹窗起码告知了用户，这是一个使用蓝色渐变的品牌。（并没有说这样就很好的意思，仅供示意，需要看具体页面具体需求）
随便做的弹窗，仅供示意
然后这是第二种，比起第一种拉大了顶部空间，底色与图标使用了品牌色，还添加了logo作为底纹出现在背景处，给予用户这是百度云盘的弹窗的认知。并没有说这样就很好的意思，仅供示意，需要看具体页面具体需求）
3.其他
除了上面提到的方法之外，还有各种控件可以使用品牌元素，例如百度网盘的加载控件，颜色和形状都使用了logo元素；KEEP将插画形成体系，统一了风格，增强了品牌认知。方法还有许多，有赖各位设计师日常设计中找到适合的方法。
百度网盘右侧的加载控件与左侧logo对比（来自软件截屏）
KEEP插画体系（来自KEEP微信公众号）
