第6章 移动端常用控件ppt课件.ppt

《第6章 移动端常用控件ppt课件.ppt》由会员分享，可在线阅读，更多相关《第6章 移动端常用控件ppt课件.ppt（45页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第6章 移动端常用控件第6章 移动端常用控件 什么是控件 按钮控件 UI 控制器 表单控件 学习目标掌握控制器的种类，能够独立完成滑块设计的制作。1掌握掌握2掌握按钮控件的多种形式，能够了解按钮的状态。掌握掌握不同类型表单控件的设计方法。3 目录 【实例7】播放进度条滑块设计6.26.2 【实例8】播放按钮设计6.36.36.16.1认识控件点击查看本小结知识框架 6.1 认识控件什么是控件6.1.2控制器 知识架构6.1.3按钮控件6.1.4表单控件 本章将以iOS系统为基准，结合“渐变滑块设计”和“登录按钮设计”两个实例对设计控件的相关知识做详细讲解。章节概要想要设计

2、出一套完整的移动端App界面，设计控件的参与必不可少。在UI设计中，设计控件可以起到梳理界面，完善界面结构的功能。然而什么是控件？它的分类有哪些？ 6.1 认识控件控件是手机界面重要的组成元素之一，用于控制产品行为或显示信息。知识点概述注意：控件有的是系统自带的，有的则需要个性化定制。6.1.1 什么是控件 6.1.2 控制器 6.1 认识控件 控制器 6.1 认识控件活动指示器活动指示器主要用于标识正在处理中的任务或进程。活动指示器注意：活动指示器不会明确告知用户任务或进程的持续时间待任务完成后活动指示器会自动消失。 控制器 6.1 认识控件进度指示器进度指示器用于展示任务或进程的进度。通过

3、进度指示条，用户可以预测任务完成的大致时间，以便选择是继续等待还是放弃。进度指示器 控制器 6.1 认识控件刷新控件刷新控件用于执行用户刷新当前的页面内容，可让用户可以立即获得最新内容。刷新控件在默认状态下是不可见的，只有用户进行向下拖拽屏幕时才会出现刷新内容。刷新控件的多种形式 控制器 6.1 认识控件分段控件分段控件是一组分段的集合，由两个或多个分段组成，用于对页面信息进行分类筛选。分段控件的长度由分段的数量决定。分段控件 控制器 6.1 认识控件滑动器滑动器主要通过水平移动滑块或滑杆来控制某种变量，允许用户在一个限定范围内调整数值大小变化。滑动器通常包括三个部分，分别为滑动块、滑动条以及

4、滑动轨迹。滑动器 控制器 6.1 认识控件开关开关由两个互斥性的按钮组成，用来调节一个功能的开启或关闭。也被称为切换器，展示了两个互斥的状态。开关展示了当前的激活状态，用户通过单击可以切换状态。开关 控制器 6.1 认识控件步进器步进器是一个两段控件，其中一段显示增加的符号，一段是显示减少的符号。用户单击一个分段进行增加或减少的操作。步进器给了用户充分的思考时间，并可以对行为留下回旋余地。步进器 控制器 6.1 认识控件日期时间选择器日期时间选择器是展示时间和日期的控件。最多可以有4个独立的可旋转的滑轮，每个滑轮代表不同类别的值。双向滑轮的日期选择器 控制器 6.1 认识控件页控件页控件是一个

5、可以实现翻页效果的控件，包含一系列的圆点，圆点的个数代表页面数量。页控件可以告诉用户有多少视图，目前处于哪个视图。页控件新的设计样式 控制器 6.1 认识控件标签标签是一个用于显示文字的静态控件。默认情况下，标签控件是不能接受用户输入，也不能与用户交互的。标签 6.1 认识控件按钮是UI设计中不可或缺的控件，通过点击按钮，可以触发一系列能够和用户产生交互的事件。作为基础控件，按钮控件被广泛应用于不同平台中。 按钮控件 6.1 认识控件 按钮控件 6.1 认识控件常用按钮常用按钮是一种以文字或图片加上形状进行组合的控件，它对用户的点击作出反应并触发相应的事件。常用按钮通常包含默认状态、悬浮状态、

6、按下状态、禁用状态四种状态。按钮状态 常用按钮 6.1 认识控件 常用按钮 6.1 认识控件 平面按钮平面按钮通常由文字加填充的背景组成，一般有两种样式：矩形按钮和圆角矩形按钮，可根据应用风格选择不同的外观样式。按钮可以单独使用文字，也可以是图标加文字的组合，如果单独使用图标，请确保图标的通用性能被用户清晰的识别。平面按钮的两种样式 常用按钮 6.1 认识控件线框按钮线框按钮也叫幽灵按钮，外部仅以线框示意轮廓，内部只用文字示意功能，背景透出，与整个页面合而为一的设计方式。“薄”和“透”是线框按钮的最大特色。线框按钮 按钮控件 6.1 认识控件详情展开按钮详情展开按钮会以一个单独的视图展示与该项

