ui品牌设计怎么落地

上一期素马克里斯.宋给大家讲了成功品牌设计的5个要素，品牌在UI设计中的色彩，图形，插画，字体，图标五个维度到底怎么落地，如何成功打造一个UI的品牌，今天一同学习。

品牌ui是什么

-

首先大家要注意到，我们平时书写中的UI正确的写法应该都是大写，UI是User Interface的缩写。

品牌VI跟UI只有一个字母的差别，且看起来十分相似。

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

VI即（Visual Identity），通译为视觉识别系统，是CIS系统最具传播力和感染力的部分。是将CI的非可视内容转化为静态的视觉识别符号，以无比丰富的多样的应用形式，在最为广泛的层面上，进行最直接的传播。设计到位、实施科学的视觉识别系统，是传播企业经营理念、建立企业知名度、塑造企业形象的快速便捷之途。 在品牌营销的今天，没有上海vi设计公司对于一个现代企业来说，就意味着它的形象将淹没于商海之中，让人辨别不清；就意味着它是一个缺少灵魂的赚钱机器；就意味着它的产品与服务毫无个性，消费者对它毫无眷恋；就意味着团队的涣散和低落的士气。

VI设计一般包括基础部分和应用部分两大内容。其中，基础部分一般包括：企业的名称、标志设计、标识、标准字体、标准色、辅助图形、标准印刷字体、禁用规则等等；而应用部分则一般包括：标牌旗帜、办公用品、公关用品、环境设计、办公服装、专用车辆等等。更多关于素马品牌VI设计报价方案，请访问《Behance & Dribbble上的品牌设计师巧妙包装logo标志作品》。

UI设计和VI设计，两种设计的工作属性不同。UI设计中，平面设计工作只是其中的一小部分内容，其设计工作的主体，还是在软件交互性设计上，软件交互性设计，上海vi设计公司主要是针对软件操作流程提出最优方案，属于应用工程设计，而非平面设计。而其中涉及到软件图标、界面视觉布局等平面设计项目，只是整个交互设计工作中的一项。其主要目的，是为用户提供更具亲和力的界面外观。是服务于交互性设计工作的。VI设计，则是完全的，且自成系统的平面设计工作。其设计成果，直接应用于客户的机构或品牌。其设计目的，是将所服务的机构或品牌的相关视觉要素加以系统化与规范化，进而强化其可识别性。

价值百万的品牌设计模型

-

色彩

色彩毋庸置疑，每年很多产品品牌更新，或者迭代都会去更新色彩，好的色彩能让人记忆深刻，平庸色彩只会让人忽略，所以在塑造一个品牌时候，色彩一定不能土，要让人记忆犹新。

陈宋品牌顾问

C&S BRAND DESIGN

陈宋品牌顾问前身为陈绍华设计，由中国著名设计大师陈绍华先生创办于1992年，是中国最早成立的设计公司之一。伴随中国经济的高速发展，服务过华润、万科、天虹、中国高铁、中国华信、三一重工等众多国内外知名品牌与企业，为中国品牌的崛起树立全新形象，北京申奥设计更成为我们作品中的里程碑。

陈宋品牌顾问官方网站主色采用了高亮黄色，给人印象深刻。红色与深灰的搭配也是经典的色彩搭配方案。

色彩一定要和产品目标相匹配，如果你的产品是以年轻人为主，比如ins那么你的色彩可以更加饱和度高，更明亮一些，如果你的产品是比较商务包容性强一些，可以是Facebook的蓝色。

Adobe每年的产品更新迭代，2年更换一次品牌，目的是区别这些不同的版本，可以发现，每年的更新除了视觉样式的更新，整体的色彩也进行了更新，最新版本的PS颜色更加商务，更加稳重，和潘通流行色很贴近！

这些知名公司每年的品牌升级，都会重点在色彩上去进行更新和迭代，一方面占据用户心中的品牌色彩，比如微信绿色，支付宝蓝色，美团黄色，淘宝橙色，另外一方面也是为了让品牌更加和战略贴合更紧密。

2019年最明显案例应该是美团黄了，品牌从蓝绿渐变变为黄色为主，从品牌LOGO到主页面都进行了品牌色的变化，让用户明显的感知到变化。

之前陌陌升级新LOGO启用了红黄蓝三原色，从冷色到暖色过渡，寓意是通过陌陌的连接，从陌生走向熟悉。眼睛图案的使用，代表着陌陌用户对这个世界的好奇与探索。多重色彩的设计，象征着产品视频化。

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

图形

除了色彩，板式，图像等优化还有一个很重要的元素就是形状，这个很容易被很多设计师忽略，其实图形也是有情感的。

我们界面中经常用到的卡片，按钮，菜单，图像的等等都是由形状组成了，在材料设计中也很明显的强调了这一点，最新的谷歌材料设计中，很明确告诉设计师我们需要通过形状来增加品牌的吸引力！

圆形的浮动动作按钮和凹陷的底部应用导航栏在设计中脱颖而出。

选中的卡片，选中效果有一个弯曲的弧度，来代表它的被选中状态。

谷歌材料设计官方文档，https://material.io/design/shape/#components-shape

如果想你的产品在竞品中脱颖而出，除了色彩以外，形状是很好的一个表达方式，一致的形状配合色彩能为品牌带来很好的记忆点。

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

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

圆形和大自然的太阳地球宇宙关联性比较大，椭圆也和宇宙很像，因此圆形给人永恒，未来，神秘的感受，和其它图形不同的是圆形更加柔和，因此在很多年轻化产品中经常可以看见圆形的运用。

