杂聊——基于HTML+CSS的UI开发与实现

   做了两年UI开发了。和不同的人配合。使用不同的后台编码..NET,J2EE,PHP,ASP.
   随着人们对WEB应用的要求提高。我们的软件和网站在前端的用户体验和人机交互方面在做不断的尝试和提高。
   但是在实际的开发中。很多公司还是陷入了一个困境。注意。这里只是说部分公司。大部分公司吧.因为没有专人去负责UI开发和交互设计与开发。而是由美工与程序共同完成。
  
  困境一:   美工设计-->后台编码实现.
   美工负责设计。并且做成静态页面模型<有些美工会实现部分JS>.发给后台开发小组/人员.
   后台开发人员负责VIEW层的最终实现。<并且会实现部分JS.>

   问题:
   后台开发人员接收到的静态页面模型不标准.嵌套程序有困难.或者嵌套程序后会出现页面布局混乱等问题。
   大部分美工很多情况下都只是设计人员.并且大多情况下只会用效果图去做第一次审核和最后一次审核。而这样又会出现新的问题。动态的效果无法用一张图片很详细的说明。很多效果或许自己不知道该如何实现或者有些困难会舍去.虽然网上有很多开源的代码。JS,FLEX,FLASH. 但多数情况下这些UI都是以代码为主.以前端为主.对于大部分美工来说。读代码是件痛苦的事.或者根本读不懂.
   对大部分程序来说。很多高级的UI应用都是基于JAVASCRIPT+XML|JSON|XSLT|TXT|HTML+CSS+DOM/FLEX/FLASH.这样的应用或许很容易上手。但也很容易由于2次开发造成很多BUG.还有一种情况。对于数据传输来说。后台与前端的数据交互。采用什么格式.什么标准?
   至此.已经早成了前后台开发人员协调脱节的现象。

  困境二:美工设计-->UI开发人员实现-->后台编码人员与UI开发人员一起整合
    这样的开发团队似乎理想一点。每个人分工清楚。但协调脱节的现象仍然存在。
    在开发阶段。顺利的话可以正常发布.上线.
    但是这样子做.假设数据传输格式为:JSON|XML|XSLT. 发送请求为AJAX.或者伪AJAX(IFRAME).如果出现了BUG.调试将是件痛苦的事.尤其是中型以上的项目。大量采用了JS开发前端的项目。分析BUG只能是两组人一起上。效率很底.

    为了更好的开发.更好的应用。我们身边或许很多公司已经有人开始使用JQUERY,PROTOTYPE,EXT,DOJO,YUI,GWT.并且也做出了很多很出色的CASE.我也参与了好几个项目的UI开发。说真的。对我来说最痛苦的莫过于与后台人员沟通如何实现数据交互了。要不就是程序不知道JSON.你给了他们模板数据也会出错。要不就是输出XML后在用JS解析.或者动态捆绑XSLT解析.开发效率底.要不还有一种情况就是程序告诉我这个必须采用服务器端控件:比如.NET.真疯了。
     最近一直在想一种新的开发模式。方便自己也方便程序员.简单的先说下了。过段时间有机会在提交详细的说明.
   
    基于HTML+CSS的UI开发与实现.
    一：分析
    1.WEB应用里最常见的。增、删、改、查
     增加：FORM<控件、数据校验>，数据提交<post,get|ajax、伪ajax>。布局<div|table>。
     删除：数据提交    <post,get|ajax、伪ajax>
     修改：数据回填、FORM、数据提交、布局
     查询：查询的表单、查询的结果、分页、对单条数据的一些附加操作：比如删除、修改的接口调用。基于超级连接的或者AJAX
     2.特殊的UI效果 
     拖动、MENU、TABS、TREE、等等。。。。
     3.其他应用调用接口。

     二：设计思路
     上边我们提到了常用的一些操作和功能。
     按照这些功能。我们对UI可以进行分组定义。定义出一组基于HTML的模板。
     比如一个有一个查询功能。我们可以这样划分
     1。查询表单。<form页面。就一个单页面存放查询的FORM>
     2。显示结果的GRID。<列表页面，用TABLE就行。>
     3。分页控件。<分页控件页面>
     4。单选或者复选。<包含在GRID里。用CLASS标记>
     5。其他操作的接口。比如单条数据的查看详细信息。删除。修改等。<特殊操作的接口页面，或者是包含在grid里针对某一条信息的操作接口>
   
    用一个页面对这些操作进行include和布局.可以用动态页面中的include.也可以用JS提供一组AJAX方式的include方法<ajax请求某一个页面返回HTML代码加载>。
    
     三：特殊处理
     用一组CSS来定义组件的显示方式。比如现在我们定义了3个UI。
     CLASS：menu grid tab
    用一组JS来读取UI的CLASS。并且添加事件和特殊操作等。比如AJAX事件。
     menu.js  grid.js tab.js
    用一组JS来配置这个应用的操作接口。上边的JS会用到。
     这里我们是在做查询应用。比如这样定义
     SearchConfig.js
    SearchConfig = {
       delete : 'xx/xxx/xxx.jsp',
       add : 'xx/xxx/xxx.jsp',
       update : 'xx/xxx/xxx.jsp',
       get : 'xx/xxx/xxx.jsp',
       search : 'xx/xxx/xxx.jsp'
    }
   
    四：后台开发
     在这里。我只需要按照后台人员的需求在我已经做好的UI中挑选静态页面发给后台开发人员。他们只需要关心输出HTML或者接受请求处理。返回一个标记。
    
     五：总结
     在这个过程中，后台开发人员不需要关心什么是JSON。怎么用XML，怎么用XSLT。美工也不用去关心怎么去实现JS。怎么去实现AJAX。美工只需要按照程序的要求在UI的库中按照要求组装。最多做一个布局。修改部分UI的风格就可以。
     呵呵。还没说我到底要做什么。
     做一组用HTML+CSS定义好的静态UI。用JS动态的读取这些UI，并且根据CONFIG文件自动配置UI。最大限度的减轻美工和后台开发人员对JS开发的痛苦。
    
     由于表达能力有限，说的不好。尽请朋友口下留情。
     有兴趣的朋友可以看下：http://www.hooyi-semi.com/semi/index.html
    其中的grid和tabs,menu.都是按照这样的思想去做的。

