Web开发之一：Web UI技术综述

一、什么是UI？什么是UI设计师？

1、什么是UI

按照Wiki的解释：In
the industrial design field of human–machine interaction, the user interface is the space where interaction between humans and machines occurs. 其实就是：User
Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

2、什么是UI设计师

UI设计师根据职责分为研究工具、研究人机界面、研究人三个方向。国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。

　　

在XXT公司，大家也通常会把UI理解为“美工”，如“赵工”。她们需要具有良好的美术功底与创意能力；她们被理解为网页美工，需要会CSS/HTML等网络语言；她们需要熟悉各种平面设计软件，如PHOTOSHOP、FLASH、Dreamweaver等软件，能设计出好看的页面，再好点儿的，或者层次再高点儿的需要懂JAVASCRIPT或者Flex语言。她们根据原型图设计出静态页面，供开发人员开发。她们不做交互，只负责页面是不是好看：包括网页的布局、颜色的搭配、图标的选择、网站模板的设计等工作，这就是我们这些开发人员通俗上对UI
和 UI设计师的理解。

所以，我们开发过程中，或者开发完毕之后，经常会说：“赵工，这个样式帮我美化下吧”。

二、什么是交互设计？什么是交互设计师？

交互设计：interaction
designer，它是UI设计的一个方向---研究人与界面的关系。交互设计师的工作内容就是在软件产品编码之前进行交互设计，并且确立交互模型，交互规范。

交互设计师：就是设计和改进界面产品原型设计的人。她们需要通过分析和讨论以及与用户沟通，不断改进界面产品原型的设计，给用户最好的功能操作和体验。她们需要懂得平面设计、视觉设计；她们需要熟悉UI设计的基本规范，具有良好的创意设计能力；她们需要熟练运用Photoshop，Dreamweaver等设计工具，具备良好的客户服务意识；她们还需要具备良好的沟通能力，哈哈，要求太高了。

在XXT公司，这部分工作被两个部门的人所承担，网站组和开发组。网站组负责原型的设计，她们会做简单的原型，但是不懂平面设计、不懂视觉设计、不懂基本的UI规范，她们多是半道转过来的。技术人员也不懂平面设计、不懂视觉设计、但是他们懂一些UI规范，知道模仿，就可以从其他网站模仿出来交互的效果，进而加以改进。这个工作似乎不该让技术开发人员来承担，但是目前的现状确实是如此，我们不得不承担交互的大部分工作。突然想起鲁迅他老人家在《故乡》中的一句话：世界上本没有路，走的人多了，也就成了路。

三、Web UI技术的前世今生

回到主题，当前Web前端技术就像个百花筒，只要你有创意，什么都可以展示出来。好的Web
UI设计的代表，苹果网站的体验就不说了，可以看看雅虎的UI，淘宝的UI，腾讯的UI，看人家就像看美女，养眼，舒服（当然，MM可以当帅锅看）。

从Web1.0到现在的Web2.0，除了更多的互动性的互联网服务，如SNS，blog等，Web技术的发展也是最主要的。在这个历史的变迁过程中，我们看看发生了哪些变化：

纯文本网页：只有最简单的文字和超链接
静态HTMl页：包括了文字、图片，融入了字体、样式、背景、框架和一些特效。这时的Web页面已经具备了较强的静态展示能力，丰富多彩的展示效果，被越来越多的人所接受。
WebUI成熟期：96年JavaScript和Css相继产生，W3c规范出炉，这一切都使得UI发展更加成熟。
动态页面：随着CGI、ASP、JSP、PHP等服务器端脚本技术的产生，开始出现了动态页面。服务器端根据用户提交的请求，将数据也网页动态的拼装出HTMl文本输出到浏览器。
随着技术的进一步发展，Struct、Webwork、JSF等基于J2EE技术的Web框架开始日趋成熟。在此过程中，随着Web2.0的发展，基于Ajax的交互技术、基于JavaScript的Ui框架，Flash技术、Flex技术都开始展露头角，并在Web2.0发挥了极大的作用。这就造就了Web2.0的的迅猛发展和WebUI的日益强大。

