第3章-常见APP组件的设计与实现课件

设计与交互基础教程MOBILEAPPUIDESIGNANDINTERACTIONBASICCOURSE工业和信息化“十三五”人才培养规划教材移动端APP

UI吴丰编著设计与交互基础教程MOBILEAPPUIDESIGN103常见APP组件的设计与实现移动端APPUI设计除了之前讲解的图标设计以外，在各种页面交互过程中，还有诸如按钮、滑动条、表单和数据图表等功能组件。03常见APP组件的设计与实现移动端APPUI设计除了之前23.1UIKit概述UIKit可以清晰的呈现整个产品的设计风格，以及色彩是否统一，便于设计师对设计进行全局的调整和修改，并且可以帮助后续研发人员能够更加清楚的找到当前设计的部分。图3-1UIKit3.1UIKit概述UIKit可以清晰的呈现整个产品33.2按钮1．什么是按钮无论是在网页端还是在手机端，按钮都是既普通又常见的交互设计元素。2．按钮的按压状态当用户在APP应用中对按钮执行一个操作时，会收到按钮的一个反馈，这个反馈就是按压状态。图3-2按钮设计风格的变迁图3-4按压状态3.2按钮1．什么是按钮图3-2按钮设计风格的变迁图43.2按钮1．推荐操作类按钮2．次要操作类按钮3.2.1按钮的种类图3-5推荐操作按钮图3-6次要操作按钮3.2按钮1．推荐操作类按钮3.2.1按钮的种类图353.2按钮3．局部操作类按钮4．吸底按钮3.2.1按钮的种类图3-7局部操作按钮图3-8吸底按钮3.2按钮3．局部操作类按钮3.2.1按钮的种类图363.2按钮（1）尽可能的简洁（2）按钮文案要简短、明晰，必要时增加紧迫感词语和动词（3）增加按钮的对比效果（4）增强按钮引导特性3.2.2按钮的设计要点3.2按钮（1）尽可能的简洁3.2.2按钮的设计要点73.2按钮3.2.3扁平化按钮的制作图3-13一组扁平化按钮3.2按钮3.2.3扁平化按钮的制作图3-13一83.2按钮3.2.4质感按钮的制作图3-15按钮的三层圆角矩形图3-16水晶质感按钮最终效果3.2按钮3.2.4质感按钮的制作图3-15按钮93.3滑动条3.3.1扁平滑动条的制作图3-30音乐播放器从滑动条3.3.2质感滑动条的制作图3-31质感滑动条3.3滑动条3.3.1扁平滑动条的制作图3-30103.4表单3.4.1表单结构与设计要点1．表单结构表单的基本结构包含三个要素：标签（lable）、输入框（input）、提示语（placeholder）。2．设计要点（1）自动聚焦与智能提示（2）尽量减少跳转页面（3）尽量使用行内标签（4）简化表单数量与颜色3.4表单3.4.1表单结构与设计要点1．表单结构113.4表单3.4.2单选按钮与复选框制作图3-52单选按钮与复选框3.4表单3.4.2单选按钮与复选框制作图3-52123.4表单3.4.3文本框与下拉框制作图3-56文本框与下拉框3.4表单3.4.3文本框与下拉框制作图3-56133.4表单3.4.4课堂巩固练习（反馈页表单）图3-59反馈页表单3.4表单3.4.4课堂巩固练习（反馈页表单）图3-143.5数据图表3.5.1认识数据图表（1）折线图（2）曲线图（3）饼图与环形图图3-60折线图

图3-61曲线图

图3-62环形图3.5数据图表3.5.1认识数据图表（1）折线图图3153.5数据图表3.5.1认识数据图表（4）柱状图（5）雷达图图3-63柱状图