评论

12 楼 natuever 2008-11-28  

ayaya 写道

构建一套基本的css和js，能完成需求期间UI就ok了，至于最终的形式，基本就是仁者见仁智者见智了，呵呵

是啊。做一套最基本的。在做一套高级的ui用的html.css.js.剩下的完全由用户自己选择。

11 楼 ayaya 2008-11-28  

构建一套基本的css和js，能完成需求期间UI就ok了，至于最终的形式，基本就是仁者见仁智者见智了，呵呵

10 楼 zenggang2008 2008-11-28  

往往一个webapp最花时间的就是在UI上
不过现在的解决方案也有很多了
真的希望flex能火起来,毕竟写html.css.....太累了

9 楼 natuever 2008-11-28  

flyfan 写道

如果你的框架能提供这样的功能，让程序员更多的关注后台代码，那真是完美了

我只能说。我努力吧.呵呵。

8 楼 flyfan 2008-11-27  

如果你的框架能提供这样的功能，让程序员更多的关注后台代码，那真是完美了

7 楼 ynw520 2008-11-27  

写代码不难,封页面真的花时间.

6 楼 whaosoft 2008-11-27  

呃 你辛苦了 我为所有的前端程序员致敬~
不要怪我们把页面都跑给你们

5 楼 jiyu 2008-11-27  

写webapp跟写nativeapp越来越像了，webapp也逐渐能胜任很多nativeapp的工作。但是，写native app很简单，了解一个框架，掳起袖子就可以写，刷刷两下，一个程序就出来了，但是些一个webapp，要了解很多东西，HTML/CSS/JS/...，数不胜数，如果，能有一个框架，把程序员从烦恼的页面设计中解脱出来，那就十分帅了，大家都集中精力在程序功能上，一个真正的web framework，用起来都如同native framework一样的东东。

曾经以为YUI算得上一个framework了，后来发现使用起来仍然很困难，作罢。

如果博主有兴趣发布这样一个框架，那可真是不错，写代码的就安心写代码去吧，设计页面的就安心设计页面去吧。

4 楼 natuever 2008-11-27  

了

flyfan 写道

liangwenzheng 写道
曾经的公司里别说UI开发，就是美工都是自己弄，往往1/4的时间在写后台代码，3/4时间在弄自己很头疼的页面。 我现在的情况跟你一样呀，natuever的文章虽然给了一些方法，但公司的人力不能满足这种模式呀

如果我们可以提供一组这样的框架.不知是否可以被大家接受和采用

3 楼 flyfan 2008-11-27  

liangwenzheng 写道

曾经的公司里别说UI开发，就是美工都是自己弄，往往1/4的时间在写后台代码，3/4时间在弄自己很头疼的页面。

我现在的情况跟你一样呀，natuever的文章虽然给了一些方法，但公司的人力不能满足这种模式呀

2 楼 natuever 2008-11-26  

liangwenzheng 写道

曾经的公司里别说UI开发，就是美工都是自己弄，往往1/4的时间在写后台代码，3/4时间在弄自己很头疼的页面。

不知道我这样的想法和做法是否对你以前那样的公司有所帮助。

1 楼 liangwenzheng 2008-11-26  

曾经的公司里别说UI开发，就是美工都是自己弄，往往1/4的时间在写后台代码，3/4时间在弄自己很头疼的页面。