题目：响应式网页的设计与应用

摘    要

现在，每个产品线都会从桌面电脑到平板，再到海量型号的手机，所以成熟的设计不仅需要创新的亮点，还必须有很强的适应性。设备适配是让产品的设计适用于各种各样的终端设备上，不仅在不同的设备上都有很好的显示效果，而且针对不一样的设备性能做设计上的优化，让低配的设备可用，高配的设备体验更优秀。分辨率和设备的更新频率将远远超过网页设计和开发的速度。为每一个网站都针对每一种分辨率和设备重新设计和开发是脱离现实的。运营之后，不能适配的用户自然会放弃体验不好的产品。不过，新的技术带来新的网页设计模式可以避免这种情况的发生。

本文就针对这种情况，找到了解决方案即响应式网页设计，阐述了相关的设计方法并且用1-2个实例对响应式网页的设计进行了验证。响应式网页设计的理念就是通过浏览器识别不同的设备，然后根据这些现实设备的差异因素（屏幕定向、尺寸、系统平台等）响应不同的显示效果，从而将设计更好地展现在各平台上，让用户在PC、平板和手机上使用时得到良好的体验。通过信息架构的搭建确定内容决策，来设计移动框架、响应后的内容框架、具体的模块设计、响应式模块设计，这就构成了响应式设计的流程。与传统的网页设计相比有很大的不同点，同时也颠覆了传统的设计流程。响应式网页的产出也需要前端先进技术的支持。它的实现方式由多种关键技术组成，包括弹性图片、流式布局、CSS3 media query的使用、HTML5的语义化标签等等。在响应式设计的应用部分，以“人人职场”的响应式设计为例，综合运用交互设计和视觉设计的理论方法，对典型页面进行了分析和响应式设计，并通过实践验证了文章所总结的响应式网页的设计流程的可行性。其中，着重分析了在交互设计阶段不同设备规格下各个模块的响应方式和页面布局。

本文阐述了响应式网页的设计方法，详细介绍了关键的设计步骤和技术，并结合“人人职场”实际项目对这一套设计方法进行了验证。