APP图标设计小技巧:如何设计出最简单的图标组合

关于APP图标设计的一些教程和干货,25学堂已经分享了很多。比如:

1、APP设计小技巧:教你一个设计统一图标大小的方法

2、APP设计视频教程:APP启动图标设计的四个步骤

3、教你使用PS路径绘制APP线性图标教程

4、在线生成自定义APP图标字体利器:IconVault

5、什么样的icon图标才算是好的APP图标设计呢

下面这种最常见的APP分类图标设计案例:

%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e5%ae%ab%e6%a0%bc%e5%bc%8f%e5%b8%83%e5%b1%80

 

今天,25学堂的小编跟大家分享一个APP图标设计小技巧:如何构想出最简单的图标组合。

当然,如果你如果有自己一套快速构建icon图标的方法,也可以跟我们分享哦~

UI设计师都明白,图标越小,需要展示的详细细节就越少,对设计师的能力要求也较高。

相对于较大的图标而言,64px 的图标设计应该减少一些不必要的细节,以此来提升图标的识别度,但是你需要非常小心的去掉那些不必要的元素,以免过多的简化,造成了整体的不可识别。

 

第一个小技巧:使用最简单的图形

简单的形状可以组合成复杂的图标。你只需要从不同的角度去观察他们。将注意力放在每一个图标是如何通过简单元素组合而成的。

比如下图所示:

%e5%9b%be%e6%a0%87%e6%98%af%e5%a6%82%e4%bd%95%e9%80%9a%e8%bf%87%e7%ae%80%e5%8d%95%e5%85%83%e7%b4%a0%e7%bb%84%e5%90%88%e8%80%8c%e6%88%90%e7%9a%84%e3%80%82

以上这些APP icon风格属于:霓虹灯风格的线性图标设计。

还有一种纯色的线性风格。比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。

如下图:

4px线性图标下载

 

所谓的icon 图标,  不是对照片和实物的重绘,它们带有特定的信息,所以你的工作是将这些信息通过图标的形式清晰的表达出来,图标是将复杂的信息通过小的象形图案展现出来。

也是APP ui设计师将抽象的实物转换成可识别性的图标。

 

当然,作为初学者,初次学习设计Icon图标的时候,如何通过简单的形状去表达复杂的含义是一件比较困难的事情,但是只有不断的实践才是提升的关键。

比如下面2个案例可以帮助大家打开设计icon 图标设计的思维。

%e5%bf%83%e5%9e%8b-%e5%9b%be%e6%a0%87%e7%bb%98%e5%88%b6

心形  图案的 icon 线性图标绘制方法

%e6%af%94%e5%a6%82-%e7%9c%bc%e7%9d%9b-icon-%e5%9b%be%e6%a0%87%e7%9a%84%e7%bb%98%e5%88%b6

眼睛  图案的 icon 线性图标绘制方法

 

%e5%ae%9a%e4%bd%8d-%e5%9b%be%e6%a0%87%e7%9a%84%e7%bb%98%e5%88%b6%e6%96%b9%e6%b3%95

地理定位   图案的 icon 面型扁平图标绘制方法

 

看完这三个图案化的 icon 绘制方法,有没有觉得其实icon的设计没想象中的复杂和苦难呢?

看完,其实你也可以设计出来,也可以举一反三的去设计别的icon 图标。

请大家记住下面的icon图标设计的知识点:

所以,关注对象所有的主要功能,划分层级,突出显示图标的关键元素是至关重要的。

少即是多,图标并不应该过度设计。他们必须尽可能简单地传递正确信息。如果你能发现一些可以删除的不必要元素,使它看起来更简单,更加易于识别,请大胆的做吧。

线性图标设计知识

第二个绘制icon 图标设计小技巧:手绘草图

这也是最能提高设计师图形表达力的更高效的方式。不信,你可以去试试。

使用最简单的图形绘制图标。你可以更加直观方便的得到反馈和做出修改。所以尝试使用几何形状去构建图标,并且通过观察别人的图标作品是如何做到的。

感兴趣的同学可以围观追波网知名国外UI设计师 Paulius Kairevičius 的作品,基本几何形状的组合设计,或许会给你的图标设计带来很大启发。

symboldr

值得大家看的是6步制作一个精美图标。下期,25学堂继续跟大家分享最实用的的APP设计干货。其实logo设计的方法也是这样。

希望大家在APP设计道路上有所进步。加油~  各位小伙伴们。

 

 

 

每天更新,
全站高品质素材免费下载!