前两期我们分享了品牌是什么？品牌的组成要素，以及如何线下中去落地。那么今天将和大家分享UI中的品牌怎么去落地，那么UI中的品牌包含：色彩，图形，插画，字体，图标，我将从这5个维度那和大家一一拆解，我们如何打造一个UI的品牌。
前两期文章：
色彩
色彩毋庸置疑，每年很多产品品牌更新，或者迭代都会去更新色彩，好的色彩能让人记忆深刻，平庸色彩只会让人忽略，所以在塑造一个品牌时候，色彩一定不能土，要让人记忆犹新。
色彩一定要和产品目标相匹配，如果你的产品是以年轻人为主，比如ins那么你的色彩可以更加饱和度高，更明亮一些，如果你的产品是比较商务包容性强一些，可以是Facebook的蓝色。
▲ Adobe每年的产品更新迭代，2年更换一次品牌，目的是区别这些不同的版本，可以发现，每年的更新除了视觉样式的更新，整体的色彩也进行了更新，最新版本的PS颜色更加商务，更加稳重，和潘通流行色很贴近！
▲ 这些知名公司每年的品牌升级，都会重点在色彩上去进行更新和迭代，一方面占据用户心中的品牌色彩，比如微信绿色，支付宝蓝色，美团黄色，淘宝橙色，另外一方面也是为了让品牌更加和战略贴合更紧密。
▲ 2019年最明显案例应该是美团黄了，品牌从蓝绿渐变变为黄色为主，从品牌LOGO到主页面都进行了品牌色的变化，让用户明显的感知到变化。
▲ 之前陌陌升级新LOGO启用了红黄蓝三原色，从冷色到暖色过渡，寓意是通过陌陌的连接，从陌生走向熟悉。眼睛图案的使用，代表着陌陌用户对这个世界的好奇与探索。多重色彩的设计，象征着产品视频化。
▲ 所以当我们需求去重塑一个品牌时候，色彩一定是要优先级很高的去考虑，原因就在于色彩是人最容易感知，也最明显的感觉，淘宝每一年改版变化最大的就是色彩，从当年的扁平化橙色调整为渐变色，从渐变色到现在版本的白色，每次都是让用户感知明显。
图形
除了色彩，板式，图像等优化还有一个很重要的元素就是形状，这个很容易被很多设计师忽略，其实图形也是有情感的。
我们界面中经常用到的卡片，按钮，菜单，图像的等等都是由形状组成了，在材料设计中也很明显的强调了这一点，最新的谷歌材料设计中，很明确告诉设计师我们需要通过形状来增加品牌的吸引力！
▲ 圆形的浮动动作按钮和凹陷的底部应用导航栏在设计中脱颖而出。
▲ 选中的卡片，选中效果有一个弯曲的弧度，来代表它的被选中状态。
谷歌材料设计官方文档，https://material.io/design/shape/#components-shape
如果想你的产品在竞品中脱颖而出，除了色彩以外，形状是很好的一个表达方式，一致的形状配合色彩能为品牌带来很好的记忆点。
▲ 不同的图形，传递出来用户心理感受是完全不一样的，三角形是充满活力的和动态的表达，一般和方向关联，三角形的图形会吸引我们眼睛自动的根据它的位置和方向，不同的三角形给人的视觉感受是完全不一样的，等边三角形给人稳定平衡的感觉，倒转的三角形给人看起来冒险并且容易倒紧张的视觉感受！
▲ 矩形和圆角是我们最常用的，生活中很多产品也都是这些图形组成的，手机，电脑，书籍，相机等等都是矩形组织，矩形形状和直角给人可靠性和安全感！另外包豪斯建筑风格也多是以直角和圆角为主，所以如果你的产品是走安全感和权威感，用矩形和圆角矩形没错
▲ 圆形和大自然的太阳地球宇宙关联性比较大，椭圆也和宇宙很像，因此圆形给人永恒，未来，神秘的感受，和其它图形不同的是圆形更加柔和，因此在很多年轻化产品中经常可以看见圆形的运用。
因为圆形没有终点，线条柔和，特别是形状大屏手机越来越多，圆形和手机屏幕适配也更加灵活，在很多运动，年轻，潮流产品设计基本都能看见圆形作为主要图形的运用，手淘就是一个很好的案例，从“淘”字的LOGO提取一个圆点，到界面中圆形符号等！所以当你需要对你的设计进行升级时候，记住图形千万不要忽略。
▲ 分形，这个图形经常在大自然中看见，花朵职位等等，这些图形会围绕一个图形进行延展变化，非常具有生命力，也经常在设计中运用到，特别在现在互联网产品中，给人视觉感受是创造力和新思维的表现，在很多科技的发布会上都会运用到这些图形。
▲ 苹果最新的apple pay设计的卡面图案就是运用的这种分形的几何图形，非常抽象且具有生命力，instagram早上的图片软件的logo也是类似的设计手法！以及各类型科技发布会的海报设计，详细更多案例欢迎去我的pinterest上查阅！
▲ 除了上述图形之外还有各种各样的大自然图形，比如叶子，花朵，动物等等，这些图形经常被设计师和艺术家当做创意的灵感来源，因为大自然的形状表意清晰，能让人和自然联系在一起！作为设计师，我们需要去了解这些图形给人的视觉感受，然后将其运用到我们的设计中去！
插画
插画对于品牌来说也是非常重要的一个因素，无论在界面设计，还是在品牌营销很多场景我们都需要插画去营造我们的产品氛围和气质，插画有助于将我们的品牌故事讲述给听众听，所以在构建一个品牌时候，插画是非常重要的点之一，但是做之前我们一定要尽量多去了解我们为客户提供的设计价值，只有了解了用户价值，才能去定义去特色的故事，帮助产品！
▲ Uber系列插画提供暖色，以及安全蓝的运用，突出打车服务中安全的关键要素
▲ 东南亚电商lazada整体品牌定位年轻活力的用户，所以对东南亚人群气质提炼出一系列的人物插画运用到UI产品界面中，在传递个性同时也把产品的情绪融入其中。
▲ 设计师根据这些插画的特别，延展出一系列运营场景，在界面，空白页等场景传递出品牌的气质！
在淘宝产品中，设计师将空白页面运用有趣的小故事传递给用户，给用户带来更好的购物体验和感受！
故事一：太空网络遗迹
通用的“网络异常”的场景，讲的是“一个宇航员在外太空寻找网络遗迹”的故事，太空场景本身就是一种神秘且容易丢失的空间，将网络夸张拟物保证意义明确，最后定格在正向俯视图上。
故事二：大漠足印
“足迹为空”的场景，是“一个考古学家在大漠中追寻巨人足迹”的故事，一个在沙漠中找寻的学家，发现了一个类似巨人的足印，但足印的主人不知所踪。
故事三：拥挤的传送带
通用限流场景，把货物拟人化，卡在货物传送带的入口上你推我搡，丰富的画面间接体现拥挤的感觉。
设计师提供故事将我们的一些功能融于场景中，让我们的产品变成一个有血有肉有故事的人，让用户更加的亲切，在产品设计中，插画是非常重要的一个点！不可忽视。
字体
▲ 自从腾讯在20周年发布了腾讯字体，运用一些有向前感觉的斜体，越来越多的公司在品牌升级时候，加入品牌字体设计。
▲ 阿里巴巴在2019年UCAN大会上发布了阿里普惠体，为了解决广大的素材需求和高昂版权费用之间的矛盾，整个字体采用现代简洁的笔画，适用于多个业务场景，这套字体不是单纯从某一种西文或中文字体的造型特征出发进行延展，而是以 9 个品牌体感词为切入点，将体感共鸣转换为字体造型。
▲ OPPO字体，跟随着整个品牌升级，OPPO也更新了自己字体，围绕着探索科技美感，有独特的语言打造具有标志性的，与众不同的品牌体验。
▲ 小米发布了小米兰亭体，整个字体可以动态变化粗细是一大创新亮点，可见现在设计越来越难做了，作为一个大型公司品牌设计，一套专属字体好像已经成为标配了。
▲ Facebook推出的企业LOGO采用定制字体，以全部大写的形式在应用产品之间建立视觉区别。以不同的颜色显示，表现出旗下不同社交品牌的属性，如蓝色代表和公司同名的 Facebook 社交平台，绿色代表 WhatsApp（跨平台应用程序，用于智能手机之间的通讯），粉色代表 Instagram 等等。
和以往不同的是，之前我们在定义一个字体时，只需要根据产品的气质去选择一个合适字体即可，现在成本变的更大了，可喜的是行业中越来越多的开源字体，对于没有条件去设计字体的团队，我们要学会去借力！另外就是一定要注意字体版权问题。
图标
图标是界面中除了文字以外经常运用到的点，一个好的图标能把产品特点体现的淋漓尽致！
我们结合一个实际案例，看看设计师是如何在图标中融于品牌元素的：
▲ 这是产品LOGO，粗略看没什么特点，但是设计师从LOGO中挖掘了一个图形，也就是这个半弧的图形作为一个设计创意点，然后将这个图形进行运用到各个场景！
▲ 这套图标中，圆角元素，图标颜色和LOGO匹配，保留LOGO中黄色元素，同时图标的弧度在圆弧的地方，运用比较大的柔和的角度和整体的LOGO匹配。
▲ 在线下的场景中，也将这个半弧的图形运用到界面中
▲ 这个产品最大特点是什么？从LOGO成矿业看出一个像麻花一样的图形特点，也是这个产品的核心的一个识别符号。
▲ 这个符号在很多场景中都被运用到了，设计师基于LOGO的这个符号特点，重新设计了一套图标，将这个有特色符号运用到整个设计中去。
▲ Kakapage是一个漫画的产品，我们可以发现他图标什么特点点，就是一个卷角的符号
▲ 这个符号是这个产品的特点，翻书，书签等等，所以设计师将这个符号运用到产品图形中
▲ 将这个图标进行符号，提取切角特点运用到界面中形成整体的视觉语言一致性！
最后
正如我们之前文章中所说，品牌就像内裤，看不见但是很重要，作为设计师，除了做好满足产品的功能设计外，把你负责的产品赋予性格和生命力，是我们必须的职责也是作为产品设计师必须要具备的能力，最后我们来回顾下今天的内容，如何在UI中塑造一个品牌，可以通过以下维度：
- 色彩（有特点的颜色，颜色不能太普通）
- 形状（合理运用形状特点，定义图形风格）
- 插画（符合产品调性的插画风格）
- 字体（定义独特气质的字体，或者选择一套）
- 图标（基于LOGO找到特别符号的图标）
但是其实塑造品牌远远不止我上面说的那些，还包括之前说的话术，图片，产品功能等等，远远不是一朝一夕，一套模板就能搞定的，这一系列文章也只是打开大家的眼界和思路，具体如何做好，是需要我们不断项目中实践得来的。
原文地址：我们的设计日记（公众号）
作者：sky
评论0