LOWPOLY风格
我曾介绍过LOWPOLY这种设计风格,这种风格如果应用在产品图标上同样非常抢眼,因为用户的手机上可能安装了很多APP,那么第一眼扫过去一定会注意到最亮眼的图标。而LOWPOLY因为本身造型的独特性非常吸引眼球。当然LOWPOLY也有它的问题,比如容易让图标失去细节等,所以很多产品图标都是使用LOWPOLY作为图形的背景。
潮自拍:潮自拍使用了暖色邻近色渐变的LOWPOLY作为背景,前景使用了一个很潮的S。
潘通色:潘通色本身的最大特征就是色卡,所以使用了LOWPOLY的形式。
美妆相机:通常LOWPOLY的形式是方块,而美妆相机使用了三角作为基础元素,很特别。
人人:人人的产品图标使用了不同的矩形斜度45°,增加了设计的速度感。
潮自拍、潘通色、美妆相机、人人的产品图标
微渐变风格
微渐变也是非常常见的表现手法。在拟物被扁平替代以后,我们会发现无法表达空间上的Z轴。所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标设计风格中最有竞争力的一种。
每日优鲜:每日优鲜在背景上用了很多炫彩的圆球,由于促销时段在原有图标上增加了一个双十一的小标识,在手机中非常抢眼。
陌陌:陌陌图标如果设计成扁平你还会注意到它吗?使用线性图标会使得图标厚度感不够,而微渐变可以非常好地解决这个问题。
全民K歌:使用了紫红色的渐变来塑造一只鹦鹉,如果遇到其他使用场景可以使用扁平版本,这样会让产品图标的使用更加灵活。
Mindnode:这款脑图软件的产品图标使用了三组邻近色的渐变,同时使用了非常微妙的阴影。
每日优鲜、陌陌、全民K歌、Mindnode的产品图标
卡通风格
卡通风格的产品图标会让用户更有好感,所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美,其实是错误的。卡通可以说是一种通吃的风格,比如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而卡通本身有不同的风格,比如拟物类的卡通、扁平类的卡通等,也会给人不同的感受。所以如果我们的产品要使用卡通作为产品图标,最好以目标用户群的喜好作为标尺。
开心消消乐:开心消消乐是一个休闲游戏,游戏类APP的产品图标通常是使用拟物风格,这样可以最大地吸引玩家的注意力和兴趣。
映客:映客是直播APP,通常用户年龄不是很大,所以使用了一个很可爱的猫头鹰作为产品图标。
Waze:Waze的产品图标不仅可爱而且突出了Waze的地图查找功能。
BOO!:BOO!是一个儿童社交产品,用户比较低龄,所以更适合使用可爱的卡通作为图标。
开心消消乐、映客、Waze、BOO!的产品图标
图标的网格和参考线
如果我们想设计一个小图标,那么我们可以把画布放大到400%来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在很多软件里都有,比如在Illustrator中点击视图 > 网格 即可开启网格了。参考线模板则需要下载第三方设计的模板,比如Material Design的参考线模板就有正方形、圆形、圆形和长方形结合等不同形式。如果对齐模板中的形状,即可得到面积相等的长方形、正方形、圆形。这对我们构建视觉上面积相等的图标很有益处。
网格和参考线
不同形状的网格布局
在网格的辅助下可以设计出大小均衡的图标
尺寸
苹果启动图标尺寸
苹果需要很多尺寸的图标用在不同的场景上,比如说在网页端打开iTunes会使用512px的大图标,而在手机、iPad桌面上的图标大小也不同。除了尺寸不同,这些图标的圆角也有不同的数值。为了简化这部分的难度,苹果为开发者提供了模板,有了模板就不用记那么多东西啦。苹果官方HIG下载的这套资源中,有Template-AppIcons-iOS这个文件,这个文件提供了PS、Sketch、XD等不同格式。我比较推荐使用PS的格式。打开这个文件,用我们自己设计的启动图标替换掉任意智能对象里的内容(智能对象都是一个变出来的)。那么打开智能对象就是一个1024x1024px的矩形画布,把我们的产品图标放在这里,保存这个智能对象再关闭它就可以了。这时,你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏,切出这些图标即可。如果是AI完成的产品图标可以直接Ctrl+C然后在PS智能对象中Ctrl+V复制过来就行。
Template-AppIcons-iOS
安卓启动图标尺寸
安卓启动图标同样需要很多尺寸,主流是需要:1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px这六种。我们提供给程序员的是直角的矩形,然后程序员通过代码进行切割变成圆角图标。在这里我也做了一个智能对象的模板送给您,只要替换其中的智能对象图像,换成您的1024x1024px图标保存即可。
安卓图标模板
飞特游客
委托设计