Photoshop智能手机UI设计教案.docx

Photoshop智能手机UI设计教案.docx

《Photoshop智能手机UI设计教案.docx》由会员分享，可在线阅读，更多相关《Photoshop智能手机UI设计教案.docx（33页珍藏版）》请在冰豆网上搜索。

Photoshop智能手机UI设计教案

《Photoshop智能手机UI设计》课程教案

授课时间：

授课时数：

4课时

授课课题

第１章　手机UI设计概述

授课形式

教师讲授

教学目的与要求

智能手机UI设计概述，介绍优秀UI的特点、UI设计的布局与分类、制作优秀UI的注意事项。

教学重点

1、手机UI设计概述

2、UI设计的布局和分类

3、制作优秀UI的方法和注意事项

4、UI设计师的自我提升途径

教学难点

1、UI设计的布局和分类

2、制作优秀UI的操作步骤和方法

教学方法与手段

一、课堂教学

1、讲授

本章属于知识理论课，以教师讲授为主。

2、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

三、课外学习

作业1：

课外练习。

教学内容及

过程设计

一、课程导入

随着移动互联网的成长，通过移动App实现商品交易与社交越来越频繁，合理的人性化设计在AppUI（UserInterface）设计中凸现出举足轻重的地位。

优秀App的导航、布局、交互设计能够极大地提高终端设备易用性，对实现App的高效运作具有实际意义。

在设计UI之前，必须要弄清楚什么是智能手机的UI、优秀的UI呈现什么样子。

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

二、新课教学大纲

1.1　手机UI设计概述

1.1.1　什么是UI？

1.1.2　优秀的UI具有哪些特点

1.2　UI设计的布局和分类

1.2.1　UI设计的布局

1.2.2　UI设计的分类

1.3　如何制作出优秀的UI

1.4　UI设计师如何自我提升

1.4.1　形状/轮廓

1.4.2　美术基础

1.4.3　色彩识别

1.4.4　引导视觉

三、课程安排

1、什么是UI？

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

UI可以直译为用户界面，就是在用户使用工具完成任务的过程中，用户所做的操作以及工具的响应的总和。

比较科学的做法就是先设计UI，再做代码。

优秀的UI设计通常具有以下几个特点：

Ø简洁：

让用户找起内容很容易。

Ø美观：

让用户看到很开心。

Ø清晰：

不容易让用户感到困惑。

Ø高效：

能够帮助用户提高效率，节约时间。

Ø容错：

允许用户犯错误。

Ø响应：

操作界面后反应迅速。

Ø熟悉：

让用户第一眼就感觉“认识”。

Ø一致：

整个软件都是一致的。

2、UI设计的布局和分类

（1）不同的操作系统在设计APP时有所异同，分别对iPhone、Android、WindowsPhone的APPUI布局进行剖析对比，从而了解不同的系统在APP设计时的异同。

✧iPhone系统的UI元素一般分为三个部分：

状态栏、导航栏（标题）、标签栏/工具栏。

✧Android系统的布局界面元素一般分为四个部分：

状态栏、标题栏、标签栏、工具栏。

✧WindowsPhone布局界面元素一般分为四个部分：

状态栏、标题栏、枢轴和工具栏。

（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、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

三、课外学习

作业1：

课外练习。

教学内容及

过程设计

一、课程导入

随着智能手机以及互联网的飞速发展，是目前以及未来比较吃香的设计专业，智能手机UI的设计基础是基于优秀的平面设计能力和对Photoshop软件的熟练掌握。

读者需要了解Photoshop软件的界面构成与计算机图像设计的基本知识，熟练掌握各种图像处理工具的使用。

二、新课教学大纲

2.1　关于手机

2.1.1　智能手机操作系统的分类

2.1.2　手机屏幕的分辨率

2.1.3　屏幕的色彩

2.2　UI设计相关知识

2.2.1　什么是UI设计

2.2.2　UI设计的目的和重要性

2.2.3　UI设计中最重要的元素是什么

2.2.4　平面UI与手机UI的不同

2.3　UI设计的原则

三、课程安排

1、深入了解手机的各项性能

要让读者对手机有更全面整体的认识，介绍智能手机操作系统的分类，目前智能手机的操作系统有WindowsPhone、WindowsMobile、iOS、Android、PlamOS、BlackBerryOS等。

本书中UI设计主要是针对Android、iOS、WindowsPhone这三个最热门的系统进行设计的。

手机屏幕分辨率对于手机的显示性能来讲至关重要，我们常用的手机屏幕分辨率规格共有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软件进行APPUI设计的基础知识，通过一组图标的设计过程演示来学习手机UI图标的设计流程。

教学重点

1、理解UI设计的准则

2、介绍图标设计的格式和大小

3、掌握图标设计的制作过程和要点

教学难点

1、UI设计的准则

2、图标设计的制作过程和要点

教学方法与手段

一、课堂教学

1、讲授

本章属于知识理论课，以教师讲授为主。

2、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。

三、课外学习

作业1：

课外练习。

