///

系统图标，是那种应用于系统内部的基础图标，它存在于pc端，存在于网页端，还存在于App等应用里面的导航处，存在于按钮处，存在于列表处，存在于弹窗内的图标。

系统图标有别于带有诸多细节的修饰性图标，清晰明白地传达交互目的乃是设计师的首要职责，其次才是可复用性以及高效率，所以相对来说，系统图标设计得更为精炼。

·修饰性图标（来源：）

·系统图标（来源：）

现在正在做B端，因而以B端产品当作例子。B端产品所说的好的体验，除了要达成功能交互一致之外，还得在视觉方面维持一致，防止用户生出疑惑。系统图标作为其中关键的视觉元素，更得做到精简高效。

当我于网上对某产品进行试用之际，碰到了如下图示，此乃一个数据处理页的局部，在其操作栏里，诸多按钮呈密集排列状，那些按钮的样式是“图标加上文字”。

我们把图标单拎出来，可以明显看出几个典型问题。

几个典型问题：

针对上述问题做了适当调整，如下：

当我们着手设计那种功能繁多且布局紧密的页面之际，首先务必要保证图标清晰无误、不存在任何模糊不清易于引发歧义的状况，之后才能够去思考设计感方面的问题！

像是上面所提到的第五个图标那儿，“列显示”看上去是个不怎么常见的按钮，我们没必要把“列”以及“显示”的意思，用单独一个图标就全部传达出来，不然，在图标尺寸小，可内容又多的状况下，图标里的细节太多了，就很容易“糊”到一块儿，致使整个图标没办法分辨。就我们只需要把“列”，这个的意思表达出来，再加上按钮文字进行说明，如此便能让用户迅速知晓这个按钮的功能了。

系统图标设计方法

第一步：选择合适的图标原型

通常情况下所见到的系统图标普遍有着默认的样式，举例来说，像“设置”这一图标一般会采用齿轮这种形式来予以呈现，而“搜索”这个图标按照常规来讲就是一个放大镜。这些这般的图标，它们要么是依据认知习惯从而产生的，要么是通过隐喻实际的使用场景造就而成的。

要是你不希望用户把你的产品用得特别费劲，那就采用这些常规默认的样式。当然啦，为了让我们的图标具备独特性以及设计感，你能够在常规样式之上增添细节扩展。

挑选图标正如物色伴侣，不存在何为最为出众之情形，仅有最为适配之状况可称是妙选无误。面临各异场景之际sketch up图标，需做出择取得适宜此场景下交互途径的图标之行为。

如下三个示例当中，均存在“编辑”功能，依据不一样的应用场景以及风格，设计方面的细节是有所差异的。

·线条精简的线性图标

·带有修饰性线条的图标

·造型概括的面形图标

于B端场景里头，多数情形下，能够依照产品的风格以及应用场景，去挑选适宜的图标原型。

系统图标设计方法

第二步：统一设计风格，符合产品调性

依照其功能、定位，每个产品都会存在其自身的产品调性，不同的产品调性，致使系统图标的设计风格也呈现出极大差异。图标具备诸多属性，对于一组和谐统一的系统图标而言，它们的基本属性理应是保持一致的。

2.1. 单一元素、辅助元素

在一般情形下，要是图标所要表达的意思是属于同一类别功能或者相似功能之时，就会借助辅助元素去予以区分，因而在一组系统图标当中呀，能够一同出现单一元素和辅助元素。只是需要留意的是，同一组图标的辅助元素必须要区分得十分明显，容易被识别。就好比下图这组图标里所增添的辅助元素呐，是非常难以被识别的。

2.2. 线性、面性、线面混合

元素单一，表现力弱，则线性是这样，线条本身简练呀，可塑性强哟，能够借由对线条的设计，塑造出可爱、专业、严谨及好多其他不同风格。因而线性图标在系统图标里使用率是最高的。

