为什么自适应网页设计在网页访问速度、品牌影响效应或用户体验方

无需加好友免费技术支持

移动设备正超过桌面设备，成为访问互联网最常见的终端。因此，网页设计师不得不面对一个难题：如何在不同尺寸的设备上呈现相同的网页？自适应网页设计的出现很好地解决了这个问题。本文将带您了解一些关于自适应网页设计的基本知识和设计实例。

2011年，网页设计师Aaron Gustafson自适应网页设计的概念在他的书《自适应网页设计》中率先提出。

Adaptive design (自适应设计):为不同类型的设备建立不同的网页，检测设备分辨率后调用相应的网页。AWD网页主要针对这些分辨率(320、480、760、960、1200、1600)

与响应网页不同，自适应设计是基于断点的静态布局。一旦页面被加载，它将无法自动适应。自适应将自动检测屏幕的大小，以加载适当的工作布局。因此，当您在计算机上打开浏览器浏览网页时，网站会自动检测并选择桌面屏幕的最佳布局。

基本的网页设计涵盖了几个重要环节：

前期原型设计(工具:Axure，Mockplus）UX设计(工具:Justinmind）UI设计(工具:Sketch）后期前后端，HTML,CSS, JS.做好自适应网页设计需要遵循以下步骤：

为了适应屏幕，许多移动浏览器会使用它HTML页面放置在较大的视口宽度(通常大于屏幕宽度)，可以使用viewport meta设置标签viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，不进行初始缩放：

在这个例子中，页面布局包括 Header, Content, Sidebar和Footer. Header固定高度为180px, Content宽600px, Sidebar宽300px。

CSS3 media query它是适应网页设计的关键，就像高级语言一样if根据不同的视角宽度(这里等于浏览器宽度)，告诉浏览器渲染网页。

目前很多网站在PC端和手机端已经采用了自适应设计，在浏览不同设备的网页时可以很好地体验到自适应网页设计。比如，Amazon, USA Today, Apple, and About.com等。但移动网站上显示的自适应设计布局可能与桌面版本不同。因此，设计师在适应网页设计时，设计师需要做更多的工作来满足至少6种常见的布局需求。

这里有一些优秀的自适应网页设计例子供设计师参考。

使用自适应网页设计CNN）亚马逊鼓励用户下载其品牌应用程序。 据报道，亚马逊移动设计，亚马逊移动终端的访问速度比之前的响应性网页设计提高了40%。此外，亚马逊的自适应网站还为移动用户提供了使用移动设备Amazon.com而响应式设计则不提供全站点的机会。

苹果的设计一直很简单，它的网站、商店和产品设计都反映了这个主题。苹果没有使用响应性网页设计，这受到了批评。毕竟，它的一系列智能产品是响应性设计存在的原因之一。现在，苹果采用了自适应性网页设计，这意味着苹果的官方网站将随着设备的类型和功能而改变。

在线奢侈品购物网站Avenue 32是一家采用自适应网页设计的典范。该品牌的特点是设计师和Usablenet合作创造无缝、直观、视觉吸引人的移动和平板电脑体验。根据Usablenet据说桌面网站充满了内容丰富的网页，包括产品图片、设计师细节、策展外观等。该品牌必须在视觉和功能上创建与这种桌面体验一致的多渠道网络产品。

Usablenet首席营销官Carin van Cuuren表示：使用自适应网页设计Avenue 32可以突出移动终端的发现和业务功能，让客户随时随地浏览购物。 智能手机和平板电脑的订单增加了40%，移动流量翻了一番，平均移动交易增加了27%。

自适应网页设计让今日美国（USA Today）由于该技术允许品牌通过考虑操作系统和屏幕尺寸来检测特定设备，因此选择了一种自适应方法。 因此，提供比响应式更丰富的新闻体验可能会更受欢迎。

各种新闻网站都采用页，满足所有不同设备的读者访问网站，各种新闻网站都采用了自适应网页设计。

以上五个自适应网页设计案例从不同的角度大大解释了为什么自适应网页设计在网页访问速度、品牌影响效应或用户体验方面变得流行。

本文由 @安静的熊先生 每个人都是产品经理。未经许可，禁止转载。