设计师必学的UI设计技巧

放大镜线性图标

放大镜线性图标的画法：1.绘制正圆。2.绘制一条直线。3.用属性面板里的对齐工具把它们俩对齐。4.用描边面板里的属性将描边改成圆头，然后旋转45°即可。

放大镜线性图标

时钟线性图标

时钟线性图标的画法：1.绘制正圆。2.绘制一个矩形，对齐圆形中心。3.用增加锚点工具在矩形左和下边上增加两个锚点。4.用直接选择工具框选没用的线条，删除即可。

时钟线性图标

点赞线性图标

点赞线性图标的画法：1.绘制两个矩形，并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐。2.将大的矩形底部锚点向左移动。3.绘制一个矩形并和大的矩形左对齐。4.用直接选择工具选中直角，拖动圆角小圆点让它们变成圆角，完成。

点赞线性图标

线性图标的处理

如果您掌握了以上填充态图标的设计方法，相信其他图标的设计只要以此及彼的思考，就可以完成。比如线性图标，在绘制线性图标时，我们首先会建立一个半透明的矩形来固定图标应该绘制的范围，比如"40px"。然后我们把填充关闭，只使用描边来绘制线性图标即可。绘制完以后我们无需保存文件，仅通过Ctrl+C的复制快捷键，然后打开Sketch或者Adobe XD就可以使用Ctrl+V将图标粘贴过去了。但是，如果您使用Photoshop做界面设计，可能会多两道手续，首先就是线性图标需要扩展才可以复制到Photoshop中。将图标复制一份（扩展之后的图标不方便修改，所以要留着可修改版本），然后点击对象菜单 > 扩展，点确定，就可以把原本是没有闭合的路径改为完整的形状。

在Illustrator中的扩展

然后复制，打开Photoshop粘贴会打开提示框，我们可以选择把图标粘贴成为像素、智能对象、路径、形状。如果粘贴成像素的话，那无疑对修改是非常不利的。如果粘贴成智能对象，双击智能对象会回到Illustrator中修改，但是也有一定缺点，那就是智能对象不能直接在Photoshop中进行调整。如果粘贴成路径也不是很方便，所以最好是我们将Illustrator中绘制的小图标粘贴成形状。选择后，图标就粘贴成了形状图层，我们可以在Photoshop中对它进行布尔运算、锚点调整等操作了。

粘贴到Photoshop中的选项

然而，我们会发现图标粘贴到Photoshop中，横竖的路径会出现虚边的情况（圆角和斜线是允许一定的虚边出现的，但是直线不可以）。这种虚边有可能会影响用户的体验，我们必须把它消灭掉。第一种方法：在Photoshop中我们可以用直接选择工具后界面上方的对齐路径功能，给它打钩来尝试修复这个问题。第二种方法：我们可以使用直接选择工具选中虚掉的某两个锚点，然后按Ctrl+T（自由变换），再按键盘的上下或左右"摇一摇"，路径就会清晰了。第三种方法：也可以使用几像素的矩形进行布尔运算强行对齐。三种方法一定能够让图标的横竖路径没有虚边，达到完美的效果。当然Sketch和Adobe XD都是矢量工具所以复制后没有这个问题。

在Photoshop中使用"摇一摇"的方法对齐路径

在Adobe XD中，图标无需进行扩展，并可以实时调整描边粗细等属性

应用

标签栏图标

在苹果和安卓APP的底部，一般都会有一个放置重要功能的常驻栏，在iOS中被称为标签栏（也叫做Tab栏）。一般，Tab栏的图标是2-5个。每个图标的区域平分整个TAB栏宽度，底部会有一个22px（11pt）的文字注释。当然如果图标释义较为清晰，也可以为了保持设计感去掉文字注释。如果我们是以iPhone6/7/8尺寸设计界面，那么我们的标签栏图标尺寸应该是60px（30pt）左右，可以基于这个范围来设计我们的图标。

互联网产品中优秀的标签栏图标设计

每个Tab栏的图标都应该设计一个选中状态，可以做样式的变换也可以做颜色的改变，总之要让人知道当前所在的页面是哪个。如果您的Tab栏由五个icon组成，那么可以在中间放置比较重要的功能，并做出突显的样式，比如使用一个圆球当作背景。还要额外注意，图标的选中态样式要和中间突出状态的图标保持区别，以免发生误会。

导航栏图标

在苹果APP的顶部区域，我们称之为Navigation Bar，就是导航栏。导航栏左右一般都会有图标，如果是二级页面，左侧一般是返回图标。安卓也有类似的设计。那么我们在设计这种图标的时候一定要保证所有导航栏上的图标大小和风格都是一致的。如果以iPhone6/7/8尺寸设计界面，那么导航栏图标的尺寸大概是44px（22pt）左右。

互联网产品中优秀的导航栏图标

金刚区图标

在我们逛淘宝和美团的时候您会发现，在它们页面首页都会有一个区域放置很多分类，一般是6-8个大小一样的图标，有可能是圆形，也可能是不规则形状。这个区域其实在苹果和安卓规范里并没有，属于设计师自创的规范。这个区域经常有八个图标组成，被称为"八大金刚图标"，后来很多产品在这个区域并不使用8个图标，我们就称它们为金刚区了。金刚区图标的设计风格应该尽量是微扁平、轻拟物的感觉，这样会有更好的点击感。尺寸方面，金刚区并没有规范，所以大家可以以设计稿最终效果为准。

互联网产品中优秀的金刚区图标设计

总结

图标设计是UI设计中非常重要的一环，因为除了文字和图片的排版之外，在扁平时代我们能够传递给用户情绪和设计感的通道就是页面中的各种图形和图标了，如果做不好图标，用户就将在使用界面时失去乐趣。所以，我建议每位UI设计师都需要在平时做大量的图标练习。在不同的图标风格中，学会使用各式各样的武器。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/