支持移动终端响应式Web设计与研究.docVIP

支持移动终端响应式Web设计与研究 　　摘要：随着智能手机为代表移动终端设备的普及和发展，提高基于不同设备的交互体验成了交互系统是否被认可的关键。本文通过采用基于响应式Web的自适应系统设计，通过在系统的表示层甑别不同设备类型，针对性提供界面需求，提高了用户体验。 　　关键词：响应式Web；交互；移动终端 　　2012年被称为智能手机年，根据最近一份调查显示，在美国的智能手机覆盖率已达50%，也正因为此当前确实是提升移动终端用户体验的大好时机。移动互联体系中，Web交互系统是作为人与人、人与设备之间沟通的桥梁存在，随着当前移动智能设备的普及，原有的交互系统面临挑战。根据有关机构的统讯预计到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。本文尝试通过响应式的设计开发方式，构建一个使系统的页面随接入设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户的系统。通过设计这样的交互系统，我们就可以达到利用同一套代码，使网站内容在Pc、平板电脑以及智能手机浏览器上都能正常的显示的目的。 　　1、基于响应式Web系统的设计流程 　　基于响应式Web的交互系统的设计基本流程为以下三步：第一，确定需要兼容的设备类型、屏幕尺寸等硬件信息，以及交互的信息流需求信息等；第二，根据第一步的硬件需求尺寸制作线框模型，根据交互信息需求设计功能模块；第三，进行uI效果设计，进行交互功能的定义及详细设计；最后，通过前端程序设计实现。 　　2、响应式Web的基本原理 　　基于响应式Web设计（Responsive Web design）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS mediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分???率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。简而言之，我们的Web设计应该做到根据不同设备环境自动响应及调整，不过，我们无法像其它工程领域一样使用类似于运动传感器或是机器人技术去感知用户，响应式Web设计更多需要的是抽象思维。目前，液态布局、帮助页面重新格式化的media queries和脚本等技术已经开始应用，但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。 　　3、响应式Web实现的关键 　　构建响应式Web的有些关键技术与关键环节，其中应用最关键的技术有：HTML5技术、CSS3 Media Query技术，最重要的环节部分为流体布局（fluid grid）、流体图片（1iquid image）、以及媒体查询（media query）。 　　3.1 HTML5与CSS3技术介绍 　　HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internetapplication，RIA），如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。 　　CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。 　　3.2 流体布局（fluid grid） 　　流体布局其实就是在我们实现PC终端的页面基础上，将一些元素的宽高