什么是品牌的UI设计?品牌在UI设计中的色彩、图形、插画等维度到底怎么落地，如何成功打造，UI设计又和VI设计有什么不同，今天我们就来一同学习下。

什么是品牌UI

首先大家要注意到，我们平时书写中的UI正确的写法应该都是大写，UI是User Interface的缩写。VI跟UI只有一个字母的差别，且看起来十分相似。

UI即User Interface（用户界面）的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。我们这里主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。UI还有其它的意义，如Unit Interval，Univ of Iowa，Unlock Ins...

VI即（Visual Identity），通译为视觉识别系统，是CIS系统最具传播力和感染力的部分。是将CI的非可视内容转化为静态的视觉识别符号，以无比丰富的多样的应用形式，在最为广泛的层面上，进行最直接的传播。设计到位、实施科学的视觉识别系统，是传播企业经营理念、建立企业知名度、塑造企业形象的快速便捷之途。 

在品牌营销的今天，没有VI对于一个现代企业来说，就意味着它的形象将淹没于商海之中，让人辨别不清；就意味着它是一个缺少灵魂的赚钱机器；就意味着它的产品与服务毫无个性，消费者对它毫无眷恋；就意味着团队的涣散和低落的士气。

VI设计一般包括基础部分和应用部分两大内容。其中，基础部分一般包括：企业的名称、标志设计、标识、标准字体、标准色、辅助图形、标准印刷字体、禁用规则等等；而应用部分则一般包括：标牌旗帜、办公用品、公关用品、环境设计、办公服装、专用车辆等等。

UI设计和VI设计，两种设计的工作属性不同。UI设计中，平面设计工作只是其中的一小部分内容，其设计工作的主体，还是在软件交互性设计上。软件交互性设计，主要是针对软件操作流程提出最优方案，属于应用工程设计，而非平面设计。而其中涉及到软件图标、界面视觉布局等平面设计项目，只是整个交互设计工作中的一项。其主要目的，是为用户提供更具亲和力的界面外观。是服务于交互性设计工作的。

VI设计，则是完全的，且自成系统的平面设计工作。其设计成果，直接应用于客户的机构或品牌。其设计目的，是将所服务的机构或品牌的相关视觉要素加以系统化与规范化，进而强化其可识别性。

下面我们就分别从色彩、图形、图标、插画和字体五个元素来详细说明UI设计。

色彩

色彩毋庸置疑，每年很多产品品牌更新，或者迭代都会去更新色彩，好的色彩能让人记忆深刻，平庸色彩只会让人忽略，所以在塑造一个品牌时候，色彩一定不能土，要让人记忆犹新。色彩一定要和产品目标相匹配，如果你的产品是以年轻人为主，比如ins那么你的色彩可以更加饱和度高，更明亮一些，如果你的产品是比较商务包容性强一些，可以是Facebook的蓝色。

Adobe每年的产品更新迭代，2年更换一次品牌，目的是区别这些不同的版本，可以发现，每年的更新除了视觉样式的更新，整体的色彩也进行了更新，最新版本的PS颜色更加商务，更加稳重，和潘通流行色很贴近！这些知名公司每年的品牌升级，都会重点在色彩上去进行更新和迭代，一方面占据用户心中的品牌色彩，比如微信绿色，支付宝蓝色，美团黄色，淘宝橙色，另外一方面也是为了让品牌更加和战略贴合更紧密。

2019年明显案例应该是美团黄了，品牌从蓝绿渐变变为黄色为主，从品牌LOGO到主页面都进行了品牌色的变化，让用户明显的感知到变化。之前陌陌升级新LOGO启用了红黄蓝三原色，从冷色到暖色过渡，寓意是通过陌陌的连接，从陌生走向熟悉。眼睛图案的使用，代表着陌陌用户对这个世界的好奇与探索。多重色彩的设计，象征着产品视频化。

所以当我们需求去重塑一个品牌时候，色彩一定是要优先级很高的去考虑，原因就在于色彩是人最容易感知，也最明显的感觉，淘宝每一年改版变化最大的就是色彩，从当年的扁平化橙色调整为渐变色，从渐变色到现在版本的白色，每次都是让用户感知明显。

图形 

