ui视觉设计教案

《Photoshop CC 移动UI设计案例教程（全彩慕课版）》配套教学教案第1讲3.2.14 文字视图3.2.15 网络视图3.3 控件3.3.1 课堂案例——制作旅游类APP酒店列表页3.3.2 按钮3.3.3 编辑菜单3.3.4 标签3.3.5 页面控件3.3.6 选择器3.3.7 进度指示器3.3.8 刷新3.3.9 分段控件3.3.10 课堂案例——制作旅游类APP美食筛选页3.3.11 滑块3.3.12 步进器3.3.13 开关3.3.14 文本框3.4 课堂练习——制作旅游类APP酒店详情页3.5 课后习题——制作旅游类APP预约美食页小结1、了解并熟练掌握栏、视图和控件的概念。

2、了解并熟练掌握栏、视图和控件的分类。

3、了解并熟练掌握栏、视图和控件的设计规范。

4、熟练掌握iOS系统界面设计的方法和规范。

作业3.4 课堂练习——制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。

3.5 课后习题——制作旅游类APP预约美食页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。

第4讲4.2.18 菜单4.2.19 抽屉式导航4.2.20 状态指引4.2.21 课堂案例——制作医疗类APP医生筛选页4.2.22 选择控件4.2.23 底部面板4.2.24 侧面板4.2.25 滑块4.2.26 底部提示栏4.2.27 课堂案例——制作医疗类APP预约页4.2.28 选项卡4.2.29 文字框4.2.30 提示4.3 课堂练习——制作医疗类APP输入信息页4.4 课后习题——制作医疗类APP帮助支持页小结1、了解并熟练掌握栏和组件的概念。

2、了解并熟练掌握栏和组件的分类。

3、了解并熟练掌握栏和组件的设计规范。

4、熟练掌握Android系统界面设计的方法和规范。

作业4.3 课堂练习——制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。

XX学院教案
XX学院教案
时间
（分）主要教学环节、方法及内容设计
教学环节：理论教学与上机实践结合教学方法：启发法、演示法、实例法、赏析法
内容设计：
1、知识内容回顾，课后作业检查、点评
2、新课的导入一
3、教学内容讲解及示范任务一、APP交互知识与原型图设计的绘制技法：
学生巩固练习一一绘制步骤、绘制要求、文件格式任务二、APP交互知识与原型图设计风格处理：
学生巩固练习一一媒介规范、绘制效果总结4、教学总结、课后练习要求
*机动补充教学环节：理论教学与上机实践结合
教学方法：启发法、演示法、实例法、赏析法内容设计：
1、知识内容回顾，课后作业检查、点评
2、新课的导入一watch设计规范与技巧
3、教学内容讲解及示范任务一、watch设计规范：
学生巩固练习一一绘制步骤、绘制要求、文件格式任务二、watch设计技巧：
学生巩固练习一一媒介规范、绘制效果总结4、教学总结、课后练习要求
教学小结：四节课学习的知识融合并应用。

作业布置：APP交互流程设计与绘制教学后记
规范习惯较难。

广告设计 黎芳 UI 设计 专业课 3.5 普专广告 15-1\256教案（ 2016/2017学年第 一 学期）系部：艺术设计系教 研 室 ： 教师姓名：任课课程：课程类型：学分：任课班级：计划课时：教学准备表课程名称UI 设计普专广告专业方向广告设计年级2015 班级15-1 、2 总学时56 周学时8 学生人数67必修课普通教育课程（）；学科基础课（）；专业方向课（√）课程类别选修课公选课（）；学科基础选修课（）；专业选修（）理论课（6）；实践课（50 ）考试（√）授课方式考核方式理论+实践课（56 ）考查（）采用何种多媒图文并茂的多媒体课件（√）是（）双语教学体影、音、像资料的放映（√）否（√）名称作者出版社及出版时间教材《移动UI 设计之案例与实战》刘晓芳北京航空航天大学出版社2016参考书目《PHOTOSHOP CC 移动UI 界创锐设电子工业出版社2015 及有关网面设计与实战》计址资料《PHOTOSHOP 移动UI 设计》张晨起人民邮电出版社2015 课教画室（）；多媒体教室（√ ）；机房（）；教室（√）；前室服装实验室（）；工业设计实验室（）；非编实验室（）；设施要求摄影实验室（）；材料室（）要材理论讲解概况、设计原理、设计分类、制图表现；结合具体设计案例求料教师和实践项目深入分析，让学生对UI 设计学科有整体认识，并引导学与生进入具体的设计实践，掌握一定的设计技能。

