响应式设计和自适应设计是什么

2019-04-27 19:03:55 栏目:网站建设

响应式和自适应式设计 方法之间的差异突出了我们作为网络和应用程序设计者的重要选择。选择洞察力可以使您能够以更好的目标,目的和结果来规划和执行您的设计。

随着移动设备的普及和多样化,作为设计师,我们需要满足各种屏幕尺寸。这是每个网络和应用程序设计师目前面临的挑战。从巨型企业监视器到智能监视器,用户可以通过多种方式在线访问信息。希望弥合设备之间差距的设计人员有两种设计选择:自适应站点或响应站点。

 

 

关于响应式设计自适应设计之间的差异存在一定程度的混淆对于那些没有任何设计风格经验的人来说,边界可能看起来很模糊,但是当你仔细观察这两种风格时,会有明显的差异。

响应式设计

响应式设计一词首先由网页设计师兼开发人员Ethan Marcotte在他的“ 响应式网页设计”一书中创造响应式设计通过调整设计元素的位置以适应可用空间响应浏览器宽度变化

响应式网站根据可用的浏览器空间显示内容。如果您在桌面上打开一个负责任的网站,然后改变浏览器窗口的大小,内容将动态移动来安排自己(至少在理论上)最佳浏览器窗口在手机上,这个过程是自动的; 该站点检查可用空间,然后以理想的方式呈现自己。

响应式设计很简单。因为它是流动的,这意味着用户可以访问您的在线世界,并在手持设备上享受与在大型显示器上一样多的享受。要做到这一点,响应式设计 需要对网站进行非常好的概念化,并深入了解最终用户的需求和需求!

自适应网页设计

自适应网页设计由网页设计师亚伦·古斯塔夫森(Aaron Gustafson)于2011年在自适应网页设计:使用渐进增强技术制作丰富经验一书中介绍它也被称为网站的渐进增强

响应式设计依赖于改变设计模式以适应可用的不动产,自适应设计具有多种固定布局尺寸当站点检测可用空间时,它会选择最适合屏幕布局因此,当您在桌面上打开浏览器时,该站点会为该桌面屏幕选择最佳布局; 调整浏览器大小对设计没有影响。

一些网站已经迅速采用自适应设计。亚马逊,美国今天,Apple和About.com将自己配置为移动优化网站。看看这些。请注意,使用自适应设计在移动网站上显示的布局可能与桌面版本不同。然而,这是因为设计师为手机的屏幕选择了不同的布局,而不是让设计试图重新排列自己。

在自适应设计中,为六种最常见的屏幕宽度开发六种设计是正常的; 320,480,760,960,1200和1600像素。

独立移动设计

还可以选择创建仅限移动设备的网站(这些网站通常使用“m。”前缀在浏览器的URL栏中表示)。这个选项曾经是一个很好的方法。设计人员将为移动设备创建网站,为专用格式调整元素和布局。Google向移动网站提供了搜索引擎排名,但今天对自适应和响应式网站提供了相同的偏好。

创建一个单独的站点(而不是使用不同的设计或采用可变设计)的一大缺点是它需要大量的维护才能保持网站的两个版本同质。由于没有特别的动机,最近的移动设计已经失宠了。它似乎不太可能很快卷土重来。

在响应式和自适应设计之间进行选择

响应式设计比较容易和花费更少的工作来实现。它在每个屏幕尺寸上对您的设计提供的控制较少,但它是目前创建新网站的首选方法。这也可能与大多数内容管理系统(CMS)(如WordPress,Joomla等)可用的大量廉价模板有关 - 毕竟,谁想要重新发明轮子?

响应式设计人员创建一个设计用于所有屏幕,通常在分辨率的中间开始,并使用媒体查询来确定将对分辨率比例的较低和较高端进行哪些调整。这往往会让用户感到高兴,因为这种熟悉的网页设计似乎可以保证转换到任何设备的屏幕。均匀性和无缝性是提供良好用户体验的关键考虑因素。

重要的是要关注 响应式设计项目可视化层次结构 ; 你想尝试保持这个,因为你的元素在屏幕上随机播放。这意味着需要对许多不同的设备进行大量测试,以确保您正在交付货物。如果一个站点的设计相对简单,它将在设备屏幕上很好地平移,像液体一样从容器流到容器。

SEO是使用响应式设计的另一大理由。使用响应式设计的网站(即具有为所有设备提供服务的URL的网站)目前对搜索引擎更友好。

响应式设计似乎有一个强有力的使用案例。好吧,它可能; 但请注意以下几点:

  • 由于您的网站将在设备之间“流动”,并根据屏幕尺寸进行调整,因此您添加的任何广告都可能无法适应该空间。突然间,使用响应式设计提供的“捷径”可能需要重新思考和工作。
  • 下载时间因桌面和移动设备而异。图像的灵活性是一个重要的考虑因素。在家中或办公室的大屏幕上快速通过的大型设计需要更多时间(和数据)才能显示在您的手机上。对于移动版本,较小的预览可能会更好吗?

 

