UI设计（项目式全彩微课版）课件全套 项目1-6　走进UI设计的世界 UI设计基础-快速输出UI设计 UI设计输出

本章介绍：

本章对UI设计的基本概念、常用软件、项目流程以及规范与规则进行系统讲解。通过本章的学习，读者可以对UI设计有一个系统的认识，有助于高效便利地进行后续的UI设计工作。项目1走进UI设计的世界—UI设计基础学习引导理解UI设计的基本概念了解UI设计的常用软件熟悉UI设计的项目流程熟悉UI设计的软件操作掌握UI设计的规范与规则培养对UI设计的基本兴趣任务1.1

理解UI设计的基本概念任务引入任务知识任务实施1.1.1任务引入

本任务通过掌握UI设计的相关概念了解UI设计，并通过到花瓣网调研UI设计的实际应用，进一步理解UI设计的基本概念。1.1.2任务知识：UI设计的基本概念UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（InteractionDesign，IxD）的可用性及用户体验（UserExperience，UE/UX）的友好度。1.1.3任务实施（1）启动浏览器，打开花瓣网官网，单击右侧的“登录/注册”按钮，在弹出的对话框中选择登录方式并登录。1.1.3任务实施（2）在搜索框中输入关键词“UI设计”，按Enter键，进入搜索页面。（3）单击页面上方的“画板”选项，发现与UI设计相关的有图标设计、App界面设计以及网页设计等画板。选择其中的“APP界面”画板，单击“关注”按钮，收藏该画板。也可以根据调研需要关注收藏其他UI设计相关的画板。1.1.3任务实施（4）单击收藏的“APP界面”画板，进入该画板，通过调研赏析该画板中UI设计的实际应用案例，更好地理解UI设计的基本概念。使用上述方法，调研赏析其他UI设计相关的画板，进一步理解UI设计。任务1.2了解UI设计的常用软件任务引入任务知识任务实施1.2.1任务引入本任务通过了解UI设计的常用软件来熟悉UI设计的具体内容，并通过到各软件相关官网调研了解软件辅助UI设计的功能、技术和实现效果。1.2.2任务知识：UI设计的常用软件根据软件的专业性、市场的认可度及用户的使用量等因素可以将UI设计的常用软件总结为界面设计、动效设计、网页设计、3D渲染、思维导图以及交互原型这六类，建议初学者先掌握Photoshop（简称PS）和Illustrator（简称AI），有条件购买苹果电脑的话还要掌握Sketch和Figma。1.2.3任务实施（1）以软件Photoshop为例。Photoshop是Adobe公司旗下的图像处理软件，因此，启动浏览器，打开Adobe公司中国官网，单击“创意和设计”按钮，在展开的选项中选择“Photoshop”选项，跳转到Photoshop相关网页。1.2.3任务实施（2）在此页面中有着Photoshop软件的相关功能介绍和具体操作方法，能够更好地了解Photoshop软件，使用上述方法，了解Illustrator、Sketch和Figma等其他UI设计常用软件的相关功能、技术和实现效果。任务1.3熟悉UI设计的项目流程任务引入任务知识任务实施1.3.1任务引入本任务通过到UI中国调研、赏析UI设计中的完整项目，熟悉UI设计的项目流程。1.3.2任务知识：UI设计的项目流程针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节。1.3.3任务实施（1）启动浏览器，打开UI中国官网，单击右侧的“登录/注册”按钮，在弹出的对话框中选择登录方式并登录。1.3.3任务实施（2）单击左侧的“发现”按钮，在弹出的菜单中选择“作品”选项，进入作品页面。1.3.3任务实施（3）单击页面左上角的“全部分类”选项，选择“App”选项，出现了大量App项目。点击进入其中一个项目，可以查看到该项目的完整设计过程，通过调研赏析该App项目，可以熟悉UI设计的项目流程。使用上述方法，调研赏析其他UI设计项目，进一步熟悉UI设计的项目流程。任务1.4掌握UI设计规范与规则任务引入任务知识任务实施1.4.1任务引入本任务通过掌握设计单位、设计尺寸、适配方案、设计结构、间距规范、文字规范、图标尺寸以及图片比例掌握UI设计规范与规则，并通过到优设网收集、阅读UI设计规范相关的文章，进一步掌握UI设计的规范与规则。1.4.2任务知识：UI设计规范与规则UI设计的基础规范与规则可以令设计师在进行设计时更加事半功倍。下面主要介绍单位、尺寸、适配、结构、间距、文字图标以及图片的基础规范与规则。1.4.2任务知识：UI设计规范与规则1.单位介绍（1）DPI和PPIPPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，通常代表苹果手机。DPI：网点密度（DotsPerInch，DPI）是打印分辨率单位，表示每英寸打印的点数，通常代表安卓手机。1.4.2任务知识：UI设计规范与规则1.单位介绍（2）px、pt、dp、sppx：像素（pixels，px）是物理像素（PhysicalPixel）的单位，属于相对单位，会因为屏幕像素密度变化而变化。运用Photoshop软件进行UI设计时使用的单位,运用此单位需要兼容不同分辨率的界面。pt：点（points，pt）是逻辑像素（LogicPoint）的单位，属于绝对单位，不会因为屏幕像素密度变化而变化。iOS开发及运用Sketch软件进行UI设计使用的单位。dp：独立密度像素（Density-independentPixels，dp），是安卓设备上的基本单位，用于非文字单位，等同于苹果设备上的pt。sp：独立缩放像素（Scale-independentPixels，sp），是Android设备上的字体单位。用户可以根据自己需求调整字体尺寸，当文字尺寸是“正常”状态时，1sp=1dp。1.4.2任务知识：UI设计规范与规则2.设计尺寸iOS常见的设备尺寸在进行界面设计时，为了适配大部分尺寸，推荐以iPhoneX/Xs/11pro为基准。如果使用Photoshop就创建750px×1624px尺寸的画布，如果使用Sketch就建立375pt×812pt尺寸的画布。Android常见的设备尺寸，在进行界面设计时，如果想要一稿适配Android和iOS，就使用Photoshop新建720px×1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android设计稿，就使用Photoshop新建1080px×1920px尺寸的画布。无论哪种需求，使用Sketch只建立360dp×640dp尺寸的画布即可。1.4.2任务知识：UI设计规范与规则3.适配方案一套App界面设计数量通常在80～150页。由于Photoshop是使用px单位进行UI设计，因此在适配时还需要额外设计出其他机型的页面。而Sketch、XD、Figma等软件是使用pt单位进行UI设计，因此在适配时无需额外设计。1.4.2任务知识：UI设计规范与规则4.设计结构在iOS系统中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成。自全面屏上市，界面较之前还多了虚拟主页键。Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成。1.4.2任务知识：UI设计规范与规则5.间距规范在App间距中，8倍数和10倍数的尺寸常被使用，例如在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px及50px。而4倍数的尺寸则可以用于较亲密的元素之间。1.4.2任务知识：UI设计规范与规则6.文字规范系统字体（1）iOS系统旧金山字体：旧金山字体是非衬线字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText（文本模式）适用与小于19pt的文字，SFUIDisplay（展示模式）适用于大于20pt的文字。纽约字体：纽约字体是衬线字体，旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20到35pt之间的文本使用中号，对于36到53pt之间的文本使用大号，对于54pt或更大的文本使用特大号。1.4.2任务知识：UI设计规范与规则6.文字规范系统字体（2）Android系统Roboto：在Android系统中，英文使用的是Roboto字体，该字体共有6个字重。思源黑体：在Android系统中，中文使用的是思远黑体字体，又称为“SourceHanSans”或“Noto”，共有7个字重。1.4.2任务知识：UI设计规范与规则6.文字规范字体尺寸苹果和MaterialDesign提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pt，但使用中文时14pt和12pt更加合适。为了区分标题和正文，字体大小差异至少保持在2pt及以上。行高西文通常为1.3～1.5倍，中文采用1.5～2倍。1.4.2任务知识：UI设计规范与规则7.图标尺寸（1）应用图标概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。尺寸：应用图标的设计尺寸可以采用1024px，并根据iOS官方模版进行规范，正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。1.4.2任务知识：UI设计规范与规则7.图标尺寸（2）功能图标概念：功能图标即系统图标，是通过简洁现代的图形表达一些常见功能，主要应用于界面中的导航栏、工具栏以及标签栏等模块。尺寸：创建功能图标时，可以参考MaterialDesign设计语言，以24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。1.4.2任务知识：UI设计规范与规则8.图片比例图片通常需要按照固定比例进行设计，并应用于特定环境，如1:1尺寸的图片通常会作为头像使用。以下为整理好的图片常用比例及特定应用，以便大家进行后续设计。1.4.3任务实施（1）启动浏览器，打开优设网官网，在搜索框中输入关键词“UI规范”，单击右侧的搜索按钮或按Enter键，进入检索页面，选择“文章”这一类别，即可检索到有关UI规范的大量文章。1.4.3任务实施（2）单击这些文章，进入文章的详细信息页面，通过阅读这些UI设计规范相关的文章，熟悉掌握UI设计的规范与规则。本章介绍：

