RWD响应式网站 vs AWD自适应式网站
2021-05-20 建站常识 RWD响应式网站, AWD自适应式网站
RWD响应式网站设计 vs AWD自适应式网站设计,成为我们作为网站设计师和UI、UX设计师的重要选择。
有见识的选择可以使您以更好的目标,目的和结果来计划和执行设计。
随着移动设备的普及和多样性,作为设计师,我们需要迎合各种屏幕尺寸。这是每个网络和应用程序设计师当前面临的挑战。
从大型企业监控器到智能手表,用户今天可以通过多种方式在线访问信息。
希望弥合设备之间差距的设计人员在设计时有两种选择:RWD响应式网站设计 vs AWD自适应式网站设计。
 
RWD响应式网站设计 vs AWD自适应式网站设计
成为我们作为网站设计师和UI、UX设计师的重要选择。
有见识的选择可以使您以更好的目标,目的和结果来计划和执行设计。
随着移动设备的普及和多样性,作为设计师,我们需要迎合各种屏幕尺寸。
这是每个网络和应用程序设计师当前面临的挑战。
Google一直建议使用自适应网页设计(RWD),尤其是在2015年4月21日发布了重大更新后,该网站将移动设备友好型网站的排名提高了。
但是,它在更新中并未指定您必须使用响应式设计,只是指定了可在移动设备上访问的网站,并具有良好的用户体验和性能。
考虑到这一点,让我们在性能和用户体验方面考察自适应与响应式设计的优缺点。
自适应Web设计(AWD)还是独立的移动网站(具有自己的网址)。
 
RWD响应式网页设计
(英语:Responsive web design,通常缩写为RWD),
是一种网页设计的技术做法,该设计可使网站设计在不同的装置(从桌面计算机显示器到行动电话或其他行动产品装置)上浏览时对应不同分辨率皆有适合的呈现,减少使用者进行缩放、平移和卷动等操作行为。
对于网站设计师和前端工程师来说,有别于过去需要针对各种装置进行不同的设计,
使用此种设计方式将更易于维护网页。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。
采用 RWD 网站设计的网站使用CSS3 Media queries,即一种对 @media 规则的扩充,
以及串流的基于比例的网格和自适应大小的图像以适应不同大小的装置:
串流网格概念要求页面元素使用相对单位如百分比或字型排印学调整大小,而不是绝对的单位如像素或点。
灵活的图像也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面。
Media queries允许网页根据存取站点装置的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。
回应式网页设计变得更加重要,因为移动流量现在占网际网络流量的一半以上。
因此,Google宣布行动装置时代的到来(Mobilegeddon)(2015年4月21日),并开始提高移动友好的网站设计的评级,如果搜寻是被从一个行动装置发起。
 
AWD自适应式网站
(英语:Adaptive Web Design,通常缩写为AWD)
手机、桌机网址,可以做到完全一样。
不同的装置开启时,会先判定装置是哪一种,来给予不同的 CSS,进而改变排版。
所以也可能会有不同的 HTML 文本、CSS、JavaScript 档案。
自适应和响应设计之间有何区别?
那么首先, RWD 和 AWD 设计之间的主要区别是什么?
简而言之,无论目标设备是什么,响应都是流畅的,并适应屏幕的大小。
响应式使用CSS媒体查询来根据目标设备更改样式,例如显示类型,宽度,高度等,
并且站点只需要其中之一就可以适应不同的屏幕。
另一方面,AWD设计使用基于断点的静态布局,这些断点在最初加载时不会响应。
AWD可检测荧幕尺寸并为其加载适当的排列,通常,会针对六个常见荧幕宽度设计一个RWD切换数据:
320
480
760
960
1200
1600
从表面上看,AWD设计似乎需要更多的工作,因为您必须设计至少六个宽度的建置。
  
那为什么还有人要使用AWD自适应设计?
AWD对改造现有的网站很有用,以使其对移动设备更加友好。
因为这可以让公司针对特定的荧幕宽度尺寸进行开发,象是公司的网站主要客户为手机使用者,
AWD可以针对手机的内容与排版特别制作、优化成对于手机装置使用者最好的界面排版。
如前所述,设计六种宽度尺寸的规范是标准的。
但是,可以透过网站的数据分析,例如GA来查看最常用装置,并为这些装置进行设计来做出更明智的决定。
响应式网页设计到底是什么技术? >>
相关网站设计案例