>
响应式网站设计

 

多设备适应,让用户体验更舒适!

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。


响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。


我们做了一个动画,您可以大体了解下什么是响应式网站设计,如下图所示:


1.gif


很久以前


我们在设计页面尺寸的时候,就非常纠结。网页最好是不要出现水平滚动条,这将带来很糟糕的用户体验。那,到底该用多宽的页面尺寸?

根据当时大多数用户的屏幕分辨率的情况,普通的网站,一般页面尺寸在980px到1003px之间。如果屏幕分辨率高,就居中显示。


过了一段时间


移动互联网飞速发展,需要为移动手机端单独做一个适合移动设备上浏览的页面。也就是通常说的手机版网站。这个时候,一般是企业已经有了PC端的网站,又另外单独做手机版网站。有的甚至启用了两个域名。好任性!


又过了一段时间


我们把PC端和手机移动端放到一块,让两个版本访问一个数据源,两个版本数据互动。比如:在同一个操作后台更新一款产品后,PC端页面更新了,同时手机端页面也同步更新。手机版进行改进,让读取的数据自动适应小屏幕浏览。这期间做了不少的客户。客户反映也很好,毕竟方便了不少了。如果用电脑访问,自动进入PC版,手机访问,自动识别,跳转到手机版页面。


现在


我们的网站升级为了响应式布局。访问同一个页面,在不同大小的屏幕下,自动的做出调整。给用户提供更好的用户体验。

对程序上的便利是:有时候网站发展的一定阶段需要功能调整。如果是两个版本的话,调整完PC版的,还要调整一遍手机版的。同时做两遍。而响应式设计是访问的同一个页面。程序调整一次即可。比之前方便多了。

下面拿我们公司网站举例说明,什么是响应式网站:(注:现网站已改版,详情请浏览:《响应式网页设计专题》一文。下述截图,仅供参考。)


我目前的电脑分辨率是:1920 x 1080 ,首页的页面是这样的:


QQ拼音截图未命名.png


请注意上面的红线框,一个是头部导航,一个是右侧的电话,一个是下部的三列服务展示内容。


这个时候,如果缩小一下浏览器窗口,相当于是屏幕变窄的话,是这样的:


QQ拼音截图未命名.png


出现的变化是,下面的三列内容,自动的变成了两列显示。上部间距也自动缩小了。



再缩小下浏览器窗口:


QQ拼音截图未命名.png


因为头部的导航内容太宽了,在小窗口下就放不开了,这个时候,导航内容自动隐藏了。而在最右侧多出了一个汉堡式的小按钮。下面的两列,自动变成了一列显示。


继续缩小窗口:


QQ拼音截图未命名.png


头部右侧的电话号码也消失了。而点击右侧的汉堡按钮,导航会以下面的形式出现:


QQ拼音截图未命名.png


这也就是模拟在宽屏,中等屏幕,平板电脑,手机上的不同状态。


再看其他页面:



QQ拼音截图未命名.png


在宽屏下,文章版块是分左右两栏的,左侧是文章列表,右侧的热门文章和官方微信公众号。


缩小屏幕后:


QQ拼音截图未命名.png


缩小屏幕后,右侧版块自动隐藏,左侧以100%的宽度进行平铺。



    效果如下图:

未命名-1.fw.png

① 普通PC;② 黑莓手机;③ IOS - 苹果手机;④ 安卓 - 平板电脑

   官方微信

 

微信公众账号:ifunction

 

个人微信账号:shangqiwangluo

 

Addr.:山东省 - 东营市 - 东营区 - 庐山路1188号 - 华泰国际金融中心B座1319     Tel:0546-7361067

Phone: 13954622503     QQ: 89908097     Email: 90058@163.com

CopyRight ©2008-2019 shangqiwangluo.com

备案/许可证编号:鲁ICP备08104341号  鲁公网安备 37050202370653号