《项目十一 手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计.ppt》由会员分享，可在线阅读，更多相关《项目十一 手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计.ppt（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目十一手机APP界面元素设计电子课件网页图片与移动界面（WebApp)的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计项目十一手机目十一手机APP界面元素界面元素设计主讲：XXX时间：2020.X网网页图片与移片与移动界面界面(Web/App)的的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计u灵活运用灵活运用图层样式、式、绘图工具、形状工具工具、形状工具进行行对象的象的绘制和制和编辑；u掌握按掌握按钮、开关、开关、进度条、搜索度条、搜索栏、列表框、列表框、标签栏的基的基础知知识和制作
2、方法。和制作方法。教学目教学目标 网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.1.1任任务引入引入按钮是移动UI界面设计中不可或缺的基本部件，在各种APP应用程序中都少不了按钮的参与，通过它可以完成很多的任务。因此，按钮的设计是最基本的，也是最重要的。11.1.2知知识引入引入1.1.按按钮的表的表现形式形式:按钮在移动UI界面中是启动某个功能，运行某个动作的触动点。11.1 按按钮网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计 2.按按钮的状的状态是用户执行某项操作时所接触的对象，因此在操作中
3、一定要有反馈，让用户明白发生了什么，这就要求按钮在设计中需要制作出几种不同的状态。按钮通常包含了5种不同的状态，他们分别是默认状态、悬浮状态、按下状态、忙碌状态、禁用状态，他们分别表示用户在使用按钮过程中所呈现出来的不同显示效果。在按钮设计过程中，确保按钮外观不变的前提下，我们可以通过阴影、渐变、发光灯特效的编辑来创建按钮的多种不同的状态。11.1 按按钮网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.1.3 任任务实现-立体化按立体化按钮的的设计1.任任务知知识分析分析本任务设计者首先要使用椭圆工具绘制一个椭圆，再使用“投影”、“内发光”图层
4、样式制作出球体基础形状，然后绘制球体高光，使用渐变填充制作球体亮，用画笔绘制球体暗部，用矩形选框工具绘制球体高光，再用“球面化”滤镜将高光透视变形，使用渐变绘制出光感，最后还是使用图层样式来完善整个作品，达到设计者所要求的效果。11.1 按按钮网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.任任务操作操作(1)按按钮底部形状制作底部形状制作(2)按钮亮部的制作(3)按钮暗部的制作(4)按钮高光的制作(5)文本输入(6)背景制作(7)效果整体调整11.1 按按钮网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计
5、设计11.2.1任任务引入引入开关在移动UI界面中式经常会遇到的一个空件，它能够对界面中某个功能或设置进行开启和关闭，启外观设计非常丰富。11.2.2 知知识引入引入1复复选框框 允许用户从选项中选择多个，通过勾选的方式 来对功能或设置的状态进行控制。11.2 开关开关网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2单选按按钮单选按钮开关只允许用户从一组选项中选择一个。3ON/OFF开关开关如果只有一个开启和关闭的选择，而应该使用 ON/OFF开关比较合适。11.2 开关开关网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的
6、的UIUI设计设计11.2.3 任任务实现-立体开关的立体开关的设计1.任任务分析分析该任务主要使用圆角矩形工具绘制开关的外形，使用“下面浮雕”、“外发光”、“内发光”和“渐变叠加”图层样式制作开关的立体感。2.任任务实现（1）开关基层的制作（2）开关部件的制作（3）文字输入11.2 开关开关网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.3.1任任务引入引入进度条是用户咋进入某个界面或者某个程序的过程中，APP为了缓冲和加载信息时所显示出来的空间，它主要显示出当前加载的百分比，让用户掌握相关的数据和进度。11.3.2 知知识引入引入1.线性性
7、进度指示器度指示器11.3 进度条度条网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.圆形形进度指示器度指示器圆形的形的进度指示器可以和一个有趣的度指示器可以和一个有趣的图标或者刷新或者刷新图标结合在一起使用，它合在一起使用，它的的设计相比相比较线形形进度指示器度指示器显得更加丰富。得更加丰富。11.3 进度条度条网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.3.3 任任务实现-扁平化和立体化扁平化和立体化进度条的度条的设计1.任任务分析分析本任务主要通过使用圆角矩形绘制进度条的形状，通过“描边
8、”图层样式完成进度条的外框制作，使用横排文字工具输入进度状态，以及通过“投影”、“内发光”和“斜面浮雕”等图层样式完成进度条的体感和厚度制作，使用横排文字工具输入进度状态。11.3 进度条度条网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.任任务操作操作(1)扁平化扁平化进度条的制作度条的制作(2)立体化立体化进度条度条背景制作进度条外环进度圆形中心的制作 文字输入 进度条整体调整制作11.3 进度条度条网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.4.1任任务引入引入用户在某个界面上查找信息出
9、现困难时，通常会尝试进行搜索。搜索栏是一个网站APP的重要组成部分，界面设计中可以考虑在页脚放一个搜索栏，让用户更方便进行搜索。11.4.2 知知识引入引入 1.搜索搜索栏的用途的用途搜索栏可以接收用户输入的文本并将其作为一次搜索输入，快速帮助用户查找到所需要的信息。当搜索文本框获得焦点的时候，搜索框展开以显示历史搜索建议，选择任意建议搜索。11.4 搜索搜索栏网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计 2.搜索搜索栏的的组成成结构构默认状态下的搜索栏通常由一个文本框加上一个搜索按钮组成，在对搜索栏进行设计时，还要考虑到其搜索工作状态下的图标和
10、文本框的不同显示效果。11.4.3 任任务实现-立体化搜索框的立体化搜索框的设计 1.任任务分析分析本任务主要运用矩形工具绘制搜索栏的形状，再运用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式对矩形进行立体感和厚度感的制作，最后输入相关文字。11.4 搜索搜索栏网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.任任务操作操作(1)外框制作(2)文本框制作(3)搜索按钮的制作(4)输入文本11.4 搜索搜索栏网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.5.1任任务引入引入列表作为一个单一的
11、连续元素可以垂直排列的方式显示多行条目。在移动UI的界面设计中，列表框通常用于数据、信息的展示与选择，接下来我们就对列表框的设计和制作进行讲解。11.5.2 知知识引入引入1.列表框的列表框的组成成结构构适合应用于显示同类的数据类型或数据类型组11.5 列表框列表框网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.列表数据列表数据规范范在包含三行文字的列表框中，每个列表中第一行文字为标题文字，标题文字略大，且颜色更突出；其余文字为说明文字，说明文字略小，且颜色略淡。文本字数可以在同一列表的不同瓦片间有所改变。在设计列表框的过程中，还要注意每行信息之
12、间的间距。不论是标题文字与图表之间的距离，还是文字与边框之间的距离，在不同的操作系统中都会有不同的要求和规范。11.5 列表框列表框网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计11.5.3 任任务实现-立体化列表框的立体化列表框的设计1.任任务分析分析本任务主要通过使用圆角矩形工具、钢笔工具、“内阴影、投影、渐变叠加”图层样式和横排文字工具以及直线工具完成。2.任任务操作操作(1)基础形状的制作(2)分隔条的绘制11.5 列表框列表框网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(3)下拉箭头的制作(4)点击和选中状态的制作(5)图标的制作(6)文本输入11.5 列表框列表框网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计要求：要求：结合所学知识，制作如图所示“+”图标课后练习课后练习按钮的制作网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计感谢各位主讲：XXX