什么是AWD?自适应网页设计五例

发布时间:2020-04-30 09:30:00

移动电话正逐渐取代PC设备成为最受欢迎的互联网接入设备。所以网页设计师有一个问题,就是如何在不同大小的设备上呈现相同的网页?不用担心,自适应网页设计的出现完全解决了这个问题。本文将介绍自适应网页设计的一些基本知识和一个很好的例子。

移动电话正逐渐取代PC设备成为最受欢迎的互联网接入设备。所以网页设计师有一个问题,就是如何在不同大小的设备上呈现相同的网页?不用担心,自适应网页设计的出现完全解决了这个问题。本文将介绍自适应网页设计的一些基本知识和一个很好的例子。

2011年,网页设计师AaronGustafson在其著作中提出了AdaptiveWebDesign,它被定义为逐渐增强的丰富体验,也被称为逐渐增强的网站。

自适应设计意味着为不同类型的设备创建不同的页面,而当前的AWD页面是针对这些分辨率的(32048076096012001600)。

与响应式网页(RWD)不同,自适应设计是基于使用静态布局的断点。后轮驱动不是全轮驱动。页面加载后,无法自动调整。它会自动检测屏幕大小以加载适当的布局。因此,当您在计算机浏览器中访问网站时,网站会自动检测并选择最佳桌面屏幕布局。

基本网页设计包括几个重要方面:

使用Axure、mockplus和其他快速原型开发软件对UI/UX设计进行原型开发前端开发:HTML、CSS、JS后端开发:Java、PHP、ruby等

尽管优秀的自适应网页设计需要遵循以下步骤:

步骤1:元标记

为了适应屏幕,许多移动浏览器将HTML页面放在更大的视窗宽度(通常大于屏幕宽度)预览中,您可以设置视窗元标签。以下视区元标记告诉浏览器视区宽度等于设备屏幕宽度,并且不会初始化:

第二步:HTML结构

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

第三步:媒体查询

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

下面是5个自适应网页设计的优秀例子供参考。

在线奢侈品购物网站avenue32是一个使用自适应网页设计的模型。该品牌的特点是设计师和usablenet之间的合作,以创造无缝、直观、极具视觉吸引力的移动和平板电脑体验。据usablenet介绍,该网站的桌面版充斥着丰富的网页,包括产品图片、设计师细节、策展人外观等,品牌必须打造出这款桌面多渠道网络产品的视觉和功能体验。

usablenet首席营销官carin van cuuren说:“avenue32采用了自适应网页设计,突出了发现和业务功能,使客户可以在任何地方浏览和购物。”智能手机和平板电脑的订单增长了40%,移动通信量翻了一番,平均移动交易量增长了27%。

自适应网页设计使今日美国能够选择一种自适应的方式,因为它允许品牌通过考虑操作系统和屏幕大小来采用不同的用户界面显示,这样用户就可以提供定制的体验。因此,提供丰富的新闻类型体验比响应式设计更受欢迎。

例如,CNN、今日美国等新闻网站都采用了自适应网页设计,因为它可以快速加载网页,满足不同设备读者的需求。

以上五个适应性网页设计的例子从不同的角度解释了为什么适应性网页设计变得流行,无论是受到网络接入速度的限制,还是为了提高品牌影响力和用户体验。


17742004931 联系我们,谈您的需求

立即咨询 立即建站