人机界面设计10-响应式WEB设计.pptx

Part1：为什么需要响应式WEB设计;各种屏幕尺寸;各种浏览器;各种浏览器;各种访问设备;移动设备发展突飞猛进;各种操作系统;客户需求;Part2：为什么需要响应式设计;市场需求;非响应式web设计：视觉不统一，非最佳视觉;响应式设计：多终端视觉和操作体验非常风格统一;兼容当前及未来新设备;;节约成本;相比较手机定制网站，流量稍大 但比较加载一个完整pc端网站显然是小得多;;Part3 ：什么是响应式WEB设计;什么是响应式WEB设计;响应式web设计对交互设计和前端实现提出了更高的要求，需要考虑清楚不同分辨率下页面的布局变化、内容的缩放等。;响应式的层次;1.响应式布局;2.响应式内容;3.响应式操作;Part4：如何实现响应式设计;媒体查询;媒体查询;媒体查询;媒体查询;使用媒体查询适配对应样式;为不同媒体及特性指定样式有两种方式;媒体查询断点;常用移动设备媒体查询条件;媒体查???实例;Part5;移动浏览器内核;;;;;;视口（viewport）;视口（viewport）;;;响应式web设计原则：禁止浏览器按viewport响应;快速响应式开发-Bootstrap ;简介： Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap颇受欢迎，一直是GitHub上的热门开源项目，包括NASA,MSNBC的Breaking News都使用了该项目。 特点： Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。 ;BS整体框架;BS整体框架;Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。 Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。;预编译的Bootstrap;您可以创作演绎作品 ;DTD;!DOCTYPE;浏览器/设备支持;移动设备优先;viewport;媒体查询的核心技术;Bootstrap-栅格系统 ;栅格系统原理;容器;div class=container-fluid ... /div ;全局CSS - 网格系统;实例：从堆叠到水平排列;通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。;栅格系统原理;栅格系统原理;响应式工具;如何重写Bootstrap样式;重新编译 Sass 或 Less 通过CSS规则，覆盖默认样式;如何解决浏览器兼容性;强制使用最新内核 meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 meta name=renderer content=webkit / 2. Bsie（鄙视IE） Bootstrap IE6 兼容库 bootstrap/css/bootstrap-ie6.css :这是bsie的主要的css文件。 bootstrap/css/ie.css :这是bsie额外添加的css补丁 这个文件中的大部分内容无法写入到 .less 文件中，并且必须紧跟在 bootstrap-ie6.css 之后在head 中引入。;Bootstrap全局CSS样式;全局CSS - 表格;表格 – 用法;div class=table-responsive table class=table ... /table /div ;全局CSS - 表单;全局CSS - 表单控件;全局CSS - 按钮;全局CSS - 图像;Bootstrap插件;1. Bootstrap插件概览;Bootstrap插件引用;2. Bootstrap插件详解;Bootstrap插件 – 模态窗口;模态窗口 – 用法;模态窗口 – 方法;模态窗口 – 事件;Bootstrap插件 – 标签页;标签页 – 用法;标签页 – 用法;响应式设计流程 ;用户研究与设备规格预估;用户研究与设备规格预估;用户研究与设备规格预估;框架原型规划;框架原型规划;框架原型规划;框架原型规划;视觉设计;视觉设计;视觉设计;前端构建;前端构建;WEB前端;web1.0时代：table布局时代 美术工程师(Art Engine