图3-64雷达图3.5数据图表3.5.1认识数据图表（4）柱状图图3163.5数据图表3.5.2数据图表的制作图3-65运动类APP数据图表——曲线图表3.5数据图表3.5.2数据图表的制作图3-65173.5数据图表3.5.3课堂巩固练习（环形数据图表）图3-78环形数据图表3.5数据图表3.5.3课堂巩固练习（环形数据图表）18谢谢观看！谢谢观看！19设计与交互基础教程MOBILEAPPUIDESIGNANDINTERACTIONBASICCOURSE工业和信息化“十三五”人才培养规划教材移动端APP

UI吴丰编著设计与交互基础教程MOBILEAPPUIDESIGN2003常见APP组件的设计与实现移动端APPUI设计除了之前讲解的图标设计以外，在各种页面交互过程中，还有诸如按钮、滑动条、表单和数据图表等功能组件。03常见APP组件的设计与实现移动端APPUI设计除了之前213.1UIKit概述UIKit可以清晰的呈现整个产品的设计风格，以及色彩是否统一，便于设计师对设计进行全局的调整和修改，并且可以帮助后续研发人员能够更加清楚的找到当前设计的部分。图3-1UIKit3.1UIKit概述UIKit可以清晰的呈现整个产品223.2按钮1．什么是按钮无论是在网页端还是在手机端，按钮都是既普通又常见的交互设计元素。2．按钮的按压状态当用户在APP应用中对按钮执行一个操作时，会收到按钮的一个反馈，这个反馈就是按压状态。图3-2按钮设计风格的变迁图3-4按压状态3.2按钮1．什么是按钮图3-2按钮设计风格的变迁图233.2按钮1．推荐操作类按钮2．次要操作类按钮3.2.1按钮的种类图3-5推荐操作按钮图3-6次要操作按钮3.2按钮1．推荐操作类按钮3.2.1按钮的种类图3243.2按钮3．局部操作类按钮4．吸底按钮3.2.1按钮的种类图3-7局部操作按钮图3-8吸底按钮3.2按钮3．局部操作类按钮3.2.1按钮的种类图3253.2按钮（1）尽可能的简洁（2）按钮文案要简短、明晰，必要时增加紧迫感词语和动词（3）增加按钮的对比效果（4）增强按钮引导特性3.2.2按钮的设计要点3.2按钮（1）尽可能的简洁3.2.2按钮的设计要点263.2按钮3.2.3扁平化按钮的制作图3-13一组扁平化按钮3.2按钮3.2.3扁平化按钮的制作图3-13一273.2按钮3.2.4质感按钮的制作图3-15按钮的三层圆角矩形图3-16水晶质感按钮最终效果3.2按钮3.2.4质感按钮的制作图3-15按钮283.3滑动条3.3.1扁平滑动条的制作图3-30音乐播放器从滑动条3.3.2质感滑动条的制作图3-31质感滑动条3.3滑动条3.3.1扁平滑动条的制作图3-30293.4表单3.4.1表单结构与设计要点1．表单结构表单的基本结构包含三个要素：标签（lable）、输入框（input）、提示语（placeholder）。2．设计要点（1）自动聚焦与智能提示（2）尽量减少跳转页面（3）尽量使用行内标签（4）简化表单数量与颜色3.4表单3.4.1表单结构与设计要点1．表单结构303.4表单3.4.2单选按钮与复选框制作图3-52单选按钮与复选框3.4表单3.4.2单选按钮与复选框制作图3-52313.4表单3.4.3文本框与下拉框制作图3-56文本框与下拉框3.4表单3.4.3文本框与下拉框制作图3-56323.4表单3.4.4课堂巩固练习（反馈页表单）图3-59反馈页表单3.4表单3.4.4课堂巩固练习（反馈页表单）图3-333.5数据图表3.5.1认识数据图表（1）折线图（2）曲线图（3）饼图与环形图图3-60折线图

图3-61曲线图

图3-62环形图3.5数据图表3.5.1认识数据图表（1）折线图图3343.5数据图表3.5.1认识数据图表（4）柱状图（5）雷达图图3-63柱状图

图3-64雷达图3.5数据图表3.5