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

《《移动终端UI设计》教学教案02UI图标设计.docx》由会员分享，可在线阅读，更多相关《《移动终端UI设计》教学教案02UI图标设计.docx（9页珍藏版）》请在第一文库网上搜索。

1、* 学柠教师教案（ 学年第学期）课程名称：移动终端UI设计授课专业：任课教师：所在系部：2019年7月第2章UI图标设计任务名称教学目的教学方法教学手段重点难点2.1图标设计知识准备学习UI图标的特点、设计流程、设计方法以及设计规范，以便准确、高效地完成设计任务。讲授法、案例法一多媒体教学、手机客户端一重点：UI图标的特点、设计流程、设计方法难点：准确、高效地完成设计任务授课内容:2.1.1 APP图标的特点1 .图形独特2 .表意准确3 .用色谨慎4 .语言简洁2. 1. 2 App图标设计流程1 .定义主题2 .寻找隐喻3 .抽象图形4 .绘制草图5 .确定风格教学内容设计6 .制作和调整

2、7 .场景测试2 . 1. 3 App图标设计方法L关键节点绘制3 .精致的基础要素3.1. 4 iOS图标规范1 .界面布局尺寸规范2 .图标尺寸4 .其他元素5 .1.5 Android图标规范L程序启动图标(Logo)6 .底部菜单图标7 .弹出对话框顶部、列表内部图标8 .底部或顶部tab标签图标总结课程内容，重申重点、难点课后作业课下同学们自拟一个APP,之后确定各功能点的图标风格。任务名称2.2线性图标教学目的学习UI设计中线性图标的设计和制作方法教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端重点难点重点：学习线性图标的设计方法难点：掌握不同风格线性图标的设计策略授课内容

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

4、条的气质，从而映射在整体图形上。不同的端点会有不同的效果出现，特别是线段重复时，端点的特点会被放大，对人们视觉产生更强烈的影响。2. 2. 2线性图标的制作方法1 .分解形状2 .绘制形状3 . 2.3制作线性图标1 . Wi-Fi图标设计2 .垃圾桶图标设计扃血血同总结课程内容，重申重点、难点任务名称教学目的教学方法教学手段重点难点2.3剪影类图标掌握剪影类图标的设计思想与方法讲授法、案例分析法一多媒体教学、手机客户端一重点：掌握剪影类图标的设计方法难点：掌握剪影类图标的设计标准与规范授课内容:2. 3.1认识剪影类图标常见的剪影图标为单色表现，也有双色图标，如图2-34所示。抽象简洁、言简

5、意赅、高度提炼；对于表象意境的考究要高于具象和细节；突出设计的理性与感性之间在功能传达上的逻辑思维。3. 3. 2剪影图标绘制标准1 .倒角和圆角一致口口 2 公 件2 .线的宽度一致2g乌臼众国因教学内容4.外轮廓造型一致设计 Q 3 .体积感一致5 .倾斜角度一致/ / # 0， / 伊 06 .透视角度一致 7 .功能识别性，阴阳两套在不同背景色上的呈现Co fl (To) 2. 3. 3制作剪影类图标1 .微信图标设计2 .制作抖音APP图标总结课程内容，重申重点、难点课后作业 每位学生课后找一组具有透视角度一致的UI图标，并完成设计和制作。任务名称教学目的2.4扁平化与长阴影类图标掌

6、握扁平化与长阴影类图标的设计理念与制作方法教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端重点难点重点：扁平化与长阴影类图标的设计和制作方法难点：扁平化与长阴影类图标的设计理念与审美授课内容：2.4.1 认知扁平化与长阴影3 .什么是扁平化设计扁平化设计从其字面含义上.理解是指设计的整体效果趋向于扁平、无立体感。扁平化设计的核心是在设计中摒弃高光、阴影、纹理和渐变等装饰性效果，通过符号化或简化的图形设计元素来表现。课后作业每位学生课后列举移动电商的未来发展会遇到哪些挑战，并列出你的根据。4 .什么是长阴影教学内容设计长阴影(Long Shadow)概念来自于最新非常流行的扁平化设计(F

7、latDesign)。扁平化设计趋势影响最大的是用户界面元素和图标。长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为45度的投影，给对象添加了 份立体感。5 .扁平化设计的特点(1)简约时尚(2)突出图标主题(3)设计更容易2. 4. 2扁平化风格设计分析1 .纯平面2 .轻折叠3 .轻质感4 .折纸风5 .长投影6 .加厚度7 .4.3制作扁平化与长阴影类图标1 .常规扁平化2 .长投影3 .投影4 .渐变总结课程内容，重申重点、难点任务名称2.5拟物化图标教学目的了解移动终端拟物化图标设计与理念与方法教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端重点难点

8、重点：拟物化图标的设计和制作方法难点：拟物化图标的设计理念和思路授课内容:2. 5. 1认知拟物化图标拟物化设计是指在设计过程中通过添加高光、纹理、材质和阴影等效果,力求实物对象的再现，在设计过程中也可以适当进行变形和夸张，模拟真实物体。拟物化风格图标可以使用户一眼就能够认出对象是什么，而且拟物化设计的交互方式也模拟了现实生活中的交互方式。教学内容设计课后作业2. 5. 2拟物化图标的构建流程1 .勾出轮廓2 .绘制形状3 .填充固有色4 .绘制正式效果5,完善细节5 . 5. 3制作一款拟物化图标1 .制作背景2 .绘制相机简图3 .制作机身效果4 .制作快门、闪光灯和旋钮效果5 .制作镜头效果总结课程内容，重申重点、难点自主设计一组拟物化图标，要求风格统一，符合设计规范。