安徽商贸职业技术学院艺术设计学院2021级数字媒体艺术211《图标设计》课程展示

发布时间：2023年4月11日分类：课程设计浏览量：1632

为了增进艺术设计学院内部的教学交流，同时也是为了积极响应视传教研室发起的「课程教学展示」活动，本人将《图标设计》课程教学内容与执行情况进行了重新梳理和简化，通过本文展示出来，供大家参考，并提出宝贵意见。

通过微信公众号这样一个网络平台对教学内容和过程进行分享，我觉得能实现以下几个重要作用：

► 在商贸工作的这些年，即使经历了各种相互听课和教学检查，但是我个人认为，那些都只是一个教学片段，不完整。目前教研室集体商议倡导的这种「课程教学展示」活动，才能最全面的了解教师的教学内容和执行情况，没有之一。► 即使是同教研室，平行班任课的教师，仍然缺乏深入的教学交流，大家「老死不相往来」，每个教师几乎都是单打独斗，没有发挥团队的集体智慧，既不方便相互学习、借鉴优秀的教学内容和方法，也不利于相互监督。

► 一门课程结束，用这样一篇图文并茂的文章，推送给学生阅读，有利于他们巩固这门课所学到的知识和技能，通过较为完整的课程梳理，也有利于让学生建立完整的知识结构。同时提供给学生一个作业展示的平台，引发教师对于课程结束后更多的教学反思。

► 线下的实体课程展示，既浪费物料，又缺乏完整性，且存在时效性。网络文章长久的留存，还可以作为下一届新生在上该门课前的热身，提前了解课程内容。

下面展示我的《图标设计》课程大致的教学思路和学生练习的完成情况，供大家参考、批评、指正。

张翀
Zhang chong
艺术设计学院数字媒体艺术专业骨干教师
研究方向：图标设计、手机主题、UI界面设计等

课程：图标设计
课时：60
教师：张翀
班级：数媒艺术211（37人）

教学内容和目标：

► 先了解相关的基本概念，再切入课程主体内容「图标」，串联知识结构，并为后续课程打好基础。

► 由《图标设计》课程作为一个新的起点，引导学生真正转向「数字媒介」专业方向，启发他们更多的思考「功能性」，同时也实现对于视觉表现力的掌控。

► 通过四组练习，从易到难，循序渐进，熟悉「图标设计」相关知识要点，并具备绘制多种类型图标的能力。

人类主要的信息传递方式是视觉和听觉，信息通过视觉进行传递主要通过文字和图形图像。狭义上，我们把图像定义为：通过某种技术手段，对客观自然物质的一种真实再现，如通过摄影技术得到的照片。而图形，则是设计师或艺术家，参考了自然，结合自己的想象力，经过高度的概括、抽象、提炼和简化，创造出的一个新形象。

人类创造了「图形语言」这种视觉语言，大大的拓宽了视觉表现力。图形非常自由，根据不同的需求，它既可以绘制的十分复杂，也可以极其简单。图形极简到极限，就变成了最最基本的视觉单元：点线面、方角圆。图形语言的自由度，让「图形符号」实现了更强、更明确的信息传递功能。

标志是现代经济的产物，它不同于古代的印记，现代标志承载着企业的无形资产，是企业综合信息的视觉表现。一个好的标志需要体现出企业的品牌、企业的价值观、经营理念、社会身份等各方面的复杂信息。

标志一般运用简洁的图形语言进行表现，这是为了增加其识别性和记忆性，让标志在传播的过程中更容易让别人记住。同时，标志因为需要在不同的物理介质上去呈现，太过复杂的图形符号，因为受到材质和加工工艺的限制，往往无法形成统一而充分的视觉效果，这也要求它必须简洁。

在图形这个大的范畴内，标志是一类较为特殊的图形，它既要求在视觉语言上非常简洁，同时又要能传达出较为丰富的信息内容，让看似矛盾的两极：「简洁」与「丰富」实现完美的融合。因为标志在视觉语言上显得「简单」，造成了大部分非专业人士对它的误解。

广义上的图标很早就出现了，例如公共场所的很多标识：安全、消防、交通、厕所等。这类图标和标志（logo）在视觉上有很多相似之处，他们都是运用了非常简洁的图形语言形成的视觉符号。但是图标和标志有一个很大的不同点，前文我们已经说过，标志所传达的信息量是非常大的，而图标传达的信息较为单一。

狭义上的图标（icon），是指随着1970年代开始，个人电脑的普及，Windows和MAC OS等操作系统陆续出现，人与计算机进行交互从字符界面转向了图形界面。实现计算机的各种功能，不再依靠输入代码，而是通过鼠标点按界面图标按钮来完成。在人类进入数字化的时代之后，图标成为计算机功能实现和程序启动的快捷方式，引导用户实现人机交互，它大量出现在各种可交互的数字媒介上。

