下载掌阅APP，畅读海量书库
立即打开
图标是UI设计的重要组成部分，在UI界面中起到代替文字、连接其他界面的作用。本节将对图标的基础知识进行介绍。
从广义上讲，图标是具有指代意义的图形符号，高度浓缩且可以快速传达信息，便于记忆；从狭义上讲，图标多应用于计算机软件方面。图标的应用范围很广，大到交通标志、公共场所中的指示性图标，小到移动产品中的界面图标等，如图2-29、图2-30所示。
图2-29
图2-30
图标设计可以按照调研分析、要素挖掘、设计图形、建立风格、细节修正和场景测试的流程进行，如图2-31所示。
图2-31
图标设计应遵循清晰简洁、视觉统一、易识别性、愉悦友好四大原则。下面将对此进行介绍。
图标的主要目的是快速清晰地传达概念，在设计时应去除多余的装饰，以尽量保持图形的简洁，使其可以清晰明了地传达所要传递的信息，如图2-32、图2-33所示。
图2-32
图2-33
图标设计一般需要在基本造型、风格表现、节奏平衡上保持统一，以保证图标的一致性，如图2-34所示。
图2-34
在基本造型上，需要根据图标设计规范对图标各部分进行统一设计，包括描边粗细、描边末端样式等；在风格表现上，需要保证同一系列图标风格的统一性，防止造成极大的割裂感；在节奏平衡上，可以根据规范给出的模板设计图标以达到视觉平衡的效果。
易识别性是图标设计的基本原则，是指设计的图标可以快速传达准确的信息，使用户可以迅速识别图标所代表的含义，而不会造成困惑，如图2-35所示。
图2-35
良好的用户体验是界面设计最重要的原则之一，在设计图标时，也应遵循这一原则。
通过学习图标的基础知识，可以帮助用户了解图标。下面讲解制作文件袋图标，具体的操作步骤如下。
步骤01 打开Illustrator软件，新建一个192×192px大小的空白文档，如图2-36所示。
步骤02 选择“矩形工具”，在画板中单击，在打开的“矩形”对话框中设置参数，如图2-37所示。
图2-36
图2-37
步骤03 完成后单击“确定”按钮，创建的矩形如图2-38所示。
步骤04 选中矩形，在“属性”面板中设置参数，如图2-39所示。
图2-38
图2-39
步骤05 效果如图2-40所示。
步骤06
使用相同的方法，新建一个120×30px大小的矩形，使用“直接选择工具”
调整底部两点位置，效果如图2-41所示。
图2-40
图2-41
步骤07
使用“直接选择工具”
选中底部两点，在控制栏中设置边角半径为8px，效果如图2-42所示。
步骤08
选择“椭圆工具”
，在新调整图形上方单击，在打开的“椭圆”对话框中设置参数，如图2-43所示。
图2-42
图2-43
步骤09 完成后，单击“确定”按钮创建圆形，在“属性”面板中设置参数，如图2-44所示。效果如图2-45所示。
图2-44
图2-45
步骤10 选中圆形，按Ctrl+C组合键复制，按Ctrl+F组合键粘贴在前面，在“属性”面板中设置参数，如图2-46所示。效果如图2-47所示。
图2-46
图2-47
步骤11 选中两个圆形，按Ctrl+C组合键复制，按Ctrl+F组合键粘贴在前面，在“属性”面板中设置参数，如图2-48所示。效果如图2-49所示。
图2-48
图2-49
步骤12
选择“直线段工具”
，在画板中绘制直线段，如图2-50所示。
步骤13 选中所有图形，在控制栏中设置填充为无，描边粗细为2pt，效果如图2-51所示。
图2-50
图2-51
步骤14 选中下方大圆，按Ctrl+C组合键复制，按Ctrl+B组合键粘贴在后面，在控制栏中设置其填充为黄色（#FFF100），描边为无，效果如图2-52所示。
步骤15 在“属性”面板中调整参数，如图2-53所示。
图2-52
图2-53
步骤16 效果如图2-54所示。
步骤17
使用“直线段工具”
继续绘制直线段，如图2-55所示。
图2-54
图2-55
步骤18 在“属性”面板中分别调整参数，如图2-56、图2-57所示。
图2-56
图2-57
步骤19 选中所有直线段，在控制栏中设置其描边端点为圆点，如图2-58所示。效果如图2-59所示。
图2-58
图2-59
至此，文件袋图标制作完成。