响应式WEB交互设计浅析

刘耀阳

摘 要：随着移动互联网的大行其道，为多尺寸浏览器自动配适而生的响应式交互设计逐渐受到重视。按照目前移动互联网的发展趋势，可以预见在不远的将来，移动互联网端的数据流量将超越PC端数据流量。响应式web设计（Responsive Web design）可以为不同设备环境（系统平台、屏幕尺寸、屏幕方向等）用户提供更加舒适友好的操作界面及用户体验。随着智能大屏幕移动设备的普及，响应式交互设计的应用与发展可以说是大势所趋。该文对响应式交互设计的概念、优势、实现方式进行了介绍与总结。

关键词：响应式 交互设计 WEB设计

中图分类号：TP393 文献标识码：A 文章编号：1672-3791（2014）12（a）-0016-02

目前移动互联网在人们网络生活中地位越来越重要，为配适多尺寸移动端浏览器而生的响应式交互设计也越来越受网站开发者喜爱与看重。那么什么是响应式交互设计，响应式交互设计又如何实现呢？

1 什么是响应式交互设计

1.1 响应式WEB交互设计概念

目前，随着信息技术的发展，以及人们物资生活水平的提高，浏览网页获取资讯的方式已不仅仅局限与使用PC端个人电脑浏览器来进行。很多时候我们开始使用移动设备，如智能手机、平板电脑等设备进行资讯的获取。但我们很快发现，移动设备更新换代频率越来越快，要跟上新产品发布的速度，并且兼容所有设备是非常困难的。对于大多数网站来说，也没有资金和精力为每一个新分辨率的新移动设备产品设计制作一套配适的移动端网站版本。对于用户来说，用户只关心信息获取的体验，而不会去考虑开发的繁琐程度。那么为了迎合用户需求，保持用户体验，同时兼顾网站开发的资金、技术、时间以及人力成本，提升扩展性及兼容性，响应式交互设计应运而生。

1.2 响应式交互设计优势与缺点

在目前这样一个时间节点上，许多网站还没有开始对原有网站进行响应式交互的改版或升级。原因有很多种，其中，网站主没有意识到响应式交互的优势与必要性是很主要一点。

响应式交互有以下优势：首先，灵活性高，可从容应对多种屏幕分辨率下的用户体验。现在手机、平板电脑制造厂商众多，尺寸及分辨率也标准不一。使用响应式WEB交互设计后，无论用户使用苹果、三星、HTC还是其他任何品牌产品，只要是智能机，都能达到完美的匹配效果。其次，扩展性高，页面内容丰富多变。响应式交互可以根据不同的设备显示屏幕大小自动配适页面内容。如有需要还可以显示或隐藏特定内容及功能。兼容多平台，用户体验一致。目前主流的移动设备系统平台中，IOS平台和Android平台在智能设备用户中占有率最高，但两种系统平台开发理念及编写方式不一样。响应式交互设计支持多平台，可以解决用户因为设备系统不一致而导致的用户体验参差不齐的问题，使用户无论使用什么设备都能获得统一的使用感受。最后，适应性高，完美兼容新设备。响应式WEB交互设计多采用弹性布局方式，这种方式会根据设备屏幕宽高比自动配适内容，因此采用了响应式交互的网站即便在全新的屏幕尺寸下也能使页面内容完美展示。

说完了响应式WEB交互设计的优势，那么这种设计有没有劣势呢？答案是有的，其劣势如下：代码编写需要很强兼容性，需要面对多种分辨率进行优化调试，代码偏长，会出现无用的隐藏元素，略微影响加载速度；设计复杂，代码编写需要严谨考虑多种可变因素以及承担设计纰漏造成的影响；工作量加大，影响开发效率。折中了设计方案，更多考虑在多设备条件下优化页面，单独页面或许达不到最佳效果。可以看出，在目前网络环境与技术背景的支持下，响应式交互设计的劣势与优势相比，可以说是瑕不掩瑜，对响应式交互设计的应用与发展并不会造成太大困扰。

2 响应式WEB交互常用技术

