资源简介

(共20张PPT)
本章介绍：
本章对UI页面的标注、UI页面的切图以及UI页面的命名等基础知识及相关规则进行系统讲解与演练。通过本章的学习，读者可以对UI设计输出有一个基本的认识，并快速掌握相关UI的输出。
项目6　
快速输出UI设计—UI设计输出
学习引导
熟悉UI页面的标注内容
掌握UI页面切图的切图规则
了解UI页面的常用命名
掌握UI页面的标注
掌握UI页面的切图
掌握UI切图的命名
培养良好的UI设计输出习惯
培养一定的团队合作能力
任务6.1 标注旅游类App注册登录页
任务引入
任务知识
任务实施
6.1.1 任务引入
本任务通过学习使用软件PxCook标注旅游类App注册登录页，掌握注册登录页的标注方法。
6.1.2 任务知识：PxCook
PxCook，又名像素大厨，是一款可以进行自动标注并生成切图的软件。自2.0.0版本开始，该软件便可以支持PSD文件的文字，颜色，距离自动智能识别。
6.1.3 任务实施
任务6.2 制作旅游类App注册登录页切图
任务引入
任务知识
任务实施
6.2.1 任务引入
本任务通过学习使用插件Cutterman对旅游类App注册登录页切图，掌握注册登录页的切图方法。
6.2.2 任务知识：Cutterman
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便在pc、ios、Android等端上使用。
6.2.3 任务实施
任务6.3 命名旅游类App注册登录页切图
任务引入
任务知识
任务实施
6.3.1 任务引入
本任务通过学习命名规则对旅游类App注册登录页切图命名，掌握注册登录页切图的命名方法。
6.3.2 任务知识：命名规则
UI页面中内容的命名规则需要注意组成、符号以及格式三个方面。命名的组成，需要使用小写英文字母，不建议使用中文。命名符号，需要使用下划线“_”来进行单词之间的连结。命名格式需要遵守“组件_类别_名称_状态@倍数”的格式进行命名。
6.3.3 任务实施
任务6.4 项目演练-切图命名电商类App注册登录页
任务引入
任务实施
6.4.1 任务引入
本任务通过使用PxCook软件标注页面，使用Cutterman进行切图，按照UI页面命名规范对切图效果进行命名。
6.4.2 任务实施
运用PxCook为电商类App注册登录页标注进行标注。在Photoshop中安装插件Cutterman，为电商类App注册登录页进行切图。为电商类App注册登录页切图进行命名。
任务6.5 项目演练-切图命名餐饮类App注册登录页
任务引入
任务实施
6.5.1 任务引入
本任务通过使用PxCook软件标注页面，使用Cutterman进行切图，按照UI页面命名规范对切图效果进行命名。
6.5.2 任务实施
运用PxCook为餐饮类App注册登录页标注进行标注。在Photoshop中安装插件Cutterman，为餐饮类App登录页进行切图。为餐饮类App登录页切图进行命名。

展开更多......

收起↑