移动UI设计案例教程（电子活页式）单元1走进UI设计.pptx单元2UI设计元素.pptx单元3移动端操作系统.pptx单元4移动App图标基础.pptx单元5移动App图标风格.pptx单元6界面常用控件.pptx单元7APP界面类型.pptx单元8iOS界面设计.pptx单元9Android系统界面设计.pptx全套PPT课件单元1走进UI设计单元内容简介：
1．明确用户群体2．实用性3．用户体验4．统一性5．简洁性
1.2.2原型设计需求分析完成后进行产品架构设计，开展原型设计与开发工作。此环节是对产品构思的表达，强调用户体验的重要性，设计好的原型应再次与需求方确认，及时沟通交流能有效避免进行视觉设计后的界面不符合用户需求而导致重复工作，为项目顺利开展提供保障，大大提高设计的工作效率。
1.2.4切图与标注产品设计完成后对界面元素进行切图和标注。切图的质量会直接影响到前端开发工程师对界面的实现效果，因此切图要符合切图规范，做到高质量切图。完成界面元素切图后，分类保存在文件夹中，提交给前端开发工程师。
1.3UI设计图像1.3.1图像类型1.3.2图像格式
1.3.1图像类型1．矢量图矢量图是由用数学方式描述的曲线及曲线包围的范围共同组成的色块图像，并不是靠像素拼接而成的，它最大的特点是与分辨率无关，将它缩放到任意大小和以任意分辨率在输出设备上输出，都不会影响其清晰度。
1.3.1图像类型2．位图位图通常称为点阵图，是由一组像素或者单个的小块放在一起组成的图像，类似拼图的效果。放大位图时，可以看见由无数个小方块构成的整个图像，每一个小方块即一个像素。位图可以表现出色彩丰富的图像。在放大位图时，像素也放大了，由于每个像素表示的颜色是单一的，所以位图放大后会出现图像失真。
1.3.2图像格式1．JPGJPG一般指联合图像专家组（JointPhotographicExpertsGroup，JPEG），是常用的有损压缩图像格式，可根据需求进行压缩，压缩后的图像细节保留良好，常常用在图像的展示中。JPG格式对颜色丰富、相对复杂的图像更为适用，但图像每经过一次编辑，整体的质量会下降一次。由于JPG格式图像所占的存储空间一般相对较小，非常适合在浏览器中显示，下载速度也很快，所以JPG图像在网络上应用非常广泛，JPG是非常受欢迎的一种图像格式。
1.3.2图像格式2．PNG可移植的网络图像格式（PortableNetworkGraphics，PNG）是无损压缩图像格式，PNG图像所占的存储空间较小，可使用的颜色非常丰富。PNG支持透明效果。3．TIFFTIFF一般指标记图像文件格式（TagImageFileFormat，TIFF）是一种通用的位图文件格式，它存储的图像信息非常多，图像质量高，是许多印刷品选择使用的格式。
1.3.2图像格式4．GIF图像交互格式（GraphicsInterchangeFormat，GIF）支持动画效果，文件不会占用过多的存储空间，图像满足网络传输需要，是网页中常用的一种图像格式。5．BMP格式BMP（Bitmap，位图）格式图像信息丰富，几乎不对图像进行压缩，当然也正因为如此，BMP格式图像所占的存储空间较大。
1.4UI设计风格1.4.1扁平化风格1.4.2几何风格1.4.3拟物化风格1.4.4玻璃风格1.4.1扁平化风格
扁平化风格是人们较为熟悉的一种设计风格，扁平化风格体现为在设计过程中采用简单元素实现干净、简洁的视觉效果，同时方便用户查找各实用功能，引导性较强，可以很好地满足用户的日常使用需求。扁平化风格的设计过程并不复杂，重点在于将实物进行关键点提炼和优化。在扁平化风格中，具体和抽象相结合，具有较好的功能辨识度。
1.4.2几何风格通过线条和几何图形的组合实现界面的设计，如圆形、圆角矩形、长方形、正方形、椭圆形、梯形、平行四边形、三角形等基础的形状通过组合形成较为新颖的图形，并构图布局搭建出让用户耳目一新的界面，从而使整个App界面的设计更加个性化。
1.4.3拟物化风格拟物化风格是接近实物的一种设计风格，设计的细节更加丰富，给人们带来更强的真实感。拟物化的图标和控件具备真实物体的立体感和层次感，通过高光、视觉差等增添用户的亲切感。
1.4.4玻璃风格玻璃风格是类似毛玻璃效果的一种设计风格，通过增加不透明度打造毛玻璃的效果，界面的设计清新通透，与周围的色彩和元素有很强的融合度。玻璃风格界面主次分明，又不突兀，优良的质感可大幅度提升用户的使用舒适度。
1.6课后练习题1．UI设计流程包括哪些环节？2．不同图像格式各自的特点有哪些？
移动UI设计案例教程（电子活页式）单元2UI设计元素单元内容简介：
列表布局从视觉上通过相似元素和对齐等形式给用户带来良好的观感，页面过渡平滑。
2.1.2列表布局2.1.3卡片布局卡片布局以图片为主，图文混排形成卡片，各卡片之间相互独立，传达的信息量较大，但占据的空间也较大。2.1.4瀑布流式布局瀑布流式布局是当前较为流行的一种界面布局，随着用户不断地滑动页面，界面不断地加载数据。它的扩展性较好，可有效激发用户向下继续滑动查看信息的兴趣。这种布局像瀑布一样，巧妙利用视觉层级吸引用户。2.1.5多面板布局多面板布局主要适用于分类较多，而且需要呈现的内容较为丰富的界面，这样的设计可以减少用户使用过程中跳转页面的次数。2.2UI设计色彩2.2.1色彩的构成2.2.2色彩的混合2.2.3色彩的调和2.2.4色彩的推移2.2.5色彩的联想2.2.6色彩心理应用2.2.1色彩的构成色彩的构成是指将两种或两种以上的色彩按照一定的原则，根据不同的目的重新组合、搭配，形成一种新的色彩关系的构成形式。色彩三要素是指色相、明度、纯度。
2.2.1色彩的构成1．色相色相即色彩的面貌，是色彩的首要特征，我们通常借助色彩的名称标识区分色相，如红色、橙色、绿色。色相是区分各种不同色彩最准确的标准之一。2．明度明度又叫作亮度，是指色彩的明暗、深浅程度，是人的眼睛对物体表面的明暗程度的感知的体现。3．纯度纯度是指颜色的鲜艳和纯净程度，又叫饱和度或彩度，不同的色彩不仅明度不同，纯度也不同。
2.2.2色彩的混合所谓色彩的混合，是指将某一种色彩混入另一种色彩，形成第三种与原来的色彩不同的新色彩，色彩混合主要有两种方式：加色混合法和减色混合法。1．加色混合法加色混合法即色光的混合，是指将不同颜色的色光混合到一起，产生新的色光。其特点是混合的色光越多，得到的新色光明度越高。2．减色混合法减色混合法是色料的混合，是指将不同的色料混合到一起，得到新的颜色，即颜料的混合。其特点是混合的颜色越多，颜色纯度越低。
2.2.3色彩的调和色彩调和是具有某种次序的色彩组合，是不同价值的色彩表现，在绘画艺术中，调和是指把具有相互近似的颜色进行重新配置，使画面颜色形成新的和谐统一的效果。
2.2.3色彩的调和1．同一调和同一调和是指两种或两种以上的色彩，在色相、明度、纯度上有某一种要素完全相同，变换其他要素以达到调和的目的，是一种简单的、容易形成统一感的调和方式。2．类似调和类似调和是指色彩的色相、明度、纯度中有一种或两种要素类似，以性质接近的色彩相互配置，使其具有深浅浓淡的层次变化，形成统一协调的效果。它具有较多的变化，但没有脱离以统一为主的配色原则。3．对比性调和对比性调和是指取色环中位置相对的两种颜色，如补色，通过某些特定规律和方法进行配置的调和方式。
2.2.4色彩的推移色彩的推移是指将色彩按照一定的方式进行逐渐的、循序的、有规律的变化。一般来说色彩的推移有明度推移、纯度推移和色相推移3种。色彩推移的特点是能够产生有节奏的韵律感和丰富的空间变化。
2.2.4色彩的推移1．明度推移选择一种明度与纯度均很低的色彩，逐渐等量加白；或者选择一种明度与纯度均很高的色彩，逐渐等量加黑，调出明度各不相同而明度差相等的色彩，然后用它们表现简单而生动的图形的过程叫作明度推移。
2.2.4色彩的推移2．纯度推移纯度推移是指选择任意一种纯色，逐步加入灰色调，混合出适当数量的纯度差均等的新色彩，构成一个阶梯状纯度的色彩序列。
2.2.4色彩的推移3．色相推移简单来说，色相推移就是从一种色彩均匀转换到另一种色彩，例如，红色到黄色，中间就有橙色的过渡；黄色到蓝色中间就有绿色的过渡；蓝色到红色中间就有紫色的过渡，以此形成一种有节奏感和美感的色彩形式。
2.2.5色彩的联想在UI设计中，色彩给人的心理作用和传达情感的应用具有非常重要的意义。不同搭配的色彩会传递出不同的情感。对于UI设计而言，色彩能够起到心理指引和暗示的作用。色彩除了具有具象性联想，还具有抽象性联想。色彩的联想是人通过以往的经验或记忆形成的。
2.4课后练习题1．常见的UI布局有哪些？在布局时需要注意哪些方面？2．谈谈不同的色彩搭配给人们带来的视觉差异有哪些。
移动UI设计案例教程（电子活页式）单元3移动端操作系统单元内容简介：
应当确保界面要展现的内容在默认的尺寸下是清晰可见的，这里的默认尺寸指的是不需要放大、不需要拖动滑动条的尺寸。捕捉用户的视觉注意力集中点，用户在阅读界面内容时往往是从上向下、从左向右进行的，一般界面上半部分是界面核心内容布局区域，应将最重要、最需传达给用户的内容放置在核心区域，同时常用的功能元素所占面积应该比较大，方便用户点击。3.1.4良好布局
3.2Android系统3.2.1布局灵活3.2.2色彩艳丽3.2.3操作便捷3.2.1布局灵活Android系统的布局较为灵活，可进行区域内容的自定义，整体的限制少，设计出的布局更加多样化。
3.2.2色彩艳丽Android系统选取鲜艳的颜色进行UI设计，如采用渐变色代替单纯的颜色，多种艳丽的色彩配合能给用户有活力、新颖的感受，达到吸引用户眼球的目的。
3.2.3操作便捷Android系统的App界面中出现的交互过程要尽可能简洁，交互的步骤尽可能少，尽量方便用户进行有效操作。Android系统控制中心，其中的功能可以直接操作，而且常用功能都在这里进行了展现，大大方便了用户使用。
3.3本单元小结本单元主要介绍了iOS和Android系统各自的特点。通过对本单元的学习，读者应该对两种操作系统有了了解，能够对两种操作系统在设计风格、界面布局等方面的差异进行合理、科学的分析，为后续结合操作系统特点进行App界面设计奠定基础。
3.4课后练习题1．举例说明移动端操作界面与PC端操作界面的区别。2．不同版本的Android系统在界面设计上有什么不同？移动UI设计案例教程（电子活页式）单元4移动App图标基础单元内容简介：
图标是一种图形符号，随着社会的进步，用户的需求呈现个性化的趋势，带动了图标的多样化设计。精致、新颖的图标在带给用户美的享受的同时，还可以很好地提升产品的可用性。学习目标素质目标：培养学生严谨的工作态度。知识目标：1．了解图标的概念；2．了解图标设计流程；3．掌握图标设计要点。技能目标：能够遵循图标设计流程进行图标设计。4.1图标基础概念4.1.1图案的概念4.1.2图标的概念4.1.3图标的分类图案是指在二维平面上以形状、线条、色彩等元素为基础，通过排列、组合和变形等方法形成具有装饰性、表现性和传达性的图形设计方案。图案作为设计艺术的基础，可以应用于多个领域，如纺织、服装、家居、建筑、包装等。通过对自然形象进行整理、加工和变化，图案可以创造出新的视觉现象，图案设计需要灵感与创造力，同时也需要技能和经验。4.1.1图案的概念
图标是具有明确指代含义的标志图形。从广义上讲，图标是高度浓缩并能够快捷传达信息，具有指代意义的便于记忆的图形符号，具有高度浓缩、能够快捷传达信息、便于记忆的特性，如男女厕所标志和各种交通标志等。从狭义上讲，图标可以应用于计算机软件中，包括程序标识、数据标识、命令选择、模式信号或开关切换、状态指示等。4.1.2图标的概念
4.2图标设计流程4.2.1明确主题4.2.2提炼核心形状4.2.3草图绘制4.2.4选择标准色4.2.5图标设计4.2.6切图输出图标设计是根据品牌的调性、产品的功能进行的，不同场景的图标设计方法有区别，因此需要先分析需求，确定图标的功能，清楚设计方向。本次设计的主题是饮食类App，需要对饮食进行推广，激发用户的用餐欲望。明确设计的主题后，接下来进入核心形状提炼阶段。4.2.1明确主题
设计是一种从生活中提取和加工原始素材的思维过程，通过运用创造性的艺术思维，创造出充实、富有灵感的设计作品，是对生活中的元素高度提炼，适当加入个人的艺术感知和表达，实现对事物的艺术创新加工是设计所需要的重要思维。因此，设计不仅是形似的再现，更是在生活基础上开展的新的艺术形式的展现。饮食类App的设计思路可以从“民以食为天”出发，“食小天”的名字也是取自其中。4.2.2提炼核心形状
对生活中的实物进行核心形状提炼后，就可以进行草图绘制工作了。在草图绘制过程中，UI设计师需要把提炼出的核心形状进行初步展现。草图的绘制方法和工具有很多种，如可以用笔直接在纸上绘制，这种绘制方法可以及时将设计的灵感保存，但因为是人工绘制，所以细节处理会有欠缺，也可以借助软件进行草图绘制。草图的方案不仅限于一种，只要想到好的创意都可以记录下来，团队在集体讨论后选取满意的方案进行后续设计。4.2.3草图绘制
食物的颜色丰富多彩，该App选取橙色作为标准色，期望给用户带来滋润、美味、舒适的印象，并且采用渐变效果，提升整体的设计感。4.2.4选择标准色
将设计好的草图进一步通过软件进行绘制，将选取的标准色合理融入，对各细节进行调整，完成图标设计工作。从图标中可以清晰地看到勺子、筷子、厨师帽、粮仓等实物的影子，融合完成的图标将产品特色很好地表现了出来。细节是体现产品风格的关键，在图标设计的最后，往往会从颜色、质感、造型等方面再加以修改、润色，形成体现产品特色的图标。4.2.5图标设计
不同场景对图标大小的要求不同，切图时一般会切出多个不同尺寸的图像，进行图标切图时只需要提供直角图标就可以了，系统会自动将直角图标转换为圆角图标。对于不同的设备尺寸，图标切图可根据倍图关系进行输出。4.2.6切图输出
4.3图标设计初探【课堂案例4-1】时钟图标绘制【课堂案例4-2】学位帽图标绘制【课堂案例4-3】折页图标绘制
绘制时钟图标选用传统的圆角矩形作为底板，设计清新、简易、不烦琐。时钟图标主要包含表盘、指针、刻度等，通过对实体形象进行抽象完成设计要素提取。【课堂案例4-1】时钟图标绘制
学位帽图标使用黑色作为主色，在设计过程中提取学位帽核心特征。学位帽图标学位帽实物中进行形状提炼，主要设计为方形，包含帽子、流苏等部分。【课堂案例4-2】学位帽图标绘制
折页图标选用黑色作为主色，通过对称上下错层呈现折页效果。折页图标由平行四边形组合形成，从折页展开的状态中进行主体轮廓提取。【课堂案例4-3】折页图标绘制
4.4本单元小结本单元主要介绍了图标的概念，对图标设计流程进行了梳理，通过对本单元的学习，读者能够对图标设计的基础知识有较为深入的了解。
4.5课后练习题1．优质的图标一般具备哪些特点？2．图标核心形状如何提炼？3．在设计不同功能的图标时要特别注意哪些方面？移动UI设计案例教程（电子活页式）单元5移动App图标风格单元内容简介：
按照设计风格，图标可以分为剪影图标、扁平化图标、拟物化图标等。在进行图标设计之前要先明确图标风格，保证整个UI设计风格的统一。学习目标素质目标：1．培养学生精益求精的工匠精神；2．培养学生发现美、创造美的能力。知识目标：1．了解图标风格分类；2．了解剪影图标的特点；3．了解扁平化图标的特点；4．了解拟物化图标的特点。技能目标：1．能够进行剪影图标设计；2．能够进行扁平化图标设计；3．能够进行拟物化图标设计。5.1剪影图标设计5.1.1线性剪影图标设计【课堂案例5-1】线性天气图标绘制【课堂案例5-2】线性开关图标绘制【课堂案例5-3】线性删除图标绘制5.1.2面性剪影图标设计【课堂案例5-4】面性确认图标绘制【课堂案例5-5】面性设置图标绘制【课堂案例5-6】面性笑脸图标绘制【课堂案例5-7】面性相机图标绘制【课堂案例5-8】面性文档图标绘制绘制图标时，不同的设计师有自己的设计习惯，使用不同的设计方法都可以实现设计目标。5.1.1线性剪影图标设计
线性天气图标以云朵为主要参照物，云朵较为灵活多变，选取关键节点时，将重心放在云朵柔软、细腻的细节上。【课堂案例5-1】线性天气图标绘制
设计开关图标时可以联想到传统挂锁的开关状态，从挂锁实物中提取核心形状用于加工，完成绘制工作。【课堂案例5-2】线性开关图标绘制
线性删除图标主要用来进行删除等操作，属于功能图标。在人们的日常使用中对功能图标已经逐步形成了较为统一的认知，设计这类图标时应当遵循人们的认知规律。因此用垃圾桶造型表示删除，线性删除图标主要包括垃圾桶的主体和垃圾桶的盖子部分。【课堂案例5-3】线性删除图标绘制
面性图标以填充为主要特征，具有一定的美学一致性。这里的美学一致性是指图标中的各种类似元素保持一致，例如，选取的圆角矩形的尺寸、颜色等，如果多次出现，则应当在凸显主题的前提下保持一致。5.1.2面性剪影图标设计
确认图标使用对号的造型来表示确认操作，选取土黄色为底色，对号选取白色进行突出显示。【课堂案例5-4】面性确认图标绘制
使用黑色作为设置图标主色，对齿轮实物造型进行形状提炼，齿轮缺口采用弧度设计。【课堂案例5-5】面性设置图标绘制
使用黑色作为笑脸图标主色，以眼睛、嘴巴形状表现图标。笑脸图标对人物面部实物造型进行形状提炼，包含用圆代表的脸和眼睛、用半圆代表的嘴巴，整体的形象非常简单，无多余元素。【课堂案例5-6】面性笑脸图标绘制
相机图标使用黑色作为主色，直接对相机轮廓进行呈现。相机图标从相机实物中进行形状提炼，突出展现镜头和相机的造型。镜头选取圆环造型；相机主体选用圆角矩形轮廓，配合梯形完成主造型设计。【课堂案例5-7】面性相机图标绘制
文档图标使用黑色作为主色，内容则以反差色白色作为主色。文档主要由纸张和内容组成，因此在设计文档图标时也将重点放在这两部分上。文档主要是文本内容的记录，在设计过程中将文本抽象为矩形呈现。【课堂案例5-8】面性文档图标绘制
5.2扁平化图标设计5.2.1纯平面扁平化图标【课堂案例5-9】纯平面扁平化电池图标设计5.2.2折纸风扁平化图标【课堂案例5-10】折纸风扁平化信封爱心未读图标设计【课堂案例5-11】折纸风扁平化信封爱心已读图标设计5.2.3长投影扁平化图标【课堂案例5-12】长投影下载图标设计5.2扁平化图标设计5.2.4轻折叠扁平化图标【课堂案例5-13】轻折叠多媒体图标设计【课堂案例5-14】轻折叠扁平化计算器图标设计5.2.5微立体扁平化图标【课堂案例5-15】微立体定位图标设计纯平面扁平化图标是简洁、清晰的扁平化图标，辨识度非常高，色彩简单，因为图标简单、清新，所以在色彩选取上更加明朗，体现更加舒适的设计感。5.2.1纯平面扁平化图标
从实物电池出发，观察电池的组成，电池主要由电池主体、电池电极等构成。考虑从具体到抽象的提炼，增加电量作为标识。在色彩的选取上，考虑商务应用场景，这款纯平面扁平化电池图标底板选择蓝色为主色。【课堂案例5-9】纯平面扁平化电池图标设计
纯平面扁平化图标是简洁、清晰的扁平化图标，辨识度非常高，色彩简单，因为图标简单、清新，所以在色彩选取上更加明朗，体现更加舒适的设计感。5.2.2长投影扁平化图标
选取折纸风进行图标设计，考虑到应用场景为”情人节的悄悄话”，所以选取爱心和信封作为主要元素；在颜色选取上，采用热情奔放的红色以及温柔浪漫的粉色作为主色，通过不同深浅的颜色及图层顺序的改变形成折纸层次感。折纸风扁平化图标通常通过不同的微色差、不同的明度塑造折叠的效果，并适当添加投影构造立体层次感。【课堂案例5-10】折纸风扁平化信封爱心未读图标设计
对于已读信封，即打开的信封，突出的主体集中在信封内部的信件内容上，此案例通过颜色对比体现信纸的折纸感。【课堂案例5-11】折纸风扁平化信封爱心已读图标设计
长投影扁平化图标的重点在于投影效果的制作.通过观察，投影处于齿轮与底板内部，底板外无投影。长投影扁平化图标色彩对比大，可通过长投影效果打造层次感。5.2.3长投影扁平化图标
下载图标主要的载体为云存储，考虑加入云的造型，下载动作一般使用向下的箭头来表示。【课堂案例5-12】长投影下载图标设计
轻折叠扁平化图标往往借助视觉差形成对比，比如上下对比、左右对比等，通过明暗视觉差展现折叠效果，层次感会体现得更加明显，而且整体设计感并不厚重。5.2.4轻折叠扁平化图标
多媒体图标选用轻折叠风格，以颜色接近的绿色作为主色，同时制造轻折叠反差，主体选用胶片造型，内置三角形代表播放按钮。【课堂案例5-13】轻折叠多媒体图标设计
计算器图标绘制从计算器实物出发，包含计算器显示屏和按钮的模拟设计，选用轻折叠扁平化图标风格，其折叠效果不厚重，整体给人的感觉很轻松、简洁，视觉效果好。【课堂案例5-14】轻折叠扁平化计算器图标设计
微立体扁平化图标在视觉上体现出一定的厚度。5.2.5微立体扁平化图标
定位图标选取常见的导航中的定位点作为主体，选取红色为定位点主色，红色的定位点在蓝色的底板上表现得更为显眼，起到明确定位主题的作用。【课堂案例5-15】微立体定位图标设计
通过具体的拟物化图标设计案例对拟物化图标进行深入讲解。拟物化图标设计中要注意细节的取舍，过多或过少的细节都容易给用户造成识别困扰，在设计过程中要选取合适的材质用于绘制拟物化图标，如用皮革增加质感、用金属打造科技感等，提升图标美感。5.3.2拟物化图标案例
拟物化旋转按钮图标具有金属质感，绘制的重点一方面是金属背景的设计，如金属拉丝的质感等，另一方面是按钮的立体感与背景的融合。【课堂案例5-16】拟物化旋转按钮图标设计
拟物化卡包图标（横版）需表现皮革材质，首先对素材图片进行加工处理，接着通过图层样式的设置和调整制作皮革实物效果，打造皮革质感。【课堂案例5-17】拟物化卡包图标（横版）设计
拟物化卡包图标（竖版）与拟物化卡包图标（横版）类似，同样需表现皮革材质，区别在于拟物化卡包图标（竖版）为上下打开卡扣设计。【课堂案例5-18】拟物化卡包图标（竖版）设计
5.4本单元小结本单元主要介绍了剪影图标、扁平化图标、拟物化图标的特点，并通过翔实的案例对各类风格的图标设计方法和技巧进行了讲解。通过本单元的学习，读者可以针对产品项目需求选取合适的图标风格并完成设计工作。
5.5课后练习题1．剪影图标的使用场景主要有哪些？2．扁平化图标有哪些特点？设计时要遵守哪些原则？3．拟物化图标是如何表现实物细节的？移动UI设计案例教程（电子活页式）单元6界面常用控件单元内容简介：
界面由各类控件组合而成，其中比较常用的控件如滑块、表单、按钮等，为用户与设备进行交互提供了丰富、灵活的方式。不同的控件在界面中起着不同的作用，有着不同的风格特点。学习目标素质目标：1．培养学生的发散思维能力和创新能力；2．培养学生多角度观察事物的能力。知识目标：1．了解界面常用控件的类型；2．掌握滑块控件的设计方法；3．掌握表单控件的设计方法；4．掌握按钮控件的设计方法。技能目标：能够设计不同风格界面控件。6.1滑块设计6.1.1滑块构成6.1.2滑块分类【课堂案例6-1】线条滑块设计【课堂案例6-2】旋转滑块设计滑块一般由滑动槽、滑动块、滑动条构成，滑动块在滑动槽中滑动，不会超出该区域；滑动条通常最小值在左边，最大值在右边，为了提供更好的用户体验，有时候可以在滑动条的左右两侧设定数值。滑动块主要有圆形、矩形、三角形等较为规则的形状，颜色辨识度高。6.1.1滑块构成
滑块按其风格可以分为线条滑块和旋转滑块。线条滑块以线条为主体。线条滑块设计简洁，分为有刻度和无刻度两种，在线条滑块设计过程中需要特别注意色彩的选取和滑动块大小的设定。旋转滑块以旋转造型为主体。旋转滑块形式多样，视觉冲击力较强，直观、精美的设计能给用户耳目一新的感觉。6.1.2滑块分类
案例分析：绘制一款播放进度控制线条滑块，以简易性设计为原则，突出滑块的功能性，方便用户使用。【课堂案例6-1】线条滑块设计
案例分析：绘制一款温度调节旋转滑块，需要设置相应刻度，实现可视化功能。【课堂案例6-2】旋转滑块设计
6.2表单设计6.2.1表单类型6.2.2下拉列表框设计【课堂案例6-3】类目下拉子菜单设计6.2.3搜索栏设计【课堂案例6-4】移动端APP搜索框设计6.2.4选择器设计【课堂案例6-5】日历界面设计6.2.5开关设计【课堂案例6-6】开关设计常见的表单有下拉列表框、输入框、搜索框、选择器等。不同表单的适用场景不同，可根据用户习惯、呈现功能和界面布局进行选择使用。在表单设计中要特别注意表单的整体布局和表单的字号大小，做到与界面相融合，比例协调，符合用户的使用习惯。科学、合理的表单设计可以在很大程度上提升用户体验，因此表单需要结合实际项目应用情况灵活调整，以方便用户使用为原则。6.2.1表单类型
下拉列表框要求用户在使用时只能选择其中的一个选项，下拉列表框开始处于隐藏状态，只有进行选择时才会展开，选择结束又折叠收起，这种形式能大大节约界面空间。6.2.2下拉列表框设计
案例分析：绘制一款类目下拉列表框，风格简单，能够实现类目下拉列表的展示。【课堂案例6-3】类目下拉列表框设计
搜索栏作为App界面设计的必备控件之一，对App的功能建设具有重要作用。在庞大的数据中如何快速找到自己所需的数据，是App满足个性化需求的重要一环。不同App的设计需求不同，搜索栏的展示方式也不同，比如有的App的搜索框就在界面中间上方位置，用户一眼就可以看到，直接输入内容搜索；有的App则没有直接显示搜索框，而是显示搜索按钮，只有点击搜索按钮时，才会展开搜索框。两者的设计各有优缺点，前者给用户带来的便捷性较强，后者较为节约界面空间，设计过程中可以结合实际需求进行选择。6.2.3搜索栏设计
案例分析：绘制一款移动端App搜索框，当用户没有输入搜索内容时，搜索框内部显示引导用户输入的提示文字，以此来提升用户体验。【课堂案例6-4】移动端App搜索框设计
选择器就是从一系列列表中选中某一个列表项的工具，移动端受界面空间的约束，想要在有限的空间中设置大量的选项时，选择器的优势就凸显了出来。6.2.4选择器设计
1．日历选择器日历选择器与实物日历类似，一般可以选择某个单独的日期或者某个范围内的日期。根据不同的移动设备，可以有不同的切换方式，如滑动切换、滚轮切换等。6.2.4选择器设计
3．级联选择器级联选择器通过级联菜单的形式对数据进行展示，选定第一级时会对应出现该选项包含的分类，第二级、第三级以此类推。级联选择器给用户带来了极大的便利，减少了在选择过程中需要分类查找的工作量。6.2.4选择器设计
案例分析：绘制一款移动App的日历界面，包括日历选择器可显示当前的日期，具备翻页按钮，日期以平铺形式展示，需要记录的日期可特殊标记。（1）翻页按钮（2）日历布局（3）特殊标记【课堂案例6-5】日历界面设计
1．案例分析设计一款切换开关，要求风格简约，结构布局合理。2．设计思路根据案例分析，选择圆角矩形作为开关的主形状进行设计。通过大圆角矩形中嵌套小圆角矩形的方式表现开关切换。【课堂案例6-6】开关设计
1．文本按钮文本按钮在界面中通常用一段文字来展现。按钮的风格要与App整体的风格一致，按钮要设计得显眼，UI设计师可以综合各种设计元素，提升按钮的新颖性、独特性。2．图文按钮图文按钮一般由图标、文字构成，需要搭配相应的背景、边框，添加阴影等效果。作为常用的视觉元素，设计按钮时需选择合适的尺寸、颜色，以形象化的形状表达按钮的含义，方便用户理解和使用。6.3.1按钮类型
简约风格的按钮设计在界面中非常常见，通过添加背景和简易文字就可以很清晰地表达按钮功能。6.3.2简约按钮设计
1．案例分析设计一款简约的确认按钮，要求设计风格简单，合理使用图层样式提升按钮的设计美感。2．设计思路在按钮设计中，常使用圆形、圆角矩形、矩形、三角形等形状作为主要形状，本案例对确认按钮进行设计，这里选择圆角矩形。整体选用常见的扁平化风格，通过添加描边等效果提升按钮的层次感。【课堂案例6-7】简约确认按钮设计
水晶按钮通过打造高光等效果具有更强的视觉冲击力，图像比文字更容易吸引用户的注意力，水晶效果的设置并不复杂，通过明暗对比，打造色彩对比鲜明、立体感较强的视觉效果。6.3.3水晶按钮设计
1．案例分析设计一款图文水晶确认按钮，要求按钮呈现高光的质感，立体感强、美观。2．设计思路根据案例分析，选择圆形作为按钮的主形状进行设计。高光的质感通过添加多种图层样式、调整不透明度来实现。【课堂案例6-8】水晶确认按钮设计
6.4本单元小结本单元对常用的界面控件进行了介绍，重点讲解了滑块、表单、按钮的设计知识和技巧。结合具体的案例，对常用界面控件进行分析的同时，带领读者动手完成控件制作。通过本单元的学习，读者应能够结合实际项目和产品功能，科学、合理地选择控件进行界面设计。
6.5课后练习题设计控件时，是不是添加的样式越多越好呢？说明你的理由。移动UI设计案例教程（电子活页式）单元7界面常用控件单元内容简介：
有的启动页对Logo进行加工和变形，这不但保留了原来产品的品牌形象，还给用户焕然一新的感觉。但是这种形式的启动页设计起来复杂很多，首先变形的Logo要与产品思维一致；其次变形的Logo要表达新的内涵，对产品品牌形象提供有力支撑。【课堂案例7-1】启动页案例分析
有的启动页展示Logo与标语的组合。【课堂案例7-1】启动页案例分析
在启动页中可以增加一些图画丰富和修饰界面，要注意一定要与主题协调，用来做修饰的图画要表现得更为含蓄，同时能较好地体现出品牌价值。【课堂案例7-1】启动页案例分析
引导页并不是所有App的标配，引导页一般具有功能介绍、协助问题解决等作用。引导页会随着版本更新等进行迭代更新，比如，版本更新后的新功能介绍、新版本的操作说明等，都可以在引导页展示。7.3.2引导页的特点
不同产品的引导页侧重点不尽相同，引导页的多个页面有的是该App的使用说明，有的是对该App主要功能和特色创新的介绍，有的是知识的宣讲等。引导页设计的出发点不同，对应内容也就不同。但是总的原则是向用户展示产品的强大功能，激发用户使用该App的兴趣，提升用户留存率。【课堂案例7-2】引导页案例分析
1．功能介绍型功能介绍型引导页是常见的一种引导页，主要对该App的功能进行提炼和展示，表达产品的功能和优势，配合图像对功能进行解释说明，让使用该App的用户对产品有大致的了解。【课堂案例7-2】引导页案例分析
2．操作指导型操作指导型引导页出现在用户首次打开App或小程序时，若担心用户学习使用App的成本过高，就可以用操作指导型引导页给用户以提示，如图7-7所示。操作指导型引导页在展现功能的同时，便于用户了解功能的使用方法，更有针对性地给用户指导。【课堂案例7-2】引导页案例分析
7.6子页子页也是App的重要组成页面，作为App的二级、三级等界面，子页会根据App的功能和用户指令对内容进行呈现。7.7本单元小结本单元从界面的分类、界面的组成等方面对App界面进行了详细介绍，为第四篇的项目实战提供了理论基础。
7.8课后练习题结合具体的App界面，谈谈界面视觉设计和用户体验的重要作用。移动UI设计案例教程（电子活页式）单元8iOS界面设计单元内容简介：
（2）引导页引导页的主要作用是介绍产品的主要功能和特点、引导用户使用App，在用户首次打开App时可以快速对产品有较为清晰的了解。8.3.2音乐App原型设计
（4）首页对一款App产品来讲，首页不仅可以清晰表现该App的特点、核心功能，还可以提供良好的用户体验，首页的设计至关重要。8.3.2音乐App原型设计
②将其拖动到工作区主题界面的音乐App启动图标上，调整热区大小，将音乐App启动图标和文字覆盖，为该热区添加“鼠标单击时”效果，选择“添加动作”中的“打开链接”，在“当前窗口”打开“启动页”。8.3.2音乐App原型设计
（3）设计引导页切换①引导页切换分为自动切换和手动切换两种。为“引导页切换”动态面板添加“页面载入时”交互事件。在检视区域双击“页面载入时”，在弹出的用例编辑对话框中选择“设置面板状态”。8.3.2音乐App原型设计
②为“引导页切换”动态面板添加“向左拖动结束时”交互事件。在检视区域双击“向左拖动结束时”。这里取消勾选“向后循环”和“循环间隔”复选框，“进入动画”和“退出动画”选择“向左滑动”。8.3.2音乐App原型设计
③同样地，为“引导页切换”动态面板设置“向右拖动结束时”的交互动作，在检视区域双击“向右拖动结束时”。至此，手动拖动轮播效果实现。8.3.2音乐App原型设计
在进行UI设计时需要先明确设计风格，风格是基于产品定位产生的，风格一致的界面给用户带来的体验会更好，能够将产品的功能和内涵更有效地传递给用户。本项目采用扁平化风格设计，降低形状的复杂程度，尽可能地用简单的形状直接呈现，同时将常用功能在界面中显眼的位置展示出来，以方便用户使用为原则。8.3.3音乐App风格分析
启动图标是App的重要入口，音乐App启动图标应直观地表达或凸显音乐的特征。【项目实战8-1】设计音乐App启动图标
本项目采用的是宽度为750像素，高度为1334像素的界面尺寸，在设计中需要特别注意状态栏的尺寸和各图标的布局，界面的左右两侧需要留空，文字和图标的设计要协调一致。【项目实战8-2】设计音乐App主题界面
引导页着重体现音乐App的核心功能，在设计过程中注意简洁风格和界面的衔接，保持视觉一致。【项目实战8-4】设计音乐App引导页
首页常见的表现形式有列表型、宫格型等，列表型首页可在一个页面中使用图文展示相同级别的模块；宫格型首页是用宫格布局对主要功能进行分布展示，尽可能地在屏幕上将功能展示完整.【项目实战8-6】设计音乐App首页
歌词页要包含歌名和歌词，提供滑动条方便用户拖动调整歌曲播放进度，符合用户听歌时的行为习惯。【项目实战8-8】设计音乐App歌词页
8.5课后练习题1．项目分析的主要环节有哪些？2．原型设计在界面设计工作中起到什么作用？3．在iOS的视觉设计中，图标、界面、字体设计规范有哪些？移动UI设计案例教程（电子活页式）单元9Android系统界面设计单元内容简介：