欢迎访问芦艺网!

响应式设计,为移动而生

除了苹果的iPhone、iPad系列产品大受欢迎之外,三星、LG、Sony、HTC等厂商的手机和平板产品也大放异彩。而国内的“中华酷联”(中兴、华为、酷派、联想)和小米等厂商也劲头十足、不余余力地推广着自己的移动设备产品。

随着移动设备的大范围普及,并且设备屏幕越来越大,浏览器性能也越来越好。这就要求,传统的PC浏览器网站已经不得不考虑要兼容移动设备的浏览体验了,如果说兼容的成本过高,那么至少也要针对主流的移动设备制作专门的手机版网站,不过这种做法是不可取的,因为到最好会变得难以维护。

而受到这一趋势的影响,一些Web设计师和Web前端工程师就已经开始着手解决这样的问题。最完美的做法当然就是现在最受认可和欢迎的响应式设计(也叫自适应设计)。

让我们来看一下响应式设计是如何定义的:

自适应网页设计(英语:Responsive web design,通常缩写为RWD)是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。 —— 维基百科

从定义我们可以知道响应式设计已经不是简单的PC和某款智能手机的适配而已了,而是自适应多种设备。理论上可以适应任意屏幕尺寸的设备。当然随着适配的设备种类的增加,适配的成本也呈现递增的趋势。所以一般的做法是选择几种主流的设备和屏幕尺寸进行适配即可。

说了这么多,那么自适应设计的魅力何在呢?我想不需要我费劲地说明,直接看几个优秀的响应式设计作品,比任何语言描述都更有说服力。

注:访问以下作品的链接时,可以通过调整浏览器的大小,来模拟查看不同设备屏幕下网站的表现。

1. http://www.humaan.com.au/
这是一家澳洲的Web设计公司的网站,从该公司的网站也可以看出其Web设计能力的确出色。响应式设计,jQuery动画效果,全屏展示,大气开阔,有空间感和层次感。
humaan

2.http://elegantthemes.com/preview/Foxy/
这个是elegantthemes.com网站上的一个主题,也是响应式设计,首页的slider也非常的出彩,使用jQuery制作的特效很别出心裁,而且各个slider画面的特效不同。
Foxy

3. http://www.awwwards.com/
最后要推荐的这个作品,不仅响应式设计做的好,jQuery动画特效也做足了。最值得一提,并独具特色的地方是网站的整体配色和jQuery特效的结合,堪称精妙。网站的特效很多,各种按钮、链接细微之处都藏着特效。等你去探索。
awwwards

发表评论

关闭菜单