《《响应式web设计》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《响应式web设计》PPT课件.ppt（54页珍藏版）》请在金锄头文库上搜索。
1、响应式web设计浅析 ResponsiveWebDesign Part1 为什么需要响应式web设计Part2 什么是响应式web设计Part3 优势OR不足Part4 移动终端屏显两要素Part5 设计流程Part6 设计师需具备的意识 目录 Part1 为什么需要响应式web设计 各种屏幕尺寸 各种浏览器 各种操作系统 各种访问设备 移动设备发展突飞猛进 53亿 400万 50万 2 5亿 超越 手机用户 iPhone4s上市前三天 安卓每天激活 Ipad出货量 2015年流量超过桌面端 客户需求 响应式web设计 解 解决方案 Part2 什么是响应式web设计 简言之 就是一个网站能兼
2、容多个终端 什么是响应式web设计 Part3 优势0R不足 非响应式web设计 视觉不统一 非最佳视觉 响应式设计 多终端视觉和操作体验非常风格统一 兼容当前及未来新设备 未知设备 已知设备 节约成本 开发成本节约20 30 维护成本轻松很多 相比较手机定制网站 流量稍大但比较加载一个完整pc端网站显然是小得多 兼容性 移动带宽流量 不足 低版本浏览器兼容性有问题 一般适用情况 响应式web设计 独立移动网站 重内容例如 形象展示 重功能例如 电子商务 Part4 移动终端屏显要素 移动浏览器内核 webkit内核 IOSAndroidBada 三星 BlackBerryOS6WebOS p
3、alm S class LG S40 60 Nokia OperaMobile Presto Firefox Gecko BlackBerryold Mango Gecko MicroB meego http www quirksmode org mobile browsers html 2048x1536 iPad2 全新iPad 1024x768 iPad2跟NewiPad屏幕分辨率不同为什么两者对app及网站的显示内容尺寸一样 问 所有移动设备显示基础 坐标系统 坐标系统 屏幕分辨率 高 480points 宽 320points 高 960px 宽 640px 例如iPhone4 答
4、常见设备坐标系统参数 竖屏 iPhone 宽 320高 480 iPad 宽 1024高 768 Android 宽 320高 533 WinPhone 宽 300高 500 数据仅供参考 Android系统开源 设备生产商定制化较多 ipad 1024 768ipad2 1024 768新ipad 2054 1536 Iphone3g 320 480Iphone3gs 320 480Iphone4 640 960Iphone4s 640 960 480 800 分辨率 480 800 情况下 屏幕分辨率 屏幕分辨率 屏幕分辨率 屏幕分辨率 按坐标系统显示原理 设备浏览器也在设备坐标系统规范之
5、列 但实际使用中 网站内容显示并没符合坐标系统规范 问 Iphone4宽 320points Viewport 答 通过viewport把自己冒充成更宽的屏幕 宽 980px metaname viewport content width 980px 常见设备viewport数值 iPhone 980 iPad 1024 Android 980 WinPhone 1024 分辨率 480 800 情况下 Viewport可自定义 metaname viewport content width device width 宽度 设备宽度 metaname viewport content widt
6、h 320 宽度 320px metaname viewport content width 960 宽度 960px 响应式web设计原则 禁止浏览器按viewport响应 按设备坐标系统宽度显示 Part5 设计流程 用户研究与设备规格预估 1 框架原型规划 2 PS AI 视觉设计 3 CSS JS 前端构建 4 Part6 设计师需具备的意识 触屏移动设备基础手势动作 移动web设计优先 轻UI设计重内容设计 文字可读性 页面文字字号可延续桌面端设计大小 更高12px11px10px 响应式图片显示内容设计 保证宽度缩小后图片内容可读性与视觉美观 响应式宽屏图片设计 1024 768又被重视起来 1024768 无CSSHover状态 交互形式的操作习惯 更符合手指点触操作 又大又平 系统对flash的兼容性不佳 避免用flash html5 响应式web设计原则 禁止浏览器按viewport响应 按设备坐标系统宽度显示 在设计端获得移动端相同视觉大小的画布 1 计算设计用显示设备dpi 手机屏幕dpi计算公式 dpi计算工具 2 设置PS文档属性 响应式Web设计 50实例例与实践 学院网站网络课程平台 85 eol毕业设计课题 项目实施任务 Thanku
