转自：聊设计 id：
liaosheji2010
品牌设计，对移动互联网时代的的产品质量提升带来了更多的可能性。
也对设计师本身的平面视觉技能带来了更大的机会和挑战。
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、活力向上
有活力的感觉，就是充满了朝气。 Same是一个非常有个性的社交应用。你安装完App打开应用首先呈现的就是两个阳光可爱的美少女。通过开场的短片秀（图1-4），就给人信心满满，自信阳光的感觉。
（图1-4）Same的启动视频
有些人，从头到脚散发出一股吸引你的气息，这就是所谓志趣相投。有些产品也一样，你可以在上面找到和你一样特质的人群。Same定位的用户是90后、00后的年轻人，他们内心世界丰富，喜欢新鲜事物。所以界面内的表情（图1-4），是继line表情之后，对当前年轻人群身份、气质、角色和代入感相当强的作品。
（图1-4）Same的表情设计
5、个性张扬
个性意味和人家不一样，不是随大流的那种，张扬就是外向活泼，给人不见外的感觉，到任何地方都能引起别人的关注，张扬的坏处就是，过分的显摆自己，容易招人嫉妒。所以你的应用设计的明显和别人不一样。两种结果。好评如潮，说这个设计不一样，有自己特点。还有一种结果就是，这个应用怎么能这样设计，太不符合主流习惯了。例如（图1-6）野兽派应用，这是综合类的时尚类家居相关售卖平台。做为一个电商类的应用，他的设计明显是非常个性的，没有传统的底部标签栏模块设计，而是首页就是一整张插画，作为首页各种子模块店铺的入口。这样的设计非常有个性，让人一下就记住了。
（图1-6）野兽派应用
所以UI
设计师需要做的是提炼出的产品气质并转化为具象化的视觉语言。让用户通过界面这层介质感知到你产品的气质。
第二步：品牌图形的提炼
这个过程与平面设计logo基本类似，其实某种程度上就是设计logo，现在的App图标游戏图标还会使用复杂的光影质感。其他主流的商业应用图标都是极简的扁平图标。所以更需要一个独特的品牌图形。
1、具象图形
通常情况下，具象图形的LOGO设计会更受到移动设计的亲睐。部分原因是这些LOGO图形容易辨认，可以更清晰的表述出应用是做什么的。例如（图1-7）里的应用只看图形就能很清晰的明白这个应用的属性或者应用的功能。只留给大家很少的开放性解释空间。有些应用的图形甚至很聪明地运用了双关含义和隐藏图形。例如OFO既使用品牌的名称，又表达了自行车的图形符合共享单车的属性。是一个非常 成功的logo品牌图形。
（图1-7）具象图形的应用图标
2、抽象的几何图形
抽象图形，抽象图形LOGO设计同样很适用于多元化企业，因为它们传达出的是情绪和基调，而非具体的公司类型。一个LOGO未必需要直接反映出公司是做什么的。想想Nike旋风，McDonald’s金色拱门，或是Apple的LOGO。所以有时候App的图标也是如此，更多通过一些抽象的图形传达一些特别的含义。比如爱彼迎的图形背后有四层含义（图1-8）。首先，这是一个字母A，代表了Airbnb；第二，这像是一个人张开双手，代表了人；第三，这像是一个标记地理位置的符号，代表地点；第四，这是一个倒过来的爱心，代表了爱。
（图1-8）Airbnb的图形释义
3、吉祥物
互联网公司非常喜欢用动物做为公司的吉祥物。这些互联网公司的logo有很多是采用让人萌化的动物图案，这成了一种风气，感觉互联网的圈子成了动物园一样。比如京东的狗（图1-9），Tmall的天猫、UC的松鼠，腾讯的企鹅等。当然吉祥物并非只有选择使用动物图形，比如站酷的小酷图形。
（图1-9）吉祥物为品牌图形
第三步：品牌图形的几何化轮廓
我经常和学生强调，绘画和设计是两回事情，也许你会画但并不意味着设计可以做的好。现在主流App的LOGO图形倾向于扁平化设计，可能就是一个简单的剪影图形。比如你要设计一个表现自然或者格调感的应用。设计师想使用“鹿”这个图形。如果直接用钢笔勾勒鹿的图形（图1-10），那么这个呈现的是一副剪影插画。这个图形又很多细节，线条充满了不规则感，这些不规则线条对于一个LOGO设计来说是非常冗余的。
（图1-10）偏插画的未经处理的剪影图形
1、设计辅助线
好的品牌图形是需要对基本图形进行2次提炼，去除一些不必要线条细节，对原有的剪影图形进行几何抽象化。我们经常看到在画LOGO时候出现的各种辅助线（图1-11），这些辅助线以各种圆为参考形。辅助线的作用是帮助设计师用规整的几何图形去切分原有的剪影。让线条更加规整几何化。这样几何规整化的图形已经和不规则的偏插画的剪影图形区分开来了。现在更像一个有设计感的图标图形了。当然现在这样的设计辅助线，在一些设计师中有滥用的嫌疑。在一些不需要的加辅助线的地方，加了很多线条，营造一种专业的感觉。这种做法在有经验的设计师眼中是非常可笑的。
（图1-11）用椭圆切割的鹿剪影形状
2、设计的图形语言
