响应式设计的现状与趋势

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

源起

2010年5月，响应现状伊桑.马科(ke)特(te)（Ethan Marcotte）在“A List Apart”写了一篇开创性的式设文章（题为“Responsive Web Design” ），他利用三种已有的趋势工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的响应现状网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的式设特(te)性去进行设计： “我们可以(yi)将不(bu)同联网设备上众多的体验(yan)，当作是趋势同一网站体验的不同侧面来对待，而不要为每种设备进(jin)行单独剪裁而使得设计彼此断开，响应现状这才是式设我们前进的方向。虽然我(wo)们已经能够设计出最佳的趋势视觉体验，但还要把基于标准的(de)技术(shu)也嵌入到我们的设计中去(qu)，这样才能使得我们的设计(ji)不仅灵活，而且还能适应渲染它(ta)们的各种媒介。” Ethan Marcotte证明了一种在多种(zhong)设备上都(dou)能提供卓越体验的方法的存在，而且这一方法(fa)不会忽视不同设备的差异，也不会强调设计师的控制(zhi)权，而是选择了顺其自然并拥抱Web的(de)灵活性。

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

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

媒介查询 ：媒介查询可以让你根据在特定环境下查询到的(de)各种属性值——比如设备类(lei)型(xing)、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样(yang)式。通过使(shi)用(yong)媒介查询，可以获取到设备及设备的特性，并给出(chu)求同存(cun)异的方案，从而解决之前在单纯的布局设计中遗留的问题。

弹性图片 ：伴随布局的弹性，图片作为信息重要的形式之一也必(bi)须(xu)有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出(chu)设计产品时提(ti)出的概念，我们在后续的(de)研究中可以以(yi)图片(pian)为典型(xing)，扩大研究范围：除了图片，还应该包括图(tu)标、图(tu)表、视频等信息内容的响应方式研究。

盛行

响(xiang)应式设计的概念从提出至今，一直不断蔓延扩散，并(bing)得到各方认(ren)可的主要原因：

1、外部环境 ：快速增长(chang)且日趋加剧的可联(lian)网设备的多样化，让现今已不再有标准的(de)屏幕尺寸；

2、自身特色 ：严格定义的响(xiang)应式一般是(shi)指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可以(yi)适应各种尺寸和配置的设备，可以无处不在。

3、

：响应式设计概念一提(ti)出，各(ge)大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。

当然也并不是所有的情况都理所应带应该采用(yong)响应(ying)式设计(ji)，那么什么(me)情况下更适合采用响应式呢？

1、你想节约成(cheng)本地去适应(ying)更多场景

资源都是有限的(de)，但总(zong)是希望能(neng)利用有限(xian)的资源去获得更(geng)大的价值(zhi)。虽然比起开发设计一个普通的网站来说(shuo)，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是(shi)要低很多；从维护的(de)角度来说，也会(hui)轻松很多。

2、你并不清楚要(yao)设计开发的全新产品更适合哪个场景

与其(qi)通过预测挑选核心设备再进行分别(bie)设计，倒不如先花些心思将网站打(da)造得更具弹性，使其在各种设备中都拥有尽可能优秀体验。因(yin)为(wei)在各方面都未知都情况下，做预测会加剧过(guo)程风(feng)险，使得结果存在巨大的挑战性。

3、你希望网站可以兼容未来的新设备

新的(de)设备层出不穷，与其被(bei)动地进行更新维护，不如主动应万变，成为响(xiang)应式。 当然这里(li)只(zhi)是说更适合，其实(shi)个(ge)人认为(wei)只要项目资源和时间允许，基本上大部分(fen)网站都可以去尝试实现响应式；而(er)对于初次尝试(shi)响应式设计的，也可以从“简单浏览型(xing)页面”开(kai)始。

模式(shi)

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

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

个人还是倾向内容优先的方式，这是真正符合响应式设计核心策略的(de)模式，也是对未来友好的方式。 从过(guo)去基本上是基(ji)于pc的几个尺寸，选择最佳的标准尺寸去设计页面；到现在(zai)移动设备已经玲琅满目，同时电视、穿戴设备也慢慢开始起来，已经不再有(you)固定的尺寸；未来，将是更加无法预知的设备环境；那么什么才是王道呢？——就是内容本身！ 变化总是来得快且狠，我们要做的就是(shi)抓住那根可(ke)以贯通(tong)全局的(de)线！

在内(nei)容优先的策略中，有三点思维模式可以贯穿整个响应式设计的过程：

1、忘记设备： 因为我们不(bu)知道用户会用什么样的(de)设备来访问网站，因此，我们必须(xu)尽可能地把所有情况都囊括进来；所(suo)有的东西(xi)（布(bu)局、组件等）都能与不同类型的设备和平台相兼容。

2、

虽然这个概念一开始是技术实现上对新(xin)的特性在老的浏览器上无法很好实现(xian)时的折中做法，但在此仅想表达在对布局做弹性设计时，内容(rong)从(cong)宽到窄的变化呈现，必须(xu)经过重重筛选，留存最核心的内容块。这种模式非常适合对已存在的pc页面产品进行响应式设计改造。

3、渐进增强： 此概念是在Steven在(zai)2003年的SXSW活动上提出的。在本质(zhi)上来说，就是把优雅降级倒过来：先创建(jian)一个基本体验，侧重让内容以一种简介的方(fang)式来展现；之(zhi)后，在保证基本体验的前(qian)提下，开始着手做有(you)关显示的布局和交互。而在此，也(ye)借用来说明下对于响应式设计的内容策略中，内(nei)容从窄到宽的变化呈现中，可以让内容的丰富度也相应地有所增加。这种模式与移动优先策略是相匹配的。

当(dang)然，目前响应式也是(shi)有存在各种争论的，也(ye)许你有(you)一个很好(hao)的理由不用响应式网页设计？但我想没人会说，“让我们摆脱响应式设计吧”，而实(shi)际上，越来越多的网站选择成(cheng)为响应式。2014年如(ru)此，2015年也还是会继续，因为这已经不是种趋势，而怡然是种常态了。

未来的路

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

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

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

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

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