ui图标盒子(ui图标设计心得体会)

ui图标盒子

1.我画了很多图标，总结了很多大神的方法。在这里，我想总结一下简单的图标绘制方法，希望对大家有所帮助。作为一名UI设计师，我们必须重视图标的作用。首先，我们需要大量的练习。其次，我们应该尽量不要一遇到绘图目标就在网上下载图标，而是结合产品的调性创建属于该套产品的图标。

2.本文提到的图标是指界面中的图标。图标增加了界面的趣味性，提高了识别度，因此是界面不可或缺的一部分。

3.就功能而言，图标可分为不可点击的显示图标和可点击的按钮图标:不可点击的显示图标是为了辅助下面的文本内容，重点是文本，通常尺寸为24×24、28×28和32×32。为了便于识别小尺寸的图像，并且不至于在界面中过于醒目，建议可以使用简单的线性或区域图标。导航栏、操作栏和标签栏中常用的可点击按钮图标的尺寸通常为44×44、48×48、56×56和64×64。这些图标可以结合产品调性进行趣味设计。

4.详见图1.1.1和1.1.2中的红框:

5.△享受瘦app中的界面。

6.通常，6.icon的大小是4的倍数，当它以倍数缩放时，这有利于半个像素的情况。比如48×48的图标缩小2倍就是24×24；34×34图标缩小2倍后为17×17。尽量避免在图标中使用单数。

7.如今，流行的图标可以概括为:线性图标、平面图标和线条与表面相结合的图标。至于mbe风格、折线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种风格进行风格设计的。图1.3.1展示了dribbble上一些漂亮的图标设计，右下角注明了作者ID，仅供参考。除了在dribbble、Station Cool、Petals、Youyou、iconfont等中找到好看的图标外。，也可以参考市面上主流app中的图标。

8.第二，如何绘制图标

9.常用的图标绘制软件有三种:AI、PS和sketch。

10.AI的优势在于矢量和网格相对标准化，很容易处理图标的线面转换。其中，直角一键圆角功能非常好用。缺点是配色非常难用，操作不方便。它只能处理普通的色块，复杂的颜色会花费很多时间。

11.PS的优势是强大的配色功能，其形状切割相当令人满意。缺点是制作线性图标时需要布尔运算，笔画功能不如AI操作方便。

12.素描的优势是矢量，配色很智能。现在多以草图为界面，应用起来很方便。缺点是它的形状不像AI和PS那样严谨，一些角落的位置不够平滑，在放大小图片时不容易发现。放大后可以看到不流畅的线条。

13.我通常通过结合三者来绘制图标:首先，用AI构建基本形状。如果要发一个作品展示，拉进ps进行配色和展示；如果在界面中使用，请将其拉到草图中进行配色。

14.这里演示的是用AI绘制标记的方法。参数设置:首先在首选项–参考线和网格中，网格线之间的间隔为10px，二级分隔线为10，勾选显示像素网格；然后在画布框架中单击鼠标右键以显示网格；最后，打开对齐网格，对齐视图中的实体和点。图2.2.1显示了参数设置步骤。

15.设置参数后，构建一个新画布。我通常构建一个大小为800×600（Dribbble的显示大小）的新画布。图标应该小巧精致，不宜构建大画布。

16.参考线的存在是为了标准化图标。通常有两种参考线绘制方法（复杂规格和简单规格），其原理相同。你可以用你习惯的那个。不要担心参考线的大小。根据您使用图标的位置确定图标的大小（即参考线的范围）。有些朋友知道如何绘制46px的参考线，然后担心如何绘制88px的参考线。其实也是同样的原理。你可以根据自己的感受进行微调。大一点小一点都没关系。重要的是不要有奇怪的像素大小。以44px图标为例。

17.复杂的规格

18.画一个44×44的正方形，颜色为灰色，笔画选择0.25pt（此处添加一个点，72ppi下的1pt等于1px，详情请自行百度），然后画一个42×42的正方形住在里面。这个42×42的边界是一个安全的边界，图标不应绘制在此边界之外，以避免在切割地图进行开发时图标的边界不自然。图2.2.2详细显示了绘制参考线的步骤。

