咨询热线

您所在位置: > 学校动态> 5个范例告诉你:什么是自适应网页设计

5个范例告诉你:什么是自适应网页设计

发布时间:2019-09-28 刘贺隆

5个范例告诉你:什么是自适应网页设计  

移动设备正在取代桌面设备成为最常见的互联网接入终端。因此,网页设计者不得不面对一个难题:他们如何在不同尺寸的设备上呈现相同的网页?适应性网页设计的出现很好地解决了这个问题。本文将向您展示一些关于自适应网页设计的基本知识和设计示例。

五个例子告诉你:什么是适应性网页设计


一、理论彩票投注app:什么是适应性网页设计?

2011年,网页设计师亚伦·古斯塔夫森(Aaron Gustafson)在其著作《适应性网页设计》中率先提出了适应性网页设计的概念。

适应性设计:为不同类型的设备创建不同的网页,并在检测到设备的分辨率后调用相应的网页。目前,AWD网页主要针对这些决议(320,480,760,960,1200,1600)

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


二.实用方法:如何做适应性网页设计?

基本网页设计包括几个重要的链接:

早期原型设计(工具:Axure、Mockplus)

UX设计(工具:贾丝汀明)

用户界面设计(工具:草图)

后来,前端和后端,超文本标记语言,CSS,JS。

要做好适应性网页的设计,需要遵循以下步骤:

第一步。元标签

为了适应屏幕,许多移动浏览器会将网页放在更大的视口宽度(通常比屏幕宽度大),您可以使用视口元标签来设置。以下视口元标签告诉浏览器,视口宽度等于设备屏幕宽度,无需初始缩放:

Html结构

在本例中,页面布局包括页眉、内容、边栏和页脚。标题的固定高度为180像素,内容宽度为600像素,边栏宽度为300像素。

五个例子告诉你:什么是适应性网页设计

第三步。媒体查询

CSS3媒体查询是自适应网页设计的关键,就像高级语言中的条件语句一样,它告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)呈现网页。


三.适应性网页设计示例

目前,许多网站已经在PC机和手机上采用了自适应设计,在不同设备上浏览网页时可以很好地体验自适应网页设计。例如,亚马逊、今日美国、苹果和About.com等。然而,移动网站上显示的适应性设计的布局可能不同于桌面版本。因此,在设计适应性网页时,设计师需要做更多的工作来满足至少6个常见的布局要求。

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

1.亚马逊河

与其他使用适应性网页设计的网站(如美国有线电视新闻网)相似,亚马逊鼓励用户下载其品牌应用。据报道,通过采用自适应设计,亚马逊的移动终端的访问速度比之前的响应网页设计提高了40%。此外,亚马逊的适应性网站为移动用户提供了在移动设备上使用“亚马逊网站全文”的机会,而被动设计则没有。

五个例子告诉你:什么是适应性网页设计

2.苹果

苹果的设计一向以简单著称,这反映在它的网站、商店和产品设计上。苹果公司因没有采用响应性网页设计而受到批评。毕竟,其智能产品系列是响应设计存在的原因之一。现在,苹果采用了自适应网页设计,这也意味着苹果的官方网站将随着设备的类型和功能而改变。

五个例子告诉你:什么是适应性网页设计

3.第32大道

在线奢侈品购物网站Avenue 32是适应性网页设计的典范。该品牌的特色是设计师与Usablenet合作,创造无缝、直观和视觉上吸引人的移动和平板电脑体验。Usablenet称,桌面网站上充斥着丰富的网页,包括产品图片、设计师细节、策展外观等。品牌必须创造一个视觉和功能上与桌面体验一致的多渠道网络产品。

Usablenet首席营销官卡林·范·库伦(Carin van Cuuren)表示:“适应性网页设计的采用使得Avenue 32能够突出其移动发现和业务功能,从而使客户能够随时随地浏览和购物。”此外,智能手机和平板电脑订单增加了40%,移动通信量增加了一倍,平均移动交易量增加了27%。"

五个例子告诉你:什么是适应性网页设计


4.《今日美国》

适应性网页设计允许《今日美国》选择适应性方法,因为该技术允许品牌通过考虑操作系统和屏幕大小来检测特定设备,从而提供量身定制的体验。“因此,提供比回应更丰富的新闻体验可能更受欢迎。

五个例子告诉你:什么是适应性网页设计


5.About.com

各种新闻网站都采用自适应网页设计,因为它可以快速加载网页,满足不同设备的读者访问网站。

五个例子告诉你:什么是适应性网页设计

以上五个自适应网页设计案例从不同角度,无论是从网页访问速度、品牌影响效果还是用户体验,都极大地解释了自适应网页设计为何变得流行。

免费试学

课程好不好,学过才知道!

已有2341个同学来校试学/听过