网页设计的未来:将响应与自适应设计相结合

发布时间:2019-09-02 10:59:53 阅读:88

在创建适用于各种屏幕尺寸和设备的网站时,响应式网页设计是最受欢迎的方法。

谷歌推荐并被许多网页设计师和开发者所接受,但它并不是创建多设备友好网站的唯一解决方案。

虽然不如响应式网页设计那么受欢迎,但自适应方法是开发多设备友好网站的另一种可行解决方案。

实际上,创建适应各种可能屏幕尺寸的网站不仅仅是响应与自适应多设备网页设计的未来是两者的结合。

关于响应式Web设计

正如Ethan Marcotte建立的,响应式网页设计是流媒体网格,灵活媒体和媒体查询的结合。无论使用何种屏幕尺寸,响应式网站都具有流畅的布局,可以改变和适应。

响应式方法的好处众所周知:

  • 能够通过单一网站支持各种屏幕尺寸和设备这包括“中间”流行的屏幕分辨率,如320,768和960像素宽。
  • 未来尚未进入市场的设备的友好性。
  • 一个网站维护和市场而不是几个

响应式Web开发的主要挑战是:

  • 难以改造现有站点,这意味着该项目可能是对站点的重新设计/重建。这将影响项目的范围及其成本。
  • 许多上述“中间”尺寸的有限设计控制。该网站将适合这些尺寸,但视觉呈现往往不太理想。
  • 由于您要向所有设备提供单个站点,因此根据图像等资源优化发送到每个设备的内容可能非常困难。

关于自适应Web设计

在响应式网页设计与布局斗争的地方,自适应性往往优秀(反之亦然)。自适应网站使用基于预定断点的固定大小,为浏览器首次加载页面时检测到的屏幕大小提供最合适的布局版本。您可以在UXPin的内置断点中看到一些最常见的固定大小  : 

屏幕截图2016-01-15在下午1.31.13

自适应方法的好处是:

  • 更好的设计控制,因为站点设置为您可以设计的特定断点。
  • 通常更容易应用于现有站点以添加对小屏幕设备的支持,而无需从头开始重新编码该站点。
  • 仅提供给定断点/版本所必需的资源(图像,脚本等)的能力。

自适应的缺点是:

  • 在您建立的断点之间不能流畅地容纳那些“中间”尺寸。
  • 需要您为计划支持的每个断点进行设计。这可以增加项目的总体设计和开发时间。
  • 如果将来新的解决方案推向市场,将不会自动运作良好。需要在站点中添加新的断点,这将增加站点的长期维护。

两全其美的

image02

如您所见,响应和适应性都有其优点和缺点。这就是为什么这两种方法都不能代表网页设计的未来。

相反,结合了两全其美的解决方案是2016年及以后的多设备网页设计。

我们可以看到在Matt Wilcox的自适应图像等解决方案中结合响应和自适应原理的简单示例这表明这种自适应和响应的组合更多的是布局。这是创造最佳整体体验的精神,包括布局,下载等。

这种方法解决了响应式网页设计的一个主要缺点:能够将不同的图像传送到不同的屏幕。正如他们在网站上所述,自适应图像使用JavaScript来“检测访问者的屏幕大小,并自动创建,缓存和交付设备适当的重新缩放版本的网页嵌入式HTML图像。”使用自适应图像,网站的布局仍然可以响应和流畅,但这种基于检测到的屏幕尺寸提供不同图像的自适应方法是向前迈出的重要一步。

然而,响应和自适应思维的结合并不仅限于图像。许多网页设计师正在采用通常所说的RESS(带有服务器端组件的响应式网页设计)进一步采取这一步骤

image01

RESS将响应式解决方案(流畅布局,未来屏幕支持等)的优势与服务器端检测相结合,确定特定设备或屏幕正确显示网页所需的内容。正如Luke Wrobleski总结的那样,“源代码,URL结构,媒体和应用程序设计可以在到达其浏览器之前针对特定设备类进行精细优化。”

Luke接着补充说:“RESS将自适应布局与服务器端组件(非整页)优化相结合。因此,一组页面模板为所有设备定义了整个Web站点,但该站点中的关键组件具有服务器端呈现的设备类特定实现。

这意味着多设备网站可以享受以下好处:

  • 流体布局支持各种屏幕尺寸,并且还填充关键断点大小之间的“中间”状态。
  • 未来对尚未发布的设备尺寸的支持。
  • 针对关键断点大小进行更好的设计控制。
  • 图像和媒体等资源只能巧妙地传递给需要它们的设备。
  • 一个网站要维护。

虽然RESS可能无法解决多设备网页设计的所有挑战,但它是朝着正确方向迈出的重要一步 - 这预示着该行业的未来将为网页设计专业人士带来什么。

解决问题

响应和自适应都是解决你将被要求解决的问题的潜在解决方案,但它们都没有像每个方面的最佳方面相结合那样强大。

这种思维将决定多设备设计的未来。

我们将利用多种解决方案的最佳方面构建解决方案,而不是将自己局限于一个具有优势和劣势的解决方案。这就是为什么多设备网页设计不仅仅是响应性或自适应性,而是响应性适应性以及任何其他允许我们作为设计专业人员来改进我们所做工作的原因。

如果您想要响应性和自适应地进行原型设计,您可以通过免费试用开始使用 


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"网页设计的未来:将响应与自适应设计相结合",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560