本章针对UI设计中常用的线性图标、面性图标以及线面图标进行系统的知识讲解与实操演练。通过本章的学习，读者可以对图标设计有一个系统的认识，并快速掌握绘制图标的规范和方法，为接下来的UI设计打下基础。项目2设计趣味的图标—UI图标设计学习引导掌握线性图标的风格特点掌握面性图标的风格特点掌握线面图标的风格特点掌握线性图标的制作方法掌握面性图标的制作方法掌握线面图标的制作方法培养良好的UI图标设计劳动习惯培养一定的UI图标设计创新能力和艺术审美能力任务2.1

设计旅游类App线性图标任务引入任务知识设计理念任务实施2.1.1任务引入本任务通过学习使用软件Illustrator绘制旅游类App标签栏中的“行程”图标，掌握线性图标的设计要点与制作方法。2.1.2设计理念在设计过程中，围绕旅游类App标签栏中的“行程”图标进行创意。图形选用“日历”作为核心创作元素，形象地表达行程之意。未点击状态采用形象简洁、设计轻盈的线性图标，呈现出干净的视觉效果。点击状态通过调整未点击状态的线性图标，转变为生动趣味、俏皮可爱的线面图标。色彩选灰色和橙色两种颜色，可以更好地区别不同的显示状态。同时橙色能够体现旅游的欢快热情，契合主题。2.1.3任务知识：Illustrator-变换命令熟练掌握“属性”面板调整基础图形，运用“变换”命令进行快速复制，通过“扩展外观”命令变成真实图像。2.1.4任务实施任务2.2设计旅游类App面性图标任务引入任务知识设计理念任务实施2.2.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App金刚区中的“酒店”图标，掌握面性图标的设计要点与制作方法。2.2.2设计理念在设计过程中，围绕旅游类App金刚区中的“酒店”图标进行创意。图形选用“高楼”作为核心创作元素，形象地表达酒店之意。整体采用形象饱满、视觉突出的面性图标，帮助用户快速进行图标的位置定位。色彩选用红橙渐变，能够体现入住酒店的温暖。2.2.3任务知识熟练掌握“圆角矩形”工具、“属性”面板和“合并形状“命令绘制基础图形，运用“渐变”工具为图标添加颜色渐变，通过“不透明度”选项的设置调整图标不透明度。2.2.4任务实施任务2.3设计旅游类App线面图标任务引入设计理念任务知识任务实施2.3.1任务引入本任务通过学习使用软件Illustrator绘制旅游类App标签栏中“攻略”图标，掌握线面图标的设计要点与制作方法。2.3.2设计理念在设计过程中，围绕旅游类App标签栏中的“攻略”图标进行创意。图形选用“星球”作为核心创作元素，形象地表达旅游攻略之意。点击状态采用生动趣味、俏皮可爱的线面图标。未点击状态通过调整点击状态的线面图标，转变为形象简洁、设计轻盈的线性图标。色彩选灰色和橙色两种颜色，可以更好地区别不同的显示状态。同时橙色能够体现旅游的欢快热情，契合主题。2.3.3任务知识：Illustrator-属性面板、扩展外观命令熟练掌握“属性”面板调整基础图形，通过“扩展外观”命令变成真实图像。2.3.4任务实施任务2.4项目演练——设计电商类App线性图标任务引入设计理念2.4.1任务引入本任务通过学习使用软件Illustrator绘制电商类App标签栏中的“购物车”图标，掌握线性图标的设计要点与制作方法。2.4.2设计理念使用“属性”面板进行调整使图标符合设计规范，扩展外观变成真实图像。任务2.5项目演练——设计餐饮类App面性图标任务引入设计理念2.5.1任务引入本任务通过学习使用软件Illustrator绘制餐饮类App标签栏中的“订单”图标，掌握面性图标的设计要点与制作方法。2.5.2设计理念使用“属性”面板进行调整使图标符合设计规范，扩展外观变成真实图像。本章介绍：

