基于HTML5的Web App的开发与探索

章 斓

(福建师范大学协和学院，福建 福州 350108)

基于HTML5的Web App的开发与探索

章 斓

(福建师范大学协和学院，福建 福州 350108)

对于移动互联网行业来说，HTML5的出现带来了具有强大的跨平台兼容性的Web APP——一种页面可直接适配手机屏幕、在浏览器上轻量运行、具有强大的表现能力、可实时更新且体验类似于Native App的网页应用.首先介绍了Web App的主要特点.在此基础上，阐述了基于HTML5的Web App的实现.最后，分析了Web APP发展面临的机遇与挑战.

HTML5；Web APP；开发探索

Web App，即网页应用.它是一种依赖于Web浏览器，通过网络进行访问的应用程序.HTML5的强势发展、智能手机的迅速普及，以及优质的用户体验都极大地促进了Web App的发展.

与原有的Native App相比，Web App具有明显的优势，比如：可以一次开发多平台使用，应用开发成本较低；在支持HTML5的浏览器上运行，直接适配多种移动终端；方便服务提供商随时发布更新；无需下载安装，打开浏览器就能使用.但也存在一些不足，比如：短时间内，用户体验不能与Native App相媲美；不能充分发挥移动设备的硬件功能；不能在离线状态下工作.

为了证明用Web App取代Native App的可行性，微软与ZeptoLab合作推出了基于Internet Explorer 9和HTML5框架的《Cut the rope》(即“割绳子游戏”，其iOS版本在Apple Store的下载量超过5000万).在国内，手机端新浪微游戏平台登场之初主打的也是HTML5游戏，中国移动游戏基地也表示将把HTML5作为其未来游戏平台发展的重要方向[1].通过游戏这种形象直观的展示来证明Web App同样可以有良好的用户体验，这对于浏览器厂商来说是一件非常具有说服力的事情[2].

功能日益完善的浏览器在未来不再只是一个浏览、获取信息的入口，它还将拥有PC所有的功能，甚至成为一个新的应用入口，取代操作系统.HTML5的迅速发展推动了Web App时代的到来.

1 以用户为中心的设计

伴随着触屏移动设备的发展，人们对时尚、美感、趣味性的不断追求，触屏手机界面设计也在不断改头换面，各种颇具想象力和创造性的界面映入我们的视野.然而，并不是越花哨的界面设计就越具有吸引力.界面设计并非艺术创作，但仍需要艺术性的视角和技能.触屏移动设备的蜂起，也给设计师的工作带来各种挑战.屏幕大小的制约、分辨率的多样化、交互方式的变革，这些都是在设计过程中要考虑的问题.

表现美感的设计方式多种多样，但其最终的落点都是要符合交互设计中的“可用性”原则.移动设备产品的设计，遵循以用户为中心的宗旨，使产品能满足用户基本的功能需求、符合用户的认知和行为习惯，同时能高效而愉悦地完成任务或工作，达到预期的目的.满足可用性后，美观大方的界面风格则是在此基础上的点缀，起着“锦上添花”的作用.

1.1 为触屏移动设备而设计

触屏设备多为手机、平板电脑、电子阅读器等.要在有限的屏幕可视区域当中打造出成功的界面设计方案，必须结合实际的产品需求，在视觉元素的尺寸和空间布局等方面做好充分的权衡与判断，让信息一目了然，表意不隐晦，不误导用户.以下就从图标设计、文字排版、尺寸大小、交互创新四个方面进行阐述.

1.1.1 图标设计

由于屏幕大小的限制，在图标设计过程当中，要把握好图标的大小.过大，影响其他元素的显示；过小，影响手指与屏幕的交互操作.Web App中图标的风格要全盘统一，给人以专业的感觉，形成良好的品牌认知.同时，随着Web的发展和人们审美意识的转变，图标的设计风格也开始迭代更新.人们开始偏爱简洁的表现方式，设计出的图标也比较概括，表达一种目标或动作，符合人们的认知.由过去的水晶立体风格转向扁平简洁的发展路线，甚至有些产品的图标还采用单色剪影的效果去表现.比如Google的图标，在这一点上表现明显.

1.1.2 文字排版

对字体数量进行限制，合理减少界面中的文字信息，直观的图形化界面使用户可以方便地完成操作任务.控制字号大小，使用高亮或者对比的方式突出类似条目的信息.在不影响文字显示的情况下，充分利用单屏空间，采用多途径的设计方法来描述内容.保持文字的可读尺寸，页面的清新风格，切忌因为过度追求视觉美感，忽略最基本的可读性，使页面排版变得凌乱不堪，破坏了用户阅读的连续性.

由于平板设备的显示屏亮度和对比度要高于普通电脑，因此很多在普通电脑上合适的字体和设计直接搬到平板设备上会由于背景的亮度而产生实物过虚的问题.要尽量避免这些问题，在移动终端适当地加大文字尺寸是比较明智的[3].

