项目4　搭建丰富的组件-UI组件设计

本章介绍：

本章对导航栏、标签栏、金刚区件以及瓷片区等常用组件的基础知识及设计规则进行系统讲解与实操。通过本章的学习，读者可以对组件设计有一个系统的认识，并快速掌握绘制租件的规范和方法，为接下来的界面设计打下基础。项目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标签栏进行创意。整体设计