本章对按钮控件、选择控件、加减控件、分段控件、页面控件、反馈控件以及文本框控件等常用控件的基础知识及设计规则进行系统讲解与实操。通过本章的学习，读者可以对控件设计有一个系统的认识，并快速掌握绘制控件的规范和方法，为接下来的组件设计打下基础。项目3制作独特的控件—UI控件设计学习引导了解UI控件的基本概念明确UI控件的获取方法了解UI控件的设计思路掌握UI控件的制作方法培养对UI控件的审美鉴赏能力培养对UI控件的设计创意能力任务3.1

设计旅游类App按钮控件任务引入任务知识设计理念任务实施3.1.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App按钮控件，掌握按钮控件的设计要点与制作方法。3.1.2设计理念在设计过程中，围绕旅游类App按钮控件进行创意。整体采用形象饱满的面性按钮，令整体视觉更加突出。橙色既能明确操作又能吸引用户。3.1.3任务知识：圆角矩形工具、横排文字工具熟练掌握“圆角矩形”工具、“横排文字”工具的使用。3.1.4任务实施任务3.2设计旅游类App选择控件任务引入任务知识设计理念任务实施3.2.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App选择控件，掌握按钮控件的设计要点与制作方法。3.2.2设计理念在设计过程中，围绕旅游类App选择控件进行创意。图形选用“对号”作为核心创作元素，形象地表达允许用户选择选项之意。整体设计符合预期、一目了然。橙色既能明确操作又能吸引用户。3.2.3任务知识：变换命令熟练掌握“圆角矩形”工具，“椭圆”工具和“合并形状”命令绘制基础图形，运用“变换”命令将图标旋转。3.2.4任务实施任务3.3设计旅游类App加减控件任务引入设计理念任务知识任务实施3.3.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App加减控件，掌握加减控件的设计要点与制作方法。3.3.2设计理念在设计过程中，围绕旅游类App加减控件进行创意。整体采用形象简洁、设计轻盈的线性图标，呈现出简洁高效、操作方便的视觉效果。图标选灰色和橙色两种颜色，可以更好地区别不同的显示状态。同时橙色既能明确操作又能吸引用户。3.3.3任务知识：置入嵌入对象命令通过“横排文字”工具输入文字，运用“置入嵌入对象”命令置入图标，熟练掌握“直线”工具的使用。3.3.4任务实施任务3.4设计旅游类App分段控件任务引入设计理念任务知识任务实施3.4.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App分段控件，掌握分段控件的设计要点与制作方法。3.4.2设计理念在设计过程中，围绕旅游类App分段控件进行创意。整体呈现出内容丰富、选项同行的视觉效果。两种文字大小，可以更好地区别当前组与其他组。橙色既能明确操作又能强调当前内容。3.4.3任务知识熟练掌握“矩形”工具、“椭圆”工具和“圆角矩形”工具绘制形状，使用“横排文字”工具输入文字，使用“添加图层蒙版”命令和“画笔”工具修饰文字，使用“减去顶层形状”命令修饰形状。3.4.4任务实施任务3.5设计旅游类App页面控件任务引入设计理念任务知识任务实施3.5.1任务引入本任务通过学习使用软件Illustrator绘制餐饮类App标签栏中的“订单”图标，掌握面性图标的设计要点与制作方法。3.5.2设计理念在设计过程中，围绕旅游类App页面控件进行创意。整体呈现出小巧便利、状态明确的视觉效果。它以一系列线段的形式出现，表示可用页面的打开顺序，其中实线表示当前页面。3.5.3任务知识：直线工具使用“直线”工具绘制形状，运用“置入嵌入对象”命令置入图标，通过“横排文字”工具输入文字。3.5.4任务实施任务3.6设计旅游类App反馈控件任务引入设计理念任务知识任务实施3.6.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App反馈控件，掌握反馈控件的设计要点与制作方法。3.6.2设计理念在设计过程中，围绕旅游类App反馈控件进行创意。整体呈现出吸引用户、状态明确的视觉效果。红色既能吸引消费者的注意又能重点强调内容。3.6.3任务知识：椭圆工具使用“椭圆”工具绘制形状，使用“横排文字”工具输入文字。3.6.4任务实施任务3.7设计旅游类App文本框控件任务引入设计理念任务知识任务实施3.7.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App文本框控件，掌握文本框控件的设计要点与制作方法。3.7.2设计理念在设计过程中，围绕旅游类App文本框控件进行创意。整体呈现出编辑文本、操作高效的视觉效果。线性文本框的弱化有助于简化布局。3.7.3任务知识：字符面板使用“横排文字”工具输入文字，使用字符面板调整文字间距及位置，使用“直线”工具绘制形状。3.7.4任务实施任务3.8项目演练-设计电商类App文本框控件任务引入设计理念3.8.1任务引入本任务通过学习使用软件Photoshop绘制电商类App文本框控件，掌握文本框控件的设计要点与制作方法。3.8.2设计理念在设计过程中，围绕电商类App文本框控件进行创意。整体呈现出编辑文本、操作高效的视觉效果。线性文本框的弱化有助于简化布局。任务3.9项目演练-设计餐饮类App按钮控件任务引入设计理念3.9.1任务引入本任务通过学习使用软件Photoshop绘制餐饮类App按钮控件，掌握按钮控件的设计要点与制作方法。3.9.2设计理念在设计过程中，围绕餐饮类App按钮控件进行创意。图标选灰色和橙色两种颜色，可以更好地区别不同的层级关系。同时橙色既能明确操作又能吸引用户。本章介绍：

