实训任务1.1
UI图标基本规范与风格

1.学习目标

（1）正确识读任务书；

（2）掌握图标设计制作基本规范和风格类型；

（3）能结合任务要求进行图标调研或策划方案。

2.任务书（表1-1）

3.工作准备

（1）仔细阅读工作任务书，进行分析和讨论，并做好进度记录；

（2）充分了解项目背景，确定图标设计与应用设计方向；

（3）结合任务书分析图标设计的难点和常见技术问题。

4.引入问题

什么是图标？

图标英文为“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

图标的尺寸一般为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）。

图标风格多样，我们需要根据主题设计与其风格相适应的图标，一个完美的界面需要一套能给予人们视觉支持的图标。具备较高识别度的图标更容易被人记住，经常在色调、质感、艺术风格等方面相互协调，能达到整个界面图标的统一。

5.工作计划

首先每位学生根据表1-2完成相关任务，然后教师根据学生的任务完成情况提出改进意见。

6.实施提示

前期调查是了解设计对象和消费目标对象的过程，设计需要的是有目的的、完整的调查。

（1）理解任务书；

（2）项目背景的调研与整理；

（3）对标任务中的“引导性问题”会列出图标规范尺寸，利用网页的功能，浏览图标的图形风格，同时对色调进行分析；

（4）制作全国大学生广告艺术大赛官网图标改版调研报告PPT。

学生首先对网页图标设计原则进行深入了解，然后在此基础上依据大广赛官网对相关图标进行分析，最后提出图标改进的基本方案（图1-6—图1-10）。

7.评价反馈

按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况，并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果（表1-3）。

8.拓展学习

扫描下方二维码，获取更多UI资讯。