项目3　制作别致的控件-UI控件设计

本章介绍：

本章对按钮控件、选择控件、加减控件、分段控件、页面控件、反馈控件以及文本框控件等常用控件的基础知识及设计规则进行系统讲解与实操。通过本章的学习，读者可以对控件设计有一个系统的认识，并快速掌握绘制控件的规范和方法，为接下来的组件设计打下基础。项目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任务引入本任务通过学习使用