因为圆形没有终点，线条柔和，特别是形状大屏手机越来越多，圆形和手机屏幕适配也更加灵活，在很多运动，年轻，潮流产品设计基本都能看见圆形作为主要图形的运用，手淘就是一个很好的案例，从“淘”字的LOGO提取一个圆点，到界面中圆形符号等！所以当你需要对你的设计进行升级时候，记住图形千万不要忽略。

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

苹果最新的apple pay设计的卡面图案就是运用的这种分形的几何图形，非常抽象且具有生命力，instagram早上的图片软件的logo也是类似的设计手法！以及各类型科技发布会的海报设计，详细更多案例欢迎去我的pinterest上查阅！

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

插画

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

菲安妮

FION

20世纪七十年代，FION带着艺匠的初心，对时尚的追求，于1979年正式成立。三十多年来，FION 对传统技艺的坚持始终如一 ， 继承香港“第一代皮匠” 的顶尖工艺，成就其一贯的精工品质和对细节的考究。 同时，FION致力于带给都市女性精致的品质生活， 通过艺术联乘与时尚潮流的碰撞，将艺术创意融入在FION的产品设计中，用更多元的内容和更多样的商品，带给女性高品质的生活美学和有幸福感的生活方式，让艺术走进生活。

素马为时尚品牌菲安妮官方网站建设时就采用了插画设计技巧。

Uber系列插画提供暖色，以及安全蓝的运用，突出打车服务中安全的关键要素

东南亚电商lazada整体品牌定位年轻活力的用户，所以对东南亚人群气质提炼出一系列的人物插画运用到UI产品界面中，在传递个性同时也把产品的情绪融入其中。

设计师根据这些插画的特别，延展出一系列运营场景，在界面，空白页等场景传递出品牌的气质！

在淘宝产品中，设计师将空白页面运用有趣的小故事传递给用户，给用户带来更好的购物体验和感受！

故事一：太空网络遗迹

通用的“网络异常”的场景，讲的是“一个宇航员在外太空寻找网络遗迹”的故事，太空场景本身就是一种神秘且容易丢失的空间，将网络夸张拟物保证意义明确，最后定格在正向俯视图上。

故事二：大漠足印

“足迹为空”的场景，是“一个考古学家在大漠中追寻巨人足迹”的故事，一个在沙漠中找寻的学家，发现了一个类似巨人的足印，但足印的主人不知所踪。

故事三：拥挤的传送带

通用限流场景，把货物拟人化，卡在货物传送带的入口上你推我搡，丰富的画面间接体现拥挤的感觉。

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

字体

自从腾讯在20周年发布了腾讯字体，运用一些有向前感觉的斜体，越来越多的公司在品牌升级时候，加入品牌字体设计。

阿里巴巴在2019年UCAN大会上发布了阿里普惠体，为了解决广大的素材需求和高昂版权费用之间的矛盾，整个字体采用现代简洁的笔画，适用于多个业务场景，这套字体不是单纯从某一种西文或中文字体的造型特征出发进行延展，而是以 9 个品牌体感词为切入点，将体感共鸣转换为字体造型。

汇格设计官方网站建设

HAG

汇格设计致力于以创意、领先的解决方案为客户提供最具价值的设计项目，寻求创意设计与商业价值的最佳平衡。 我们确信个性与原创性是设计精品的立足之本，我们不断的追求和发展，以良好的企业形象和设计作品开拓更广、更新的设计空间世界，成就一种全新的综合体验和生活方式。

素马为汇格设计提供官方网站定制设计服务。其中字体设计非常有特色。

OPPO字体，跟随着整个品牌升级，OPPO也更新了自己字体，围绕着探索科技美感，有独特的语言打造具有标志性的，与众不同的品牌体验。

小米发布了小米兰亭体，整个字体可以动态变化粗细是一大创新亮点，可见现在设计越来越难做了，作为一个大型公司品牌设计，一套专属字体好像已经成为标配了。

Facebook推出的企业LOGO采用定制字体，以全部大写的形式在应用产品之间建立视觉区别。以不同的颜色显示，表现出旗下不同社交品牌的属性，如蓝色代表和公司同名的 Facebook 社交平台，绿色代表 WhatsApp（跨平台应用程序，用于智能手机之间的通讯），粉色代表 Instagram 等等。

和以往不同的是，之前我们在定义一个字体时，只需要根据产品的气质去选择一个合适字体即可，现在成本变的更大了，可喜的是行业中越来越多的开源字体，对于没有条件去设计字体的团队，我们要学会去借力！另外就是一定要注意字体版权问题。

图标

图标是界面中除了文字以外经常运用到的点，一个好的图标能把产品特点体现的淋漓尽致！

我们结合一个实际案例，看看设计师是如何在图标中融于品牌元素的：

这是产品LOGO，粗略看没什么特点，但是设计师从LOGO中挖掘了一个图形，也就是这个半弧的图形作为一个设计创意点，然后将这个图形进行运用到各个场景！

这套图标中，圆角元素，图标颜色和LOGO匹配，保留LOGO中黄色元素，同时图标的弧度在圆弧的地方，运用比较大的柔和的角度和整体的LOGO匹配。

最后

正如我们之前文章中所说，品牌就像内裤，看不见但是很重要，作为设计师，除了做好满足产品的功能设计外，把你负责的产品赋予性格和生命力，是我们必须的职责也是作为产品设计师必须要具备的能力，最后我们来回顾下今天的内容，如何在UI中塑造一个品牌，可以通过以下维度：

1.色彩（有特点的颜色，颜色不能太普通）

2.形状（合理运用形状特点，定义图形风格）  

3.插画（符合产品调性的插画风格）

4.字体（定义独特气质的字体，或者选择一套）    

5.图标（基于LOGO找到特别符号的图标）

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