1.1.3 尺寸大小

如果说交互对象的布局位置取决于平台类型及持机方式，那么它们的尺寸则在很大程度上由手指的大小来决定.必须将这些交互元素设计的足够大，才能保证用户可以进行准确的辨识和触击.

不过，要做的多大才算够呢？不妨抬起手看看自己的指尖.很多系统平台的设计规范也都在这方面进行了描述.理论上，可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方[4].

1.1.4 交互创新

设计要与人进行交流.触屏设备已经将用户从鼠标中解放出来，用手指直接与界面进行交互[5].为了让手指自由操作并得到充分的休息，要对页面元素的布局进行深入的考虑.另外，当用户与界面交互操作时，界面的一部分必然会被拇指遮挡住，如何保证控制元件的布局不会干扰到实际内容，同样是一项设计挑战.类似这样的问题还有很多，但多数可以归纳到“舒适度”与“可视性”这两方面.

可以在游戏或者其他娱乐类的产品中尝试各种复杂炫目的交互效果，但对于用户需要时常用到的工具型的应用来说，在导航结构、浏览方式及相应的视觉交互形式等方面要尽量保持规范、简洁，符合用户的认知，满足用户的期望.

1.2 为用户体验而设计

UED，即User Experience Design(以用户为中心的设计).通过对产品的界面和行为进行设计，让产品和它的用户建立一种有机关系.概括地讲，为用户体验而设计的目的是让用户能够在最短的时间内，用最快的速度，高效且出色地完成任务或者工作.在Web App的设计中，除了要满足基本的交互设计规范外，还应该注意以下几个方面的内容.

1.2.1 功能简约

“简单就是美”，这是交互设计中的至高境界.优秀的Web App设计要精简应用功能，保留住最重要的功能.让精力有限的用户能够把视线集中到核心任务的入口.在界面设计的过程中，产品经理往往会倾向于给用户更多的选择或功能，然而根据二八原理，事实上80%的功能往往也只有20%的用户会使用.全盘展示反而会使用户感到困惑或不解，从而对产品产生排斥心理.因此，有选择地保留主要功能，隐藏次要功能，还原应用的本质，可以让应用简单化，界面清新化.

1.2.2 流体布局

流体布局让Web App在移动友好道路上又向前走了重要一步.它不仅能摆脱网页周围额外的空间，也可以在许多不同的终端或平台完美显示.流体布局，正如它名字描述的那样，可以根据浏览器的大小决定页面的宽度，充分利用屏幕空间.不管你的设备分辨率是多少，都能自动适应屏幕的宽度变化，具有很强的弹性.这使得Web App与Native App一样，充满整个可用视窗，而不是左右两边留白.

流体宽度易于实现，取决于当前设置或布局.改变页面CSS样式表中的宽度属性百分比，或者使用Full Screen API在合适的时候提供一个全屏界面.

1.2.3 主体突出

集中显示应用的重要功能是移动设备界面设计的关键，因为用户一打开界面，这些功能的入口就能迅速跳入用户的眼睛，鼓励、引导用户完成任务或工作.同时,Web App的主体功能应该是简单的，因为用户需要频繁操作.结合清晰的功能入口，专注单一功能的流程设计，在该流程的操作中不要提供其他功能入口.

应用的每个页面显示的内容是有很强的针对性的，让用户迅速明白自己所处位置，获取哪方面的内容，同时也要让用户能迅速跳转到别的页面.

1.2.4 页面精悍

移动设备的长页面会使程序加载的时间较长，用户等待的时间也随之变长.因此，保持页面短而紧凑，使得用户在所有平台上访问应用时，能迅速打开并顺利完成任务.甚至当设备上只有非常有限的下载速度时，也能较快运行.

1.2.5 彻底导航

在有限的屏幕空间里，导航能提升Web App的可用性，进而提升品牌和可信度.优秀的导航设计可以让用户便捷地浏览页面内容，同时还能将正确的信息架构传达给用户，直观地表现出Web App的内容.

同时，Web App的导航设计需要组织清晰且分类明确，分类之间具有一定的连贯性，且分类命名易于理解，平衡导航的深度和广度，有助于引导用户使用Web App.

1.2.6 易于点击

移动设备的触摸屏越来越普及，这意味着用户将使用自己的手指与Web App进行交互.如果设计的图标或文字链可点击范围太小，就容易造成误操作或者无效操作.

通过消除分散在文章和段落中的文字链接，利用图标取代文字链接，这样可以增大元素的点击区域，而不用扩大视觉区域，使得用户可以轻松自如地点击，避免误操作或者无效操作.同时，这种图标加文字的链接使得排版不受限制，也达到Native App的视觉效果.

2 基于HTML5的Web App的实现