本章对导航栏、标签栏、金刚区件以及瓷片区等常用组件的基础知识及设计规则进行系统讲解与实操。通过本章的学习，读者可以对组件设计有一个系统的认识，并快速掌握绘制租件的规范和方法，为接下来的界面设计打下基础。项目4搭建丰富的组件—UI组件设计学习引导了解UI控件的基本概念明确UI控件的获取方法掌握各种组件的设计思路掌握各种组件的制作方法培养对组件的审美鉴赏能力培养对组件的设计创意能力任务4.1设计旅游类App导航栏任务引入任务知识设计理念任务实施4.1.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App导航栏，掌握导航栏的设计要点与制作方法。4.1.2设计理念在设计过程中，围绕旅游类App导航栏进行创意。整体设计具有持久显示、指导用户的特点。适用于界面复杂或是需要烘托氛围的界面中。4.1.3任务知识：属性面板使用“圆角矩形”工具绘制形状，使用“属性”面板制作弥散投影，使用“置入嵌入对象”命令置入图标，使用“横排文字”工具输入文字。4.1.4任务实施任务4.2设计旅游类App标签栏任务引入任务知识设计理念任务实施4.2.1任务引入本任务通过学习使用软件Illustrator和Photoshop绘制旅游类App标签栏，掌握标签栏的设计要点与制作方法。4.2.2设计理念在设计过程中，围绕旅游类App标签栏进行创意。整体设计以图标+文字的方式进行展示，拥有较高的识别度，具有操作灵活、指导用户的特点。白色的背景样式，使背景与标签栏区分明显。线性（未选中状态）-线面（选中状态），这种方式下的切换状态活泼趣味，使整体趋于年轻化。4.2.3任务知识在Illustrator软件中，使用“矩形”工具绘制形状，使用“钢笔”工具添加锚点，使用“直接选择”工具调整锚点到适当的位置并制作圆角效果。在Photoshop软件中，使用“矩形”工具和“属性”面板确定参考线位置，使用“置入嵌入对象”命令置入图标，使用“横排文字”工具输入文字。4.2.4任务实施任务4.3设计旅游类App金刚区任务引入设计理念任务知识任务实施4.3.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App金刚区，掌握金刚区的设计要点与制作方法。4.3.2设计理念在设计过程中，围绕旅游类App金刚区进行创意。整体设计以图标+文字的方式进行展示，拥有着设计细节丰富，富有创意等优势。具有展现丰富、设计精美的特点。不同的图标颜色，表达了不一样的色彩情绪。4.3.3任务知识：直接选择工具、渐变叠加命令使用“矩形”工具和“属性”面板确定参考线位置，使用“圆角矩形”工具和“椭圆”工具绘制图标，使用“直接选择”工具调整图标，使用“渐变叠加”命令添加效果，使用“置入嵌入对象”命令置入网格系统从而调整图标，使用“横排文字”工具输入文字。4.3.4任务实施任务4.4设计旅游类App瓷片区任务引入设计理念任务知识任务实施4.4.1任务引入本任务通过学习使用软件Photoshop绘制旅游类App瓷片区，掌握瓷片区的设计要点与制作方法。4.4.2设计理念在设计过程中，围绕旅游类App瓷片区进行创意。整体设计以实物图片的方式进行展示，拥有着高识别、代入感强、可复用，设计效率较高等优势。灵活布局具有区分主次的特点。4.4.3任务知识：剪贴蒙版命令、颜色叠加命令使用“圆角矩形”工具、“矩形”工具和“椭圆”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“渐变叠加”命令和“颜色叠加”命令添加效果，使用“横排文字”工具输入文字。4.4.4任务实施任务4.5项目演练-设计电商类App标签栏任务引入设计理念4.5.1任务引入本任务通过学习使用软件Illustrator和Photoshop绘制电商类App标签栏，掌握标签栏的设计要点与制作方法。4.5.2设计理念在设计过程中，围绕电商类App标签栏进行创意。整体设计以图标+文字的方式进行展示，拥有较高的识别度，具有操作灵活、指导用户的特点。白色的背景样式，使背景与标签栏区分明显。线性（未选中状态）-线性（选中状态），这种方式下的切换状态精致简洁，使整体适用于电商类产品。任务4.6项目演练-设计餐饮类App标签栏任务引入设计理念4.6.1任务引入本任务通过学习使用软件Illustrator和Photoshop绘制餐饮类App标签栏，掌握标签栏的设计要点与制作方法。4.6.2设计理念在设计过程中，围绕餐饮类App标签栏进行创意。整体设计以图标+文字的方式进行展示，拥有较高的识别度，具有操作灵活、指导用户的特点。白色的背景样式，使背景与标签栏区分明显。面性（未选中状态）-面性（选中状态），这种方式下的切换状态安全厚重，使整体适用于餐饮类产品。本章介绍：

本章对闪屏页、引导页、首页、个人中心页、详情页以及注册登录页等常用页面的基础知识及绘制方法进行系统讲解与演练。通过本章的学习，读者可以对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任务引入