网页响应式设计的现状与趋势

网页响应式的现状与趋势 流动布局:原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念:在响应式设计的布局中，不再以像素(px)作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。 媒介查询:媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的，从而解决之前在单纯的布局设计中遗留的问题。 弹性图片:伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出设计产品时提出的概念，我们在后续的研究中可以以图片为典型，扩大研究范围:除了图片，还应该包括图标、图表、视频等信息内容的响应方式研究。 你想节约成本地去适应更多场景:> 资源都是有限的，但总是希望能利用有限的资源去获得更大的价值。虽然比起开发设计一个普通的网站来说，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是要低很多;从维护的角度来说，也会轻松很多。 你并不清楚要设计开发的全新产品更适合哪个场景:> 与其通过预测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下，做预测会加剧过程风险，使得结果存在巨大的挑战性。 你希望网站可以兼容未来的新设备:> 新的设备层出不穷，与其被动地进行更新维护，不如主动应万变，成为响应式。 当然这里只是说更适合，其实个人认为只要项目资源和时间允许，基本上大部分网站都可以去尝试实现响应式;而对于初次尝试响应式设计的，也可以从“简单浏览型页面”开始。 忘记设备:因为我们不知道用户会用什么样的设备来访问网站，因此，我们必须尽可能地把所有情况都囊括进来;所有的东西(布局、组件等)都能与不同类型的设备和平台相兼容。 优雅降级:虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法，但在此仅想表达在对布局做弹性设计时，内容从宽到窄的变化呈现，必须经过重重筛选，留存最核心的内容块。这种模式非常适合对已存在的pc页面产品进行响应式设计改造。 渐进增强:此概念是在Steven在2003年的SXSW活动上提出的。在本质上来说，就是把优雅降级倒过来:先创建一个基本体验，侧重让内容以一种简介的方式来展现;之后，在保证基本体验的前提下，开始着手做有关显示的布局和交互。而在此，也借用来说明下对于响应式设计的内容策略中，内容从窄到宽的变化呈现中，可以让内容的丰富度也相应地有所增加。这种模式与移动优先策略是相匹配的。 响应式图片:目前弹性图片的做法主要是:缩放、剪裁、分条件加载等实现方法本质上都只 是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。 跨端的交互:在响应式设计中，我们不仅要需要考虑桌面用户的使用习惯，还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的Hover，在移动端却是无比糟糕的体验，如何“求同存异”，让各端体验均能最佳，还是需要继续深入探究的。 性能:性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是一根硬骨头。 合作流程:响应式设计远远不止是一种简单的设计策略，它为Web项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。 众划算|