自适应设计(理论上)将根据用户用于接口的任何设备确保最佳用户体验。与响应式设计不同,屏幕从桌面设计“流动”到较小的设备,自适应设计提供量身定制的解决方案。顾名思义,它们适应用户的态势需求和能力。作为设计师,我们可以通过使设计触摸友好,向用户展示我们在移动设备上的需求。同时,我们也可以为桌面用户做同样的事情。我们从网站的最低分辨率版本开始,一直工作到最高。六种设计是当前的标准,但根据用户的数据,您可以使用更少的设计。

自适应设计的优势在于它感觉与现代用户体验相关,而响应式设计则表现出更加以桌面为中心的方法(其他设备的需求处于次要的,几乎被动的地方)。作为用户,我们的智能设备可以满足您的需求。我们希望我们的设备能够了解我们正在经历的事情。我们来看一个字面上的例子; 如果您驾车穿过长长的隧道,您是否宁愿拥有 适应环境并调整亮度GPS屏幕?基于上下文的性能和可用性 令人放心,同时确认您的智能设备足够智能以适应并且更加有用。证书示例

您还可以设计为自适应设计优化相关用户界面的广告。因为您正在设计不同的分辨率(即不同的视野),所以您可以访问用户的特定需求。智能手机中传感器的完美复杂性使得公司(和我们的设计师)能够比以往更多地了解我们的用户。用户经常光顾最喜欢的商店,餐馆,健身房等 - 通过在那里签到,他/她创建简档。从此(行为定位,也称为个性化),我们可以设计精细调整的广告。

另一个优势 - 研究表明,拥有自适应网站的公司通常会在速度测试中表现出色,这是一家拥有响应式网站的公司。这也不是一个小差别; 自适应站点通常比响应站点快2-3倍,并且为用户提供相当少的数据以提供用户体验。

自适应设计有一些强大的优势。然而,在设计最佳用户体验和提供最佳解决方案的游戏中,我们必须记住,我们必须花时间来检查我们的选项和用户的现实。

自适应设计存在缺点。首先,通常比创建响应式设计要多得多。出于这个原因,大多数自适应设计用于改造现有站点,以允许它们在多个设备上使用。因此,似乎第一项业务是通过允许传统网站覆盖更多设备来使传统网站更新。

其次,自适应设计可以使用户“处于中间”。平板电脑或上网本用户可能会“悬空”,因为设计师只能满足桌面和智能手机用户的需求。因此,提供一个允许用户在版本之间切换的链接非常重要。

最后,虽然搜索引擎机器人通过点击进行筛选和分类以区分您的“.com”网站和“m .com”网站的情况越来越好,但接受现状是明智的。大多数搜索引擎仍然不会在多个URL上平等地排列相同的内容。这意味着要注意自适应设计可能会让你回到SEO。

因此,虽然目前对响应式设计有一定的偏好,但如果您有预算,请不要忽视自适应设计。谷歌喜欢加载速度快的网站,用户也是如此。

现代网页设计为我们提供了三种选择:响应式,自适应式和独立式设计,尽管独立式已经废弃。

响应式设计允许设计人员根据可用的浏览器空间显示内容。这样可以实现站点在桌面上显示的内容与手持设备上显示的内容之间的一致性。响应式设计是“传统”选项,并且仍然是迄今为止最受欢迎的方法。


优点

缺点

  • 统一和无缝=良好的用户体验。
  • 丰富的模板使用。
  • SEO友好。
  • 通常更容易实现

 

  • 减少屏幕尺寸设计控制。
  • 元素可以四处移动
  • 广告丢失在屏幕上。
  • 移动下载时间更长。

 

2011年开发的自适应设计更多地涉及到设计师有几种固定的布局尺寸。它提供了“一体式拉伸到所有”方法的替代方案。

优点

缺点

  • 允许设计人员为适当的设备构建最佳用户体验。
  • 移动设备可以感知用户的环境。
  • 设计人员可以根据智能设备的用户数据优化广告。
  • 创造劳动密集型 - 大多数适应性设计都在改造传统网站,使其更容易获取。
  • 平板电脑和上网本可能会遇到站点配置问题,这些配置趋向于面向智能手机或桌面。
  • 挑战搜索引擎优化 - 搜索引擎无法欣赏多个网站上的相同内容。

 

在响应和自适应设计之间进行选择需要仔细考虑。虽然它可能是谨慎的做法是坚持一个响应式设计为方便起见(节省成本,提高搜索引擎优化,并保持用户的内容与设备之间的无缝体验),这是至关重要的检查两种设计的优劣完全自适应设计可以更好地适应用户在现场的不同需求; 因此,掌握变化的脉搏至关重要。

我们可能最好将这些变化视为进化。查尔斯达尔文指出,生存的物种中的个体不是最强或最聪明的,而是最适应变化的物种。鉴于此,我们只考虑恐龙。

想想您的产品或服务。它是否在特定设置中访问用户?他们可以用什么来保持他们的信息和参与?请记住,不只是移动设备越来越智能化。在我们的家庭和办公室,我们拥有的不仅仅是传统的桌面。现在,各种智能设备都能感知并响应环境,从时钟和加热器到构成“物联网”的大量设备。这是一个充满智慧对象的时代。我们必须越来越多地考虑到这种智能。

扫二维码与福州嘉艺网络项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

上一篇:福州网页设计清单 下一篇:web前端开发-网页设计和网站开发有什么区别?