HTML5通常指包括HTML5，CSS3和JavaScript在内的一套技术组合.HTML5的出现让网页可以仅通过HTML5就实现很多原来需要依赖flash等插件实现的效果，极大地丰富了网页的表现能力.也正是HTML5让Web App可以给用户提供不同于传统网页的展示效果和交互方式，让Web App的用户可以拥有和Native App用户相同的体验.而JavaScript脚本和AJAX的广泛应用，改变了传统网页的技术架构和页面组织形式，为Web App的发展打下了良好的基础.

2.1 Web App技术架构

Web App与Native App相较而言，最大的优势之一就是可以实时控制自身的更新，无论是增加新功能还是修改bug，服务器修改后就可实时生效，让所有的用户使用最新的版本.这也意味着在Web App的产品生命周期中，它一定会根据用户需求和市场情况，发生频繁的变更，良好的架构能让变更的影响尽量集中，降低了修改和继续维护成本.

前端数据层介于UI界面和后端之间，它封装了前端所有的对数据的处理工作.前端数据层的作用主要包括两个方面：(1)前端数据层缓存了数据库中的数据，并提供接口供UI界面层在需要的时候调用.(2)前端数据层需要根据用户的操作，将用户的操作封装成HTTP请求，调用和服务端约定好的接口，并在服务端处理后以XML形式返回处理结果，根据解析处理结果更新数据缓存.

服务器主要负责接受前端的接口调用，负责对应接口的业务逻辑处理，将需要储存的处理结果使用SQL语句保存到数据库，最后将处理结果返回给前端数据层.数据库仅被动地负责数据存储，通过服务器的操作，保证数据库的数据始终是最新的.

这种分层方式类似于传统的Native App，使用前端数据层代替Native App的网络层的职能.其设计目的在于尽可能让各层负责的工作相互独立、各司其职，使得在业务、接口甚至技术方案发生变更时，可以影响到尽量少的模块.

2.2 Web App实现关键技术

在上文的四层结构中，UI界面层和前端数据层共同属于总体架构的前端部分，服务端和数据库组成了后台.后台使用PHP和MySQL实现，只要保证与前端的协议不变，技术实现方案可以任意变更，并非Web App实现的关键技术，这里暂且不论.下面的内容仅讨论前端实现.

UI界面层负责界面显示和用户交互，它在实现时使用了HTML、CSS、JavaScript、JQuery等技术.

在构建界面时，采用了HTML+CSS这个网页制作时结构和表现分离的经典结构.

HTML在UI界面层中作为页面框架，使用div进行页面结构的搭建.HTML5给HTML带来了一些标准化的新标签，比如：标签增加了time的类型，在Windows，Android和IOS中，time标签的实现取决于浏览器的实现，这样在不同的系统中就可以提供适合各自系统的实现方案.

CSS在网页制作中负责提供网页的样式.在HTML生成页面时，对需要提供样式的标签都提供了class或者id的属性.CSS可以根据这些属性结合其选择器，对这些标签进行样式的修改.CSS3更是提供了便于使用的圆角、阴影、渐变等效果和平移、缩放、旋转等特效，让Web App的界面表现能力更加接近于Native App.

JavaScript是实现Web App的核心技术，它提供了动态改变网页内容的能力，让网页摆脱了点击后一定要刷新页面才能展示新数据的传统形式，可以在页面不刷新的情况下直接修改页面上的任意元素.JQuery是一个轻量级的JavaScript库，让用户可以更方便地处理HTML元素和事件.JQuery提供了强大的选择器和良好的AJAX封装，它在各平台中良好的兼容性也让它在各个Web App项目中被大量使用.

前端数据层负责与服务端进行交互，需要对服务端发起HTTP请求，并解析服务端返回的数据.它在实现时使用了AJAX这个重要技术.

AJAX指的是异步的JavaScript和XML，它让页面可以在不刷新的情况下，异步访问服务器的接口并且接收XML格式的返回值.这样页面就可以动态地根据请求服务端的结果，来更新页面的显示内容.其中所有需要填入数据的位置在一开始都被空出，等待页面初始化完成需要获取具体数据时，通过前端数据层封装的AJAX接口向服务端请求数据，服务端用XML返回并且经过前端数据层解析后，UI界面再通过JavaScript动态生成页面上的HTML代码，展示用户真正看到的界面.

2.3 Web App页面体验优化

用户在使用传统网页的时候，每一次链接点击都意味着一次页面刷新，用户的每一次点击都需要等待下一个页面加载.用户每打开的一个新的页面和上一个页面是不连续的，传统网页的用户在访问网页的过程中，两个页面之间跳转的浏览体验是被中断的.然而Native App往往可以在多个用户界面之间平滑的过渡，如果需要耗时的操作也可以使用动画或者进度条等方式来保持用户体验的连贯.不连贯的体验是除了表现能力之外，网页和Native App的使用体验之间最大的差别.