除了色彩，板式，图像等优化还有一个很重要的元素就是形状，这个很容易被很多设计师忽略，其实图形也是有情感的。我们界面中经常用到的卡片，按钮，菜单，图像的等等都是由形状组成了，在材料设计中也很明显的强调了这一点力！

圆形的浮动动作按钮和凹陷的底部应用导航栏在设计中脱颖而出。选中的卡片，选中效果有一个弯曲的弧度，来代表它的被选中状态。如果想你的产品在竞品中脱颖而出，除了色彩以外，形状是很好的一个表达方式，一致的形状配合色彩能为品牌带来很好的记忆点。

不同的图形，传递出来用户心理感受是完全不一样的，三角形是充满活力的和动态的表达，一般和方向关联。三角形的图形会吸引我们眼睛自动的根据它的位置和方向，不同的三角形给人的视觉感受是完全不一样的，等边三角形给人稳定平衡的感觉，倒转的三角形给人看起来冒险并且容易倒紧张的视觉感受！

矩形和圆角是我们常用的，生活中很多产品也都是这些图形组成的，手机，电脑，书籍，相机等等都是矩形组织，矩形形状和直角给人可靠性和安全感！另外包豪斯建筑风格也多是以直角和圆角为主，所以如果你的产品是走安全感和权威感，用矩形和圆角矩形没错。

圆形和大自然的太阳地球宇宙关联性比较大，椭圆也和宇宙很像，因此圆形给人永恒，未来，神秘的感受，和其它图形不同的是圆形更加柔和，因此在很多年轻化产品中经常可以看见圆形的运用。因为圆形没有终点，线条柔和，特别是形状大屏手机越来越多，圆形和手机屏幕适配也更加灵活，在很多运动，年轻，潮流产品设计基本都能看见圆形作为主要图形的运用。手淘就是一个很好的案例，从“淘”字的LOGO提取一个圆点，到界面中圆形符号等！所以当你需要对你的设计进行升级时候，记住图形千万不要忽略。

分形，这个图形经常在大自然中看见，花朵职位等等，这些图形会围绕一个图形进行延展变化，非常具有生命力。也经常在设计中运用到，特别在现在互联网产品中，给人视觉感受是创造力和新思维的表现，在很多科技的发布会上都会运用到这些图形。

除了上述图形之外还有各种各样的大自然图形，比如叶子，花朵，动物等等，这些图形经常被设计师和艺术家当做创意的灵感来源，因为大自然的形状表意清晰，能让人和自然联系在一起！作为设计师，我们需要去了解这些图形给人的视觉感受，然后将其运用到我们的设计中去！

插画 

插画对于品牌来说也是非常重要的一个因素，无论在界面设计，还是在品牌营销很多场景我们都需要插画去营造我们的产品氛围和气质，插画有助于将我们的品牌故事讲述给听众听，所以在构建一个品牌时候，插画是非常重要的点之一，但是做之前我们一定要尽量多去了解我们为客户提供的设计价值，只有了解了用户价值，才能去定义去特色的故事，帮助产品！

Uber系列插画提供暖色，以及安全蓝的运用，突出打车服务中安全的关键要素。东南亚电商lazada整体品牌定位年轻活力的用户，所以对东南亚人群气质提炼出一系列的人物插画运用到UI产品界面中，在传递个性同时也把产品的情绪融入其中。

设计师根据这些插画的特别，延展出一系列运营场景，在界面，空白页等场景传递出品牌的气质！在淘宝产品中，设计师将空白页面运用有趣的小故事传递给用户，给用户带来更好的购物体验和感受！

设计师提供故事将我们的一些功能融于场景中，让我们的产品变成一个有血有肉有故事的人，让用户更加的亲切，在产品设计中，插画是非常重要的一个点！不可忽视。

总之，品牌就像内裤，看不见但是很重要。作为设计师，除了做好满足产品的功能设计外，也应该给产品赋予性格和生命力，这是设计师的职责也是必须要具备的能力。

当然塑造品牌远远不止我们上面说的那些，还包括话术，图片，产品功能等等。而这远远不是一朝一夕，一套模板就能搞定的，这一系列文章也只是打开大家的眼界和思路，具体如何做好，是需要我们在不断实施的项目中实践得来。