响应式和自适应有什么区别?

「爱情、让人受尽委屈。」 2021-07-04 20:46 463阅读 0赞

何为自适应设计？何为响应式设计？ 关于自适应设计和响应式设计，设计师的最佳选择是什么？

最近接到的几个页面需求后台都做了自适应布局，这并不是第一次接触到自适应布局和响应式布局等名词，但是没有仔细研究，概念也不是很清晰，对于他们的了解一直是一个懵懂的状态，借此机会自己查阅了很多资料，研究了一下他们的区别、优缺点、来巩固自己头脑中的概念，增加知识积累，也方便日后查阅。（此总结只关注两种布局的优缺点、适用的产品，暂不讨论实现具体方式。）

先科普一个下文频繁用到的概念，视口：用户浏览信息屏幕尺寸大小（每一个视口后面都是真实一位的用户）

**先说共同点，两者都是优化适应互联网中越来越分化的视口浏览体验，用技术来使页面适应不同分辨率的视口的设计。**

## 响应式设计（`Responsive design`）： ##

响应式设计是`Ethan Marcotte`在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。（下午左，一版设计适应所有终端）

## 自适应设计（`Adaptive Design`） ##

自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。（下图右，三款设计稿适应三类终端）  
![在这里插入图片描述][20190921122543453.png]

区别：

**响应式设计实现原理（Responsive design）**

是为不同类别得物理设备建立相同的网页（pc、平板、手机、手表等），检测到设备分辨率大小后调用相应的网页。（技术成本最高）

**自适应设计实现原理（Adaptive design ）**

是为同类别的物理设备建立三种不同的网页（PC），检测到设备分辨率大小后调用相应的网页。（可以只适应pc不同分辨率，比如设置四档位宽度990、1200、1500、1710技术成本较低）

**实例：**  
在`app`横行的当下，目前国内自适应布局应用主要集中在视口已经很稳定的`web`端，（web端视口大数据\[2016\]）针对笔记本，台式机进行优化体验。

响应式与自适应设计的各自特点：

**响应式布局一个设计稿支持当下不同终端主流视口的信息适配展示，（但是为了开发效率和一定的可控行依然会针对当下主流不同物理终端优化出一个最大值视口PC（web端）→ 智能手表（小屏设备）**

以下通过拖拉浏览器窗口大小来体验

实例：http://www.apple.com/cn （apple中国）

实例：http://36kr.com/ （36氪）

响应式网站标志：

1.  同时适配web+手机/智能手表
2.  标签导航在视口接近最大手持终端设备视口时改变为经典的抽屉式导航
3.  网站框架布局会根据视口来调整位置

![在这里插入图片描述][20190921141854433.png]**优点：**

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

**缺点：**

仅适用布局、信息、框架并不复杂的部门类型网站

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

**在实际应用上，可以说自适应布局设计是响应式的穷兄弟，当下仍以单个终端（例如web端）为主，也是现在`web`端最成熟，应用最多的适配视口的解决方案。**

实例：https://www.tmall.com（天猫商城） 自适应980 1230二档视口

实例：http://www.le.com（乐视） 自适应980 1180 1380 四档视口

实例：http://www.iqiyi.com/ （爱奇艺） 自适应980 1180 1380 1920 四档视口

实例：http://sports.163.com（网易体育） 自适应960 1200二档视口

自适应网站标志

1.  大多只是适配单个终端的主流N个主流视口（2-3个）
2.  当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器
3.  总体框架不变，横线布局的板块大多会有所减少

![在这里插入图片描述][20190921142709943.png]**优点：**

对网站的复杂程度兼容性更大

实施起来代价更低，

代码更高效

测试更容易，运营相对更精准（图片可控性更高）

**缺点：**

在移动端设计大行其道之下，同一个网站，往往需要为不同的设备开发不同的页面，增加开发成本

其实这是复杂类型网站设计的一种最优方案，虽然增加了开发运营成本，但是换回了更精准的运营、框架扩展度更高，用户加载更迅速，是极其划算的一件事情，这也是自适应设计成为当下主流网站采用的布局方式的重要原因之一

它们应该如何服务于我们的设计呢？

**理论上来说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。**

自适应布局可以让你的设计更加可控，因为你只需要考虑几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的，这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。相比较来说自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。

其实，无论是哪种设计理念都是各有优缺点，具体的选择还是要从团队/项目实际需求出发去选择。

[20190921122543453.png]: /images/20210704/42248487408647d7ba1c259a622060ac.png
[20190921141854433.png]: /images/20210704/fb8a40371296496390f402c9887a0626.png
[20190921142709943.png]: /images/20210704/620a44b0df494df3aff5b8ac388250bb.png