下载掌阅APP，畅读海量书库
立即打开
（1）正确识读任务书；
（2）掌握图标设计制作基本规范和风格类型；
（3）能结合任务要求进行图标调研或策划方案。
表1-1 任务书
（1）仔细阅读工作任务书，进行分析和讨论，并做好进度记录；
（2）充分了解项目背景，确定图标设计与应用设计方向；
（3）结合任务书分析图标设计的难点和常见技术问题。
图标英文为“Icon”，是具有指代意义的图形符号，具有高度浓缩信息、快速传达信息、便于记忆的特性。图标是用来传播信息的视觉化符号，它从诞生之初就发挥着帮助人们理解非文字信息，并且使这些信息尽可能被准确识别和用于交流的作用。图标可以增加界面的趣味性，也可以提高人们对界面信息的识别度，是界面不可或缺的一部分。图标使视觉流程更加清晰，使浏览者能快速查找所需要的信息。图标要准确且简单、美观且系统。
展示图标——不可点击尺寸：24 px×24 px、28 px×28 px、32 px×32 px
按钮图标——可点击（图1-1）尺寸：44 px×44 px、48 px×48 pxpx、56 px×56 px、64 px×64 px
图1-1 不可点击的图标与可点击的图标
图标的尺寸一般为4的倍数，这样在成倍缩放时，其就不会导致半像素的情况。例如48 px×48 px的图标，缩小一半时为24 px×24 px；而34 px×34 px的图标，缩小一半时为17 px×17 px。图标的尺寸应尽量避免出现单数。
首先我们来介绍一下MBE风格，此风格的原创作者是法国设计师MBE，该风格的设计采用更大更粗的描边、断点式描边、色块溢出方法，相比于没有描边的扁平化风格，其避免了不必要的色块区分，更简洁、易识别（图1-2）。
时下流行的图标类型可以归纳为：线性图标、面性图标、线面结合图标。至于MBE风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等，都是基于以上三种图标进行设计的。我们可以在Dribbble、站酷网、花瓣网、优设网、iconfont等欣赏好看的图标图片，也可以参考相关App上的图标（图1-3—图1-5）。
图标风格多样，我们需要根据主题设计与其风格相适应的图标，一个完美的界面需要一套能给予人们视觉支持的图标。具备较高识别度的图标更容易被人记住，经常在色调、质感、艺术风格等方面相互协调，能达到整个界面图标的统一。
图1-2 MBE风格的图标
图1-3 图标赏析1
图1-4 图标赏析2
图1-5 图标赏析3
首先每位学生根据表1-2完成相关任务，然后教师根据学生的任务完成情况提出改进意见。
表1-2 工作计划
前期调查是了解设计对象和消费目标对象的过程，设计需要的是有目的的、完整的调查。
（1）理解任务书；
（2）项目背景的调研与整理；
（3）对标任务中的“引导性问题”会列出图标规范尺寸，利用网页的功能，浏览图标的图形风格，同时对色调进行分析；
（4）制作全国大学生广告艺术大赛官网图标改版调研报告PPT。
学生首先对网页图标设计原则进行深入了解，然后在此基础上依据大广赛官网对相关图标进行分析，最后提出图标改进的基本方案（图1-6—图1-10）。
图1-6 大广赛网页图标的准确性
图1-7 大广赛网页图标的标准
图1-8 大广赛网页图标的艺术性
图1-9 大广赛网页图标的细节
图1-10 大广赛网页图标定位分析
按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况，并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果（表1-3）。
表1-3 评价表
扫描下方二维码，获取更多UI资讯。
图标设计
（1）正确识读任务书；
（2）了解图标设计原则和风格；
（3）在完成任务1.1的基础上提出修改方案。
表1-4 任务书
（1）仔细阅读工作任务书，进行分析和讨论并做好进度记录；
（2）充分了解项目背景，确定图标设计方向；
（3）结合任务书分析图标设计改版的难点；
（4）图标草图的手绘工具。
1）更具识别性
图标本身的功能是第一时间传递信息。因而我们需要使用更加具象的视觉语言，使得信息传达更为准确。
2）更具一致性
在设计图标的过程中，使图标具有一致性，是一套图标系统成功的关键。这里的统一性不是指所有的图标都要用相同的元素，而是指图标线条的粗细，断点的距离，元素的大小，切割的距离，色调、风格的一致。所有的图标都用一样的元素时，用户反而会识别困难。
3）适度的情感体现
在设计图标方案时，采用丰富的造型与颜色，使页面更具亲和力，可以让用户在使用界面时，减少对产品界面的单调风格的感知（图1-11、图1-12）。
图1-11 情感化的图标1
图1-12 情感化的图标2
首先每位学生根据表1-5完成相关任务；然后教师根据学生的任务完成情况提出改进意见。
表1-5 工作计划
（1）认真阅读任务书和“引导性问题”中的知识点；
（2）根据任务1的分析，提出改良方案；
（3）根据大广赛图标改良方案完成创意图标设计草图。
图1-13是蓝瑶同学的手绘方案，这一套图标在大广赛原有方案的基础上进行了改良。首先，图标的外形框架更加统一，大部分图标以纸张文件作为主要造型。其次，图标信息传递更准确。例如，原来的“获奖名单”以圆角五星作为图标，不能与文字信息相匹配。目前的图标设计内容为“名单+奖杯”，表达的信息更准确。然后，图标的外观、细节设计与网页的整体风格相一致。不过，这套方案有一些细节还需要改进，图标内部的一些线条需要删减，这样能让图标更加简洁（图1-13）。
按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况，并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果（表1-6）。
图1-13 蓝瑶同学图标手绘稿
表1-6 评价表
扫描下方二维码，获取更多UI资讯。
图标设计
（1）正确识读任务书；
（2）掌握图标绘制的方法和步骤；
（3）根据上一任务分析大广赛官网的图标修改方案，制作大广赛官网的图标。
表1-7 任务书
（1）仔细阅读工作任务书，进行分析和讨论并填写进度表；
（2）充分了解项目背景，确定图标制作软件安装完成；
（3）结合任务书分析图标制作的难点和常见技术问题。
目前常用的绘制图标的软件有AI和PS。AI绘制图标的优点是AI的矢量图形是一种基于人工智能技术的图形，网格比较规范，容易转换图标的线面，其中直角一键转圆角的功能非常实用；其缺点是调色困难，只能调整普通色块，调整复杂的色块会耗费较多时间。PS的优点是调色功能显著，图标的形状剪切功能中规中矩；其缺点是设计线性图标时需要进行布尔运算，描边操作不方便。
我通常是将二者结合起来绘制图标：首先用AI构造基本的形状。如果图标作品要进行展示，就用PS软件对图标作品进行调色和展示；如果图标作品放在界面中使用，就需要用Sketch对图标作品进行调色。
这里采用的是AI绘制图标的参数设置和参考线绘制方法。
参数设置：首先，在首选项—参考线和网格，网格线间隔为10 px，次分隔线为10，勾选显示像素网格；其次，在画布框内单击鼠标右键，显示网格；最后，在视图中打开“对齐网格”“对齐像素”“对齐点”。图1-14、图1-15为参数设置步骤。
图1-14 参数设置
图1-15 显示网格
参数设置完成后新建画布，画布一般为800 px×600 px（Dribbble展示的尺寸），图标应小且精致。参考线是为了规范图标而存在的，其一般有两种画法，即按照图标的复杂规范进行绘制与按照图标的简单规范进行绘制。
下面以44 px的图标为例（图1-16）：
图1-16 对齐网格
1）图标的复杂规范
画一个44 px×44 px的正方形，颜色调为灰色，描边选择0.25 px（72 ppi下的1 px等于1px），然后画一个42 px×42 px的正方形居于其中。这个42 px×42px的界线为安全界线，图标不能超过这个界线，以避免贴边切图，导致图标边界不自然。图1-17为绘制参考线的步骤。
图1-17 绘制参考线的步骤
那么，参考线应该怎么使用？我们在画图标时，物体有圆有方、有长有短，若要统一体量，就需要用到内部的一些参考线。绘制完参考线后，根据个人感觉对其进行微调，直至其在个人视觉上的体量感达到一致（图1-18）。
图1-18 在视觉上具有统一体量感的图标
2）图标的简单规范
如果你已经能在图标的复杂规范下熟练绘制参考线，那么你就可以用较简单的参考线限制图标范围。简单的绘制方法是先画三个正方形，同样的线性选择灰色，描边选择0.25 pt。这里有个口诀可以参考：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。图1-19展示了如何建立简单参考线。
图1-19 建立简单参考线
在画布中用描边0.25 pt绘制参考线，然后选中参考线，单击右键建立参考线（图1-20）。
图1-20 参考线的复用步骤
参考线是为了限制图标的大小，从而让图标整体美观与规范。在绘制了很多图标后，本书总结出两个诀窍：①当你知道要绘制物体的形状时，只要不影响图标的辨识度，你就可以适当改变图标中物体的形状，确保图标中物体的形状尽可能饱满；②当图标中物体的形状不宜饱满时，可以将其上下或左右部分绘制饱满，然后旋转45度，以提升图标整体的美感。在绘制图标的过程中要注意以下几点（图1-21）：
图1-21 绘制图标的要点
①绘制图标时要对齐网格或改变图标大小时要注意是否需要两边同时缩放，有没有产生半像素，如果有的话就手动拖动图标对齐网格。
②通过内描边的方式绘制线性图标更容易对齐网格，但是在内描边时只要通过加点进行断点的话，就会自动变为居中描边。那么内描边时怎样断点呢？可以对边进行对象—扩展，将其转换为形状，然后用布尔运算对其进行剪切。一般尽量居中描边，但经过检验，只要线对齐网格就不会影响图标的清晰度。
用PS绘制图标的简单规范如图1-22。
图1-22 用PS绘制图标的简单规范
首先每位学生根据表1-8完成相关任务，然后教师根据学生的任务完成情况提出改进意见。
表1-8 工作计划
图1-23 大广赛官网图标改版电子稿1
（1）认真阅读任务书和“引导性问题”中的知识点。
（2）根据上一任务中的草图，制作图标电子稿；也可以选择AI或者PS进行图标绘制；二者结合使用也可以。
图1-23、图1-24是蓝瑶同学设计制作的大广赛官网图标改版电子稿。
按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况，并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果（表1-9）。
图1-24 大广赛官网图标改版电子稿2
表1-9 评价表
续表
扫描下方二维码，获取更多UI资讯。
图标设计
通过完成项目1中的3个实训任务，从接受大广赛官网图标改版任务，对原官网图标优缺点进行分析，进而提出修改方案并绘制草图，再选择合适的软件绘制图标电子稿，形成了一个完整的工作闭环。3个实训任务分别对应了解UI图标基本规范、明确图标风格和设计原则、掌握图标绘制规范3项工作内容。
在3个实训任务中，学生可以针对自己的薄弱点加强练习。比如有的学生在制作图标时发现自己还不能熟练地运用AI技术，这就需要其加强对AI技术的学习。
选择一套自己喜欢的经典图标，进行半临摹半创作练习。