响应式WEB交互设计的目的是一个网站能够兼容多个终端，页面能够自动配适显示设备。具体的实现方式由多方面组成，包括弹性布局、CSS、网站框架等。下面我们来介绍几个常用的响应式页面常用技术。

2.1 Media Query

Media Query用于根据不同分辨率尺寸调整相应样式。现在市面上基于IOS系统平台和Android系统平台的移动设备占大多数，同时他们的自带浏览器内核都为webkit内核，所以我们可以使用viewport属性和Media Query技术实现网站的响应式交互。这种方法能够非常方便的实现基准字号font-size在不同分辨率下显示完全，不会出现阅读困难。

2.2 Fluid grid

Fluid grid即流体布局。其作用在于将网页上一些元素的框格由固定模式调整为相对模式（如百分百或比例等）。使用Fluid grid能够使网页根据屏幕的宽度自动调整页面宽度，进而保证页面内容显示完整，原有功能继续可用。

2.3 Flex box

Flex box是css规则总新添加的一种模型属性。它类似于APP结构，展示方式是固定头部与底部，中间部分内容的高度实现自动适应。Flex box的出现打破了常常使用的原有的浮动布局方式，实现了垂直等高、水平均分、按比例划分。如果希望目前的网站能够以正常的网页方式编写，并且以WabApp的外观显示方式出现在用户面前，那么Flex box是非常适合的一种方式。

3 响应式交互建设流程

3.1 确定内容架构

根据网站定位以及用户分析，确定网站整体风格、展示结构，如页面层级、页面内容等，对网站进行整体规划，厘清脉络关系。

3.2 设计移动框架

移动优先理念是基于对移动设备与PC设备之间关系的深刻理解而产生的，移动设备许多特性让设计更全面及强大。比如移动设备上的语音识别、基于地理位置定位、手势操作等，人们发现移动设备交互比PC拥有更多可能性。从移动设备开始让设计师更早思考如何发挥这些特性及优势。endprint

3.3 设计响应式框架

我们需要基于移动端框架拓展开发出PC端及平板电脑端框架。首先确定响应模式，那么从手机端显示到平板电脑显示再到PC端显示，整个网站布局如何变化，内容如何编排，优先级如何调整等都是需要设计的部分。同时我们需要对规则继续进行细化，即为定制流体栅格系统（屏幕占比）。

3.4 模块设计

在确定了响应式框架的页面结构以及相应模式后，我们要开始进行模块设计的工作。在产品设计时我们采用了移动优先的理念，但在整个产品的细节设计以及开发过程中，是否采用移动优先原则应根据实际情况具体分析。在这里，PC优先可以充分暴露业务复杂度，而且项目的设计、开发和测试在PC环境下拥有更成熟的工具和流程，因此，在必要的时候采用PC优先理念也是非常合理的。同时我们应注意的是，在开发模块的时候，必须时刻提醒自己：这个模块在当前设备上运行无误，在其他设备下是否会发生问题？

3.5 响应式模块设计

PC端模块完成后，接下来我们需要根据已设计好的PC端模块拓展出移动设备模块。这些模块必须符合设备习惯，充分利用设备特性，为用户体验带来便捷与舒适。

3.6 测试优化

这一步需要在真实设备下测试网站效果，并对暴露出的问题进行优化。测试优化内容包括：服务器承载测试及优化，软件性能测试及优化，用户实际体验测试及优化。

4 响应式设计优化

该文之前提到过，响应式设计也存在一些自身的问题和弊端，可能会影响到用户体验。那么这些问题和弊端就必须进行进一步的优化处理。

4.1 减少HTTP请求次数

在目前的网络环境下，移动端用户的数据使用流量是有限制的，可以说这是相较PC端的一个劣势。那么为了节省用户流量，我们可以使用Ajax异步请求来优化页面内部的一些操作。使用服务器端及前端缓存等机制保存页面内短期不会变化的一些数据，这样可以在一定程度上降低用户的数据请求量。

4.2 压缩Javascript和CSS

将页面内Javascript和CSS进行优化精简之后，可以有效地降低页面大小。

4.3 减轻Javascript库负载