工学生应对UI 设计进行充分的综合分析，对设计任务准确定位，以具及对材料与工艺的了解；同时具备一定的创意思维能力以及方案草图要学生的表达能力，掌握图标的设计与制作，绘制与制作要规范、准确、精求细；还要掌握UI 界面的整体设计。

备成绩考核方式：本课的考核方法为随堂考查，对学生的学习过程、作业过程的考查为注平时成绩，命题设计的考核为结课成绩，成绩评定的分值：平时成绩占60% ，结课作业成绩占40% 。

课程名称UI 设计的基础理论课时 4 学分 3.5授课班级普专广告15-1 、2 学生人数67 授课时间2016-2017（1 ）基本教材与1《. 移动UI 设计之案例与实战》刘晓芳北京航空航天大学出版社2016主要参考资料2. 《PHOTOSHOP CC 移动UI 界面设计与实战》创锐设计电子工业出版社20153. 《PHOTOSHOP 移动UI 设计》张晨起人民邮电出版社2015教学目的通过本课程的学习使学生了解UI 在中国的发展，以及UI 的是什么。

《UI界面设计》教学大纲一、层次与学制：专科，三年制二、教学时数：64学时，周学时：4三、适用专业：视觉传达、艺术设计四、课程性质与任务UI界面设计是数字媒体艺术专业重要的基础课程，是一门集技术与艺术一体化的基础学科，课程的设置面向职业岗位要求，职业岗位针对性较强，涉及的专业技能具有很强的专业性，其主要任务是培养学生的手机界面设计的制作能力，使学生了解当今界面设计制作的基本知识。

五、教学目的与基本要求目的：知识目标：了解游戏行业美术设计师岗位要求并掌握界面的设计制作规范。

能力目标：能熟练掌握界面制作流程和方法技巧，以及界面的设计制作能力达到行业岗位的基本要求。

素质目标：（1）具有热爱所学专业、爱岗敬业的精神和强烈的法律意识；（2）具有胜任设计工作的良好的业务素质和身心素质；（3）具有运用所学知识分析和解决问题的能力；（4）具有自学能力、获取信息的能力，以及一定的组织、管理能力。

（5）培养学生的团结合作能力；运用所学知识分析和解决问题的能力，创新设计思维，美术欣赏造型审美的能力。

要求：界面UI设计课在整个教学的过程中，运用启发、引导和实践的方式，通过进行造型设计基础知识点的逐步讲解并实例绘制教授创作，训练学生的相互配合能力，培养学生的职业道德、团队协作意识以及良好的审美意识，使学生在艺术学习和实践中陶冶情操，并培养学生具备积极思考问题、主动学习、良好的团队合作精神、获取知识能力、设计创意思维能力、结构分析、感悟能力和欣赏能力等素质。

六、教学主要内容与学时分配第一章UI界面设计相关知识1. 什么是UI设计及相关概念介绍在深入了解如何进行UI设计之前，我们还应该先了解一些与UI设计相关的概念2.UI设计的流程一个好的UI设计并不是然最终的用户界面视觉效果’好看’而已，而是需要考虑到用户和界面之间的整个交互过程，是否使用户有好的体验。

所以，当我们讨论UI流程的时候，也不能只简单地讲如何优化用户界面的视觉效果，而应当从交互设计的整个流程出发来讨论。