2000年，乔布斯在MacWorld活动上展示了全新版本的Mac OS X 1.0，新版苹果电脑操作系统遵循了全新的「原教旨主义Aqua美学」（「Aqua」是拉丁语中的「水滴」的意思）。它有着和过去整个时代都完全不同的视觉体验，以及完全不同的交互逻辑，由此引领整个UI设计界在拟物化方向上发展了10几年。这些高度拟物化的肌理材质，渐变的光影，丰富视觉层次，使得设计师不得不选择Photoshop作为UI 的设计工具。

2013年，苹果发布iOS 7全新的扁平化设计风格，Google公司在Android手机系统上推行Material Design设计语言，微软将其在手机系统Windows Phone上的Metro设计风格延伸到桌面端Windows 8上，扁平化设计的趋势开始彻底盖过拟物化设计。同时期，移动端用户数量爆发式增长，移动端流量正式超过桌面端流量。随着扁平化设计的崛起，UI设计师再也不想运用笨重的Photoshop软件去设计交互界面，新一代轻量化的图形编辑工具Sketch、Figma等UI设计软件应运而生，并横扫了UI/UX领域。

最初的拟物风格可以降低用户的识别门槛，因为「它」像真的一样，很容易识别。但是随着数字媒介的发展，拟物风格图标在小尺寸下容易丢失识别性，且拟物图标文件体积较大，占用较多的系统资源，不利于手机系统的流畅运行。更重要的是拟物风格图标造成信息过载，图标只是快捷指示，它不是应用程序应该展示的重点，重点应该是「内容」，用户应该更多的专注于内容，而不是被这些精美的图标打扰。抽象几何化的扁平图标，也具有更开放的含义和自由的想象空间，不像拟物图标那么死板。

扁平化的图标，从视觉形态上看，无外乎三种：线性图标、面性图标、线面结合。

► 线性图标：用线作为基础元素去表达图标语义。结合点、线的各种形态，以及不同色彩，线性图标也可以呈现出很多种样式。► 面性图标就像是一个物体的剪影，是以块（面）的形式去表达图标的语义。同线性图标一样，调整各种可控因素，它的形态也是多样的。线性图标看上去「轻」，而面性图标占有更多的视觉空间，所以它看上去显得「重」，也意味着更容易吸引注意力。► 线面结合图标，在样式上会变得更加丰富和趣味性，形式感更加强。但由于元素的增多，如果运用的不恰当，容易让图标显得杂乱。

图标是UI设计中极为重要的一个环节，各种类型数字媒介的交互界面几乎都会涉及到图标的表达，出色的图标不仅仅能够为用户提供明确的功能引导，还可以让界面更加精致、有趣。

视觉传达设计和数字媒体艺术设计相关专业的学生，在低年级学习了「图形软件」和「图形设计」相关课程后，以「图标设计」课程作为敲门砖，引导学生跨入专业性更强的交互界面设计方向，这门课起着承前启后的重要作用。通过这门课，学生才真正开始和传统依托印刷媒介的视觉传达专业方向「分道扬镳」。

一个可视化的图标，从设计的角度可以分为两个层次：基本形状和视觉效果表现。

基本形状就是用最简单的草图线条勾画图标的大致造型，不必去过多考虑复杂的视觉效果。

基本形状的作用在于实现图标最基本，也是重要的功能性的视觉表达，图标能够明确的起到引导作用，用户可以通过图标识别概念和功能。做不到这一点，再好看的图标也丧失了它存在的基本价值。

万变不离其宗，基本形状是图标抛开华丽外表的核心，很多同学不注重对于图标基本形状的原创，直接「拿来主义」，从起点开始就「摆烂」了。图标的基本形状是一个图标是否具备创造性的一个重要因素。

在确定了图标的基本形状之后，我们仍然可以通过各种视觉手段来丰富图标的表现效果，以让图标适应特定的设计需求。

在阅读了大量的图标作品之后，我把能够影响图标视觉效果的各种手段和因素做了整理，形成了一个思维导图，方便学生更好的控制图标。这里只展示了部分思维导图截图，整个《图标设计》课程是一个完整而连贯的思维导图，全图在下面的链接：
https://gitmind.cn/app/docs/mbhvh9un

以下是图标视觉表现7个要素的具体分析和案例讲解：

（为了节约阅读时间此处省略若张类似的图片案例）

通过对于图标视觉表现7个要素的详细讲解，使学生对于图标视觉表现有了较为理性和全面的认识。在接下来的图标训练中将始终围绕「基本形状」和「视觉表现7要素」展开，根据每个同学的具体情况提出有针对性的修改建议，逐步让学生完善自己的图标设计。

智能手机从开始普及到今天不过十年时间，UI/UX设计才刚刚发展起来，整个行业还在高速发展，知识更新非常快，不像已经发展了上百年的平面设计行业已经有了非常完善的知识体系。UI/UX设计相关的知识与经验，需要教师一边实践一边教学一边总结，慢慢摸索出一套适合高职学生的教学内容与方法，很多时候只有靠自己，没有现成的经验可以「抄」。

