《响应式web设计》PPT课件.ppt
响应式web设计浅析,Responsive Web Design,Part1：为什么需要响应式web设计Part2：什么是响应式web设计Part3：优势OR不足Part4：移动终端屏显两要素Part5：设计流程Part6：设计师需具备的意识,目录,Part1,为什么需要响应式web设计,各种屏幕尺寸,各种浏览器,各种操作系统,各种访问设备,移动设备发展突飞猛进,53亿,400万,50万,2.5亿,超越,手机用户,iPhone4s上市前三天,安卓每天激活,Ipad出货量,2015年流量超过桌面端,客户需求,响应式web设计,解,解决方案,Part2,什么是响应式web设计,简言之，就是一个网站能兼容多个终端,什么是响应式web设计,Part3,优势0R不足,非响应式web设计：视觉不统一，非最佳视觉,？,响应式设计：多终端视觉和操作体验非常风格统一,兼容当前及未来新设备,未知设备,已知设备,节约成本,开发成本节约20%-30%维护成本轻松很多,相比较手机定制网站，流量稍大但比较加载一个完整pc端网站显然是小得多,兼容性,移动带宽流量,不足,低版本浏览器兼容性有问题,一般适用情况,响应式web设计,独立移动网站,重内容例如：形象展示,重功能例如：电子商务,Part4,移动终端屏显要素,移动浏览器内核,webkit内核,IOSAndroidBada(三星)BlackBerry OS 6WebOS(palm)S-class(LG)S40/60(Nokia),Opera Mobile:,Presto,Firefox:,Gecko,BlackBerry old:,Mango,Gecko,MicroB(meego):,2048 x 1536,iPad2,全新iPad,1024 x 768,iPad2 跟New iPad屏幕分辨率不同为什么两者对app及网站的显示内容尺寸一样？,问,-所有移动设备显示基础,坐标系统,坐标系统,屏幕分辨率,高：480points,宽：320points,高：960px,宽：640px,例如iPhone4：,答,常见设备坐标系统参数(竖屏),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）情况下,屏幕分辨率：,屏幕分辨率：,屏幕分辨率：,屏幕分辨率：,按坐标系统显示原理，设备浏览器也在设备坐标系统规范之列，但实际使用中，网站内容显示并没符合坐标系统规范,问,Iphone4 宽：320points,Viewport-,答,通过viewport把自己冒充成更宽的屏幕,宽：980px,meta name=viewport content=width=980px,常见设备viewport数值,iPhone,980,iPad,1024,Android,980,WinPhone,1024,（分辨率：480*800）情况下,Viewport可自定义,metaname=viewportcontent=“width=device-width;,http:/,宽度=设备宽度,metaname=viewportcontent=“width=320;,宽度=320px,metaname=viewportcontent=“width=960;,宽度=960px,响应式web设计原则：禁止浏览器按viewport响应,按设备坐标系统宽度显示,Part5,设计流程,用户研究与设备规格预估,1,框架原型规划,2,PS,AI,视觉设计,3,CSS,JS,前端构建,4,Part6,设计师需具备的意识,触屏移动设备基础手势动作,移动web设计优先,轻UI设计重内容设计,文字可读性,页面文字字号可延续桌面端设计大小,更高12px11px10px,响应式图片显示内容设计,http:/,保证宽度缩小后图片内容可读性与视觉美观,响应式宽屏图片设计,1024*768又被重视起来,1024768,无CSS Hover状态,交互形式的操作习惯,更符合手指点触操作-又大又平,系统对flash的兼容性不佳,避免用flash，html5,响应式web设计原则：禁止浏览器按viewport响应,按设备坐标系统宽度显示,在设计端获得移动端相同视觉大小的画布,1，计算设计用显示设备dpi,手机屏幕dpi计算公式:http:/dpi计算工具:http:/,2，设置PS文档属性,响应式Web设计：50实例例与实践：http:/,学院网站网络课程平台http:/:85/eol毕业设计课题,项目实施任务,:-),Thank u,