教学内容及

过程设计

一、课程导入

JeffJohnson，拥有耶鲁大学及斯坦福大学心理学学位，UIWizards公司董事长兼首席顾问。

他是GUI设计的先驱，著有畅销书《GUI设计禁忌》。

根据JeffJohnson的观点论述，目标用户要在以下3个独立的知识维度上进行划分。

Ø用户对计算机的总体知识了解多少？

Ø用户执行目标任务的熟悉程度如何？

Ø用户对特定产品或类似产品的了解程度如何？

二、新课教学大纲

3.1　UI设计的准则

3.2　图标设计的格式和大小

3.2.1　JPEG格式

3.2.2　PNG格式

3.2.3　GIF格式

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、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。

三、课外学习

作业1：

课外练习。

教学内容及

过程设计

一、课程导入

利用图形工具可以简单、轻松地制作出各种形态的图像，另外还可以组合基本形态的图像，制作出复杂的图形以及任意的形态，本章将学习图像的制作方法。

使用图形工具，可以制作出漂亮的图形对象并且不受分辨率的影响。

为了方便用户绘制不同样式的图形形状，Photoshop提供了一些基本的图形绘制工具。

利用图形工具可以在图像中绘制直线、矩形、椭圆、多边形和其他自定义形状。

二、新课教学大纲

实战01　Home图标制作

实战02　日历图标制作

实战03　录音机图标制作

实战04　文件夹图标制作

实战05　徽章图形

实战06　秒表图形

二、课程安排

实战1：

Home图标制作

实例是制作单色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、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再通过教师的现场辅导、示范讲解及作业讲评，强化与巩固学生对课程内容的理解和应用能力。

三、课外学习

作业1：

课外练习。

教学内容及

过程设计

一、课程导入

在智能手机的UI设计中字体特效的表现非常重要，美观的字体和字效设计能够让图标如虎添翼，能够让界面更加吸引人，具有强烈的视觉冲击力。

因此，作为设计师，能够制作高质量的字体特效是一件非常重要的事情。

二、新课教学大纲

实战01　车灯字体

实战02　星星字体

实战03　牛仔布料字体

三、课程安排

实战1：

车灯字体

通过本实战的学习，读者将学会使用横排文字工具以及大量的图层样式工具制作车灯字体，为文字添加投影、立体且具有厚度感的效果。

详细演示车灯字体特效制作的操作步骤。

实战2：

星星字体

通过本实战的学习，读者将学会使用横排文字工具和画笔描边路径制作星星字体，大量使用画笔面板中的选项，为文字添加星星效果。

详细演示星星字体特效制作的操作步骤。

实战3：

牛仔布料字体

通过本实战的学习，读者将学习一种技术难度较大的字体描边和定义图案的技巧，用来制作牛仔布锁边的特效，这种效果常用于App的logo特效和icon特效中。

详细演示牛仔布料字体特效制作的操作步骤。

课后小结

总结这节课上的内容：

学习如何制作高质量的字体特效，通过实例演示介绍手机UI设计中比较难处理的几种字体特效案例。

课后思考内容

✧设计思路：

在APPUI中如何控制字号

1.手机客户端字体大小设计的重要性

2.让设计与开发顺利接轨的字体规范

✧知识扩展：

字体配色的那点事

1.配色不宜超过三种

2.只需要明白三个关键词：

叠加、柔光和透明度

3.实战演示

授课时间：

授课时数：

8课时

授课课题

第6章　手机UI的质感表现

授课形式

教师讲授

教学目的与要求

手机UI的质感表现，介绍通过光效、渐变等手法来表现金属、木头、陶瓷、玻璃等UI图标常见的物体质感。

教学重点

1、介绍手机UI的质感表现

2、通过光效、渐变等手法呈现UI图标常见的物体质感

教学难点

1、介绍手机UI各种的不同质感表现

2、熟练掌握制作常见物体质感特效的操作步骤

教学方法与手段

一、课堂教学

1、讲授

本章属于知识理论课，以教师讲授为主。

2、课堂提问

为调动学生积极性，每节课要有3~5次师生的互动。

3、教师指导下的学生自学

介绍了作者常用的网络资源，其中包括有助于学习的技术论坛、图库、常用字体等资料和辅助设计工具等。

作者所提供的所有实例多媒体教学视频、实例素材和源文件，读者可以根据所给网址下载，通过反复练习可以提高实操能力。

二、其它教学方法

采用多媒体辅助教学手段，结合传统教学方法，解决好教学内容多、信息量大与学时少的矛盾；充分利用学校的图书馆的资源优势，查阅与课程相关的资料；通过布置课程设计来提高学生的综合处理问题的能力和实际设计能力。

本课程采用讲授与学生实际动手操作相结合的方式授课，利用多媒体课件，结合大量图片、图例的分析与观摩来讲授理论知识，增加了学习的趣味性，激发学生们动手操作的主动性，学生在教师指导下完成各单元作业，学生们把徒手绘制的草图利用计算机绘制后呈现出效果图，再