从入职XXT公司到现在，一致在做开发，无论是前端的，还是后端的。刚入职时，每天面对的就是JSP、JS这些代码，现在来看，这些依然是我们开发时的主要技术点。再根据网上找的，看看Web技术主要有哪些吧：

代表技术：

JS和Css应该是做前端技术所必备的两大武器了，如果你不会JS，不懂Css，可想，前端的你是很悲哀的。

Ajax：它很强大，它的争议也很多，但是不可否认它在当前的Web开发中占据了不可替代的作用。它为浏览器提供了在不提交整个页面的情况下动态的与服务器交互的能力，使得Web应用的用户体验性得到了极大的提高。所以，连市场和策划的同事，在看我们做的产品时，都会说“这个地方能不能不刷新整个页面，让它局部刷新”。目前主流的客户端Ajax框架有：JQuery，DoJo，ProtoType，我们目前在用JQuery。

基于JS的UI技术：基于JS的UI技术的出现，将WebUI的控制权从设计人员转换到了程序员，即可以直接在Web前端使用JavaScript的脚本描述一个UI组件模型，在运行时，由浏览器的脚本解释器调用UI框架来转换成HTML的UI界面。此类技术有：ExtJS，Yahoo
UI，其中ExtJS框架是比较完善且易于使用的。对于ExtJS的赞美我也不去说了，自己到百度上google吧。By the way , 我们还没有开始使用这些，但经过最近一个项目的开发，大家也都想看看ExtJS。

Flash：这个技术大家都不陌生吧，在hi.xxt.cn的页面上也小小的用了下，还是很形象而生动的。借助Flash可以做出很漂亮的用户界面、绚丽的动画效果。想想上大学时，Flash是何其流行，大概每个学计算机的都跃跃欲试，不是为了追求技术，而是为了用来追求MM。

Flex：这个玩意最近几年挺火的，我没有用过，也没学过，只是听大个、阿黄等几个人谈论过，它使用基于XML的MXML语言，提供多种常用组件，可实现WebService、Drag
and Drop、列排序、图标、视频播放器等。目标是开发出更好的RIA应用程序（RIA : Rich Internet Applications, 富互联网应用，具有高度互动性、丰富的用户体验以及强大的客户端功能）。最近在做的视频，学到了这个玩意。

其它的还有很多，不一一列举了。

四、当前公司Web技术概述

入职XXT公司已经快三年了，虽然也做设计、做需求，但更多时候还是战斗在开发的一线。从入职到现在，也伴随着技术部技术的发展。从纯jsp到Webwork到spring+ibatis，从js到Jquery，这些也都一直在学习。对前端这样一个概念，应该是在09年底才提出来的。新人的到来，人员的丰富，使得技术也补充了新鲜血液，我们也开始有了前端开发的概念，考虑开发的分工。

在做宝贝计划项目的时候第一次引入了JQuery，那是还感觉很新鲜，大家一起学习，一起进步，到后来，慢慢的往熟练工过度，在到后来zxw开发时，前端技术的制约，才发现我们对前端的理解这么肤浅，知之甚少不知者甚多。

我们开始考虑前端发展的方向、前端的代码规范、在前端引入成熟的框架。开始有意识的重新学习js、css等。回归基础，退一步海阔天空。

我们开始更多了解新的互联网产品，模仿、学习，接触更广阔的世界，不能局限于当前这个小环境，这是个交流与共享的世界，共享设计、共享创意、共享知识与成果。

五、前端一些积累。

好的东西是用来分享的，可以多看看，哪怕暂时用不到。

淘宝UED：http://ued.taobao.com/

腾讯CDC：http://cdc.tencent.com/

腾讯ISD：http://isd.tencent.com/

EXTJS：http://extjs.org.cn/

JQuery语法库：http://www.visualjquery.com/

D2前端技术论坛：http://www.d2forum.org/