项目十一　手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计

《项目十一　手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计》由会员分享，可在线阅读，更多相关《项目十一　手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计（23页珍藏版）》请在装配图网上搜索。

1、单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,二级,,三级,,四级,,五级,,*,,*,网页图片与移动界面,(Web/App),的,UI,设计,,,,,单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,二级,,三级,,四级,,五级,,单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,*,,*,,,,,,,项目十一　手机APP界面元素设计电子课件 网页图片与移动界面（WebApp)的UI设计,项目十一　手机,APP,界面元素设计,主讲：,XXX,时间：,2020.X,网页图片与移动界面,(Web/App),的,UI,设计,灵活运用图层

2、样式、绘图工具、形状工具进行对象的绘制和编辑；,,掌握按钮、开关、进度条、搜索栏、列表框、标签栏的基础知识和制作方法。,教学目标,,,,11.1.1,任务引入,,按钮是移动,UI,界面设计中不可或缺的基本部件，在各种,APP,应用程序中都少不了按钮的参与，通过它可以完成很多的任务。因此，按钮的设计是最基本的，也是最重要的。,,11.1.2,知识引入,,按钮的表现形式,:,按钮在移动,UI,界面中是启动,,某个功能，运行某个动作的触动点。,11.1,按钮,2.,按钮的状态,,是用户执行某项操作时所接触的对象，因此在操作中一定要有反馈，让用户明白发生了什么，这就要求按钮在设计中需要制作出几种不同的

3、状态。按钮通常包含了,5,种不同的状态，他们分别是默认状态、悬浮状态、按下状态、忙碌状态、禁用状态，他们分别表示用户在使用按钮过程中所呈现出来的不同显示效果。,,在按钮设计过程中，确保按钮外观不变的前提下，我们可以通过阴影、渐变、发光灯特效的编辑来创建按钮的多种不同的状态。,,11.1,按钮,11.1.3,任务实现,---,立体化按钮的设计,,1.,任务知识分析,,本任务设计者首先要使用椭圆工具绘制一个椭圆，再使用“投影”、“内发光”图层样式制作出球体基础形状，然后绘制球体高光，使用渐变填充制作球体亮，用画笔绘制球体暗部，用矩形选框工具绘制球体高光，再用“球面化”滤镜将高光透视变形，使用渐变绘

4、制出光感，最后还是使用图层样式来完善整个作品，达到设计者所要求的效果。,,11.1,按钮,2.,任务操作,,(1),按钮底部形状制作,,(2),按钮亮部的制作,,(3),按钮暗部的制作,,(4),按钮高光的制作,,(5),文本输入,,(6),背景制作,,(7),效果整体调整,11.1,按钮,11.2.1,任务引入,,开关在移动,UI,界面中式经常会遇到的一个空件，它能够对界面中某个功能或设置进行开启和关闭，启外观设计非常丰富。,,11.2.2,知识引入,,1,．复选框,,,允许用户从选项中选择多个，通过勾选的方式,,,来对功能或设置的状态进行控制。,11.2,开关,2,．单选按钮,,,单选按钮

5、开关只允许用户从一组选项中选择一个。,,,3,．,ON/OFF,开关,,如果只有一个开启和关闭的选择，而应该使用,,ON/OFF,开关比较合适。,11.2,开关,11.2.3,任务实现,---,立体开关的设计,,1.,任务分析,,该任务主要使用圆角矩形工具绘制开关的外形，使用“下面浮雕”、“外发光”、“内发光”和“渐变叠加”图层样式制作开关的立体感。,,2.,任务实现,,（,1,）开关基层的制作,,（,2,）开关部件的制作,,（,3,）文字输入,11.2,开关,11.3.1,任务引入,,进度条是用户咋进入某个界面或者某个程序的过程中，,APP,为了缓冲和加载信息时所显示出来的空间，它主要显示出

6、当前加载的百分比，让用户掌握相关的数据和进度。,,11.3.2,知识引入,,1.,线性进度指示器,,11.3,进度条,2.,圆形进度指示器,,圆形的进度指示器可以和一个有趣的图标或者刷新图标结合在一起使用，它的设计相比较线形进度指示器显得更加丰富。,11.3,进度条,11.3.3,任务实现,---,扁平化和立体化进度条的设计,,1.,任务分析,,本任务主要通过使用圆角矩形绘制进度条的形状，通过“描边”图层样式完成进度条的外框制作，使用横排文字工具输入进度状态，以及通过“投影”、“内发光”和“斜面浮雕”等图层样式完成进度条的体感和厚度制作，使用横排文字工具输入进度状态。,,11.3,进度条,2.

7、,任务操作,,(1),扁平化进度条的制作,,(2),立体化进度条,,① 背景制作,,② 进度条外环,,③ 进度圆形中心的制作,,,④,,文字输入,,,⑤,,进度条整体调整制作,11.3,进度条,11.4.1,任务引入,,用户在某个界面上查找信息出现困难时，通常会尝试进行搜索。搜索栏是一个网站,APP,的重要组成部分，界面设计中可以考虑在页脚放一个搜索栏，让用户更方便进行搜索。,,11.4.2,知识引入,,1.,搜索栏的用途,,搜索栏可以接收用户输入的文本并将其作为一次搜索输入，快速帮助用户查找到所需要的信息。当搜索文本框获得焦点的时候，搜索框展开以显示历史搜索建议，选择任意建议搜索。,11.4

8、,搜索栏,2.,搜索栏的组成结构,,默认状态下的搜索栏通常由一个文本框加上一个搜索按钮组成，在对搜索栏进行设计时，还要考虑到其搜索工作状态下的图标和文本框的不同显示效果。,,,11.4.3,任务实现,---,立体化搜索框的设计,,1.,任务分析,,本任务主要运用矩形工具绘制搜索栏的形状，再运用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式对矩形进行立体感和厚度感的制作，最后输入相关文字。,11.4,搜索栏,2.,任务操作,,(1),外框制作,,,(2),文本框制作,,,(3),搜索按钮的制作,,,(4),输入文本,11.4,搜索栏,,11.5.1,任务引入,,列表作为一个单一的连续元素

9、可以垂直排列的方式显示多行条目。在移动,UI,的界面设计中，列表框通常用于数据、信息的展示与选择，接下来我们就对列表框的设计和制作进行讲解。,,11.5.2,知识引入,,1.,列表框的组成结构,,适合应用于显示同类的数据类型或数据类型组,11.5,列表框,2.,列表数据规范,,在包含三行文字的列表框中，每个列表中第一行文字为标题文字，标题文字略大，且颜色更突出；其余文字为说明文字，说明文字略小，且颜色略淡。文本字数可以在同一列表的不同瓦片间有所改变。,,在设计列表框的过程中，还要注意每行信息之间的间距。不论是标题文字与图表之间的距离，还是文字与边框之间的距离，在不同的操作系统中都会有不同的要求和规范。,,11.5,列表框,11.5.3,任务实现,---,立体化列表框的设计,,1.,任务分析,,本任务主要通过使用圆角矩形工具、钢笔工具、“内阴影、投影、渐变叠加”图层样式和横排文字工具以及直线工具完成。,,2.,任务操作,,(1),基础形状的制作,,(2),分隔条的绘制,11.5,列表框,(3),下拉箭头的制作,,(4),点击和选中状态的制作,,(5),图标的制作,,(6),文本输入,11.5,列表框,要求：,,结合所学知识，制作如图所示“,+,”图标,,,,,课后练习,——按钮的制作,,感谢各位,主讲：,XXX,