如今，用户可以从大量设备访问信息。设计师应该赶上这种多样性并迎合各种屏幕尺寸。在设计时，他们有两种选择——自适应设计和响应式设计。
这两种方法都旨在解决相同的问题——允许用户从任何设备、屏幕尺寸、浏览器或操作系统访问内容。但是，响应式和自适应设计似乎是针对不同场景的更好解决方案。要做出正确的选择，您应该考虑内容的类型、用户的需求、项目的预算，有时还要考虑客户的要求或技术限制。
响应式设计
响应式设计 是一种将设计调整到各种屏幕尺寸的方法。简而言之，设计会根据屏幕尺寸缩小或扩展，让用户以最方便的方式从任何设备访问信息。顾名思义，响应式设计 响应 浏览器大小的变化并调整布局元素以适应可用的屏幕空间。
乍一看，响应式设计似乎是最直接和最便宜的解决方案。开发人员使用 CSS 媒体查询来定义基于特定设备类的断点。然而，设备、屏幕尺寸、操作系统和品牌的多样性可能会将这个过程变成一场噩梦。设计人员应根据内容和用户的需求来定义断点并控制元素在多个设备上的外观和对齐方式。
自适应设计
通过自适应设计， 我们有多种固定的布局尺寸，并为可用的屏幕空间选择最合适的一种。自适应设计方法对于 UI/UX 设计师来说更加昂贵和耗时，因为它需要为最常见的屏幕宽度（从非常小到非常大）开发 6 种设计：320px、480px、760px、960px、1200px 和 1600px .
您可以通过参考现有网站版本的网络分析来优化团队的工作。它允许您确定用户访问您网站的最常见屏幕尺寸。无需针对所有 6 种屏幕宽度进行设计，您可以仅针对最喜欢的 2 或 3 种屏幕尺寸优化用户体验，这就足够了。
自适应设计最重要的优势是您不必担心元素的对齐显示不正确，并且可以确保用户在任何设备上都能获得相同的体验。
通过自适应设计，设计师可以为目标受众中最流行的设备定制最佳用户体验。
控制移动布局
自适应设计方法意味着设计 几个固定布局。设计师无需担心屏幕尺寸变化时元素的排列方式。例如，当用户在平板电脑或手机上打开网站时，该网站会采用适合该屏幕的最佳布局，并且不会影响单个设计元素。
另一方面，我们无法为所有类型的设备和屏幕尺寸创建设计，如果用户在不常见的屏幕尺寸上打开网站，设计可能无法正确显示。在这种情况下，响应式设计可以适应更广泛屏幕尺寸的网站。这种方法的缺点是花费更多的编码和测试来确保您的网站按预期交付。
改造现有设计
顾名思义，自适应网站响应用户独特的情境需求和能力，提供量身定制的解决方案。显然，这种方法需要更多的时间和资源。因此，自适应设计通常用于修改现有网站以供移动使用。
设计师无需为小屏幕上的元素排列而摸不着头脑，而是快速创建了一个新的、适合移动设备的版本，并使网站可以从移动设备访问。通过自适应设计，开发人员可以为移动用户创建一个额外的视口，而无需触及现有网站的代码
加载时间
自适应网站的最大优势之一 是它们的快速加载时间。它们的执行速度通常比响应式网站快 2-3 倍，因为它们只包含给定屏幕尺寸所需的代码。
虽然自适应网站需要更多的设计努力，但它们的加载时间相对较快。用户和搜索引擎喜欢加载速度快的网站。
响应式网站的速度较慢，因为它们为整个网站提供代码，而不管访问它的设备是什么。
自适应和响应式设计之间的相似之处
谈到响应式和自适应设计，我们经常关注它们的差异。但他们也有一些共同点。响应式网站和自适应网站都会根据浏览器环境改变其外观。
不同之处在于这些变化的性质。简而言之，响应式设计更加 流畅 ，可以在任何宽度变化时平滑地调整网站的布局（有时也是功能）。这种方法很灵活，旨在为任何屏幕创建优化的体验。响应式设计要求设计人员更加谨慎，选择可以适应不同屏幕尺寸的 UI 组件，使用百分比作为相对单位度量，并依靠媒体查询来定义主要和次要内容断点。
相反，自适应网站的特点是行为敏捷，当屏幕尺寸发生变化时使用不同的固定布局。如果设计师忽略了为不太常见的设备（如平板电脑）提供布局，则可能会剥夺一些用户良好的用户体验。一般来说，自适应设计不太流行、成本高、对 SEO 具有挑战性。
以上内容为转载
网友评论