乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的”,而UI图标设计是一种强调对象特征的符号。同时,UI图标设计对UI设计师而言,更是一切设计基础中的基础,UI图标设计不仅可以帮助设计师快速进行定位,还可以让设计充满生动生命力。可是,你知道如何制作UI图标设计吗?你知道有哪些UI图标设计分类吗?今天的文章,我们就来好好说一说UI图标设计类型以及使用吧!

1. 拟物图标

拟物图标设计也称为写实图标,即据实直出,真实地描绘事物,通过将高光、纹理、材料、阴影等各种效果叠加在物体上的UI图标设计方案。拟物图标设计大部分应用在营销类型的界面以及游戏类应用中。

拟物图标设计

优点

  • 拟物图标设计注重现实事物外观,与现实事物相似,且用户认知学习成本低。

  • 拟物图标设计交互性与现实事物保持一致,对UI设计新手小白较为友好,容易上手操作。

缺点

  • 拟物图标设计过度地在意拟物化的细节表现,使得用户对产品内容的转化效率变低,容易导致用户审美疲劳。

  • 近几年智能终端发展突飞猛进,导致众多事物细节繁多,让拟物图标设计较为费劲。

UI图标设计原则

  • 注重可识别性:拟物图标设计的首要前提就是表意准确,可以直观让用户一眼识别图标所代表的含义与隐喻。

  • 注重材质和纹理:设计拟物图标要注重使用好的材质和纹理,能够让用户得到对品质追求的满足感。

2. 扁平图标

扁平图标设计是“零3D属性的设计”,是相对于拟物化设计而言,在拟物图标设计基础上进行简化它简化,摒弃那些已经流行多年的高光阴影、渐变、浮雕等视觉效果,通过抽象、简化、符号化的设计来表现一种干净整洁、扁平的UI图标设计。

扁平图标设计

优点

  • 扁平图标设计风格简约但不单一。在一定程度上,扁平图标设计降低了移动设备的硬件需要,使用更加高效。

  • 在颜色搭配设计上,扁平图标设计更加注重突出内容主体,减弱各种渐变、阴影、高光等视图效果,减少用户视觉疲劳。

缺点

  • 扁平图标设计在色彩和立体感上的缺失,使用户体验度降低,特别在一些非移动设备上,图标设计过于简单造成直观感缺乏。

UI图标设计原则

  • 注重视觉协调性:扁平图标设计过程中需要注重视觉协调性,即在图标设计的过程中不可以脱离周围环境而独立存在,而是契合环境发展,增加设计说服力。

  • 拒绝依赖特效:扁平图标设计属于极简设计,在图标设计中追求的装饰效果和二维效果。所以,在图标设计过程中要去掉大量特效修饰。

3. 线性图标

线性图标设计顾名思义就是以线为设计主体形式绘制而成的图标。它可以通过同色的,渐变的,叠加的,断线的等等风格去表达设计思想。同时,线性图标设计给用户一种轻薄感觉。

线性图标设计

优点

  • 线性图标设计最受欢迎的是2px和3px,因此线条越窄,显示的细节就越多。

  • 线性图标设计具有辨识度高,清晰,简约易识别等优点,线性图标设计不会对页面造成太多的视觉干扰。

缺点

  • 线性图标设计的创作空间较少,过于复杂的线性图标设计对识别性产有较大的困扰,易视觉疲劳。

UI图标设计原则

  • 强调图标统一性:线性图标设计非常注重统一性特指强调是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致性。

  • 注重极致简约:在线性图标设计中,要秉承着简化的风格易理解的理念,弱化存在,凸显内容,可直观让用户一眼理解这个UI图标设计的含义。

4. 面性图标

相比线性图标设计而言,面性图标设计有着更大的视觉面积,在一定程度上可以更好的吸引用户的注意力。同时,面性图标设计是通过色彩的填充、多种形状组合、图标质感的刻画、阴影等更多质感叠加效果来增加图标的视觉表现,视觉表现形式丰富多样。

优点

  • 面性图标设计可以直接反映现实生活中的缩影,并直接明了的向用户传递认知,帮助用户更快的识别事物。

  • 面性图标设计具有生动鲜明的表现力和高识别度undefined 创作空间大。

缺点

  • 在使用面性图标设计时,需要注意在页面中不可过多出现,容易造成页面臃肿,难分主次,用户视觉疲劳。

UI图标设计原则

  • 注重底托、图形块精致度:面性图标设计关键点在于色彩出彩,也就是设计底托的颜色要注重耐看度。因此设计图形块时,可以添加微渐变等样式增加精致度。

面性图标设计

推荐使用在线协作设计工具Pixso

Pixso作为国产在线协作设计免费工具,内置强大的UI图标设计资源库。Pixso内置了2300+图标设计资源可供用户一键使用,提升制作UI图标设计的工作效率。大家可以进入Pixso资源社区,搜索【图标】,资源社区中有非常多不同类型风格的UI图标设计可以给你超多灵感。

Pixso资源社区

同时,Pixso支持超50个UI设计核心功能和300种原型交互组合变化,内含丰富众多大厂优秀案例供用户免费参考,激发用户灵感。利用Pixso协作设计工具,开启创意图标设计起点。说不定,你还会get到新的技能与发现。快打开Pixso开启你的图标设计之旅吧!