移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计的原则与要素1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本界面布局2.1 界面布局的基本概念与原则2.2 常见的界面布局类型与示例2.3 界面布局的实战技巧与方法2.4 优秀界面布局案例分析与借鉴第三章：移动UI设计的色彩与图标3.1 色彩在移动UI设计中的应用与重要性3.2 色彩搭配的基本原则与技巧3.3 图标设计的基本概念与原则3.4 图标设计的实战技巧与方法第四章：移动UI设计的字体与排版4.1 字体在移动UI设计中的应用与重要性4.2 字体的选择与搭配技巧4.3 排版的基本概念与原则4.4 排版设计的实战技巧与方法第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的应用与重要性5.2 交互设计的基本概念与原则5.3 动画设计的基本概念与原则5.4 交互与动画设计的实战技巧与方法第六章：移动UI设计的导航设计6.1 导航在移动UI设计中的应用与重要性6.2 导航设计的类型与实战技巧6.3 导航设计的常见问题与解决方案6.4 优秀导航设计案例分析与借鉴第七章：移动UI设计的适配与响应式设计7.1 适配与响应式设计在移动UI设计中的应用与重要性7.2 屏幕尺寸与分辨率的概念与实战技巧7.3 媒体查询与CSS Grid的应用技巧7.4 优秀适配与响应式设计案例分析与借鉴第八章：设计工具的使用8.1 Sketch在移动UI设计中的应用与实战技巧8.2 Adobe XD在移动UI设计中的应用与实战技巧8.3 Figma在移动UI设计中的应用与实战技巧8.4 其他设计工具的选择与应用技巧第九章：移动UI设计的项目管理与团队协作9.1 项目管理在移动UI设计中的应用与重要性9.2 项目计划的制定与执行技巧9.3 团队协作的基本概念与实战技巧9.4 优秀团队协作与项目管理案例分析与借鉴第十章：移动UI设计的案例解析与实战训练10.1 案例解析一：某电商APP的UI设计10.2 案例解析二：某社交平台的UI设计10.3 案例解析三：某新闻阅读APP的UI设计10.4 实战训练：设计一个属于自己的移动UI项目第十一章：移动UI设计的规范与标准11.1 设计规范的概念与重要性11.2 常见的设计规范与标准解读11.3 设计规范的实战应用与技巧11.4 优秀设计规范案例分析与借鉴第十二章：用户体验与用户测试12.1 用户体验在移动UI设计中的应用与重要性12.2 用户测试的基本概念与方法12.3 用户体验设计的实战技巧与方法12.4 优秀用户体验案例分析与借鉴第十三章：移动UI设计的优化与提升13.1 性能优化在移动UI设计中的应用与重要性13.2 图像优化与加载速度的提升技巧13.3 代码优化与执行效率的提升技巧13.4 优秀性能优化案例分析与借鉴第十四章：移动UI设计的趋势与创新14.1 设计趋势在移动UI设计中的应用与重要性14.2 最新设计趋势解读与实战技巧14.3 创新设计思维的培养与实践14.4 优秀创新设计案例分析与借鉴第十五章：移动UI设计的职业规划与发展15.1 移动UI设计师的职业角色与责任15.2 职业规划的基本概念与方法15.3 行业趋势与技能提升的方向15.4 优秀设计师的成长经验分享与借鉴重点和难点解析本文教案全面介绍了移动UI设计的基本概念、设计原则、实战技巧以及优秀案例分析等内容。

授课课题 认识界面门—设计界面的通用性的分析 教学目标和要求进一步认识界面，了解设计界面的通用性并进行分析教学 重点和难点 重点：设计界面的通用性的分析难点：设计界面的功能、情感、环境的共通 教学方法案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 8教 学学 过过 程程教学步骤及教学内容时间分配 导入新课随着硬件技术的飞速发展，使计算速度与存储容量不再成为软件开发人员所担心的问题，用户关心的主要问题是能否比较容易和舒适地使用软件。

换言之，人们的着眼点在于软件的易用性和美观，而易用与美观主要取决于用户界面，即UI 的优劣。

本课主要讲解UI 的基本理论和设计属性，以期在具体学习UI 设计技巧和制作技术之前对UI 设计有一个整体的了解。

1.1 UI 设计基本介绍众所周知，在当今的硬件与软件环境下，一个软件没有很好的界面设计就不能算是成功的软件，因为不管它内部有多么精巧的技术，只要用户不愿意使用它，它的优越性就得不到发挥，它的价值和作用也就无从谈起。

于是一个不涉及技术而着眼于易用和美观的用户界面显得越来越重要，这就是软件UI 设计。

