品牌基因图标设计技巧

提取品牌图形：

使用一个让人印象深刻的品牌图形作为首页标签图标是最能让人感知的

提取设计语言：

从品牌图形中提取其设计语言作为其他图标的设计元素，可以构成一套完整的视觉符号

拆分品牌名称：

虽每个字母和功能版块之间没有关联，但由于产品本身的用户人群具有特殊年轻文艺化这一特质，比较能接受新鲜事物，由此可以给APP加分

（建议不要随意使用，没有特殊代表的符号会给用户带来不必要的误解）

提取品牌色彩：

从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验

提取产品气质：

same使用品牌蓝色关窗APP，其图标设计给用户一种年轻文艺温暖等感受，仿佛每一个图标具有年轻生命力值得挖掘

灰色线性图标：

适合于极简风格的APP，它全部使用迁细的线性图标，不赋予任何色彩，有一种去繁求简的高级智慧，是追求极简与克制的精髓

线性图标：

表现力更加简洁--轻柔--与界面设计能更好地融为一体，而面形图标的视觉冲击力强，会导致用户的注意力不经意间被其吸引，忽略产品内容本身

单色线性图标：

有助于强化用户对品牌形象的辨识度

彩色线性图标：

因此使用了大尺寸的线性图标设计，并加上背板赋予每一个功能不同的颜色，让用户在无形中形成认知

线形图标+面形图标：

在标签栏时，核心功能入口的图标就使用面形图标。由于面形图标的视觉表现力强，当许多图标堆在一起时就会产生一种拥挤的感觉，为了减轻这种笨重感，因此绘制尺寸时不宜过大而且要保持视觉效果简洁。

-----------------------------------------------------------

色调一致：

通常是品牌色，而辅助色-点缀色-背景色等都应以主色调为基准来搭配

60-30-10原则：和谐-平衡-不杂乱

即60%为主色，可运用到导航栏-按钮-图标-标题等关键的元素中，使整个APP的视觉焦点和色彩联系；

即30%为辅助色，可以避免界面中因为过多主色而造成的视觉疲劳，剩下10%为点缀色

渐变色不超过90%

APP中包含主色-辅助色-点缀色-背景色和背景对比色

互补色：搭配有着非常强烈的对比度，可以产生许多十分震撼的视觉效果，让人目光很难从中逃离

分散互补色：主色和其互补的两个或多个色系的搭配，例如：蓝色-黄色-橙色

三角对比色：色环中3种互相平衡的色系搭配。如：蓝红绿色

----------------------------------------------------------------------

渐变分为：线性渐变-径向渐变-角度渐变-对称渐变-菱形渐变

水平渐变：角度为0的线性渐变，通常被运用在长条形的元素上

如：导航栏-按钮-标签-进度条等（通常轻的色彩在左边，重的在后边）

垂直渐变：角度为90的线性渐变，与水平想法，通常被用在正方形和竖长形的元素

如：图标背板-启动页-注册登录页-个人中心等

对焦渐变：对角的线性渐变，相比前两种使用场景更广。几乎可以涵盖水平渐变和垂直渐变的所有范围

如：图标背板-启动页-注册登录页-导航栏-按钮-标签-进度条等

径向渐变：色彩以圆心像四周扩散的渐变，通常被用在大背景

如：启动页-个人中心头部等

霓虹色渐变：特殊渐变如Iphonex壁纸

----------------------------------------------------------------------

卡片设计的优点：

1.独特的设计语言，快速从扁平化设计种区分出来，带给用户强烈的识别度

2.灵活的空间扩展

3.清晰的视觉呈现

4.易于内容的整理

5.特殊的功能属性

6.丰富的交互属性

缺点：如微信朋友圈的产品设计初衷式轻量化，希望用户关注信息本身，卡片式会阻断用户的信息浏览，以及分割感会让界面变得零碎

列表式设计：

它使用分割线对不同的元素进行有效的组织，帮助用户理解界面的视觉层次

1.轻量化的设计

2.提升浏览效率

目的：提升同类信息内容的浏览效率，对于不同类的信息内容，盲目使用列表涉及会让用户困扰

无框设计：

1.极简注意风格

2.掌握注意力

3.保持界面整洁

----------------------------------------------------------------------

打动人心的情感化设计：功能性-易用性-愉悦感

赋予产品生命力：

语言是情感化设计直接的利器，拟人化的对白相比冷冰冰的语言更能获得用户的好感，赋予产品新的生命力

图标设计甚至可以展示动画效果和赋予智能化，充满惊喜感，瞬间拉近用户产品的情感距离

下拉刷新动画：

变的生动有趣，用户也在这种快乐的情绪种对产品产生好感

1.有些有趣的设计是隐形的像彩蛋，需要用户自己发掘当用户找到后，就会收获一份特殊的喜悦和乐趣。甚至引发用户的好奇心，增强对产品的探知欲

2.有些有趣的设计是显形的目的让用户与产品的交流从而产生积极的情绪，可以增强用户在使用产品遇到困难时的容忍力

空白页面或加载动画会给用户化解负面情绪，充满温度

提升品牌认同感：正确的价值观可以引发用户积极的正面情感，并将这种情感投射到产品，从而提升用户对产品的认同感和忠诚度，如MONO在登录页展示一段心灵文字，赋予用户一种高贵的品质，引发共鸣

模拟用户行为：

当一个产品可以模拟用户行为，将用户带入真实的情境中，用户就会对产品产生深刻的认同感（如天气预报）

情感化设计可以拉近用户产品之间的距离，在更神的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动

悉心洞察用户的行为，换位思考去满足用户的需求，积极地为他们解决问题

高级UI设计师之路  作者： 田海

以上内容只是个人认为是重要点，为了方便大家更快了解书籍所做的笔记，如果最后大家觉得好的还是最好去买实物书观看