WEB开发网
开发学院软件开发Java 构建前端UI组件的新思路 阅读

构建前端UI组件的新思路

 2010-06-30 00:00:00 来源:WEB开发网   
核心提示:前端UI组件,目前流行的实现方式大多源自传统客户端的UI设计体系,构建前端UI组件的新思路,无论是早期的Bindows,还是近几年兴盛的ExtJS,换什么角度去思考?什么角度才是合适的?这离不开具体场景,下面以一个实例来说明,其UI组件都在模仿客户端软件,代码实现建立在复杂的继承体系上

前端UI组件,目前流行的实现方式大多源自传统客户端的UI设计体系。无论是早期的Bindows,还是近几年兴盛的ExtJS,其UI组件都在模仿客户端软件,代码实现建立在复杂的继承体系上。好处是可以构建出和客户端体验一致的一整套UI组件,但弊端也很明显:组件长得都差不多,代码则继承太深,牵三挂四,不够轻便。

如何才能让前端UI组件轻便灵活起来呢?首先得意识到Web UI设计有自己的独特性。Web页面可分为两种:一种是以展现信息为主的Web页面(web page),另一种是以操作信息为主的Web应用(web app)。对复杂的Web应用来说,可以采用ExtJS等类库来构建类客户端体验。但是,越来越多的Web应用已逐步脱离模仿客户端的阶段,开始从Web 的独特性出发,将传统UI组件的功能融入到Web页面中。

举一个例子:国内的Web邮箱,无论是163还是QQ邮箱,都会让人联想起Outlook或Foxmail等客户端软件。这种模仿成本很高,然而带来的效果个人觉得却不是很好。反观Gmail,整体UI设计,简明轻快,但功能一点也不逊色。在Gmail里,看不到Tree,看不到DataGrid,脱离了这些传统UI组件的框框,将功能融入到Web元素里,反而让用户更自然、更高效。

前端UI组件的Web特性,需要我们打破传统思维,换一个角度,重新去思考UI组件的基本组成要素。换什么角度去思考?什么角度才是合适的?这离不开具体场景。下面以一个实例来说明。

在淘宝页面中,以下是几个常见的UI组件:

构建前端UI组件的新思路

1 2 3 4  下一页

Tags:构建 前端 UI

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接