目前很多响应式交互设计使用jQuery框架，事实上很多页面或许并不需要如jQuery一般强大的交互框架，我们可以用其他轻量级框架进行建设。目前针对移动端状态，有jQuery Mobile、YUI、XUI等可供选择的框架。

4.4 页面实现逐次加载

移动终端设备由于屏幕大小有限，承载的信息量也有限，我们没有必要将全部PC端页面总内容一次性加载完成。我们可以使用逐次加载模式，当用户有继续观看的意愿，并对屏幕做出相应手势时，再继续进行加载新闻或图片。

4.5 使用CND进行页面资源管理

CDN是英文Content Delivery Network简写，意即内容分发网络。它的基本思路是将互联网中有可能影响数据传输速度和稳定性的环节避开，保证内容传输的稳定性。

4.6 优化图片显示

其核心思想是实现用户设备分辨率的自动区分，根据不同分辨率提供不同大小的图片以供用户加载。这样既能使不同终端用户都获得良好的用户体验，同时不会浪费用户数据流量和加载速度。

5 优秀的响应式WEB框架

5.1 Gumby Framework

Gumby Framework是一个灵活的响应式框架，它建立在SASS基础之上。SASS是一款CSS预处理器，它功能强大，提供很多新的工具来支持使用者快速自主开发Gumby框架。Gumby的产品更新紧跟最新的行业技术标准和规范，同时支持chrome、firefox、Opera、IE8-10等多种主流浏览器。如果开发者刚刚开始接触响应式交互网站，那么使用Gumby是非常适合的。它自带PSD UI工具包，能够非常方便地帮助制作者开发出一个漂亮的响应式交互布局网站，且不需要太多专业性代码。

5.2 Foundation

Foundation由位于加州坎贝尔的产品设计公司ZURB设计开发，是目前非常现金的响应式WEB设计框架。它拥有很多布局模板、CSS样式表以及自己开发的优秀JavaScript插件。同时，Foundation强大之处还在于其将SASS有效整合，开发者可以使用Mixins概念简化开发行为，使组件的使用更加简单便捷。

5.3 Semantic

Semantic优势在于提供一个共享UI以供开发人员和设计师共同协作，共同开发，提升可控范围。Semantic使用自然语言习惯来辅助开发，让开发过程更便捷，同时，Semantic还可以实时进行debug输出，提示代码作用。

5.4 PureCSS

PureCSS是一款轻量级响应式框架，解压缩后只有5.7KB。它基于Normalize.css 框架构建，没有使用任何JavaScript，只使用了HTML和CSS技术。该框架采用模块化结构，每一个模块样式都可以单独使用。

5.5 TukTuk

TukTuk是一个高效快速的响应式CSS3框架，以轻量级的设计和面向对象的CSS为优势，非常容易扩展。

5.6 Kube

Kube是一款灵活的CSS框架，包括网格、按钮、表、排版样式等实用功能，可对forms，grids，buttons，tables，typography等属性设置样式，同时提供LESS文件，给开发人员带来了极大的灵活性。

6 结语

响应式交互设计需要综合考虑，统筹部署网站的功能性与美观性，不再是只考虑一种设备使用情况的传统网站搭建模式。这就给网站设计开发带来了新的挑战和机遇。我们称响应式交互为“设计”而不是“技术”，是因为响应式交互讲究设计先行，需要提前设计网站的方方面面，而不是依样画葫芦的把已有的前端变成响应式网站。对于页面制作者，应将单一页面设计思维转换成响应式交互设计思维。每一个网站从设计之始，就要依照响应式交互的标准进行页面设计与规划。这就需要我们在设计开发过程中不断和设计、前端、后台等人员有效沟通，定制合理的响应策略，才能搭建出合理高效的适应当前及将来网络环境的响应式交互网站。

参考文献

[1] Graye，赵子龙译.交互设计报告--响应式交互与扁平化设计[DB/OL].http：//www.zcool.com.cn/article/ZNTA5MDA=.html，2013。

[2] 阿里UED.交互设计：响应式Web设计[DB/OL].http：//www.yixieshi.com/ucd/11828.html，2012。

[3] 夏梦竹.十大最佳响应式Web框架设计.http：//tieba.baidu.com/p/3067516972，2014.endprint