一组图标做出9个风格，实战案例让你也能学会

在前边的章中我们已经全方位立体式的讲解了系统图标的相知识点。即讲到了系统图标的设计格，讲到图标设计的栅格体系。之我们都纸谈兵，那么我们今天就实践一下，毕竟实践硬道理。

我们通过实际案例讲解如何设计具有独特气质的系统图标风格。我们同一套图标的基础，通过变换不同的设手法变化图标风格，真的都图标设。

系统图标实例教程

1. 首先我们打PS的编辑，选择首选项，然后打参考线选项，我们设网格间隔44px，也就ios系统中标准图标的小。然后设子网格8px。

2. 新建一800*800px的画布，按捷键 Ctrl+” 键调出刚设的辅线。每方格44*44px。

3. 打篇文章中推导出的系统图标栅格系统作设图标的参考。这里考拉老师家提供了iOS系统图标栅格系统的下载址，自行下载即可。（下载链接：https://pan.baidu.com/s/1dGFskZv 密码：d30b）分享的系统栅格体系ai文件，请家用AI打，然后选择栅格文件ctrl+c复制至PS，ctrl+v然后选择智能对选项。

4. 这我们选择UC头条图标作为原形进新设计。选择UC头条icon作为原型原是，5个图标比较有代表性，分是圆形图标、竖长形图标和异性图标。唯独缺个正形图标，所以我们把第个首页图标换为个正形咨讯图标。这样我们能够在套图标比5不形状图标设计。

风设计1

首先我们先运用尔运做一个套方正的图标，条为2px，图标边角采用直角的设计方式，给人方正硬朗的感。我们把个图标风为基础造型，下边我们将在个图标风上进行不断地变化，打造出各种不一样的设计风。

格设计2

我们在格1的基础上优尖角为圆角图标。圆角大小设计定为4px，瞬间图标的感觉就变得圆润，亲切了很多。这种格就是面上最到的系统图标设计格。

风格设3

风格2的基础我们加粗线条3px的视觉风格。由于线条粗细的调整，整套图标的感觉已比较粗壮力，给人非常可靠稳的感觉。

风格设计4

继续加粗线条为4px视觉风格，此时图标已经十分粗壮，是由于是搭配了圆设计，套图标反而感觉多了可爱感觉。这个图标造型基本是UC头条图标设计风格了。然由于图标加粗，我们发现订单图标内部杆视觉上已经比其他图标看起来更，所以在这时候我们将图标内杠适删减个，以保证图标体视觉致。

风格计5

继续在风格3的基础上将每个icon进行断点，形成断线风格。注断点的位置，一的是在右侧或图标下方，一不会出现在左上侧和图标中心位置。这图标多了一个独的性，就是断点。一个的变化就能呈现不同的视觉觉，起来更加的众不同了。

风设计6

顺着上边的思路继续，我们在断点中间添加一个小圆点，整套图标又呈现出不一样的感。显得比时尚有亮点，给人的印象也更加深刻。

格设计7

我们还可将icon和app的色进行结合设计，将icon设计成双色图标，取icon一分线条或色进行色彩变换。这里我们将有图标的图形填充题色进行搭配，黑色和柠檬的色彩搭配使得图标的时尚感和形式感大大增强，会给户眼前一亮的感觉。

风格设8

当然我们也可以试图标内部填充色块，并且给它一的内部错的设营造高光的感觉。这种形式用于点击选中的效果非常好，闲鱼APP的单图标选中效果就采用了这样的设风格。

风格设计9

也可以采用半透明设计，比如我们将图标内部图形设定为50%透明度。造不样视觉感受。

图标演变过程是个设计思考过程，我们可以过不断尝试，寻找些创意。今天我们选择组图标进实例演变，有很多图标风格没有说到，我们也可以再去尝试挖掘更有创意icon设计风格。以上是今天讲解内容，希望能大家有所帮助。

欢迎关注作者的微信公众：