7、相关的更多详细信息与功能描述。详情展开按钮通常跟随列表视图出现。详情展开按钮 按钮控件 6.1 认识控件删除按钮删除按钮可以删除的信息，减少信息堆积。一般隐藏在列表行视图的右侧。当用户将当前行向左侧滑时，会在右侧滑入删除按钮用户点击按钮可以将列表行删除，点击其他空白区域会取消删除按钮。删除按钮 按钮控件 6.1 认识控件增加行增加行以一个单独圆形加号出现在列表行左侧，用户每一点击增加行都会在当前视图增加一行列表，新增的列表可以编辑。增加行 按钮控件 6.1 认识控件展开按钮展开按钮通常跟在列表视图的右侧，点击展开按钮会进入到新的视图，并会展示当前项的更多信息。展开按钮及打开的新视图 按钮控件

8、6.1 认识控件折叠按钮折叠按钮包含两种相反的状态，一是折叠，二是展开。当按钮向下时表明内容折叠收起，当按钮向上时则内容展开。折叠按钮 6.1 认识控件表单控件主要用于收集用户信息，与用户进行交互对话。通常包括单选框、复选框、下拉选框、文本框等 6.1.4 表单控件 6.1 认识控件 表单控件 6.1 认识控件单选框单选框是用于进行单项选择，是用户在一组相关但互斥的选择项中，只能做出一个选择。选中一个选项后，其他选项将不会再选。单选框 表单控件 6.1 认识控件复选框复选框常用于进行多项选择，帮助用户在一组相关的选项中进行多个选择的操作。用户可以选择一个或者多个选项。复选框 表单控件 6.1

9、认识控件下拉选框下拉选框也被称为下拉菜单，可收藏一些同类信息，节省界面空间。在下拉选框的列表中，用户只能选择列表中的一个选项。当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选项。下拉选框 表单控件 6.1 认识控件文本框文本框是用户输入信息的区域，当用户点击文本框时，会自动唤起输入键盘。在默认状态时，可在文本框中加入提示文字，指引用户输入内容。文本框 针对下图所示的音乐播放界面，设计一个美观的播放进度滑块。任务描述通过本任务的学习，读者可以熟悉滑块构成，掌握滑块制作方法。 6.2【实例7】：播放进度滑块设计 1.尺寸规范：滑块的设计尺寸并没有刻意规范，只要满足设计需求即可。但是用

10、户会经常对播放进度滑块进行触控操作，因此滑动轨迹尽量长一些。本实例滑块宽度设置为420像素。任务分析 6.2【实例7】：播放进度滑块设计2.设计风格：在同一界面中，不同控件的设计风格需要保持一致，由于界面按钮和音量调节滑块均采用微扁平的设计风格，因此在设计播放进度滑块时可以添加淡淡的内阴影和投影，突出滑块的层次感。 任务分析3.形状设计：参考音量调节滑块的形状，可以运用长条的圆角矩形作为滑动轨迹。而滑动条和滑动块的设计，则可以运用内阴影、投影等图层样式效果。4.细节装饰：通过添加文字进行细节优化处理。 6.2【实例7】：播放进度滑块设计 6.2【实例7】：播放进度滑块设计 针对下图所示的登录界

11、面，设计一个和登录界面风格统一的登录按钮。任务描述通过本任务的学习，读者可以掌握按钮四种状态，了解按钮类型和样式，了解按钮的制作方法。 6.3【实例8】：登录按钮设计 1. 尺寸规范：根据提供的素材，输入框的尺寸为50080像素，为保持整体的一致性，从而设定登录按钮的设计尺寸为50080像素。通常按钮高度一般为80像素，最高不高于88像素。按钮的宽度会随着输入框的宽度进行设定，通常是等于或小于输入框的宽度。任务分析 6.3【实例8】：登录按钮设计 2. 设计风格：根据登录界面的设计风格，本实例采用微扁平的风格。运用简单的渐变效果配合光影关系，打造微扁平风格的质感按钮。任务分析 6.3【实例8】：登录按钮设计3. 形状设计：由于登录界面输入框选用了圆角矩形，本实例和输入框保持统一，同样选择采用圆角矩形。 4. 颜色：登录界面logo颜色为绿色，选用绿色调作为登录按钮的主色调不仅可以与logo相互呼应，而且还可以将登录按钮与输入框进行区别。按钮的默认状态、悬浮状态、按下状态这三种状态可采用颜色逐渐加深的配色方法。对于禁用按钮，根据按钮的特性采用灰色背景。任务分析 6.3【实例8】：登录按钮设计 6.3【实例8】：登录按钮设计