优漫动游教育分享一个UI图标设计教程范例

  这次我们选择UC标题图标作为原型重新设计。

  UC头图标被选为原型，因为UC头菜单的五个图标相对比较有代表性，即圆形图标的垂直长图标和反向图标。因为只有一个方块图标丢失，所以我们将主图标改成了方块信息图标。通过这种方式，我们可以在同一个组合图标组中比较5个不同的图标。

  一开始，我们使用布尔运算(不能自己做布尔运算搜索教程的学生)制作了一个2px的方块图标，这些图标的棱角均为直角设计，给人一种很强的方块感觉。本文将此图标样式作为基本造型，并将不断改变图标样式，以创造出多种不同的设计风格。

  根据样式1，我们优化了一个圆形图标的锐角。圆形的大小被设为4PX，使图标看起来更圆更友好。这是市场上常用的系统图标设计风格。

  基于散乱的风格，我们线条的视觉风格是3px。因为线条的粗细调整，整套图标的感觉已经比较强烈，给人一种非常稳定可靠的感觉。

  在4PX的视觉风格中，粗体线条，此时图标已经很厚实了，但是由于采用了圆角的设计，整套图标给人一种更可爱的感觉。该图标形状基本上是UC标题风格的图标设计。当然，由于图标加粗，我们发现顺序图标内的横杆看上去比其他图标重一些，因此在这个时候，我们将适当删除图标中的一条，以保证图标的整体视觉完整性。

  对于样式3，我们继续中断每一个图标以形成折线样式。观察断点的位置。一般来说，它在图标的右边或者下面，不会出现在图标的左上角和中间。这时，图标的独特功能之一就是断点。稍作改变就能带来不同的视觉感受，使之更与众不同。

  遵循上述原理，在断点中间添加一个小点。整组图标呈现不同的感觉。将更显时尚明亮，印象更深刻。

  同时，我们也可以结合图标和应用的主颜色，将图标设计为双***标，并提取图标的某些线条或颜色块进行颜色转换。下面我们匹配图标中所有图形的主题颜色。黑与柠檬黄的颜色搭配，大大提升图标的时尚感和形式感，让用户眼前一亮。

  当然，我们也可以试着在图标里面填充色块，并且在内部做了一定的错位设计，创造出高光感。该表单非常适合点击和选择。这个设计风格是为了实现idlefish应用程序菜单图标的选择效果。

  还可以使用半透明的设计。举例来说，我们可以将图标中的数字设置为50%透明。创建多种视觉经验。

  符号的演化是一种设计思维过程。通过不断地尝试，我们可以发现一些创新。现在，我们选择了一系列的图标，比如evolution。很多图标样式没有提及。还可以尝试寻找更有创意的图标设计风格。这些就是今天要讲的。但愿这对你有帮助。