文档介绍：面向不同设备的响应式网页设计探析
摘要:本文主要研究面向不同设备的响应式网页设计,介绍了几种不同的移动端网页设计思想,并对面向不同设备的响应式网页设计方法进行了研究。
关键词:面向不同设备;响应式网页;设计
中图分类号: 文献标志码:A 文章编号:1674-9324(2017)12-0082-02
很多网站为了获得更高的覆盖率,开始制作面向不同设备的网页,为了获得多个设备不同平台上相同的显示效果,需要为多个设备制作多个不同版本网页,增加了维护成本和架构设计的难度,而响应式网页设计理念遵循依据页面大小提供相匹配视觉效果的基本原则,在为不同设备提供理想显示效果的同时,节省了开发和维护成本,降低了开发难度,有较高的应用潜力。
一、跨设备设计
不是所有的网站都需要从零开始响应化,也并非所有网站都有必要做到全站响应化,实际工作中我们更经常遇到已经有PC端的情况,在充分认识到移动流量的重要性之后愿意提供响应化的移动浏览体验,确保用户能够通过移动终端访问网站,因此为了提高响应式页面设计的实效性,节省开发成本,需要科?W地选择开发策略。
。独立移动站的设计方式适用于没有严格同步要求或者强烈移动终端使用意图,但是想要提供类似APP体验的应用场景。国内的一些大规模网站如淘宝、京东、当当等有着十分复杂的系统结构,全站响应的难度非常大,因此更希望为移动端提供和APP统一的交互方式,倾向于选择独立建站,称作M站、WAP站或者H5版本,单独运维。这种建站方法保留了原有PC站,重新建设移动站,确保了分辨率、移动设备以及使用产品用户可控,成本也更加易于控制,但是网站内容更新、整体维护成本偏高,分开维护的方式容易导致坏链、错链。
。网站原有的设计标准已经比较先进时,就可以充分利用现有代码适应更多分辨率。这种设计策略对原网站编码基础有很高要求,调整分别率之后还要重新测试原分辨率页面。这种设计方法成本和原网页编码基础有关,实际工作之前首先要评估原网页编码质量。
。移动优先建站策略使用了全新的、渐进增强式的代码基础,能够充分发挥响应式网页的所有优势,获得无缝对接一致性用户体验,全屏幕适应,可拓展性强,运维成本低,SEO统一。但是这样的设计策略也面临着很多风险,计划、开发、测试工作量远远大于普通PC站,需要权衡优势和风险。
。一些插件以及服务提供商专注于提供跨平台可用性,找寻折中方法,价格也比较合理,这些方案在灵活性以及不同平台的表现方面可能不如全响应式,但是是一种优秀的过度方案。
。是当前最受欢迎的多设备自适应开源响应式前端框架,最早出现在Twitter内部用于保持内部解决响应与网页一致性的工具Twitter Blueprint,之后转变理念,从移动设备友好转变为移动设备优先,并将其融入了框架内核。流式格栅系统响应式网页使用了行和列的组合来进行页面布局,在布局块中填充内容,但是设计师不再使用像素进行尺寸标记,而是使用比例和模块的响应式思想,不要求较高个性化配置的网页推荐使用这种设计方法。
二、响应式网页设计
响应式网页设计(responsive web design,RWD)最早由Ethan Marcotte提出,是一种面向任意设备网页,甚至能够对未来设