移动互联网之品牌设计
行业分享 | 05.28.2018 | 浏览
品牌设计，对移动互联网时代的的产品质量提升带来了更多的可能性。
也对设计师本身的平面视觉技能带来了更大的机会和挑战。
APP为什么需要品牌设计
距离上一篇App系列文章已经过去两个星期了，我除去教学生的时间，都在准备这篇文章的资料，因为这篇文章的内容除了大量的截图还有视频需要处理。上篇文章有人留言说文字太多，懒得看。我想说我的文章是写给爱学习的同学看的，不是娱乐贴。所以这篇文章依然很长，干货十足。
现在打开各种设计网站，去寻找App界面设计参考。你会发现如果去掉图标，仅仅去看界面设计，很多App的界面设计差异性非常小。App设计有一种同质化的倾向。
在产品型公司，UI设计师的工作流程一般是这样的，和产品经理或者交互设计师讨论每个版本的规划，在这个讨论过程中用草图的形式画出大致的流程。之后将流程图细化并分析使用上的便利性和技术上的可行性，然后设计师将界面设计好，经过评审没有问题，直接输出给程序员。这是一个标准化的流水作业流程，留给设计师发挥的时间和空间并不多，更多时候是以功能实现为第一需求。另外的有部分原因是设计师趋向于保守设计，遵循各种平台规范，这样的保守设计不容易出错。因为个性的设计的App可能非常成功，也可能是大家眼中的异类。以上的原因导致很多商业的App设计的大同小异。
经过这几年的移动创业风潮，大量App设计已经存在，现在设计师遇到的不是从零起步，如何设计一款App的问题了。而是面临各种改版设计的需求，如何设计一款和竞品有差异化设计的界面，这是UI设计师越来越迫切的需求。面对现在App设计趋同的市场行情，如果谁可以做出不一样的设计，那么你就可以鹤立鸡群。差异化设计这对界面设计师也是一个巨大的挑战和机会。
APP品牌植入设计
品牌设计是在企业自身正确定位的基础之上，基于正确品牌定义下的视觉沟通。我们平常看到的logo设计只是品牌设计视觉延伸的一部分。因为移动界面设计的同质化严重，所以越来越多的公司重视对App的品牌塑造，希望通过品牌的塑造，使用户快速的对产品形象进行有效深刻的记忆。 App中的 Logo图标、界面的视觉风格，甚至App Store上的介绍和宣传Banner等，都是品牌设计的组成部分。 App的品牌设计，对移动互联网时代的的产品质量提升带来了更多的可能性。也对设计师本身的平面视觉技能带来了更大的机会和挑战。
移动端产品品牌视觉设计的点：
图标：APP图标、底部导航栏、其他页面的功能图标
字体：字体（APP可以内置字体包变换字体）、字号
页面设计：引导页、启动页、刷新控件
排版：元素的留白
图片：页面的配图、占位图片、页面的情感插画
线下物料：线下的各种物料及其衍生品。
APP品牌设计的步骤
1、 发掘产品的气质
2、 品牌图形的提炼
3、 品牌图形的几何化轮廓
4、 品牌图形在界面设计中的应用
5、 视觉语言的一致性
第一步：发掘产品的气质
当我们看一个人的时候，会根据他的外表+内涵，我们会对他有第一个印象的认知，这个就是气质。APP也一样。App的外表是我们产品的视觉设计呈现，也就是这个产品看起来让人感觉如何。内涵就是App的内容和功能的呈现，就是能否进一步留住用户驻足。所以产品就是这样，呈现什么样的气质，就会吸引来什么样子的用户。
常见的品牌气质
1、 高冷气质
2、 文艺气质
3、 时尚气质
4、 活力向上
5、 个性张扬
1、高冷气质
高冷的人自带着一种生人勿近的冷淡气质，喜欢穿着黑白灰。朋友不是很多，不需要融入小圈子。然后严格按照自己任性极致的标准筛选良莠，深交的少，浅交的保持距离懒得讨好。所谓可亲而难以靠近。所以高冷气质的应用不需要讨好所有人，只服务好这个App定位的群体就好。例如（图1-1）的Gucci应用，整个界面只有黑白以及一些色彩丰富的配图，非常的简洁明快，没有任何多余的修饰，隐隐透露出大牌的傲娇。
（图1-1）Gucci应用
2、文艺气质
这个说到文艺气质，其实就是一个字“范儿”， 如何才能有范儿？首先要有文化底蕴，素质修养，如果没有的话，装不像的。具体什么样，可以去看看一些诗人，搞民谣音乐的人的装扮，尤其是上个世纪的。穿着宽松的毛衣，戴着圆圆的黑框眼镜，搞一条素色的围巾，拿个老式的手动旁轴相机，留着稀疏的胡渣，或是女生长发飘飘的感觉。所以应用从界面设计到页面内容，都要有足够的范儿，这样才是文艺的彻底。例如（图1-2）最美有物，从界面设计到内容标题的文字都散发出足够的文艺气质。这种范儿可能不是所有人都学的来的，比如让做B2C综合电商的应用学这样的气质就不伦不类，也许这就是产品基因吧。
（图1-2）最美有物的内容模块
3、时尚气质
所谓时尚，是时与尚的结合体。代表当前世界对社会某项事物崇尚的潮流。是一个时期的流行风气与社会环境，时尚引领潮流，是流行文化的表现。对时尚最为敏感的就是家居、服饰行业。没有人希望自己买来的衣服或者家具是一个落伍淘汰的风格。当前的在界面设计中最流行的就是使用各种几何元素，通过点线面的搭配塑造页面的时尚感。例如（图1-3）男衣邦应用，从启动界面到首页都穿插了非常多的几何线条，界面具有浓浓的几何构成时尚感。
（图1-3）男衣邦启动页和广告页
4、个性张扬
个性意味和人家不一样，不是随大流的那种，张扬就是外向活泼，给人不见外的感觉，到任何地方都能引起别人的关注，张扬的坏处就是，过分的显摆自己，容易招人嫉妒。所以你的应用设计的明显和别人不一样。两种结果。好评如潮，说这个设计不一样，有自己特点。还有一种结果就是，这个应用怎么能这样设计，太不符合主流习惯了。例如（图1-6）野兽派应用，这是综合类的时尚类家居相关售卖平台。做为一个电商类的应用，他的设计明显是非常个性的，没有传统的底部标签栏模块设计，而是首页就是一整张插画，作为首页各种子模块店铺的入口。这样的设计非常有个性，让人一下就记住了。
（图1-4）野兽派应用
所以UI设计师需要做的是提炼出的产品气质并转化为具象化的视觉语言。让用户通过界面这层介质感知到你产品的气质。
第二步：品牌图形的提炼
这个过程与平面设计logo基本类似，其实某种程度上就是设计logo，现在的App图标游戏图标还会使用复杂的光影质感。其他主流的商业应用图标都是极简的扁平图标。所以更需要一个独特的品牌图形。
1、具象图形
通常情况下，具象图形的LOGO设计会更受到移动设计的亲睐。部分原因是这些LOGO图形容易辨认，可以更清晰的表述出应用是做什么的。例如（图1-7）里的应用只看图形就能很清晰的明白这个应用的属性或者应用的功能。只留给大家很少的开放性解释空间。有些应用的图形甚至很聪明地运用了双关含义和隐藏图形。例如OFO既使用品牌的名称，又表达了自行车的图形符合共享单车的属性。是一个非常 成功的logo品牌图形。
（图1-5）具象图形的应用图标
2、抽象的几何图形
抽象图形，抽象图形LOGO设计同样很适用于多元化企业，因为它们传达出的是情绪和基调，而非具体的公司类型。一个LOGO未必需要直接反映出公司是做什么的。想想Nike旋风，McDonald’s金色拱门，或是Apple的LOGO。所以有时候App的图标也是如此，更多通过一些抽象的图形传达一些特别的含义。比如爱彼迎的图形背后有四层含义（图1-8）。首先，这是一个字母A，代表了Airbnb；第二，这像是一个人张开双手，代表了人；第三，这像是一个标记地理位置的符号，代表地点；第四，这是一个倒过来的爱心，代表了爱。
（图1-6）Airbnb的图形释义
3、吉祥物
互联网公司非常喜欢用动物做为公司的吉祥物。这些互联网公司的logo有很多是采用让人萌化的动物图案，这成了一种风气，感觉互联网的圈子成了动物园一样。比如京东的狗（图1-9），Tmall的天猫、UC的松鼠，腾讯的企鹅等。当然吉祥物并非只有选择使用动物图形，比如站酷的小酷图形。
（图1-7）吉祥物为品牌图形
第三步：品牌图形的几何化轮廓
我经常和学生强调，绘画和设计是两回事情，也许你会画但并不意味着设计可以做的好。现在主流App的LOGO图形倾向于扁平化设计，可能就是一个简单的剪影图形。比如你要设计一个表现自然或者格调感的应用。设计师想使用“鹿”这个图形。如果直接用钢笔勾勒鹿的图形（图1-10），那么这个呈现的是一副剪影插画。这个图形又很多细节，线条充满了不规则感，这些不规则线条对于一个LOGO设计来说是非常冗余的。
（图1-8）偏插画的未经处理的剪影图形
1、设计辅助线
好的品牌图形是需要对基本图形进行2次提炼，去除一些不必要线条细节，对原有的剪影图形进行几何抽象化。我们经常看到在画LOGO时候出现的各种辅助线（图1-11），这些辅助线以各种圆为参考形。辅助线的作用是帮助设计师用规整的几何图形去切分原有的剪影。让线条更加规整几何化。这样几何规整化的图形已经和不规则的偏插画的剪影图形区分开来了。现在更像一个有设计感的图标图形了。当然现在这样的设计辅助线，在一些设计师中有滥用的嫌疑。在一些不需要的加辅助线的地方，加了很多线条，营造一种专业的感觉。这种做法在有经验的设计师眼中是非常可笑的。
（图1-9）用椭圆切割的鹿剪影形状
2、设计的图形语言
经过几何规整化的图形只能算是一个好的图标，离好的品牌图形还有一段距离。品牌图形一定要有自己独特的设计，讲白图形一定要有自己的特色，让别人一下记住你。例如（图1-12）的设计语言就是流畅柔和的线条，通过这个极简的线条构造了鹿的品牌图形。
（图1-10）极简的线条构造鹿的图形
例如（图1-13）的鹿图形使用的是几何图形做为设计语言，用各种三角形和其他不规则图形。类似七巧板一样的设计拼接出鹿的轮廓。这个鹿的图形具有独特的设计感。
（图1-11）几何块面的鹿图形
3、提取典型的特征
由于移动设计的LOGO需要在一个圆角矩形中展示，并没有那么大面积供设计师发挥。所以需要选取最具有代表的形的局部图形（图1-14），比如鹿的头部是最具有代表性的图形部分。
（图1-12）提取典型特征的鹿头部图形
第四步：品牌图形在界面设计中的运用
1、 引导页
抽象形式感的图形，与广告页进行呼应。点击App图标，第一次打开应用的界面。会呈现一组引导页。引导页是用户进入主界面之前，首先见到的页面。这是产品给用户的第一印象。由于第一印象的好坏会极大地影响到后续的产品使用体验，因此我们需要花一些时间去精心设计引导页。匠物APP的应用通过一个动画，把LOGO的图形放大（图1-15），映射在引导页的背景上。这样品牌图形前后有了一个呼应，加深了用户的印象。
（图1-13）匠物的引导页
现在很多应用都放弃了四页引导页的传统做法，而是偏向内置视频的做法。视频具有更好的视觉动态效果。比如最美有物引导页使用了一段视频（图1-16），使用各种绚丽效果，最后一帧放出品牌logo图形，这种手法是不是很像我们以前看的各种国外大牌广告。比如耐克的广告从来不会放什么XX产品就是好的广告，而是喜欢放一段情怀画面，最后一个大大的LOGO告诉消费者我这是耐克的广告。
（图1-14）最美有物的引导页视频
2、 启动页
每次打开一个App，都会看到启动页，所以这是一个品牌露出非常高频次的页面，大多数应用都是品牌图形+ Slogan的设计形式，比如Life的启动页（图1-17），直接把品牌Slogan反复在启动页，和随后的广告页反复呈现。
（图1-15）Life启动页
如果觉得直接放品牌图形+背景的做法，比较老套的话，也可以尝试在品牌图形上进行2次设计。比如良仓的启动页（图1-18）运用logo图标的典型轮廓进行2次创作。
（图1-16）良仓启动视频
3、刷新控件
刷新控件用于刷新当前页面内容。在我的书中《术与道移动应用设计必修课》中有介绍。目前主流有下拉刷新和上拉刷新两种方式，这两种交互方式有很大区别。以网易新闻为例，我们在看当前页面的时候，使用下拉动作，界面反馈当前页面内容条数不变，而内容更新。而上拉刷新代表是加载。一个页面固定加载一定条数的新闻，从上往下看，看完一定条数，往上一拉，后面的内容继续载入。
方法1使用几何图形
Enjoy的品牌图形有一个非常鲜明的图形是那个波浪线，Enjooy下拉刷新的时候使用了这个波浪图形（图1-19），让品牌图形无处不在。
（图1-17）Enjoy的刷新图形
当然使用的图形也可以是一种图形的设计风格，比如造作的全局是较为硬朗的图形，这点 在他的个人中心就可以看出来，他的个人中心（图1-20）都是非常硬朗的直接图标。所以他的刷新使用了一个矩形做为刷新图形（图1-21）。
（图1-20）造作的个人中心图标
（图1-18）造作的矩形刷新图形
方法2使用吉祥物图形
在界面设计中吗，必须有一个设计语言贯穿，这样你的设计才会有特色，这个语言可以是一个图形，也可以是一个吉祥物卡通形象。如果有这样一个形象存在，你的界面设计会一下提升不少的特色。
（图1-19）大众点评的刷新控件
4、 占位图片
在界面设计中，很多图片需要考虑数据为空的情况，也有可能由于网络的情况图片可能没有加载出来，这些都需要设计一个默认的占位图片。例如最美有物的品牌图形是一个鹿（图1-23），他的个人中心默认头像就是一个鹿的占位图
（图1-20）最美有物个人中心页
需要注意的是在社交或者内容社区，品牌图形的个人头像有时候是需要慎重使用的，因为那样会让人误以为这是官方头像。
5、 界面其他小元素
有时候界面中功能会配上一些图标，让设计更好的释义。对于一些约定俗成的功能，如果把这个图标去除也不会很明显的影响含义。这个时候可以考虑使用特别的品牌图形替代。比如life的卡片banner上的点赞功能图标，使用了品牌图形指纹替代来传统的心形（图1-24）。从体验来说，这个数字很容易让人联想到这是评论数或者点赞数。所以替换为品牌图形对于用户体验并没有明显的降低。
（图1-21）LIFE的卡片Banner
六、底部导航栏图标
典型的IOS应用的结构是把App的主要模块放在底部导航进行切换，底部导航一般分为4到5个模块。以图标+文字的设计形式进行展示。那么这些图标就可以与品牌图形相结合，加深用户的印象。
方法1：品牌图形应用在首页图标
首页最常见使用的图标是一个房子的图形，这个图形来源于PC时代的面包屑结构，Home的图形代表家，代表不管你在网站哪个层级，点击Home图标像回家一样可以回到起始的位置。很多应用的图标上的logo，都是一个让人印象深刻的主图形，那么我们可以直接把这个logo图形做为应用的首页模块图标使用。这样的好处很明显，每次用户打开应用后，都会看到这个图形，反复加强了用户对App的logo的印象。例如大众点评、饿了么、花瓣、猫途鹰、网易云音乐提取各自品牌图形（图1-25），应用在了App底部导航栏首页模块上。
（图1-22）大众点评、饿了么、花瓣、猫途鹰、网易云音乐首页图标使用了品牌图形
方法2：品牌名称应用在底部导航栏
一些应用的名称是字母构成，为了强化用户对于应用名称的认知，直接把名称做为标签栏的图标。例如MONO（图1-26）应用的标签栏图标，设计的非常大胆，提取logo上面的4个字母M、O、N、O后，直接将其作为图标。但是这种设计策略的缺陷也很大，每个字母和功能模块本身的含义并没有直接联系，对用户帮助理解模块有一定的困难。所以这种方法适合一些极客小众App去使用。
（图1-23）MONO的底部标签栏图标
第五步：视觉语言的一致性
1、颜色的一致性
在完成了产品的整体风格和功能构架后，我们可以着眼于一些细节层面的设计。比如统一你的产品中，色彩和图形的意义。比如设计一套套标准的配色方案，：用品牌色代表可点击的按钮，用橙色代表与金钱有关的操作，用蓝色代表链接，用户对这些颜色的含义就进行了学习和习惯。让用户对这个App内的颜色形成记忆。例如好物（图1-27）好物每个可点击的按钮都是品牌黄色。
（图1-24）好物界面设计
2、元素的一致性
界面的本质是信息传递的一种介质，界面中包含各种繁杂的信息。所以如果我们希望通过设计让界面自己会说明，我们可能会加上一些样式的区分，比如我把标题加粗加大，把辅助信息变浅色变小一些，但这只能区分主次，很难具体说明每一部分的意义；那我还可以给一些信息加上可识别的图标。Life采用的是图标+标题+栏目上下排版形式（图1-29）。这样的设计好处是每个模块很清晰，且用户可以很清晰的对应分类各种子频道。所以设计样式不是随意的选择，单纯的看视觉美学样式。而是需要有效的对产品运营的需求进行支撑。
（图1-25） Life首页楼层banner与分类页
设计结语
一个成功商业产品，首先需要所有团队成员有一个共同的目标，并且大部分人具有品牌思维和设计思维，将其落实到和用户的每一个触点中去，也就是我们所说的服务设计，这样品牌的影响力才能逐渐深入人心。今天我们说的视觉图形设计只是品牌设计中的冰山一角，是最容易被普通用户感知的一层。
苏公网安备32059002004958