移动端APPUI设计与交互基础教程-第3章--常见APP组件的设计与实现_第1页
移动端APPUI设计与交互基础教程-第3章--常见APP组件的设计与实现_第2页
移动端APPUI设计与交互基础教程-第3章--常见APP组件的设计与实现_第3页
移动端APPUI设计与交互基础教程-第3章--常见APP组件的设计与实现_第4页
移动端APPUI设计与交互基础教程-第3章--常见APP组件的设计与实现_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、设计与交互基础教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移动端APP UI03常见APP组件的设计与实现移动端APP UI设计除了之前讲解的图标设计以外，在各种页面交互过程中，还有诸如按钮、滑动条、表单和数据图表等功能组件。3.1 UI Kit概述UI Kit可以清晰的呈现整个产品的设计风格，以及色彩是否统一，便于设计师对设计进行全局的调整和修改，并且可以帮助后续研发人员能够更加清楚的找到当前设计的部分。图3-1 UI Kit3.2 按钮1什么是按钮无论是在网页端还是在手机端，按钮都是既普通又常见的交互设计元素。2按钮的按压状态当用

2、户在APP应用中对按钮执行一个操作时，会收到按钮的一个反馈，这个反馈就是按压状态。图3-2 按钮设计风格的变迁图3-4 按压状态3.2 按钮1推荐操作类按钮2次要操作类按钮3.2.1 按钮的种类图3-5 推荐操作按钮图3-6 次要操作按钮3.2 按钮3局部操作类按钮4吸底按钮3.2.1 按钮的种类图3-7 局部操作按钮图3-8 吸底按钮3.2 按钮（1）尽可能的简洁（2）按钮文案要简短、明晰，必要时增加紧迫感词语和动词（3）增加按钮的对比效果（4）增强按钮引导特性3.2.2 按钮的设计要点3.2 按钮3.2.3 扁平化按钮的制作图3-13 一组扁平化按钮3.2 按钮3.2.4 质感按钮的制作图

3、3-15 按钮的三层圆角矩形图3-16 水晶质感按钮最终效果3.3 滑动条3.3.1 扁平滑动条的制作图3-30 音乐播放器从滑动条3.3.2 质感滑动条的制作图3-31 质感滑动条3.4 表单3.4.1 表单结构与设计要点1表单结构表单的基本结构包含三个要素：标签（lable）、输入框（input）、提示语（placeholder）。2设计要点（1）自动聚焦与智能提示（2）尽量减少跳转页面（3）尽量使用行内标签（4）简化表单数量与颜色3.4 表单3.4.2 单选按钮与复选框制作图3-52 单选按钮与复选框3.4 表单3.4.3 文本框与下拉框制作图3-56 文本框与下拉框3.4 表单3.4.4 课堂巩固练习（反馈页表单）图3-59 反馈页表单3.5 数据图表3.5.1 认识数据图表（1）折线图（2）曲线图（3）饼图与环形图图3-60 折线图 图3-61 曲线图 图3-62 环形图3.5 数据图表3.5.1 认识数据图表（4）柱状图（5）雷达图图3-63 柱状图 图3-64 雷达图 3.5 数据图表3.5.2 数据图表的制作图3-65 运动类

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论