关键词:web2.0技术 用户体验 AJAX 媒资4.0 OPOB 富客户端 UI组件 引言 自从Tim O’Reilly提出web2.0的概念以来,web2.0技术经过几年的发展,以其良好的用户体验和操作效率逐渐成为web开发的宠儿。相比web1.0只是单调的让用户接收浏览器信息,Web2.0则更注重用户交互和用户体验,使不同用户的人性化需求得以满足。大洋媒资系统做为业界的领军产品,以先进的技术和一流的创新设计,为用户提供完整的解决方案。新一代4.0产品除了延续以上优势之外,还将更加重视人机交互及用户体验,而这些正是应用了web2.0技术的结果。 媒资4.0与web2.0技术 媒资4.0产品中了引入一些web2.0的新技术和概念,更注重用户的参与,人性化程度大大提高,增强了用户体验。其中比较重要的技术和方法主要有: •Ajax技术 •OPOB模型 •富客户端方式 同时,web2.0技术在媒资系统的成功应用,也说明它除了可以在互联网上大展拳脚之外,也在企业级应用中找到了用武之地。接下来,就各部分做分别介绍。 Ajax与页面的异步刷新 Ajax可称得上是最核心和炙手可热的web2.0技术, 其全称是AsynchronousJavaScript+XML,它本来并不是什么新技术,但确是在web2.0时代才焕发出新的生命力。媒资4.0产品就使用了Ajax技术框架,打破了以往凡是有浏览器请求发送到服务器端就需要重载页面的惯例。从此,当浏览器与服务器交换数据的时候,web页面再也不用打断交流进程进行重新加载,就可以动态更新页面的对应区域,用户可以使用接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。 Web1.0的时代,当用户在某个页面上执行某种操作,向服务器请求获取数据,web浏览器都会更新整个窗口,不管其中的内容是否全部需要更新,这种方式相当低效,且友好度差,经常会因为一个局部功能而影响到整个页面业务的使用。而我们的媒资4.0产品,如iSearch,使用Ajax异步请求之后,浏览器无须等待用户请求操作,也不必更新整个窗口就可以显示新获取的数据。且更新的区域可以是页面的任何一个区域,其他区域的数据显示都不会受其影响,即页面的局部刷新。如下图,检索条件,结果,logo和下方的导航条都在同一个页面上,用户进行查询的时候:需要刷新的仅仅是右侧的检索结果内容,其他部分均不会被影响。 
OPOB模型 OPOB是One Page One Business的缩写,指的是一个页面完成一个业务,媒资4.0产品就采用了这种模型。 在传统的web1.0时代,使用的是MPOB(Multi Page One Business)方式:B/S应用需要通过一系列的页面转化来完成一个业务,每个页面功能单一,且页面转换通过页面刷新完成,每次页面转换都要将前面几个页面的数据带到下一个页面。这种MPOB方式不仅使服务器端出现繁琐臃肿的数据传递逻辑,而且只适用于浏览型和填表型的需求。浏览型以下载数据为主,如信息浏览;填表型以上传数据为主,如按项填写表格提交。这两类覆盖的业务比较有限,而现今电视台业务的丰富性和多样化,决定了用户需要频繁进行“增,删,改,查”的交互性操作,MPOB方式就显出其局限性。 我们的媒资系统就是这样一个典型的有大量交互性操作的资源管理系统,这正可以充分利用和发挥web2.0技术的交互优势,建立OPOB模型,参见下面的模型图: 
客户端的Ajax请求代替了原来的页面刷新请求,并且将业务逻辑中约束用户操作的功能也放到了客户端,可以提前验证用户操作的合法性,提高了提交到服务器端数据的质量,而服务器端则专注于处理核心业务逻辑。一个页面可以包含多个Ajax请求对应的展现区域,这些请求各司其职,又可以共同为一个业务服务。
如下图,显示的是一条节目的详细信息,整个页面分为播放器,节目树,编目信息,其他节目引导条等若干区域,每个区域的数据组织都是由一个Ajax请求独立完成的,他们与服务器交换各自的数据,同时又组成了一个整体,构成了整个节目的详细信息页面: 
这种OPOB的方式既减轻了服务器端的压力,又使客户端各请求独立高效的运行,大大提高了产品稳定性,同时增强了用户体验感。 富客户端:基于B/S,UI组件风格类似C/S 富客户端(Rich Client)是一个相对的概念。 在纯粹的Fat Client应用 -- C/S应用主宰企业应用的时代,企业的信息化建设达到了前所未有的高度。但由于C/S架构在系统稳定性和部署简易性方面存在先天缺陷,所以被后来在这两个方面都具优势的B/S架构所取代,也就是瘦客户端(Thin Client)的web应用,然而却带来了相当糟糕的用户体验和操作效率。瘦客户端web应用将复杂的业务逻辑,包括前台页面涉及的展现元素,数据交换model结构都交给服务器端处理,致使服务器端过于庞大臃肿,且需要做很多不属分内的工作。相反,客户端则过于单薄,且缺乏有效的事务处理,后台的数据交互操作都会中断用户对屏蔽的操作。 而大洋媒资4.0的B/S产品,如iSearch,iFolder,iAudit,iShell等,取二者之长,一方面,其B/S的先天优势可令用户简单轻松的通过浏览器来进行软件操作,另一方面,富客户端又提供了丰富的类C/S风格Widge,也就是UI组件,带来了B/S软件前所未有的全新用户体验。 接下来就通过一组大洋媒资4.0的产品截图来了解一下具有web2.0风格的B/S UI组件: 工具条菜单 
右键菜单(传统的B/S应用都无法提供右键,鼠标多选功能)

对话框 非常熟悉的界面,完全类似windows的视窗效果,容易上手,无须培训。但这可不是C/S程序,而是媒资4.0的文件资料柜iFolder 
拖拽 在引入AJAX之前,在B/S软件做拖拽是不可想象的事。现在媒资4.0 B/S产品中,可根据需要对表格,树,任意视图的单个或多个条目进行拖拽操作,如下图,可将layout中右侧region的“演示拖拽”目录拖拽到左侧region的“音频”节点下: 
页签 
气泡 当用户执行完提交请求的动作之后,页面会及时对请求结果以气泡的方式进行提示,使用户交互变得更加友好,如下: 
停靠 用户可随意展现或隐藏他们愿意操作的页面区域 
抽屉 
树

Tip 小细节,但可以小中见大,使用户对媒资4.0产品有充分深入的了解。 
尾声 媒资4.0产品对于web2.0技术的充分应用,一方面说明web2.0技术非常适合企业级应用,也说明了大洋媒资产品一贯坚持的创新精神,将互联网上适用的新技术引入广电行业,开创一个新的时代。
|