响应式概念幻灯片.pptx

响应式什么是响应式简而言之，就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。非响应式web设计：视觉不统一，非最佳视觉响应式设计：多终端视觉和操作体验非常风格统一移动化解决方案Web App响应式web设计中的大部分技术可以用在WebApp开发中缺点兼容性低版本浏览器兼容性有问题移动带宽流量相比较手机定制网站，流量稍大但比较加载一个完整pc端网站显然是小得多最大缺点需要很强的交互设计师，UI设计师，开发工程师配合才能完成优秀的响应式效果。苹果设备分辨率ipad 768*1024iphone4 640*960iphone4S 640*960iphone5 640*1136iphone5S 640*1136安卓设备分辨率低价机 480*800中价机 540*960中高价机 720*1280高端机 1080*1920响应式设计存在感有人说直接做一个网站，再专门开发一个手机版效果更好，否则设计思路会被限制在一些框架里响应式不仅是可以兼容各种手持设备，更重要的是可以兼容大屏幕电脑，以及未来一些未知的新设备已知设备未知设备固体布局，流体布局了解响应式页面之前，先要知道什么是固体布局，流体布局。固体布局特点固定宽度的布局更易于使用以及制定设计页面。每一个浏览器显示的宽度都是相同的，因此少了很多关于图像，表格，视频等这些宽度固定的内容的麻烦。没有浏览器不支持的最大宽度和最小宽度的说法即使网站设计可以匹配最小的屏幕分辨率，在较大分辨率的屏幕里依然可以正常显示。固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间，从而破坏“黄金分割”，“三分法”，综合平衡等其他设计原则。较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。无缝纹理，图案和图像的延续需要适应大的分辨率。在可用性方面，固定宽度布局总体效果不是很好。流体布局特点流体页面设计更具用户友好性，因为它可以根据用户的配置进行调整。在所有浏览器和屏幕分辨率中，白色空白区域大小相近，这样看起来更加吸引人。如果设计得好，流动布局可以消除较小分辨率屏幕中的水平滚动条。设计者无法掌控用户看到的效果，并且容易忽视一些问题，因为在他们特定的分辨率屏幕上，布局看起来很好。图像，视频和其他类型的内容可能需要多个宽度设置，以适应不同的屏幕分辨率。难以置信的是，大屏幕分辨率可能会因为缺少内容而产生多余的空白空间，从而减少了美感。框架原型规划响应式精髓响应式并非简单的设计3种尺寸的页面，而是自然适应各种范围内的尺寸。根据之前数据统计，我们可以得出以下几种尺寸范围480px以下（低端手机）480px-768px（主流手机）768px-1024px（平板电脑和台式电脑）1024px-1366px（宽屏电脑）1366px以上（高端电脑）注：响应式并不能无限缩小，目前最小分辨率兼容320px，低于320px将不再缩小，并且出现横向滚动条。当然还有很多尺寸，根据用户人群做具体分析响应式设计适用范围响应式设计通常需要考虑更多不同分辨率下的响应效果，花费的设计和开发时间成本可能是开发一个普通网站的好几倍。So…不适合的有：电子商务网站（注重功能，需要独立开发移动网站）门户网站（内容太多，需要独立开发触摸版或APP）中国中小企业网站（成本太高，老板不舍得，并且改版频繁）专题页面（开发周期短，更新快）先做PC版的页面还是手机版页面1024*768又被重视起来