发布时间：2020-8-15 分类： 行业动态
在上一篇文章中，我们以全方位的方式解释了系统图标的相关要点。也就是说系统图标的设计风格，也是图标设计的网格系统。在我们所有人谈论纸张之前，我们今天将练习它。毕竟，练习才是硬道理。
编者按：如何自定义iOS系统图标的网格系统，本文来到了iOS系统图标网格系统定制的独家秘诀。 →《UI 新手福利!iOS系统图标栅格系统全方位解密》
我们使用实际案例来解释如何设计具有独特气质的系统图标样式。在同一组图标的基础上，我们通过改变不同的设计方法来改变图标样式。它真的是干货的图标设计。
系统图标示例教程
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然后选择智能对象选项。
这次我们选择了UC标题的图标作为重新设计的原型。选择UC标题的图标作为原型的原因是五个图标是代表性的，即圆形图标，垂直图标和不同图标。只缺少一个方形图标，因此我们将第一个主页图标更改为方形信息图标。这样我们就可以在同一组图标中比较5种不同形状的图标设计。
款式设计1
首先，我们首先使用布尔运算来制作一组方形图标，线条为2px，图标的角落设计成直角，给人一种方形感。我们使用此图标样式作为基本形状。下面我们将继续改变这个图标的样式，以创建各种不同的设计风格。
风格设计2
我们根据Style 1优化了尖角作为圆形图标。圆角设计设置为4px，瞬间图标感觉圆润而亲密。这种风格也是市场上最常用的系统图标设计风格。
款式设计3
在Style 2的基础上，我们将线条加工成3px的视觉风格。由于线条粗细的调整，整套图标感觉更强大有力，给人一种非常可靠和稳定的感觉。
风格设计4
继续大胆的线条以4px视觉风格，图标已经非常强大，但由于设计有圆角，整套图标给人一种更可爱的感觉。这个图标形状基本上是UC标题的图标设计风格。当然，由于图标的大胆，我们发现订单图标内的横杆在视觉上比其他图标更重，所以此时我们将正确切割图标内的横条以确保整体图标。一致的愿景。
风格设计5
我们继续根据样式3断开每个图标以形成破碎的样式。请注意断点的位置，通常位于图标的右侧或下方。它通常不会出现在左上角和图标中心位置。此时，图标具有唯一的功能，这是一个断点。一个微小的变化可以呈现出不同的视觉感受，看起来更加独特。
款式设计6
按照上面的想法，我们在断点的中间添加一个小点，整个图标集显示出不同的感觉。它看起来更时尚，更明亮，印象更深刻。
款式设计7
我们还可以组合图标和应用程序的主要颜色，将图标设计为双色图标，并提取图标的线条或颜色块的一部分以进行颜色转换。在这里，我们将图标中的所有图标与主题颜色混合在一起。黑色和柠檬黄的配色使图标的时尚感和形式大大增强，给用户带来明亮的感觉。
风格设计8
当然，我们也可以尝试填充图标内部的颜色，并在设计内部错位时给它一种高光感。这种形式非常适合点击和选择。以这种设计风格选择免费鱼应用程序的菜单图标。
款式设计9
您还可以使用半透明设计，例如我们将图标内的图形设置为50％透明度。创造不同的视觉体验。
图标的演变是一个设计思维的过程，我们可以尝试通过不断的实验找到一些创意点。今天我们选择一组图标作为例子进化，并且有很多未提及的图标样式，我们也可以尝试探索更具创意的图标设计风格。以上是今天解释的内容，希望对大家有所帮助。
