什么是系统图标系统图标是图形符号，在触摸设备上具有明确定义的含义。它源于生活中的各种图形徽标，是触摸设备中元素图形表示的重要组成部分。它与手机屏幕上的app图标不同。我们将在这里解释的系统图标是指移动设备界面中的小图标。系统图标是UI设计中非常重要的一部分。虽然系统图标的大小看起来很小，但系统图标设计的能力在很大程度上反映了UI设计者的设计水平。

界面中的小图标称为系统图标

系统图标的作用系统图标在界面设计中起着重要作用，并增强了美感。首先，图标可用于快速传输信息而不是文本。用户可以通过直接识别他们阅读文本的时间来节省时间。其次，图标可以极大地增强界面的美观性和简洁性，例如表示喜欢的数量和评论的数量的图标。另外，有一些图标因为含义相对不常见，图标无法完全表达含义。在这种情况下，您需要使用图标和文本。

系统图标设计原则：

1.避免模糊像素UI设计中最基本也是最忌讳的问题是像素模糊问题。这是因为随着设备的不断更新，手机的显示屏更精致，手机屏幕上任何微小的缺陷都会出现。显然被用户察觉。并且由于这种模糊问题，整个UI界面的质量直接降低。

像素清晰且像素模糊对比度

此图片是清晰图标和模糊效果之间的对比。这是一个很大的差距吗？

2.统一网格系统，确保视觉大小一致性为了保证系统图标的可视化大小，谷歌正式开发了适用于Android的完整网格系统。这个网格系统有自定义的方形图标，圆形图标，水平图标和垂直图标。因为不同图形图标的视觉张力将给出不同的视觉尺寸，所以这组网格是为了确保不同形状的图标的视觉尺寸。

Android官方网格系统

如果正方形和圆形与实际尺寸相同，则正方形看起来比圆形尺寸大得多。

根据网格系统适当减小正方形的实际尺寸后，正方形和圆形的视觉尺寸保持均匀

网格系统实际应用的效果

3.统一的视觉风格一组高质量的系统图标必须是一组具有自己统一风格的图标。统一的视觉风格有许多元素，包括圆角，线条面，线条粗细，设计形式等。圆角的均匀性分为均匀圆角和均匀圆角。例如，如果圆角为4px且圆角为2px，则与圆角相关的所有图标应均匀。线性图标和面部图标最好不要混合，特别是对于相同类型的图标。线条粗细应与整套图标完全相同。例如，如果图标厚度为3px，则应将其统一为3px。当然，实际设计中可能还有更多需要统一的设计元素。只要遵循这个统一的原则，您就可以设计一套具有质量保证的图标。

统一的线条厚度，统一的断点设计，统一的颜色使用

颜色均匀，线条均匀，圆角均匀

4.统一透视角度图标设计的视角经常被设计师忽视，因此我将在此重点介绍。通常，图标设计的角度将选择前视图的角度。这个角度的图标图形将相对简单和一般。当然，也可以选择其他角度，例如相对复杂的视角，并且透视关系变得更难以处理。当然，最可怕的角度是侧视图的三维角度。这个角度有三个面在设计图标时变得非常复杂。在设计图标时，您应该尽量避免这样的角度，以免担心自己。为了保持整个图标集的设计，应该避免存在不同的透视角度图标。

不同的透视角度

具有不同观点的图标比较

5.独特的设计形式独特的设计意味着系统图标具有1到3种独特的设计形式。这种特殊的设计形式构成了图标的独特风格。每组图标都不需要太多的设计功能，最好将它保存在1-2个独特的设计中。过多的设计功能会使图标过于复杂和繁琐。

图标的字符分析：1。断点设计2.双色匹配3.高亮设置4.色彩错位

图标的字符分析：1。渐变色使用2.半透明装饰3.均匀阴影

图标的字符分析：1。线性和表面匹配3.黑色和颜色渐变匹配

6.保证图标是绘制矢量图形系统图标的最专业方式。它是由PS中的布尔运算的各种切割组合设计的。布尔运算设计的图标是矢量图形。矢量图标设计的最大优点是可以轻松调整尺寸。因为可以在不同页面中使用相同的图标，所以调整图标大小是非常高频率的事情。另外，通过布尔运算得到的矢量图形可以保证图标由精确的几何图形组成，从而最大限度地保证图标的质量。

布尔运算结构图

以上是此次分享的图标设计体验，希望对大家有所启发。下一个继续详细解释系统图标的网格系统。请注意它。

« 模板构建是否真的比自定义代购源码网站更糟糕？不要被互联网公司欺骗！ | 我听说“响应式”+“自助站”会以不同的方式出现 »