Web App要保证尽量和Native App一致的体验，就必须解决用户在网页中操作时每一次点击都会产生一次页面刷新的问题.好在JavaScript动态改变页面元素的能力给我们提供了OPOA这个针对页面刷新问题的良好解决方案[6].

OPOA，即One Page, One Application，也就是单页面应用.在传统网站中，导航里的每一个链接点击后都会跳转到一个独立的页面.而在OPOA的网页中，在用户点击导航栏的Tab标签时，并没有进行页面跳转，而是执行了一段JavaScript脚本，这段脚本会隐藏当前显示的内容，并且将下一个页面的内容展示出来.

3 机遇与挑战

3.1 Web App的机遇

在未来的世界无线网络畅通无碍的时候，Web App将更能满足未来的需要.所需要的所有数据、服务、工作环境都在“云端”.只需要打开手机连接网络打开Web App，就可以索取所需要的，如服务、图片、音乐、影片，做想做的，比如工作、社交、游戏等等.开发者只需要更新自己的Web App就可以实现跨平台同步更新，提供最及时最好的服务[7].

3.2 Web App面临的挑战

Web App的实现需要多个层面的标准来支持，其中就包括HTML5标准.虽然标准的制定不能影响技术的发展革新，但是却起着指引方向的作用.在HTML5标准完善前，各个浏览器厂商会根据自己的利益，在标准的支持上各行其是，而Web App将受制于此难以得到大范围的推广.比如transform这个属性，在chrome中和FireFox中就有-webkit-transform和-moz-transform两个版本.

HTML5还处在完善的过程当中，而Web App产品的大部分效果需要支持HTML5的强大浏览器对HTML5标准的良好支持.在PC端，虽然大多数主流浏览器都遵循HTML标准，但最终呈现给用户的界面效果仍然会有所差异.这种情况，在移动平台将会有更明显的变化.不同的浏览器展现出来的效果千差万别，这导致开发者需要花费大量时间用于兼容各个平台浏览器的实现效果，增加了产品的开发成本，这对于一个追求快速迭代的互联网产品来说是个致命伤.另外，移动设备浏览器的性能还没达到能够支持与Native App体验相媲美的Web App的程度.目前页面响应速度偏慢和不流畅的页面交互体验是Web App的两大硬伤.在HTML5标准真正确定之前，在手机浏览器对HTML5的支持和性能真正让人满意之前，Web App想要取代Native App还有很长的路要走.

在功能不涉及到网络连接的情况下，Native App可以在离线的状态下保证应用的正常使用.但Web App是在浏览器中运行的，其运行必须依赖网络环境.虽然HTML5有支持离线存储的特性，也仅是在用户使用过程中，根据功能需要来保存用户数据，待用户下次使用时直接可以读取到上一次保存的数据.在没有网络的情况下，网页无法正常加载，导致Web App完全无法使用.现如今，国内的Wifi覆盖率还比较不够高，而4G网络的资费还相对高昂.在网络环境足够完善的之前,Web App还无法完全取代Native App.

[1]爱娜．HTML5热潮来袭，中国手机游戏市场面临转折[EB/OL].http://www.mhtml5.com/2012/04/4818.html,2012-04-11.

[2]Web Apps来袭，基于HTML5技术的浏览器大战开始[EB/OL].http://www.haoliulanqi.com/201202/1439.html,2012-02-14.

[3]小文字，大体验[EB/OL]．http://mux.baidu.com/?p=2653.html,2012-05-24.

[4]又是为了触屏移动设备而设计[EB/OL]．http://beforweb.com/node/49．2012-02-15.

[5]杨涛，曾维鑫．浅析人机界面设计中的心理学因素[J]．艺术与设计(理论)，2007，(3)：85-87.

[6]樊文娟．基于Ajax的富客户端界面的设计与实现[D].兰州：兰州大学硕士学位论文，2010.

[7]App进化论[EB/OL]．http://www.aitinan.com/archives/2242,2011-07-29.

(责任编校：晴川)

Development and Exploration of Web App Based on HTML5

ZHANG Lan

(Xiehe College, Fujian Normal University, Fuzhou Fujian 350108, China)

For the mobile Internet industry, the appearance of HTML5 brings about the powerful Web App with cross-platform compatibility. It is a page which could directly fit the phone screen, be operated conveniently on browsers, retain strong performance capacity, provide real-time updates and offer user experience similar to Native App. This paper firstly introduces main features of Web App, expounds the realization of Web App based on HTML5 and analyzes opportunities and challenges for its development.

HTML5; Web App; development and exploration

2015-06-04

章斓(1981— )，女，江苏泰州人，福建师范大学协和学院讲师,硕士.研究方向：数字媒体.

TP31

A

1008-4681(2015)05-0050-04