项目一常用控件的设计与制作

HSUCLEARLogin账号密码UI设计HSUCLEARLogin账号密码项目一常用控件的设计与制作目标TARGET教学目标

通过本项目的学习让学生掌握常用控件的设计、制作方法。目标TARGET知识目标认识UIKit。了解UIKit的分类。学会按钮、开关、滑动条等控件的绘制。学会设计UIKit。目标TARGET技能目标通过多个任务的实际操作,感受实际工作中控件的制作方法,掌握常用控件的设计与制作,学会对实际问题的解决方法。培养学生实际操作能力,与同伴合作和交流的意识和能力。培养工匠精神和创新意识。目标TARGET素质目标建立技能强己,激发爱国情怀。培养勤于思考,善于探索的意识。

UI控件是用户与应用程序交互的核心载体，其在应用实践项目中的典型场景有桌面端企业管理系统开发、移动端登录与表单界面设计、游戏UI交互设计等等，其设计直接影响用户体验与操作效率。通过规范化的控件设计与制作，可提升界面一致性、降低用户学习成本，并满足不同场景下的功能需求‌。通过本项目的学习，读者可以对控件设计有一个系统的认识，并快速掌握绘制控件的规范和方法，为构建交互界面奠定基石‌。项目引入HSUCLEARLogin账号密码PART01相关知识相关知识1UIkit概述2UIkit设计规范3常用图形制作

4常用图形工具使用方法举例

UIKit又称为用户界面套件、用户界面控件组,是指一套包含控件元素的图形文件,主要用于界面设计。套件中的组件一般包括按钮、开关、旋钮、滑动条、单选复选框、文本与下拉框、导航栏、搜索框、列表、表格等。UIkit概述

按钮

(1)按钮结构：通常,组成按钮外观造型的三元素为:文

本、容

器、图

标。(2)按钮圆角：圆角越大,按钮越具有亲和力。建议最小也要用到3px的圆角。(3)内边距：内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。把按钮的水平内边距设计成垂直内边距的2倍。(4)投影：建议使用与按钮接近的颜色或和按钮一样的色值,然后降低透明度,这样会使得你的投影看起来更加自然。

（5）填充：

首先，无论使用纯色还是渐变色进行填充，都要确保按钮对用户来说是便于理解的。

其次，为按钮选择的颜色必须反馈相匹配的颜色。（6）文字：文字与颜色类似，按钮上的文本内容能够确保用户易于阅读。在一个按钮上使用最长不超过5个单词（重要按钮使用1-3个单词），设计时注意所有按钮中的文字不可以换行。UIkit设计规范线条的绘制在界面制作中，使用线条工具绘制直线可以做列表分割线，还可以使用直线将多个选项上下分隔开来，既保持了页面的整洁度，又可以使用户能够方便、简洁和快速的浏览选项，直线在图标中也经常使用，以起到装饰性作用。常用图形制作矩形的绘制矩形最常见也是最不可缺少的就是在界面中的运用。不论是图标还是应用界面的制作，都会经常用到这种形状，因此矩形也是APP基本图形制作中最常用，也是最不可缺少一个图形元素。常用图形制作圆角矩形的绘制圆角矩形对于所有智能手机用户来说应该最熟悉了，最典型的案例就是几乎所有的触屏手机中，都会有圆角矩形的模拟按键和按钮，另外在iOS原装系统中，所有图标都是有圆角矩形的背景。常用图形制作圆形的绘制不论是在APP图形制作还是界面制作中，都会经常涉及“圆”这种图形元素，由圆形延伸而来的还有正圆、椭圆和圆环。圆环在界面的使用中较少，通常会在图标的制作中作为装饰性元素或在暗喻的物体中需要时出现。常用图形制作其他形状的绘制以上介绍了多种基本图形的绘制，但在APP图形元素中还有一些其他的不规则形状，因为有些事物不管在图标还是在界面的制作中，无法使用简单的形状就能表达的，例如五角星、多边形以及一些无法用Photoshop提供的形状工具直接绘制的不规则形状。常用图形制作1

选择工具并设置工具栏属性圆角矩形工具椭圆工具圆角矩形工具设置栏设置完成后，进行绘制椭圆工具设置栏设置完成后，进行绘制常用图形工具使用方法举例1

选择工具并设置工具栏属性多边形工具多边形工具设置栏设置完成后，进行绘制常用图形工具使用方法举例新建一个文件，选择圆形和圆角矩形工具进行绘制。如果按住Shift再绘制，可以绘制正圆和正圆角矩形。2绘制圆形和圆角矩形绘制正圆和正圆角矩形新建文件常用图形工具使用方法举例3绘制五边形和五角星绘制五角星绘制五边形新建文档新建一个文件，选择多边形工具进行绘制。如果按住Shift再绘制，可以绘制正多边形。常用图形工具使用方法举例4改变圆形和圆角矩形颜色和大小前景色油漆桶工具填充颜色Ctrl+TEnter常用图形工具使用方法举例5改变多边形颜色和大小前景色油漆桶工具填充颜色Ctrl+TEnter常用图形工具使用方法举例常用图形制作举例——电池电量图标的制作常用图形制作举例——wifi图标的制作常用图形制作举例——文档图标的绘制HSUCLEARLogin账号密码PART02任务实操任务实操1白色轻质感开关制作2质感滑动条制作

3播放进度条的制作

4时间选择器的制作5登录按钮的制作任务实操6登录文本框制作

7搜索框的制作

8单选、复选框制作

9下拉选择框的制作TAB切换块的制作10

设计制作一组白色轻质感的开关控件,要求体现出按钮的渐变质感和立体感,效果如图所示。任务1-1白色轻质感开关制作

任务描述

设计并制作一款滑动条,要突出滑动条的层次感,要突出滑块的厚度感和质感,有一定的视觉冲击力,效果如图所示。任务1-2质感滑动条制作

任务描述

设计并制作一款播放进度条,要求突出层次感,效果如图所示。任务1-3播放进度条的制作

任务描述

设计并制作一款时间选择器,效果如图所示，从中掌握选择器控件的制作技巧。任务1-4

时间选择器的制作

任务描述

设计并制作一登录按钮，要求制作出不同种状态，从中掌握按钮不同种状态的制作技巧。任务1-5

登录按钮的制作

任务描述

设计并制作一登录文本框,包含登录按钮,要突出文本框的凹陷效果,效果如图所示。任务1-6

登录文本框制作任务描述

设计一款微扁平风格的搜索框,要求运用恰当的光影关系突出搜索框的层次感,用色要简约大气。任务1-7搜索框的制作任务描述

利用图形工具完成一组单选、复选框,要求制作选中状态和非选中状态两种。通过本任务，让学生理解界面设计中如何通过选择控件来提升用户体验。任务1-8

单选、复选框制作任务描述

利用图形工具完成如图所示的下拉选择框,通过本任务的学习,掌握多图形的组合运用以及利用图层样式制作特殊效果的技巧。任务1-9

下拉选择框的制作任务描述

制作TAB切换块,效果如图所示。通过本任务的学习,掌握特殊形状控件的制作方法。任务1-10

TAB切换块的制作任务描述HSUCLEARLogin账号密码PART03拓展迁移

设计一款节约用水的标志,效果如图所示。通过本任务设计，学习如何在UI设计中表达节水主题，曾强社会责任感。【拓展任务】———节约用水,