教学步骤及教学内容 时间分配UI的本意是用户界面(User Interface)，概括成一句话就是------人和工具之间的界面。

这个界面实际上体现在我们生活中的每一个环节，例如同学们切菜的时候，刀把手就是这个界面;开车的时候方向盘啊仪表盘也是为个界面;看TV的时候遥控器亦是这个界面;用电脑的时候更不用说。

于是乎，我们把UI分成两大类：硬件界面和软件界面。

我们的教程所涉及的皆为软件界面，同学们注意了，所以我们也可以称之为特殊的或者狭义的UI设计。

n! ^软件设计可分为两个部分：编码设计与UI设计。

编码设计相信同学们都比较熟悉，但UI设计对许多猫来说可能还比较陌生，可能连一些专门从事网站多媒体设计的人员也不是很理解UI的含义。

前面说了，UI是英文User和Interface的缩写。

U1设计U1Design一、课程基本信息学时：64学分：4考核方式：考查中文简介：《UI设计》课程是视觉传达设计专业数字媒体方向的专业必选课程。

在数字产品、数字媒体的使用与传播环境中，人机界面的设计作为提高产品效力、强化品牌印象、提升用户体验质量的重要手段与方法越来越引起重视，已成为设计界活跃的研究方向。

媒体界面是指数字媒体交互系统、服务环境中的软件图形用户界面。

图形用户界面是当下数字媒体人机交互的主要媒介，其设计包含诸多学科的交叉与融合。

本课程从信息传达与用户体验的角度出发，由媒体界面的概念入手，结合案例分析媒体界面设计要素和原则规范，详细讲授媒体界面的设计方法、设计流程和具体设计的把握，给学生提供一个清晰完整的设计思路和过程。

目的是让学生对数字媒体界面艺术设计有深入全面的认识，得到系统有效的训练，准确灵活地运用各设计要素与手段进行图形用户界面设计。

二、教学目的与要求教学目的：通过本课程的学习，让学生了解数字媒体界面设计的概念，掌握数字媒体界面设计方法以及相应完整、系统的实现流程，并能从用户体验的角度进行数字媒体界面设计。

着重培养学生的专业思维能力和提高学生的动手实践能力。

教学要求：学生掌握图形用户界面设计的具体实现思路和技术，调动图形、文字、色彩、图标等各项视觉设计要素，结合空间、融入时间，借助平面与数字化交融的手段，以简洁优美的信息界面创造和谐的交互体验。

三、教学方法与手段1、采用多媒体的课堂教学手段，理论讲授与课程专题实验训练相结合的方式，传授数字媒体界面设计的规律性知识，要求学生掌握图形用户界面设计的能力。

2、收集案例进行分析，观摩国内外优秀的数字媒体界面设计作品案例有利于学生理解和打开思路。

3、引导课堂讨论，在理论讲授和课题研究过程中，启发和引导学生展开讨论分析,以提高学生分析问题和解决问题的能力，更好地取得最佳设计方案。

4、进行个别辅导，对不同类型的学生进行因材施教，以提高学生的学习兴趣，充分发挥学生的创造力和个人特点，形成创作差异。

《UI设计教案：让界面设计变得简单而美观》教案章节一：UI设计概述教学目标：1. 了解UI设计的定义和重要性；2. 掌握UI设计的基本原则和目标。

教学内容：1. UI设计的定义；2. UI设计与UX设计的区别；3. UI设计的基本原则；4. UI设计的目标。

教学活动：1. 引入话题：介绍UI设计的概念；2. 讲解UI设计与UX设计的区别；3. 探讨UI设计的基本原则；4. 讨论UI设计的目标。

作业与练习：1. 学生进行UI设计的基本原则的练习；2. 学生设计一个简单的界面，体现UI设计的目标。

教案章节二：UI设计的要素与技巧教学目标：1. 掌握UI设计的基本要素；2. 学习UI设计的技巧和方法。

教学内容：1. UI设计的基本要素：色彩、布局、字体等；2. UI设计的技巧：对比、对齐、重复等；3. UI设计的方法：线框图、原型图等。