面性，它具备体块感，视觉重心强有力十足，一般会搭配混色存在，也就是两种颜色以及超过两种颜色以上，依靠这样来达成增添视觉方面能吸引人目的的效果实现，在我们使用的APP当中的金刚区常常能够看见这种情况出现。

线面混合，其表现力处于线性与面性的中间地带，相较于线性图标而言，更具活力以及质感，同时又不会在页面里显得过于引人注目。一般会在一些年轻用户数量较多、展现生活品质的产品当中出现，诸如绿洲等。

2.3. 单色、混色

单色：只使用一种颜色的图标，具有稳定、统一的特点。

色彩混合：采用两种以及超过两种颜色的图标，这种混合颜色的图标能够运用品牌视觉识别系统的色彩搭配来提升产品的记忆程度，塑造品牌的形象，还能够增强页面的视觉表现能力。

然而，混色图标于开发期间进行维护是比较困难的，可于svg格式情形下，单色图标仅需前端同事在代码里对色值予以修改就行，至于多色图标，那就需要设计人员修改之后再重新交付一份文件给前端同事。

系统图标设计方法

第三步：保持视觉大小的一致性

为图标设计完成了样式的搭建，对配色予以了定义之后，图标设计里最为基础且最为关键的步骤降临了：维持图标视觉上的一致性现状。一旦一组图标于页面里出现尺寸不一的情形，就算其设计得极为酷炫，那也是一组不符合规范标准的图标。

3.1. 统一设计尺寸和线条粗细

起初在进行设计之时，我们得先去界定统一的图标尺寸，还有线条粗细，这里说的是线性图标，若情况不确定，那就多做几个版本予以尝试，于前期进行试错，总归是要比往后在较大范围去改动、去修改要好许多。你能够采用24*24这一画板尺寸，也能够依据自身需求自行去定义。

必须留意的是，要是运用设计图标，当轮廓化后的图标进行放大操作时，线条的圆形端点将会产生变形（除去将图形拼合这种情况），然而在ai里面不会出现变化，所以在设计图标之时，尽可能挑选常用尺寸里最大的那个。

3.2. 根据参考线规范图标视觉大小

处在24乘以24的画板范围里，在边距留出2px以后，蓝色的矩形框当中是安全区域，以此方便对图标大小做出规范。

以下是当图标呈现为正方形形状时的位置，是矩形形状时的位置，是圆形形状时的位置，依据上图参考线，我们能够确定图标于画板里的位置。

其他不规则形状在参考线中的位置。

系统图标设计方法

第四步：图标的管理与维护

当产品从无到有渐渐形成并完备之后sketch up图标，系统图标会愈发增多，愈发不易运维。到了后期，容易出现同一个功能存在好几种图标这般的状况，对统一性造成影响。

4.1. 设计规范文档

处于一般产品设计的中期阶段之时，设计师往往会逐步地去形成设计规范文档，以此来方便提升设计效率以及促进团队协作，而在其中图标规范是绝对不可或缺的，图标规范里通常涵盖着产品里所有涉及到的图标，存在一到二种常用尺寸，有基础图标以及还有其他图标。

·设计规范文档中的图标

4.2. 组件化图标库

tch里的功能，能够很便利地把规范中的图标进行组件化，随后添加到组件库中。

我们在设计中可随时从组件库调用所需图标。

还可以随时打开原始文档，以便对规范文档进行编辑与更新。

4.3. 在中创建项目

阿里的非常适合图标项目管理与团队协作

我们将图标上传至所创建的项目里，借助插件，便可在其中随时查看并调用对应项目中那相应的图标。

在的插件中可随时查看图标项目和调用相应的图标。

结语

系统图标于UI设计里是极为基础的图形化语言，其在页面交互中发挥着相当重要的作用。单个图标进行设计并非难事，然而，将所有图标予以系统化、规范化，且持续在项目中加以应用与复用，这样的情况，乃是对UI设计能力的一种考验。

跟着设计工具持续演变更新，我们得持续学习，并且要把这些工具运用妥善，提升工作效率，这样方可把有限时间用到更为紧要的设计内容之处。

如有侵权请联系删除！