响应式WEB交互设计浅析5100字
响应式WEB交互设计浅析5100字 摘 要：随着移动互联网的大行其道，为多尺寸浏览器自动配适而生的响 应式交互设计逐渐受到重视。按照目前移动互联网的发展趋势，可以预见在不远 的将来，移动互联网端的数据流量将超越PC端数据流量。响应式web设计 （Responsive Web design）可以为不同设备环境（系统平台、屏幕尺寸、屏幕 方向等）用户提供更加舒适友好的操作界面及用户体验。随着智能大屏幕移动设 备的普及，响应式交互设计的应用与发展可以说是大势所趋。该文对响应式交互 设计的概念、优势、实现方式进行了介绍与总结。中图分类号：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拥有更多可能性。从移动设备 开始让设计师更早思考如何发挥这些特性及优势。
我们需要基于移动端框架拓展开发出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 5.2 Foundation Foundation由位于加州坎贝尔的产品设计公司ZURB设计开发，是目前非常现 金的响应式WEB设计框架。它拥有很多布局模板、CSS样式表以及自己开发的优秀 JavaScript插件。同时，Foundation强大之处还在于其将SASS有效整合，开发者 可以使用Mixins概念简化开发行为，使组件的使用更加简单便捷。
5.3 Semantic Semantic优势在于提供一个共享UI以供开发人员和设计师共同协作，共同开 发，提升可控范围。Semantic使用自然语言习惯来辅助开发，让开发过程更便捷， 同时，Semantic还可以实时进行debug输出，提示代码作用。
5.4 PureCSSPureCSS是一款轻量级响应式框架，解压缩后只有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.