《移动终端UI设计》教学教案09切图与标注.docx

《《移动终端UI设计》教学教案09切图与标注.docx》由会员分享，可在线阅读，更多相关《《移动终端UI设计》教学教案09切图与标注.docx（8页珍藏版）》请在第一文库网上搜索。

1、* 学柠教师教案（ 学年第学期）课程名称：移动终端UI设计授课专业：任课教师：所在系部：2019年7月第9章切图与标注任务名称教学目的教学方法教学手段重点难点教学内容设计9.1切图工具与标注工具一熟悉切图工具与标注工具类型及特点讲授法、案例法一多媒体教学、手机客户端一重点：熟悉切图工具、标注工具的功能与使用技巧难点：下载、安装切图工具与标注工具授课内容:9. 1. 1 Cutterman 切图神器标注和切图的工作，是UI设计师必须要做的，学会使用工具可以起到事半功倍的效果。1 .一键切图。2 .支持IOS平台输出。3 .支持ANDROID平台输出。4 .支持各种图片格式输出。5 .多个图层合并

2、、单独输出。6 .使用固定尺寸输出统一大小的icon；7 .跨平台，多版本支持mac系统、windows系统。9.1. 2 Assistor PS切图标记软件其主要功能如下：1 .轻松创建标记文档，一键导出图层2 .单位数值转换快速3 .快速创建参考线（类似GuideGuide）4 .圆角矩形调整5 .按照固定的间隔复制图层9. 1. 3 PxCook像素大厨PxCook标注功能也是很强大的，它的优点在于将标注、切图这两项设计完稿后集成在一个软件内完成，支持Windows和Mac双平台。通过简单的拖拽点选，就可以实现自动标注功能，无论用Photoshop,还是用Sketch设计都可以。值得提示

3、的一点是，PxCook可以生成前端代码，对设计师来说非常有帮助！官网下载地址：总结课程内容，重申重点、难点课后作业下载切图工具、标注工具，练习切图与标注。第9章切图与标注任务名称9.2切图教学目的使用切图工具进行切图操作教学方法讲授法、案例法教学手段多媒体教学、手机客户端重点难点重点：切图规范与切图操作难点：点九切图法授课内容：9. 2.1 APP切图命名规范1 .规范的命名的意义（1）自身层面。（2）团队层面。（3）开发层面。2 .命名格式通用切片命名格式为：组件类别功能状态2x, png。例如：设置标签栏中的图标为主页默认图标，命名为：tabbar icon_home_default2x.

4、 pngo这样从文件名就可以知道当前的图所在的位置，并且可以知道是哪一张图，比较直观。模块特有切图命名规则为：模块类别功能状态2x.png,可以命名为：mail icon search pressed2x. pngo3 .常用缩写教学缩写命名全称缩写命名。全称2叱back&iid 背景/navnavbar导航栏下内容tabr地或标签栏Jbtn*jbutton 按钮一in区*image 图片。debdelete删除赈既message提不信息pop*5pop up弹出设计icon,图标Quser3用户。back*5返回note/注替contents内容。left/center/rights左/中/

5、右2log。/标识。log in,登录Cbanners广告2link,链接2表9-2常用状态命名命名。状态.命名“状态.、default默认，selected*5选中2disabled*禁用（置灰）press/单击（按下）9. 2.2切图注意事项1 .输出格式。2.尺寸为偶数。3.最小点击区域问题,小，所有切图尽量压缩后再给开发人员。9. 2.3通用切图法1.图标切图, 4.为了减小包的大2 .顶部栏目的背景切图3 .固定大小切图9.2.4 Android点九切图法1 .什么是点九切图点九切图法是Android的一种特殊图片格式，将图片分成9个部分（九宫格），分别为4个角，4条边，以及一个中间

6、区域，如图9-14所示。上方2区域表示横向拉伸的区域，左边4区域表示纵向拉伸的区域，下方8区域表示横向显示内容的区域，右方区域6表示纵向显示内容的区域。2 .基本形状点九切图1像素黑线3 .下拉框点九切图4 .聊天背景切图5 .复杂背景切图总结课程内容，重申重点、难点课后作业下载切图工具、标注工具，练习切图与标注。第9章切图与标注任务名称教学目的教学方法教学手段重点难点9.3标注学会使用标注工具进行专业标注讲授法、案例法多媒体教学、手机客户端重点：使用标注工具进行界面标注难点：界面框架标注、间距标注、文字标注授课内容:9. 3.1 了解标注通常我们需要标注的内容有：1 .文字：字体大小、字体颜

7、色2 .段落文字：字体大小、字体颜色、行距3 .布局控件属性：控件宽高、背景色、透明度、描边、圆角大小4 .列表：列表高度、列表颜色、列表内内容上下左右间距5 .间距：控件之间的距离、左右边距6 .全部属性：如导航栏文字大小、颜色，左右边距，默认间距等。教学内容设计9. 3. 2编辑制作标注1 .创建标注项目2 .界面框架标注3 .功能菜单、按钮标注4 .间距标注5 .文字标注项目视图帮助。设计 开发/晶，1 一 X 永g H Cl P Pt 强自冰RGBA | Hex) 期2 回总结课程内容，重申重点、难点课后作业下载切图工具、标注工具，练习切图与标注。任务名称 94实战：为一款首页面切图教

8、学目的 针对不同UI界面进行切图分析与规划，并能熟练切图与保存教学方法讲授法、案例法教学手段多媒体教学、手机客户端重点难点重点：界面切图分析与切图规划难点：图片规范命名授课内容:9. 4.1切图分析该区域包含文字、图标、圆形，矩形和一些分割线。其中图标是需要切图的；文字只需要标注字体、字号和颜色值；日历数字的圆形背景可以进行开发，只需要标注尺寸和颜色值即可；分割线也可以进行开发，只需要标注描边的粗细值以及线条长度值和颜色值即可。另外注意这些元素都需要标注尺寸、位置以及间距。教学内容设计9. 4.2切图实战其主要功能如下：1 .准备切图工具2 .界面顶部切图3 .图标切图4 .圆角背景切图总结课程内容，重申重点、难点课后作业下载切图工具、标注工具，练习切图与标注。