教学活动：1. 讲解UI设计的基本要素；2. 示范UI设计的技巧；3. 介绍UI设计的方法。

作业与练习：1. 学生进行UI设计的基本要素的练习；2. 学生运用UI设计的技巧和方法设计一个简单的界面。

教案章节三：UI设计的流程与步骤教学目标：1. 了解UI设计的流程；2. 掌握UI设计的步骤。

教学内容：1. UI设计的流程：需求分析、设计方案、原型设计等；2. UI设计的步骤：调研、分析、设计、制作等。

教学活动：1. 讲解UI设计的流程；2. 介绍UI设计的步骤。

作业与练习：1. 学生进行UI设计的流程的练习；2. 学生按照UI设计的步骤完成一个简单的界面设计项目。

教案章节四：UI设计的趋势与创新教学目标：1. 了解UI设计的趋势；2. 学习UI设计的创新方法。

教学内容：1. UI设计的趋势：扁平化、Material Design等；2. UI设计的创新方法：用户体验、交互设计等。

教学活动：1. 讲解UI设计的趋势；2. 介绍UI设计的创新方法。

作业与练习：1. 学生进行UI设计的趋势的练习；2. 学生运用UI设计的创新方法设计一个创新的界面。

课程名称：UI界面设计授课教师：制订时间：UI界面设计第一章UI综述课题：UI综述授课教师：教学目标：通过本章学习使学生了解UI在中国的发展，以及UI的是什么。

教学重点：掌握UI在中国的发展，以及UI是什么。

教学难点：掌握UI是什么。

教学准备：课本、参考图形教学方法：讲授、讨论、案例分析教材：教学时间：8课时教学内容：UI在中国的发展，以及UI是什么UI即User Interface(用户界面)的简称。

UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

第一节UI是什么软件设计可分为两个部分：编码设计与UI设计。

编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。

UI的本意是用户界面，是英文User和interface 的缩写。

从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来。

做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。

其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。

一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。

界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。

检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。

所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

第二节UI设计师是做什么的在中国，UI设计还是一个需要不断成长的设计领域，但eicodesign,Tigocn, lkkui design, Robin design等国内知名设计机构已经进入了探索UI设计的道路。

备课本Lesson Preparation_2013__--__2014_学年第_一_学期Academic Year - Semester课程名称UI设计Course教材名称及版本UI设计T extbook and Edition授课班级2011平面1班Class教师姓名黎丹Teacher审核人周增辉Approver填写说明1、此备课本用来书写教案，适用于所有专职教师、兼职教师和兼课教师。

2、所有承担教学任务的教师需书写纸质版教案，如因使用多媒体教学需要和教学任务繁重，可用电子版教案，但格式必须按纸质版格式，且所有教案的书写应与学期授课计划相符合。

3、备课过程中的各个环节和要素可根据实际授课内容进行填写。

如：授课课题：（教学章、节、标题或项目名称）教学目标和要求：（教学目标一般说应包含知识教学、能力发展和思想教育三方面内容，教学要求是指识记、理解、简单应用、综合应用等层次）教学重点和难点：教学重点，是为了达到确定的教学目的而必须着重讲解和分析的内容；教学难点，是就学生的接受情况而言的，学生经过自学还不能理解或理解有困难的地方，即可确定为教学难点。

教学方法：（讨论、启发、演示、辩论、讲练结合、案例教学、情境模拟等）教学手段：（多媒体教学、录像带、挂图、幻灯片等）授课时间：第周课时累计：教学过程：（体现教学步骤，包括时间分配和教学内容教学进程）作业布置：（含思考题、讨论题）课后反思：（因为课后反思是教案实施效果追记，课前还不能打印，只能课后用笔手写）3）依赖认知而非记忆。

譬如打印图标的记忆，下拉菜单列表中的选择等要符合业界习惯。

4）提供视觉线索。

界面要有吸引力，如下图：5）提供默认(default)、撤消(undo)、恢复(redo)等功能。

这方面好多同学可能不是很了解，但是你要做好一个真正的UI设计师，那么功能方面你还是要有一定的掌握喔！当然啦，同学也不用怕，只要你用心，其实很简单的！Just do it! 6）提供界面的快捷方式。