移动端UI设计项目实战教程 项目二 APP应用图标设计-任务一

项目二APP应用图标设计任务一面性图标设计任务说明：

该任务主要针对APP应用图标中的面性图标设计的内容进行讲解，对RGB和HSB色彩模式、常见的APP图标颜色、图标颜色的选择和搭配、iso图标规范、Android图标规范和选区规范等内容进行知识性的导入，并通过具体的任务实现过程进行实操性演练。知识导入：1、认识RGB和HSB：RGB和HSB是两种比较常见的色彩模式。1、图标的视觉统一：（1）RGB颜色模式

RGB模式，又被称为加色模式，是工业界的一种色彩模式。它是通过红（R）、绿（G）、蓝（B）三种颜色叠加形成各种各样的颜色。1、图标的视觉统一：（1）RGB颜色模式

由于RGB的色彩模式几乎涵盖了人类视觉所能感知到的所有颜色，所以运用领域比较广泛。该模式的图像普遍用在电视、网络、显示器、投影和多媒体等领域，但不太适合用在纸质印刷品中，会出现失真现象。1、图标的视觉统一：（2）HSB颜色模式HSB模式，也是工业界的一种色彩模式。它是基于人们对色彩的心理感知而产生的色彩图像，由色相（H）、饱和度（S）、亮度（B）组成。2、常见的APP图标颜色：（1）红色：红色作为经典色深受中国设计师喜爱。它的色彩温暖，性格强烈而外向，容易引起人们的注意，也容易引起兴奋、冲动的感觉。是一种在APP图标设计中运用的比较常见的颜色。例如：“小红书”APP、“京东”APP、“云闪付”APP、“拼多多”APP、“学习强国”APP等。2、常见的APP图标颜色：（2）蓝色：蓝色系的图标，无论深浅色调，都不会像红色系一样，带来强烈的冲击感。很多互联网企业都喜欢用蓝色，显得年轻有活力且自带科技感。蓝色会让人联想到蓝天、大海、广阔无垠的宇宙或流动的大气等。因此，蓝色是永恒的象征，是代表着一种平静、理智和纯净的颜色。例如：“支付宝”APP、“菜鸟”APP、“国家反诈中心”APP、“交警12123”APP等。2、常见的APP图标颜色：黄色：黄色最为光谱中最容易被吸收的颜色，带着积极健康的意义。但是黄色很不容易把控，饱和度过高显得土气，饱和度过低则会不够显现。常见的黄色APP图标有：“美团”APP、“闲鱼”APP、“微博”APP、“QQ音乐”APP等。2、常见的APP图标颜色：橙色：橙色融合了红色和黄色的特点，显得有活力，是欢快活泼的色彩。作为暖色系中最温暖的颜色，容易与居家、生活、安稳等关键词联系起来。例如：“淘宝”APP、“芒果TV”APP、“掌上公交”APP等2、常见的APP图标颜色：绿色：绿色属于冷色系，是永恒的欣欣向荣的颜色，代表着生命和希望。常常给人一种放松、舒缓、镇定的感受，同时也有护目的作用。常见的绿色APP图标有“微信”APP、“爱奇艺”APP、“豆瓣”APP等。2、常见的APP图标颜色：黑色：黑色具有抽象表现力和神秘感。在现代人审美中变成了高级、简约的颜色，比较适合在浅色的衬托下作为Logo的基准线，如：剪影、Keep、抖音等都是黑色。任何一个设计师都不会使用纯黑色，因此，我们看到的黑色背景图标，都是五彩斑斓的有色黑。2、常见的APP图标颜色：白色：白色能够吸收所有光的颜色，具有膨胀感和洁净感。用白色作为APP图标的底色是所有图标里用色最丰富的，没有背景色的感染之后，用户的视线对Logo本身的注意力会加强。例如：“优酷”APP、“顺丰”APP、“百度”APP、“QQ”APP等。3、图标颜色的选择和搭配：：大部分的图标都会有一些线性块状的图标，而这些图标中一般都要求不超过3种颜色。所以，通常会有三种配色的模式：单色图标、双色图标、多色图标。3、图标颜色的选择和搭配：（1）单色图标：颜色单一的图标，通常会用黑白灰色来配合其他颜色进行搭配；（2）双色图标：同色系饱和度明度不同的，深颜色在外框。某一个颜色占较大的面积，为主要颜色，另一个颜色占较小面积的，可以突出重点，起到画龙点睛的作用；（3）多色图标：通过对比色或邻近色来搭配。对比色和邻近色的色环。3、图标颜色的选择和搭配：4、ios图标规范：设备名称APPStore图标程序应用图标主屏幕Spotlight搜索标签栏iPhoneX/8P+/7P+/6P+/6SP1024*1024px180*180px114*114px87*87px75*75pxiPhone8/7/6/SE/5s/5c/5/4s/s1024*1024px120*120px114*114px58*58px75*75pxiPad3/4/5/6/Air/Air2/min21024*1024px180*180px144*144px100*100px50*50pxiPadMini1024*1024px90*90px72*72px50*50px25*25px5、Android图标规范：屏幕大小启动图标操作栏图标上下文图标系统通知图标（白色）最细笔画380*480px48*48px32*32px16*16px24*24px不小于2px480*800px480*854px540*960px72*72px48*48px24*24px36*36px不小于3px720*1280px48*48dp32*32dp16*16dp24*24dp不小于2dp1080*1920px144*144px96*96px48*48px72*72px不小于6px6、选区工具介绍：