《移动终端UI设计》教学教案02UI图标设计

****** 学柠
教师教案
（学年第学期）
课程名称：移动终端UI设计
授课专业：__________________________ 任课教师：__________________________ 所在系部：__________________________
2019年7月
第2章UI 图标设计
2.1.1 APP 图标的特点
1 .图形独特
2 .表意准确
3 .用色谨慎
4 .语言简洁
2. 1. 2 App 图标设计流程
1 .定义主题
2 .寻找隐喻
3 .抽象图形
4 .绘制草图
5 .确定风格
6 .制作和调整
7 .场景测试
2 . 1.
3 App 图标设计方法
L 关键节点绘制
3 .精致的基础要素
3.1. 4 iOS 图标规范
1 .界面布局尺寸规范
2 .图标尺寸
4 .其他元素
5 .1.5 Android 图标规范
L 程序启动图标(Logo)
6 .底部菜单图标
7 .弹出对话框顶部、列表内部图标
8 .底部或顶部tab 标签图标
任务名称 教学目的 教学方法 教学手段 重点难点 2.1图标设计知识准备 学习UI 图标的特点、设计流程、设计方法以及设计规范，以便准确、 高效地完成设计任务。

讲授法、案例法 一 多媒体教学、手机客户端 一 重点：UI 图标的特点、设计流程、设计方法
难点：准确、高效地完成设计任务 授课内容: 教学 内容 设计
总结课程内容，重申重点、难点
课后作业课下同学们自拟一个APP,之后确定各功能点的图标风格。

授课内容：
2 . 2.1认识线性图标
L 线性图标的概念
线性图标是由一条等粗细度线条构成的图形，相比面形图标会比较有细 节的表现空间，控制线条的粗细和构型能够有很多样的视觉表现；通常应用 在小的功能入口，起到指代功能的作用；无线网卡
3 .设计要点
线条粗度需整套一致、构型饱满、大小上要视觉统一、视角一致；一般都 是正视图的图标，中间不要插入一两个俯视图或者类似侧轴的角度，圆角统 4 .气质表现
（1） 一是线的粗细，粗细是反映线条气质的一个重要因素，不同的粗细
会直接影响图形气质，细的线条体现简约、高端、高雅、文艺、女性、等气 质，粗的线条体现稳重、阳刚、传统、诚信等气质。

（2）线的端点，线段的端点也会反映线条的气质，从而映射在整体图形 上。

不同的端点会有不同的效果出现，特别是线段重复时，端点的特点会被
放大，对人们视觉产生更强烈的影响。

2. 2. 2线性图标的制作方法
1 .分解形状
2 .绘制形状
3 . 2.3制作线性图标
1 . Wi-Fi 图标设计
2 .垃圾桶图标设计
扃血血同
总结课程内容，重申重点、难点
教学 内容 设计
2.3剪影类图标 掌握剪影类图标的设计思想与方法
讲授法、案例分析法
一 多媒体教学、手机客户端
一
重点：掌握剪影类图标的设计方法
难点：掌握剪影类图标的设计标准与规范
授课内容:
2. 3.1认识剪影类图标
常见的剪影图标为单色表现，也有双色图标，如图2-34所示。

抽象简洁、 言简意赅、高度提炼；对于表象意境的考究要高于具象和细节；突出设计的 理性与感性之间在功能传达上的逻辑思维。

3. 3. 2剪影图标绘制标准
1 .倒角和圆角一致
口口 2 公 件
2 .线的宽度一致
2g 乌臼众国因
3 .体积感一致
5 .倾斜角度一致 / / # 0，・ / 伊 0
6 .透视角度一致
⅛ ⅛ χ ¾
7 .功能识别性，阴阳两套在不同背景色上的呈现
Co^ flθ (To) @
2. 3. 3制作剪影类图标
1 .微信图标设计
2 .制作抖音APP 图标
总结课程内容，重申重点、难点
任务名称 教学目的 教学方法 教学手段 重点难点 教学
内容
4.外轮廓造型一致
设计
© Θ Q @ © @
2.4扁平化与长阴影类图标
掌握扁平化与长阴影类图标的设计理念与制作方法 教学方法 讲授法、案例分析法
教学手段 多媒体教学、手机客户端
重点难点 重点：扁平化与长阴影类图标的设计和制作方法 难点：扁平化与长阴影类图标的设计理念与审美
授课内容：
2.4.1 认知扁平化与长阴影
3 .什么是扁平化设计
扁平化设计从其字面含义上.理解是指设计的整体效果趋向于扁平、无立体 感。

扁平化设计的核心是在设计中摒弃高光、阴影、纹理和渐变等装饰性效 果，通过符号化或简化的图形设计元素来表现。

4 .什么是长阴影
长阴影(Long Shadow)概念来自于最新非常流行的扁平化设计(Flat
Design)。

扁平化设计趋势影响最大的是用户界面元素和图标。

长阴影其实就 是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为45度 的投影，给对象添加了 •份立体感。

5 .扁平化设计的特点
(1)简约时尚
(2)突出图标主题
(3)设计更容易
2. 4. 2扁平化风格设计分析
1 .纯平面
2 .轻折叠
3 .轻质感
4 .折纸风
5 .长投影
6 .加厚度
7 .4.3制作扁平化与长阴影类图标
1 .常规扁平化
2 .长投影
3 .投影
4 .渐变
任务名称 教学目的 教学 内容 设计
总结课程内容，重申重点、难点
任务名称 2.5拟物化图标
教学目的了解移动终端拟物化图标设计与理念与方法教学方法讲授法、案例分析法
教学手段多媒体教学、手机客户端
重点难点重点：拟物化图标的设计和制作方法
难点：拟物化图标的设计理念和思路
授课内容:
2. 5. 1认知拟物化图标
拟物化设计是指在设计过程中通过添加高光、纹理、材质和阴影等效果, 力求实物对象的再现，在设计过程中也可以适当进行变形和夸张，模拟真实
物体。

拟物化风格图标可以使用户一眼就能够认出对象是什么，而且拟物化
设计的交互方式也模拟了现实生活中的交互方式。

2. 5. 2拟物化图标的构建流程
1 .勾出轮廓
2 .绘制形状
3 .填充固有色
4 .绘制正式效果 5,完善细节
5 . 5. 3制作一款拟物化图标
1 .制作背景
2 .绘制相机简图
3 .制作机身效果
4 .制作快门、闪光灯和旋钮效果
5 .制作镜头效果
总结课程内容，重申重点、难点
自主设计一组拟物化图标，要求风格统一，符合设计规范。

教学
内容
设计 课后作业。