UI设计基础与应用 教案.pdfVIP

UI设计基础与应用教学教案

第1章UI设计入门知识

课时内容UI设计入门知识授课时间课时

/认识UI设计

/掌握UI设计方向

教学目标

/掌握UI设计规范

/掌握UI设计流程

AutoCAD的新本

教学重点AutoCAD三种工作空间

AutoCAD软件入门操作

教学难点图形文件的管理、操作命令的执行方式

1、教学思路：（1）讲解认识UI设计，包括UI设计概念、设计原则、常用软件。

2（）讲解UI设计方向，包括交互设计、界面设计、用户研究。（3）讲解UI设计规范，

包括一致性原则、准确性原则、可读性原则、石局合法化原则等等。4（）讲解U1设计

流程，包括需求分析、交互分析、视觉分析、交付开发、设计走查。

教学设计

2、教学手段：（1）通过介绍AutoCAD软件基本功能，讲解大量案例的制作操作步

骤，结合课堂实战及知识拓展巩固所学知识。2（）对于重点内容着重讲解。

3、教学资料及要求：通过介绍AutoCAD软件基本功能，该软件主要用于二维绘图、

详细绘制、设计文档和基本三维设计，为以后学好此软件做好铺垫。

教学场景

教学内容

内容大纲：具体可结合本章的PPT课件进行配合讲解。

认识UI设计

掌握UI设计方向

小结

掌握UI设计规范

掌握UI设计流程

1.除了使用Photoshop工具切图，还有什么专业的切图工具推荐？

AssistorPS和PxCook都是UI切图与标注软件。其中AssistorPS需要和Photoshop

搭配使用，而PxCook则可独立运行。

知识扩展

2.有什么用于页面标注的工具或插件推荐？

使用Photoshop标注页面会很浪费时间，使用智能的工具插件可让繁琐的工作事半功

倍。首推markman墨客，覆盖主流设计工具，可以快速的标注出元素的尺寸和颜色，也

能添加文字注释。支持自动标注和手动标注，避免疏漏，准确达到设计要求。除此之外

PxCook和AssistorPS既可以切图也可以用于页面标注。

1.在Photoshop中怎么绘制栅格系统？

在Photoshop中可以借助“新建参考线版面”绘制栅格系统。执行“视图”I“新建参

考线版面”命令，在弹出的“新建参考线版面”对话框选择预设栅格系统，例如8歹I」、

12歹I」、24歹上其“装订线”为水槽的宽度，默认为20像素。勾选“边距”复选框可

以设置边距参数。除了使用预设的栅格系统，还可以自定义，并能将栅格参数保存为预

设。

M«(S):自定

:

目标：圆布