19.那么，上述参考线应该如何使用呢？当我们画一个标记时，这个物体将是长的、平的、圆的和方的。当我们有统一感时，我们需要在内部使用一些参考线。但是请记住，参考线是死的，而人眼是活的。画完之后，需要通过感觉对其进行微调，直到视觉量感一致。请参见下图2.2.3分析:

20.△图标是在iconfont比赛中获得第二名的商业计划图标。我复制了一次，并在这里用来演示原作者回忆的沙漏2003。

21.简单规范

22.当您精通使用复杂和标准化的参考线进行绘制时，您可以使用相对简单的参考线来限制图标范围，因为您已经非常熟悉对体积感的控制。

23.简单的绘制方法是你只需要画三个正方形，同样的线性颜色是灰色，笔画是0.25pt .这里有一个小公式:长物体上下左右，扁平物体上下，正方形物体比圆形物体小。下图2.2.4详细显示了绘制简单参考线的方法。

24.在画布中以0.25磅的笔触绘制一条参考线，然后选择参考线并右键单击–以创建参考线。详见图2.3.1。

25.如上所述，参考线是为了限制图标的大小，从而实现整体的美观和标准化。在画了许多图标后，我总结了两个技巧:当你总结出你要画的物体的形状时，只要不影响识别，你可以适当地改变形状，把高的或扁平的物体画成更饱满的样子（以图2.4.1中的铅笔为例）；当对象的形状不适合完全绘画时，可以尝试上下或左右填充，然后将其旋转45度以增加画面的饱满度（图2.4.2中的刀就是一个例子）。

26.绘制徽标时，请将其与网格对齐。更改图标大小时，注意两边是否同时缩放，是否导致半个像素。如果是这样，请手动拖动图标使其与网格对齐。

27.您可以使用内部笔划绘制线性图标，这样可以更容易地对齐网格，但是只要您使用笔向断点添加点，内部笔划就会自动成为中心笔划。那么在使用内笔画时如何破点呢？您可以将笔画延伸到对象，将其转换为形状，然后使用布尔运算剪切它。因为太麻烦，我一般用中心笔画（不建议用，因为手机界面的线性图标一般是3个像素，中心笔画怕半个像素，会影响清晰度），但经过测试，只要拖动线条与网格对齐，就不会影响清晰度。补充一个知识点:手机界面中的图标一般是3像素的线性，因为2像素太细，4像素太笨重；当图片加倍时，它将是3像素，当图片三倍时，它将变成4.5像素，因此当图片三倍时，您应该手动将4.5调整为4或5像素。

28.这里的统一并不意味着所有图标都应该使用完全相同的元素，而是指线条的粗细、断点的距离、元素的大小、切割距离、图标的相同色调和样式都是一致的。当所有图标都使用相同的元素时，将很难识别它们。下图2.6.1乍一看，相同的笑脸降低了识别率。

29.差异是指统一风格下图标通过造型能力增加辨识度的差异。

30.图标的造型也是基于同样的原理，关键是风格的形成，这需要不断的尝试。前期可以看看dribbble、站酷、花瓣、大神们的展示平台，学习一些优秀的图标建模方法、风格、配色。通过大量的练习和实验，你可以逐渐找到自己的一套绘画方法。

31.如上所述，我在AI中完成建模后，我会将其拉入sketch或PS中进行装饰。导入到sketch的方法（即导入svg方法）:展开单个图标，然后将其分组。每个图标是一个独立的组，然后将其拖动到“资源导出”。选择导出svg格式，可以直接拖到sketch中。通向PS的方法:选择一个单独的图标，复制粘贴到PS中，然后将其美化。

32.我常用的图标显示方法之一:

33.阿里的图库iconfont是国内非常强大的图标库，不仅有很多图标样式，还有可以调用的代码，非常方便。个人也可以上传到图标库中供他人使用，现在sketch和axure都有可以随时调用的iconfont插件。

34.iconfront网站链接:http://www.iconfont.cn

35.只有少数人是天才。在大多数情况下，我们必须大量练习才能产生质的变化。如果你一开始画不好也不要气馁。只要你努力工作，你明天总会比今天取得更大的进步。不要偷懒套用别人的图标。设计师最不应该失去的就是他的创造力。如果我的文章能对你有所帮助，那是我的荣幸。

36.欢迎关注作者微信微信官方账号:“牙线小姐”