Responsive design 和 Adaptive design 的区别?

看了一些文章,还是没搞懂这两个的区别,求高人指点。
关注者
352
被浏览
43423

10 个回答

由于 responsive design 下的回答实在太少,看不下去
半夜试答一下这个问题
说在前面,这个话题即使是在英文圈里也是众说纷纭,所以可能有很多不同的理解。但其实未必要纠结于文字,只要使用最适合自己目标用户的策略就好。

(图片来自 Viljami Salminen)


以下 Responsive design = RWD,Adaptive design = AWD


先说共同点,两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。有人说,RWD 是 AWD 包含的一个子集。

RWD:Ethan Marcote 的文章是大家认为 RWD 的起源。他提出的 RWD 是采用 CSS 的 media query 技术,配合流体布局( fluid grids )和同样可以自适应的图片/视频等资源素材。以上所说,都是通过 HTML 和 CSS 就能完成的。一般来说,RWD 倾向于只改变元素的外观布局,而不大幅度改变内容。Jeffrey Zeldman 总结说,我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。

AWD:Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 AWD 在包括 RWD 的 CSS media query 技术以外,也要用 Javascript 来操作 HTML 来更适应移动设备的能力。AWD 有可能会针对移动端用户减去内容,减去功能。AWD 可以在服务器端就进行优化,把优化过的内容送到终端上。AWD 通常会牵扯到另外一个词 “progressive enhancement” 。


progressive enhancement:从针对最低端的,最低分辨率的设备的设计做起,逐步逐步为更高阶的设备增加功能和效果的做法。(换个角度说,也就是相当于为移动设备减去功能)


RWD 和 AWD 在断点( break point )的区别:
RWD 采用流体+断点,在断点之间,页面依然会随窗口大小自动缩放(通过 fluid grid ),直到遇到断点改变界面样式。相对的,AWD 只在针对几种分辨率(如1280,800,640,320px)进行优化,在断点之间的自动过渡比较少。

还有一种说法:
RWD 一般来说需要在网页设计初期就开始(通常采用 mobile first 策略),所以旧的网站要做 RWD 很可能要完全重建。而 AWD 则采用保留现有桌面网站( desktop version )而对于更小的分辨率做针对性的优化(适应),这点对于很多老的网站来说很重要,因为重构成本太大。

另外,对于 mobile 用户的优化到底应该怎么做,有两方的说法各不相让。有人说,不应该因为用户使用的是 mobile device 就删去内容,限制他们的功能,应该平等对待。也有人说,正因为是移动设备,有其流量,性能,网速的局限性,用移动设备登录网站的目的也会更有针对性,要为用户精简文字,精简最常用的功能放在首页,服务器端的优化才是真的针对 mobile 的优化。


最后:
在网上的各种说法里确实是有很多相互干扰相互矛盾的地方,但是其实技术都是摆在那里的。其实可以认为,AWD 在针对布局的优化中,可以采用 RWD 的策略,但是AWD 着力于更多其他的 JS 或者服务器上的优化,来强化移动端体验。


不用纠结于词汇,根据网站功能复杂度,预算和资源等,选择要使用的技术,从客户端的展现,到 JS,到服务器的优化等等。

************************************************************************
参考文章:
Responsive Design vs. Adaptive Design?
Responsive & Adaptive Web Design
Responsive design vs adaptive design
Adaptive vs. Responsive, what’s the difference?

最近正好看到了这块内容:


如上所说,这两种方式都是为了解决网页在不同屏幕尺寸的设备上展示的问题。我觉得这只是两种不同的开发形式,二者的差别从开发的角度看更容易理解。


Responsive design (响应式设计):建立一个网页,通过CSS Media Queries,Content-Based Breakpoint(基于内容的断点)等技术来改变网页的大小以适应不同分辨率的屏幕。


Adaptive design (自适应设计):为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率(320,480,760,960,1200,1600)


在下图中可以看到,Responsive design中网页和屏幕分辨率的关系是一对多的,一套网页适应多个设备。而Adaptive design 中网页和屏幕分辨率的关系则是一一对应。

因此Responsive design相对来说灵活性更高,但是相应的每次的载入内容会比较多。


而只针对某一类或某几类分辨率设计响应网页大小Adaptive design的优势就在于减少载入的等待时间,提高网页的响应速度(见下图)。

至于什么时候使用Responsive design或Adaptive design很大程度取决于你的开发时间和预计的开发成本。如果在开发时间较为紧张的时候,同时也希望尽可能的让网页自适应于多种设备,争取在不同类型的屏幕上都保持良好的用户体验,那么使用Adaptive design的方式也是不错的选择。


参考资料:UXPIN UX DESIGN 2015&2016 - Successful Trend for Digital Product