响应式WEB交互设计浅析.docVIP

响应式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能够使网页根据屏幕的宽度自动调整页面宽度，进而保证页面内容显示完整，原有功能继续