UI设计（项目式全彩微课版）课件 项目5、6　打造生动的页面-UI页面设计、快速输出UI设计-UI设计输出

本章介绍：

本章对闪屏页、引导页、首页、个人中心页、详情页以及注册登录页等常用页面的基础知识及绘制方法进行系统讲解与演练。通过本章的学习，读者可以对UI页面设计有一个基本的认识，并快速掌握绘制UI中常用页面的规范和方法。项目5打造生动的页面—UI页面设计学习引导掌握UI页面的设计规则掌握UI页面的核心模块了解UI页面的设计思路掌握UI页面的制作方法培养对UI页面的审美鉴赏能力培养对UI页面的设计创意能力任务5.1

设计旅游类App闪屏页任务引入任务知识设计理念任务实施5.1.1任务引入本任务通过学习使用软件Photoshop设计旅游类App闪屏页，掌握闪屏页的设计要点与制作方法。5.1.2设计理念在设计过程中，围绕旅游类App闪屏页进行创意。整体设计具有突出产品、展示营销的作用。以实际图片作为背景，能够增强用户对产品的期待。“产品logo+产品名称+产品”的简洁化设计形式，使视觉更加舒适，突出重点。5.1.3任务知识使用“置入嵌入对象”命令置入图像，使用“颜色叠加”命令添加效果。5.1.4任务实施任务5.2设计旅游类App引导页任务引入任务知识设计理念任务实施5.2.1任务引入本任务通过学习使用软件Photoshop设计旅游类App引导页，掌握引导页的设计要点与制作方法。5.2.2设计理念在设计过程中，围绕旅游类App引导页进行创意。整体设计具有操作引导、讲解功能的作用。背景采用了与旅游类相关的风景图片，符合旅游类APP的品牌调性，同时能够增强用户对产品的期待，让用户更了解这款APP的情怀。视觉表现应与任务5.1的设计风格保持一致。5.2.3任务知识使用“置入嵌入对象”命令置入图像和图标，使用“渐变叠加”命令和“颜色叠加”命令添加效果，使用“横排文字”工具输入文字。5.2.4任务实施任务5.3设计旅游类App首页任务引入设计理念任务知识任务实施5.3.1任务引入本任务通过学习使用软件Photoshop设计旅游类App首页，掌握首页的设计要点与制作方法。5.3.2设计理念在设计过程中，围绕主题旅游进行创意。背景为纯色和风景图片作为衬托。多种色彩呈现了丰富的设计形式。字体选用苹方和方正兰亭大黑起到了呼应主题的作用。页面是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的综合性页面，能够满足用户的多种需求。视觉表现应与任务5.1的设计风格保持一致。整体设计充满特色，契合主题。5.3.3任务知识使用“圆角矩形”工具、“矩形”工具和“椭圆”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“渐变叠加”命令添加效果，使用“属性”面板制作弥散投影，使用“横排文字”工具输入文字。5.3.4任务实施任务5.4设计旅游类App个人中心页任务引入设计理念任务知识任务实施5.4.1任务引入本任务通过学习使用软件Photoshop设计旅游类App个人中心页，掌握个人中心页的设计要点与制作方法。5.4.2设计理念在设计过程中，围绕主题旅游进行创意。背景为纯色和风景图片作为衬托。色彩选取橘黄色、深黄色和浅灰色分别体现了欢快、热情和柔和。字体选用苹方符合设计规范。视觉表现应与任务5.1的设计风格保持一致。整体设计充满特色，契合主题。5.4.3任务知识使用“圆角矩形”工具、“矩形”工具、“椭圆”工具和“直线”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“渐变叠加”命令添加效果，使用“属性”面板制作弥散投影，使用“横排文字”工具输入文字。5.4.4任务实施任务5.5项目演练-设计旅游类App详情页任务引入设计理念5.5.1任务引入本任务通过学习使用软件Photoshop设计旅游类App详情页，掌握详情页的设计要点与制作方法。5.5.2设计理念在设计过程中，围绕主题旅游进行创意。背景为纯色和风景图片作为衬托。色彩选取橘黄色、深黄色和浅灰色分别体现了欢快、热情和柔和。字体选用苹方符合设计规范。视觉表现应与任务5.1的设计风格保持一致。整体设计充满特色，契合主题。任务5.6项目演练-设计旅游类App注册登录页任务引入设计理念5.6.1任务引入本任务通过学习使用软件Photoshop设计旅游类App注册登录页，掌握注册登录页的设计要点与制作方法。5.6.2设计理念在设计过程中，围绕主题旅游进行创意。整体设计具有清晰的操作流程。以实际图片作为背景，能够增强用户对产品的期待。色彩选用橙色能够体现旅游的欢快热情并突出重点。字体选用苹方符合设计规范。视觉表现应与任务5.1的设计风格保持一致。任务5.7项目演练-设计电商类App页面任务引入设计理念5.7.1任务引入本任务通过学习使用软件Photoshop绘制电商类App页面，掌握电商类App页面的设计要点与制作方法。5.7.2设计理念在设计过程中，围绕电商类App页面进行创意。整体呈现出简约精致的视觉效果。本章介绍：

本章对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任务知识：PxCookPxCook，又名像素大厨，是一款可以进行自动标注并生成切图的软件。自2.0.0版本开始，该软件便可以支持PSD文件的文字，颜色，距离自动智能识别。6.1.3任务实施任务6.2制作旅游类App注册登录页切图任务引入任务知识任务实施6.2.1任务引入本任务通过学习使用插件Cutterman对旅游类App注册登录页切图，掌握注册登录页的切图方法。6.2.2任务知识：CuttermanCutterman是一款运行在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注册登录页