Photoshop智能手机UI设计教案

Photoshop智能手机UI设计教案 Photoshop智能手机UI设计课程教案授课时间授课时数4课时授课课题第章手机UI设计概述授课形式教师讲授教学目的与要求智能手机UI设计概述，介绍优秀UI的特点、UI设计的布局与分类、制作优秀UI的注意事项。 教学重点 1、手机UI设计概述 2、UI设计的布局和分类 3、制作优秀UI的方法和注意事项 4、UI设计师的自我提升途径教学难点 1、UI设计的布局和分类 2、制作优秀UI的操作步骤和方法教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入随着移动互联网的成长，通过移动App实现商品交易与社交越来越频繁，合理的人性化设计在App UI（User Interface）设计中凸现出举足轻重的地位。 优秀App的导航、布局、交互设计能够极大地提高终端设备易用性，对实现App的高效运作具有实际意义。 在设计UI之前，必须要弄清楚什么是智能手机的UI、优秀的UI呈现什么样子。 好的UI设计不仅是让软件变得有个性，有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。 二、新课教学大纲1.1手机UI设计概述1.1.1什么是UI？1.1.2优秀的UI具有哪些特点1.2UI设计的布局和分类1.2.1UI设计的布局1.2.2UI设计的分类1.3如何制作出优秀的UI1.4UI设计师如何自我提升1.4.1形状/轮廓1.4.2美术基础1.4.3色彩识别1.4.4引导视觉 三、课程安排 1、什么是UI？智能手机的UI设计是指对手机软件的人机交互、操作逻辑、界面美观的整体设计。 UI可以直译为用户界面，就是在用户使用工具完成任务的过程中，用户所做的操作以及工具的响应的总和。 比较科学的做法就是先设计UI，再做代码。 优秀的UI设计通常具有以下几个特点?简洁让用户找起内容很容易。 ?美观让用户看到很开心。 ?清晰不容易让用户感到困惑。 ?高效能够帮助用户提高效率，节约时间。 ?容错允许用户犯错误。 ?响应操作界面后反应迅速。 ?熟悉让用户第一眼就感觉“认识”。 ?一致整个软件都是一致的。 2、UI设计的布局和分类 （1）不同的操作系统在设计APP时有所异同，分别对iPhone、Android、Windows Phone的APP UI布局进行剖析对比，从而了解不同的系统在APP设计时的异同。 ?iPhone系统的UI元素一般分为三个部分状态栏、导航栏（标题）、标签栏/工具栏。 ?Android系统的布局界面元素一般分为四个部分状态栏、标题栏、标签栏、工具栏。 ?Windows Phone布局界面元素一般分为四个部分状态栏、标题栏、枢轴和工具栏。 （2）一般来说可将智能手机的UI设计分为以下6种形式。 ?平铺成条以长条的形式横向平铺。 ?九宫格以九宫格的方式进行网格式横向和纵向排列。 ?大图滑动以一张大图的方式布满全屏。 ?图片平铺所有图片不规则地平铺于界面之中。 ?分类标签以标签的形式进行分类，导航条的下方水平铺开，可以左右滑动。 ?下拉选项框以下拉列表或下拉选项的方式呈现，主要对信息进行筛选。 3、制作优秀UI的操作秘决和方法?是不是保持着高度一致（风格、配色、按钮位置、页面结构等）；?应当考虑到自己的站点是否容易导航；?必须对用户群有充分的了解，UI设计强调针对性；?尽可能检查程序中的错误和Bug，使用Beta测试消减错误；?在重要的位置为用户展示最重要的内容；?设计一定要简约；?应当提供视觉提示；?应当在UI现场提供类似于在jQuery的各个UI元素上显示简单的操作提示；?力求文本的清晰和准确；?使用色彩考虑与主题内容吻合，并保持一致性；?UI设计简洁大方，提升用户体验感；?总体结构应当清晰明了。 4、UI设计师自我提升的方法途径设计者应该首先考虑轮廓，确保通过轮廓可以识别物体，应该努力让观者只看轮廓就能识别道具和角色，通过美术基础知识，利用工具、使用设计软件努力让观者只看轮廓就能识别道具和角色。 善于用颜色创造象征性的联系，还要注意剧情氛围与和谐的色彩之间的组合。 设计要使用冲突和对比，形状上的冲突、颜色上的视觉冲突、方向线带来的视觉引导。 课后小结总结这节课上的内容智能手机UI设计概述，优秀UI设计的特点、UI设计的布局与分类、制作优秀UI的注意事项。 课后思考内容?设计思路如何设计出更加友好的UI?知识扩展浏览本书所有范例，从视觉上总结UI设计的基本要素授课时间授课时数4课时授课课题第2章手机UI设计基础授课形式教师讲授教学目的与要求讨论手机UI设计师应该遵循哪些设计原则，以及对平面设计师与UI设计师有哪些不同要求，介绍手机UI设计的重要性。 教学重点 1、手机UI设计基础 2、介绍智能手机操作系统的分类 3、UI设计的相关知识 4、UI设计的原则教学难点 1、手机UI设计基础 2、UI设计的相关知识教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入随着智能手机以及互联网的飞速发展，是目前以及未来比较吃香的设计专业，智能手机UI的设计基础是基于优秀的平面设计能力和对Photoshop软件的熟练掌握。 读者需要了解Photoshop软件的界面构成与计算机图像设计的基本知识，熟练掌握各种图像处理工具的使用。 二、新课教学大纲2.1关于手机2.1.1智能手机操作系统的分类2.1.2手机屏幕的分辨率2.1.3屏幕的色彩2.2UI设计相关知识2.2.1什么是UI设计2.2.2UI设计的目的和重要性2.2.3UI设计中最重要的元素是什么2.2.4平面UI与手机UI的不同2.3UI设计的原则 三、课程安排 1、深入了解手机的各项性能要让读者对手机有更全面整体的认识，介绍智能手机操作系统的分类，目前智能手机的操作系统有Windows Phone、Windows Mobile、iOS、Android、Plam OS、BlackBerry OS等。 本书中UI设计主要是针对Android、iOS、Windows Phone这三个最热门的系统进行设计的。 手机屏幕分辨率对于手机的显示性能来讲至关重要，我们常用的手机屏幕分辨率规格共有QVGA、HVGA、WQVGA、VGA、WVGA等五种形式。 现阶段手机屏幕色彩有65536色、26万色和16000万色等三种。 不同的颜色质量，其显示效果也不相同。 颜色数量越高，显示效果就会越好。 优质的显示效果会给观者带来更逼真的视觉体验，选购手机时，要将屏幕色彩和屏幕分辨率两者结合起来合理分析手机的优劣。 2、UI设计的相关基础知识UI可以直译为用户界面。 UI设计不仅仅是指界面美化设计，从文字的意思上能够看出UI还有与“用户与界面”直接的交互关系。 用户界面无处不在。 用户界面设计，不只是要考虑如何摆放按钮和菜单，更为重要的是考虑程序、设备如何与用户互动。 做UI设计的目的是让用户理解程序的用途及如何操作程序，界面的主要目的是沟通，通过沟通让用户理解程序，UI设计包括美化和交互两个方面。 通过UI设计前的和UI设计后的对应图来做对比分析，使读者直观了解UI设计的重要性。 UI设计中最重要的元素如下。 （1）布局和定位； （2）形状和尺寸； （3）颜色； （4）对比； （5）材质。 手机UI的范围基本被锁定在手机的App/客户端上。 而平面UI的范围就非常广。 手机UI独特的尺寸要求、空间和组件类型使得很多平面UI设计者对手机UI的设计了解得不到位。 因此，要充争理银对平面设计师和UI设计师的要求有很多不同之处。 3、UI设计的原则?区分重点；?界面统一性；?清晰度是重中之重；?界面的存在就是为了促进交流和互动；?让界面处在用户的掌控之中；?界面的存在必须有所用途；?强烈的视觉层次感。 课后小结总结这节课上的内容手机UI设计基础、智能手机操作系统的分类、UI设计的相关知识、UI设计的原则。 课后思考内容设计思路一个UI设计师去找工作，如何展示他的价值知识扩展思考一下UI设计的流程授课时间授课时数4课时授课课题第3章Photoshop制作图标常用的操作授课形式教师讲授教学目的与要求介绍Photoshop制作图标常用的操作，介绍使用Photoshop软件进行APP UI设计的基础知识，通过一组图标的设计过程演示来学习手机UI图标的设计流程。 教学重点 1、理解UI设计的准则 2、介绍图标设计的格式和大小 3、掌握图标设计的制作过程和要点教学难点 1、UI设计的准则 2、图标设计的制作过程和要点教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入Jeff Johnson，拥有耶鲁大学及斯坦福大学心理学学位，UI Wizards公司董事长兼首席顾问。 他是GUI设计的先驱，著有畅销书GUI设计禁忌。 根据Jeff Johnson的观点论述，目标用户要在以下3个独立的知识维度上进行划分。 ?用户对计算机的总体知识了解多少？?用户执行目标任务的熟悉程度如何？?用户对特定产品或类似产品的了解程度如何？ 二、新课教学大纲3.1UI设计的准则3.2图标设计的格式和大小3.2.1JPEG格式3.2.2PNG格式3.2.3GIF格式3.2.4图标尺寸大小3.3跟大师设计一组图标3.3.1准备工作3.3.2构思、草图3.3.3辅助背景制作3.3.4基本形、放大3.3.5创作过程3.3.6常用方法变形3.3.7成品 三、课程安排 1、UI设计的准则 （1）明确定位目标用户 （2）调查目标用户的特点 （3）多维度定义目标用户的类型 2、图形设计的格式和大小图形设计主要有以下3种格式?JPEG格式?PNG格式?GIF格式App的图标（ICON）不仅指的是应用程序的启动图标，还包括菜单栏、状态栏以及切换导航栏等位置出现的其他标示性图标，所以ICON是指这些图标的集合。 ICON也受屏幕密度的制约，屏幕密度分为iDPI（低）、mDPI（中等）、hDPI（高）、xhDPI（特高）4种。 3、跟大师设计一组图标设计图标分为以下7个步骤?准备工作打开Photoshop软件，执行“新建”命令；?构思、草图冥想构思提炼关键字、手绘草图画出代表性的示例；?辅助背景制作绘制图标限制，统一视觉大小；?基本形、放大将其放大，可以观察到像素点，消除锯齿，保证清晰度；?创作过程常用方法基本形的演变；?常用方法变形将其他基本形状进行组合，自由发挥，遵循“整体到局部”的原则，先造型再修饰细节。 ?成品为图标加上背景，完成设计。 课后小结总结这节课上的内容通过UI设计高手的设计思路学习图标设计的过程，文件格式对于UI设计的影响，图标设计的制作过程和要点。 课后思考内容?设计思路设计图标的三个阶段1.确定题材2.确定表现风格3.具体实现?知识扩展图标格式的那点事授课时间授课时数6课时授课课题第4章手机UI的平面图标制作授课形式教师讲授教学目的与要求使用Photoshop的矢量图形工具，通过将基本元素进行合并、剪切等操作，完成手机UI的平面图标制作。 教学重点 1、手机UI的平面图标制作 2、介绍最简单的手机UI平面图标制作方法 3、通过大量的案例解决最基本的图形设计问题教学难点 1、手机UI平面图标的制作方法 2、掌握基本的图形设计和动手解决问题的能力教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入利用图形工具可以简单、轻松地制作出各种形态的图像，另外还可以组合基本形态的图像，制作出复杂的图形以及任意的形态，本章将学习图像的制作方法。 使用图形工具，可以制作出漂亮的图形对象并且不受分辨率的影响。 为了方便用户绘制不同样式的图形形状，Photoshop提供了一些基本的图形绘制工具。 利用图形工具可以在图像中绘制直线、矩形、椭圆、多边形和其他自定义形状。 二、新课教学大纲实战01Home图标制作实战02日历图标制作实战03录音机图标制作实战04文件夹图标制作实战05徽章图形实战06秒表图形 二、课程安排实战1Home图标制作实例是制作单色Home图标，主要运用了三种工具，其中包括“钢笔工具”“圆角矩形工具”“矩形工具”混合使用，完成Home图标的制作。 详细演示Home图标制作的操作步骤。 实战2日历图标制作实例是日历图标制作，主要是运用圆角矩形工具绘制基本形，以及路径之间的加减运算，最后使用矩形工具进行绘制，完成日历图标的制作。 详细演示日历图标制作的操作步骤。 实战3录音机图标制作实例是制作录音机图标，主要是圆角矩形工具和矩形工具搭配使用完成形状。 详细演示录音图标制作的操作步骤。 实战4文件夹图标制作实例是制作文件夹图标，使用钢笔工具、矩形工具和图层样式以及“自由变换”命令完成制作。 详细演示文件夹图标制作的操作步骤。 实战5徽章图形实例是制作一个徽章的图形，也可以算是硬币的图案，这种图案通常在App页面或者网站中作为宣传图标出现，效果非常吸引人。 详细演示徽章图形制作的操作步骤。 实战6秒表图形实例是制作一个秒表图形，这个图形设计参考了简约风格的表盘，配上醒目的红色警示指针，让人感觉到平静中有些不安。 详细演示秒表图形制作的操作步骤。 课后小结总结这节课上的内容介绍最简单的手机UI平面图标制作方法、通过大量的案例解决最基本的图形设计问题。 课后思考内容?设计思路绘制基本形状?知识扩展1了解绘图模式?知识扩展2了解图层样式授课时间授课时数4课时授课课题第5章手机UI的字效表现授课形式教师讲授教学目的与要求学习如何制作高质量的字体特效，介绍手机UI的字效表现，手机UI设计中比较难处理的字体特效案例教学重点 1、介绍手机UI的字效表现 2、通过实例演示手机UI设计中比较难处理的字体特效制作步骤教学难点 1、熟练掌握制作高质量字体特效的方法 2、学习制作特殊字体特效果的操作步骤教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入在智能手机的UI设计中字体特效的表现非常重要，美观的字体和字效设计能够让图标如虎添翼，能够让界面更加吸引人，具有强烈的视觉冲击力。 因此，作为设计师，能够制作高质量的字体特效是一件非常重要的事情。 二、新课教学大纲实战01车灯字体实战02星星字体实战03牛仔布料字体 三、课程安排实战1车灯字体通过本实战的学习，读者将学会使用横排文字工具以及大量的图层样式工具制作车灯字体，为文字添加投影、立体且具有厚度感的效果。 详细演示车灯字体特效制作的操作步骤。 实战2星星字体通过本实战的学习，读者将学会使用横排文字工具和画笔描边路径制作星星字体，大量使用画笔面板中的选项，为文字添加星星效果。 详细演示星星字体特效制作的操作步骤。 实战3牛仔布料字体通过本实战的学习，读者将学习一种技术难度较大的字体描边和定义图案的技巧，用来制作牛仔布锁边的特效，这种效果常用于App的logo特效和icon特效中。 详细演示牛仔布料字体特效制作的操作步骤。 课后小结总结这节课上的内容学习如何制作高质量的字体特效，通过实例演示介绍手机UI设计中比较难处理的几种字体特效案例。 课后思考内容?设计思路在APP UI中如何控制字号1.手机客户端字体大小设计的重要性2.让设计与开发顺利接轨的字体规范?知识扩展字体配色的那点事1.配色不宜超过三种2.只需要明白三个关键词叠加、柔光和透明度3.实战演示授课时间授课时数8课时授课课题第6章手机UI的质感表现授课形式教师讲授教学目的与要求手机UI的质感表现，介绍通过光效、渐变等手法来表现金属、木头、陶瓷、玻璃等UI图标常见的物体质感。 教学重点 1、介绍手机UI的质感表现 2、通过光效、渐变等手法呈现UI图标常见的物体质感教学难点 1、介绍手机UI各种的不同质感表现 2、熟练掌握制作常见物体质感特效的操作步骤教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入本章将学习使用Photoshop CC表现不同的质感，包括金属、玻璃、木质、纸质、皮革、陶瓷、塑料光滑表面等。 灵活掌握这些制作方法，有利于今后的UI表现技法的学习。 二、新课教学大纲实战01金属实战02胶布实战03玻璃实战04光滑表面实战05木纹实战06皮革实战07纸张实战08陶瓷实战09光滑漆皮实战10塑料、金属和玻璃综合表现 三、课程安排实战1金属通过本实战的学习，读者将学会使用椭圆选框工具绘制由中心向外的正圆，通过“图层样式”的“描边”效果为正圆添加金属光泽，通过椭圆工具和“路径”面板配合使用绘制金属效果的外围。 详细演示金属特效制作的操作步骤。 实战2胶布通过本实战的学习，读者将学会使用钢笔绘制创可贴外形，使用画笔工具涂抹，使创可贴中间部分凸起，表现立体感，使用椭圆工具以及图层样式添加圆点，使创可贴看起来有透气的效果。 详细演示胶布特效制作的操作步骤。 实战3玻璃通过本实战的学习，读者将学会使用圆角矩形工具绘制电池的基本形，然后使用“图层样式”为其添加效果，最后使用钢笔工具和矩形选框工具以及渐变工具绘制电池容量，使其整体效果完美。 详细演示玻璃特效制作的操作步骤。 实战4光滑表面通过本实战的学习，读者将学会结合不同的工具来绘制手机的外形，大量运用图层的“图层样式”效果来为形状添加效果，使手机表现完美的立体感和质感。 详细演示光滑表面特效制作的操作步骤。 实战5木纹木纹效果通常会用到按钮或其他物体上。 通过本实战的学习，读者将学会使用素材文件配合阴影、斜面、浮雕等图层样式来制作木纹效果。 详细演示木纹特效制作的操作步骤。 实战6皮革通过本实战的学习，读者将学会运用“图层样式”效果制作逼真的皮革效果，然后使用工具箱中的工具来制作图案，分别将不同的图案效果进行分组。 详细演示皮革特效制作的操作步骤。 实战7纸张通过本实战的学习，读者将学会使用套索工具绘制任意形状，形成纸片的效果，通过复制图层，改变颜色来为纸片添加阴影，使其产生立体的厚度感。 详细演示纸张特效制作的操作步骤。 实战8陶瓷通过本实战的学习，读者将学会使用钢笔工具绘制杯子的外形以及端手的部分，使用画笔工具为杯子增加更多的细节，最后使用自定义形状工具和文字工具为杯子增加艺术的视觉感受。 详细演示陶瓷特效制作的操作步骤。 实战9光滑漆皮本例将教会读者制作一个红色漆皮手提袋图形，该图形采用了渐变红色，配以高光阴影，象征着购物和女性，多用于时尚购物站点和女性的App应用。 详细演示光滑漆皮特效制作的操作步骤。 实战10塑料、金属和玻璃综合表现本例将教会读者制作一个放大镜图形，通常放大镜图形用于查询功能。 本例大量使用了渐变色和图层叠加功能，让玻璃质感和金属、塑料质感体现得淋漓尽致。 详细演示塑料、金属和玻璃综合表现特效制作的操作步骤。 课后小结总结这节课上的内容学习如何制作不同物体质感的特效方法，熟悉掌握制作常见物体质感特效的操作步骤。 课后思考内容?设计思路1Apple和Android移动端尺寸指南?设计思路2iOS扁平化系统有哪些特色?设计理念?界面分层和深度?字体的改变?图标风格颠覆性变化?知识扩展关于透明元素和透明度使用的艺术授课时间授课时数6课时授课课题第7章手机UI的立体图标制作授课形式教师讲授教学目的与要求手机UI的立体图标制作，介绍3D立体图标的表现技法。 本章讲解平面图标的技术延伸，通过倒角、阴影及光线来处理视觉效果。 教学重点 1、介绍3D立体图标的表现技法，讲解手机UI的立体图标制作方法 2、学习通过平面图标的技术延伸，通过倒角、阴影及光线来处理视觉效果教学难点 1、掌握手机UI的立体图标制作表现技法 2、熟练掌握制作立体图标的操作步骤，利用倒角、阴影及光线等技术手段处理不同的视觉效果教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入立体图标就是根据平面矢量图形进行二次加工，将导角、阴影、光泽、渐变填充等特效添加到形状上，从而得到光影和质感。 3d立体图标和光影的关系是脱离不了的，读者可以适当学习一些美术基础知识。 二、新课教学大纲实战01Dribbbleb图标制作实战02按钮图标制作实战03Chrome图标制作实战04twieer图标制作实战05照相机图标制作 三、课程安排实战1Dribbbleb图标制作通过本实战的学习，读者将学会使用图层样式工具、钢笔工具、图层蒙版、圆角矩形工具等制作一个Dribbbleb图标。 本例以圆角矩形为基本图形，大量运用了Photoshop内置的图层样式效果，让图标变得有视觉立体感。 详细演示Dribbbleb图标制作的操作步骤。 实战2按钮图标制作通过本实战的学习，读者将学会使用用图层样式工具、钢笔工具、图层蒙版、圆角矩形工具等制作一个按钮图标。 本例以圆角矩形为基本图形，大量运用了Photoshop内置的图层样式效果，让图标变得有视觉立体感。 详细演示按钮图标制作的操作步骤。 实战3Chrome图标制作通过本实战的学习，读者将学会使用剪贴蒙版将Chrome图标素材嵌入到圆角矩形基本形中，使用图层样式为图标添加立体感。 详细演示Chrome图标制作的操作步骤。 实战4twieer图标制作在本例中，圆角矩形工具绘制基本形，使用图层样式为图标效果，使其表现出强有力的视觉立体感，使用钢笔工具制作飞鸽，完成图标的制作。 详细演示twieer图标制作的操作步骤。 实战5照相机图标制作本例将制作一个金属渐变色的照相机图标，这里使用了圆角矩形工具和图形叠加功能，渐变色采用了黑白过渡，模拟出金属的高光反射效果。 详细演示照相机图标制作的操作步骤。 课后小结总结这节课上的内容学习如何制作手机UI的立体图标，充分利用3D立体图标的表现技法，提升图标设计的视觉效果。 课后思考内容?设计思路1图标设计的流程（灵活掌握）寻找隐喻搜集素材绘制草图确定风格制作图标调整细节产品上线?设计思路2如何让图标更具吸引力 （1）同一组图标风格的一致性 （2）图标里正确的透视和阴影 （3）合适的原创隐喻?知识扩展立体图标的设计原则 （1）视觉效果 （2）原创性 （3）尺寸大小和格式授课时间授课时数6课时授课课题第8章手机UI的按钮设计授课形式教师讲授教学目的与要求本章学习关于APP手机应用当中的细节设计，包括各种质感的按钮、开关、旋钮等的设计。 教学重点 1、介绍手机UI的按钮设计 2、介绍手机控件中最常见的按钮设计方法教学难点 1、掌握手机APP应用中的各种细节设计 2、熟练掌握制作各种控制键、按钮、旋钮、开关等设计制作的操作步骤教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入本章进入手机UI微观的设计世界，具体制作时可以自己拟定光源，分析高光部分，亮部部分，明暗交接线部分，暗部部分，以及暗部反光部分，投影部分等，分别在对应的部分加细节。 二、新课教学大纲实战01发光按钮实战02控制键按钮实战03播放器按钮实战04清新开关按钮实战05高调旋钮 三、课程安排实战1发光按钮本例将制作一个蓝色荧光发光按钮，这种开关按钮被大多数音频软件所采用，黑色的背景映射出蓝色渐变的光晕，十分醒目。 详细演示发光按钮制作的操作步骤。 实战2控制键按钮本例将制作一个半透明的白色按钮，中间产生了一个镂空荧光绿文字。 这种效果在iPod播放器的界面上经常采用。 详细演示控制键按钮制作的操作步骤。 实战3播放器按钮本例将制作一组播放器按钮，按下去的部分形成一个天蓝色的播放键，默认情况下是白色的按钮，受环境色影响，白色按钮产生了蓝色的反射。 详细演示播放器按钮制作的操作步骤。 实战4清新开关按钮本例将制作一系列具有清新风格的开关按钮，这是一整组UI设计中的若干开关按钮，尺寸略有不同，造型也有变化（凹凸方向不同）。 详细演示清新开关按钮制作的操作步骤。 实战5高调旋钮本例将制作一个高调的乳白色旋钮，这种设计被多次应用在了苹果系统的界面中。 简约的造型和色彩搭配无不体现出播放器的清新素雅风格。 详细演示高调旋钮制作的操作步骤。 课后小结总结这节课上的内容介绍制作手机UI的各种控制键、按钮、旋钮、开关等设计制作的操作步骤。 课后思考内容?设计思路如何设计和谐的交互1.不要强迫用户与产品讨论，让用户直接操作产品2.提供非模态的反馈3.为可能设计，为可能做好准备4.提供选择，而不是提问?知识扩展设计师关于按钮设计的几点建议1.关联分组2.层级关系3.善用阴影4.圆角边界5.强调重点6.按钮尺寸7.表述必须明确授课时间授课时数6课时授课课题第9章手机UI局部设计授课形式教师讲授教学目的与要求本章学习手机UI局部界面设计，包括登录界面、界面开关、通知列表、日历界面等控件表现，简要介绍进度条及配色卡的相关知识。 教学重点 1、介绍手机UI的局部界面设计 2、讲解进度条及配色卡的相关知识教学难点 1、介绍手机UI局部设计的相关知识，以及各种界面控件表现 2、讲解进度条及配色卡的相关知识教学方法与手段 一、课堂教学 1、讲授本章属于知识理论课，以教师讲授为主。 2、课堂提问为调动学生积极性，每节课要有35次师生的互动。 3、教师指导下的学生自学介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。 作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。 二、其它教学方法采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。 本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。 三、课外学习作业1课外练习。 教学内容及过程设计 一、课程导入一个友好美观的界面会给人带来舒适的视觉享受，拉近人与手机的距离，为商家创造卖点。 界面设计不是单纯的美术绘画，它需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的、科学性的、实用的艺术设计。 二、新课教学大纲实战01登录UI实战02设置UI开关实战03通知列表UI实战04日历UI 三、课程安排实战1登录UI本例制作一个登录界面输入框及按钮，登录界面在软件中较为常见，必须在有限的空间中妥善安排图文构成，在设计登录界面时首先应该考虑文字输入框的便利程度。 详细演示登录UI界面的操作步骤。 实战2设置UI开关本例制作一组界面开关，元素分别为开关按钮（打开和关闭两种状态）、立体图标、标题栏等。 制作时要求使用矢量图形工具，采用图层样式制作立体和阴影效果。 详细演示设置UI开关的操作步骤。 实战3通知列表UI本例制作一个通知列表界面，这是一组拟物化的图标，界面让人感觉比较平，仔细观察会发现它的表面会有一些细微的结构变化，而这正是这个练习的目的，运用图层样式做出细微的表面变化，表现细节。 详细演示通知列表UI的操作步骤。 实战4日历UI本例制作一个ios7系统下的日历界面，背景是一个磨砂玻璃效果的模糊图像，凸显出ios7的界面特性（这种风格偏向于扁平化，扁平化设计也是当下十分流行的设计方法）。 详细演示日历UI的操作步骤。 课后小结总结这节课上的内容介绍手机UI的局部界面设计制作步骤和方法，了解其各种界面的控件表现。 课后思考内容?设计思路如何制作配色卡1.向大自然学习配色，制作自己的配色卡2.将配色卡应用到实际工作中?知识扩展关于进度条设计的几点建议1.将提示信息放在输入框内，紧凑、有效2.进度条可以让用户觉得等待时间变短3.在进度条里可以加入一些有趣的提示和技巧授课时间授课时数4课时授课课题第10章手机UI零件设计大集合授课形式教师讲授教学目的与要求本章学习手机UI零件设计大集合，介绍手机UI零件设计的若干案例，包括进度条、音量控制按钮、选项控制按钮、导航列表等的制作方法。 教学重点 1、介绍手机UI零件设计大集合的相关知识 2、通过若干经典设计案例讲解进度条、音量控制按钮、选项控制按钮、导航列表等的制作方法教学难点通过介绍手机UI零件设计的若干案例，包括进度条、音量控制按钮、选项控制按钮、导航列表等的制作方法，让读者感到操作过程简单易学，体会到手机UI功能