什么是AWD？ 5个自适应网页设计实例启示

作者最大原文链接

手机正在逐渐取代PC设备，成为最流行访问互联网设备。所以网页设计师遇到了一个问题，就是如何在不同大小的设备上呈现相同的网页？别担心，自适应网页设计的出现完全解决了这个问题。本文将介绍一些基础知识和很好的自适应网页设计实例。

1.原则：什么是自适应网页设计？

2011年，网页设计师Aaron Gustafson在他的书提出了自适应网页设计（Adaptive Web Design），并被定义为逐渐增强丰富的体验，它也被称为逐步增强的网站。

自适应设计意味着为不同类型的设备创建不同的页面，当前的AWD网页面向这些分辨率（320，480，760，960，1200，1600）。

与响应式网页（RWD）不同，自适应设计基于使用静态布局的断点。 RWD不是AWD，页面加载后，不能自动适应，自动检测屏幕的大小，以加载适当的布局。因此，当您在电脑浏览器上访问网站时，网站会自动检测并选择最佳的桌面屏幕布局。

2.如何制作自适应网页设计？

基本的网页设计涵盖几个重要方面：

使用Axure，Mockplus等快速原型设计软件进行原型设计
UI / UX设计
前端开发：HTML，CSS，JS
后端开发：Java，PHP，Ruby等

虽然伟大的自适应网页设计需要遵循以下步骤：

第1步：Meta标签

为了适应屏幕，许多移动浏览器会将HTML页面放在更大的视口宽度（通常大于屏幕宽度）预览，您可以设置视口Meta标签。以下视口Meta标签告诉浏览器视口宽度等于设备屏幕宽度，并且不会初始化：

第2步：HTML结构

在这个例子中，页面布局包括Header，Content，Sidebar和Footer。固定高度是180px，内容宽度是600px，边栏宽度是300px。

第3步：媒体查询

CSS3媒体查询是自适应网页设计的关键，就像高级语言中的条件语句，告诉浏览器根据不同的视口宽度渲染页面。

3.自适应网页设计实例

有人说，响应式设计正在破坏的移动用户体验。目前，很多网站已经在PC和移动设备上采用自适应网页设计，将自己配置为移动优化网站。例如，亚马逊，今日美国，苹果和About.com。但是移动设备的自适应设计的布局可能与桌面版本不同。因此，在进行自适应网页设计时，网页设计师需要做更多的工作来满足至少六种不同的布局要求。

这里有5个优秀的自适应网页设计例子供参考。

1.Amazon

与其他使用自适应网页设计的网站（如CNN）类似，亚马逊鼓励用户下载他们的品牌应用程序。据悉，通过自适应设计，亚马逊在移动设备上的访问速度比以前的反应式网页设计增加了40％。此外，亚马逊的自适应网站为移动用户提供了在移动设备上使用“Amazon.com全站点”的机会，而响应式设计将无法使用。

2.Apple

苹果的设计一向以简洁而闻名，无论是它的网站，商店，还是产品设计，都体现了其清新的主题。不使用响应式网页设计，这使得苹果长期受到批评。毕竟，一系列智能产品是响应式设计存在的原因之一。不过，今天，苹果使用了自适应的网页设计，这也意味着Apple.com会根据设备类型和功能进行更改。

3.Avenue 32

在线豪华购物网站Avenue 32是使用自适应网页设计的模范。这个品牌的特点是设计师与Usablenet合作，创造一个无缝，直观，高度视觉吸引力的移动和平板电脑体验。据Usablenet介绍，该网站的桌面版本充满了内容丰富的网页，包括产品图片，设计师细节，策展人外观等。品牌必须创造一个视觉和功能体验这个桌面多渠道网络产品。

Usablenet公司首席营销官Carin van Cuuren表示：“使用自适应网页设计，使Avenue 32突出了发现和商业功能，使客户能够在任何地方浏览和购物。 “而智能手机和平板电脑的订单增长了40％，移动流量翻了一番，平均移动交易增长了27％。 

4.USA Today

自适应网页设计使“今日美国”能够选择自适应方法，因为该技术允许品牌通过考虑操作系统和屏幕尺寸来采用不同的UI展示，从而达到位用户提供量身定制的体验。因此，提供丰富的新闻类型体验比响应式设计更受欢迎。

5.About.com

像CNN，“今日美国”等各类新闻网站都采用了自适应网页设计，因为它可以快速加载网页，并且能够满足所有不同设备的读者访问网站。

上述5个自适应网页设计实例从不同角度解释了为什么自适应网页设计变得流行起来，是受限于网络访问速度，还是为了提升品牌影响力和用户体验。