设计对象：手机控制中心图标
设计要求：
► 图标具有明确的功能识别性
► 图标的大小、描边粗细、线面风格统一
► 简洁的图形语言
► 独特性、差异化、风格化

单元训练总结：
手机控制中心的常见图标如：WIFI、蓝牙、位置等，通过iconfont.cn等图标库网站很容易就能搜索到大量的参考图标样式，作为初学者的第一次练习，学生在图标的基本形状上参考现成的样式，勉强能接受。那么就需要学生更多的关注视觉表现，在这个层次上，拉开差距，尽量去实现个人原创的视觉表现效果。

设计对象：微信APP内系统图标再设计
设计要求：
► 图标具有明确的功能识别性
► 所有的图标应具备完整、统一的视觉风格。
► 每个人设计的图标和截图中的微信原版图标的基本形状应完全不一样。
► 每个人设计的图标应该和你的第一次（手机控制中心）作业中的图标风格不一样。
► 图标应具备一定的原创性和独特的视觉特点。

单元训练总结：
► 微信APP中使用了大量的图标，例如「通讯录」、「收藏」、「表情」等，他们是一套完整的具有统一风格的图标。这个单元的训练，图标数量增加到了20+，目的是想通过训练，实现让学生对于大量图标统一的风格控制，更加深刻的认识影响图标视觉效果的种种要素。
► 通过手机截图，并运用Photoshop软件抹掉手机界面的原图标，再导入Illustrator软件，把自己设计的图标替换到相同位置，考察图标在APP界面实装的模拟效果，以检验图标存在的问题。（这部分设计内容在本文未展示）
► 因为这些通用的图标概念（「通讯录」、「表情」等），学生还是可以很容易就能找到可供参考的图标基本形状。在后续的训练中，需要改变训练内容、目标和流程，以培养他们想办法解决设计问题的能力和创造性的思维。

设计对象：6个小米产品的图标化表现
设计要求：
► 分别用线性、面性和扁平(渐变微立体)的风格进行表现
► 产品的图标表现，需要做出必要的简化，以符合“图标”的设计语言。
► “简化”并不是无脑的“简单化”，而是进过提炼，让绘制的图标仍然可以保留对象的特征。多一些细节描绘，可以让图标保留更多的对象特征，但是也有可能会让图标不够简洁，设计师需要权衡好。
► 一个图标三种呈现方式：线、面、扁平，他们之间在局部处理上会有细微的变化，仔细观察，关注细节。一开始就要想清楚三种呈现方式，初始的“基本形状”，就要充分考虑线面变化，不然图标无法顺畅的进行演化。

单元训练总结：
► 本单元的训练不再从「通讯录」、「表情」等通用的概念出发，而是从指定的小米产品视觉形象出发，学生没有现成的图标可以参考，只能硬着头皮去观察、分析指定的产品形象，通过思考，慢慢的演化、设计出简洁的图标视觉形象。
► 本单元的训练加入了线、面、扁平一体化的图标视觉表现，既更加深刻的认识到了图标基本形状的重要性，也熟悉了几种表现方式的互相转换。

设计对象：
手机主题程序启动图标，包括系统原生和第三方应用
设计要求：
► 整体视觉效果统一，且能够体现“主题名称”所定义的的概念
► 主题图标相较而言，比之前练习中的的图标更为复杂
► 第三方图标要具备主题化的视觉改造和融合

单元训练总结：
► 「安卓手机主题」中的图标设计不同于「基础功能性图标」，后者大多是依附于APP内，用于实现功能入口，它们不是APP的主角。而「安卓手机主题图标」是为了满足不同用户的审美需求，他们选择主题的原则就是你的主题图标「好不好看」，这里图标成为了主角。这就对手机主题图标设计提出了很高的审美要求。
► 「安卓手机主题图标」的设计具有一定的难度，学生从前面的「基础功能性图标」设计过渡到这一阶段的学习，跨度有点大。但是因为课时的限制，以及为了和后续课程实现完美衔接，我必须知难而上，尽量多安排一些课时，以解决较多的设计难点。

课程总结：
从课程结束后，学生完成的作业情况来看，基本实现了教学目标，以下是几条教学经验总结。
► 学生通过本课程，了解了图标中基本形状和视觉表现的关系，以及较为科学的图标设计思路，基本掌握了从简洁到复杂，从线性到面性等几种不同类型图标的设计方法。
► 疏通了图形→图标→UI界面设计的知识链条，让学生开始渐渐踏入专业方向更加明确的UI/UX设计领域，也为后续的「手机主题设计」、「APP交互界面设计」打下了夯实的基础。
► 增强了矢量软件Illustrator的操作熟练度，并把软件带入到设计场景中，为设计服务，并实现了Photoshop软件和Illustrator软件的相互协同。
课程反思：
► 在今后的相关课程教学中，不是一味的严令禁止，而是通过更加精确而巧妙的课程内容设置，有效的引导学生发挥创造性思维，激发他们学习的主动性，规避他们的惰性，从而实现更好的教学效果和教学质量。