首页 > 常见问答

响应式设计的现状与趋势

实习编辑 • 2023-12-08 11:30:42 • 常见问答 • 阅读 3

这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准的浪潮。这里本人基于一些资料文献及自己的陋见，谈谈响应式设计的一些现状和趋势。

源起

2010年5月，伊桑.马科特（ethanmarcotte）在alistapart写了一篇开创性的文章（题为responsivewebdesign），他利用三种已有的工具：流动布局（fluidgrids）、媒介查询（mediaqueries）和弹性图片（scalableimages）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。ethanmarcotte力劝设计师们要去利用那些web独有的特性去进行设计：我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且还能适应渲染它们的各种媒介。ethanmarcotte证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱web的灵活性。

响应式设计的现状与趋势

这里简单介绍下上面的提到的三个概念：流动布局（fluidgrids）、媒介查询（mediaqueries）和弹性图片（scalableimages）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义，设计师也应该有所了解：

流动布局：原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。

媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值开始。

模式

目前大多网站中选择成为响应式的设计模式主要有两种：

1、基于设备：通过主流设备的类型及尺寸来确定布局断点（breakpoint），设计多套样式，再分别投射到响应的设备。

2、内容优先：根据内容的可读性、易读性作为确定断点（breakpoint）的标准，即在对内容进行布局设计的时候，可以无视设备，有内容决定何时需要采用不同的呈现方式。

个人还是倾向内容优先的方式，这是真正符合响应式设计核心策略的模式，也是对未来友好的方式。从过去基本上是基于pc的几个尺寸，选择最佳的标准尺寸去设计页面；到现在移动设备已经玲琅满目，同时电视、穿戴设备也慢慢开始起来，已经不再有固定的尺寸；未来，将是更加无法预知的设备环境；那么什么才是王道呢？，而实际上，越来越多的网站选择成为响应式。2014年如此，2015年也还是会继续，因为这已经不是种趋势，而怡然是种常态了。

未来的路

虽然响应式设计的优势和趋势已被普遍认可，但目前响应式设计的模式的普及还是有很多难题需要突破：

1、响应式图片：目前弹性图片的做法主要是：缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。

2、跨端的交互：在响应式设计中，我们不仅要需要考虑桌面用户的使用习惯，还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的hover，在移动端却是无比糟糕的体验，如何求同存异，让各端体验均能最佳，还是需要继续深入探究的。

3、性能：性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是一根硬骨头。

4、合作流程：响应式设计远远不止是一种简单的设计策略，它为web项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。

最后，我想说下响应式体现的是一种高度适应性的设计思维模式。在响应式设计探究的道路上，响应式本身不是唯一目的，基于任意设备对页面内容进行完美规划的设计策略及工作流程应该是我们更大的课题。

原文标题：响应式设计的现状与趋势，如若转载，请注明出处：https://www.saibowen.com/wenda/23309.html
免责声明：此资讯系转载自合作媒体或互联网其它网站，「赛伯温」登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，文章内容仅供参考。

响应式设计的现状与趋势 响应式设计的现状与趋势介绍
赞 ( )
打赏 微信扫一扫微信扫一扫
上一篇：微信公众号怎么排版最美观？ 下一篇：ps取消黑白模式 ps不知道按了什么键,全图变灰色了，如何恢复颜色呀？

相关推荐