线性图标特点简洁、干练、识别度较高,视觉降噪,无更多干扰性适用于APP标签栏、功能模块及后台系统侧边栏等
面性图标更能强化产品本身特性,视觉更丰富饱满,吸引用户注意力适用于APP标签栏、金刚区及后台系统侧边栏等
双色图标的两种色调一般是运用品牌色进行制作,突出图标特性的同时,又能强调品牌调性适用于APP金刚区及功能区等
渐变色图标的色彩更能吸引用户注意力,主色调运用品牌色,结合不透明图标等更具设计感适用于APP金刚区及功能区等
毛玻璃图标是近两年比较流行的风格,很多APP金刚区及个人中心都采用了毛玻璃/磨砂玻璃图标适用于APP金刚区及功能区等
不透明图标为某部分调整不透明度得到有层次感的图标,更年轻、简约适用于APP标签栏、功能模块
轻拟物图标介于扁平与立体图标之间,有一点质感又不是很立体,更大程度的还原事物本身适用于游戏、外卖、IP衍生等APP金刚区及功能区等
通俗的说为APP产品的logo,也叫启动图标,应用于桌面图标,ios应用商店等多个地方。该图标简洁易理解,能够明确表达产品定位及核心功能,有名称首字、全称、IP、首字母、及符号等多种格式构成
金刚区图标作为APP产品的重中之重,用户点击、提升转化率的关键,在风格、表意、品牌感、设计感等多个方面应反复斟酌细化
APP底部用于切换页面的图标,有线性、面性及其他形式,分为点击态/选中态,未点击态/未选中状态,图标颜色为品牌色或品牌色与辅助色结合
根据米勒-莱尔错觉,在做设计图时,不能单纯的靠软件自带的左对齐、右对齐等方式达到物理对齐,尽可能的调整元素,使之视觉对齐
ps这类位图软件作图时,容易造成图标模糊,解决办法:使用直接选择工具选中虚掉的两个锚点ctrl+t,再按键盘的上下左右键调整下位置,图标就会变得清晰
图标是弱化实物的表现结果,需简洁明了,易识别,画图标时,应去掉冗余的元素,用基本的形状保留最基础的部分,让图标更易理解
在整组图标中,利用一致性自检图标是否符合整体调性。包含图标颜色、线性/面性图标、描边粗细、大小、形状等多方面
图标由几个元素组成时,断点优先选择在连接处,让整个图标看起来更自然和谐
分析图标复杂度,复杂度较低的部分,通过断点来增加图标复杂度,以达到更高的平衡感
针对对称图标,避免在对称处(正中间)断点,会显得比较死板,稍微不对称更柔和自然
由矩形、圆、钢笔工具绘制基本图形。山和太阳(左边的两个形状)命名图层1;大矩形(第3个形状)命名为图层2;最右边矩形命名为图层3
图层1色值(FFFFFF),图层2色值(FFECE7),图层3色值(FC7856-FFBAA9)同时进行位置叠放
复制图层3(渐变背景层),放于图层2(大矩形)的上面
把刚复制的图层进行高斯模糊(模糊值20,不透明度90%,仅做参考),左图把刚刚高斯模糊的图层跟图层2(浅橙色的大矩形)进行剪切蒙版,如右图
调整图层1(山和太阳)色值为FFF3FO,并添加投影把调整好的图层1(山和太阳)与图层2,3(图标背景)叠放合并,得到右图
为了使图标细节更丰富,更有质感,对比度更强,增加了1px的描边。图层2(大矩形)渐变描边色值:FFE8E3-FFD3C7。图层3(小矩形)渐变描边色值:FC7856-FFB9A8