《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 实现商品交易与社交越来越频繁，合理的人性化 设计在 App UI（User Interface）设计中凸现出举足轻重的地位。优秀 App 的导航、布局、交 互设计能够极大地提高终端设备易用性，对实现 App 的高效运作具有实际意义。在设计 UI 之前，必须要弄清楚什么是智能手机的 UI、优秀的 UI 呈现什么样子。好的 UI 设计不仅是让软件变得有个性， 有品味，还要让软件的操作变得舒适、简单、自由，充分体 现软件的定位和特点。
二、新课教学大纲
1.1　手机 UI 设计概述
1.1.1　什么是 UI ？
        1.1.2　优秀的 UI 具有哪些特点
1.2　UI 设计的布局和分类
1.2.1　UI 设计的布局
计算机专业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、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 设计的基本 要素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。