浅论Web界面表现之图形设计

新一期的《程序员》中指出，2007热点技术职位排行Top9：UI设计师。并有如下点评：

该职位除了要求掌握一些等平面设计工具，还需要熟悉CSS、JavaScript、HTML以及许多编程技巧。当然，如果你还精通后台的程序编写，那么没什么说的——你真是太有才了！

记得很久以前，我冥思苦想为自己所从事的某些工作，以及开发的某些东西取个名字的时候，终于想出了UI这个缩写，然后本着这种理念，我便将我们所做的某些工作开始叫做UI设计。后来，到网上一查，竟然到处都是UI，而且UI还并非仅仅包括自己当初所想的那些。突然意识到，自己在闭门造车。当今这个岁月里，闭门造车只会让自己顾影自怜，无法做到突破，而只有突破自己，才能进一步提高自己。

上面算是一个小小的引子。现在我们所讨论的重点还是在于界面元素的表现，包括内容、结构、表现分离等内容，如果我们还没有形成初步的认识，建议去浏览一下CSS禅意花园(http://www.csszengarden.com/)，那种境界，迎面带来的冲击，是透彻淋漓的，是惊艳的，我们不能不感叹大师们的创作才华和心思细腻。

1、Web界面表现的重要性

Web用户首次访问网站，他的第一眼时看什么？你可以把自己当作一个Web用户！你对该网站的第一评价肯定便是界面设计是否美丽、功能设计及摆放是否合理，而这些，将直接影响用户的心情，也就是用户对该网站的喜爱和厌恶程度。因此，“以用户为中心”显然比“以内容为中心”更加有生命力。

伴随着Web2.0的讨论如火如荼，从程序员到设计师都无不加入了“用户体验”的思考队列中来，原来只关注技术本身却“两耳不闻窗外事”的时代已经一去不复返了，Web2.0的变革，由内到外得进一步催生和演绎了以人为本的设计理念，这是Web发展多年来人们共同思考的智慧结晶，也是Web发展的一种必然。而这其中，首先要做到的就是：如何使界面表现更加良好。

2、美丽素养的提高

很多美术专业毕业的人，应该是兼具一定的美丽素养和技术成本的，但是他们也同样有着挥之不去的弊病，那就是只涉及界面的图形设计，认为界面表现都是程序员的事情，这无疑不是一件让诸多程序员头痛的事情。于是，一些原本对图形设计有一定渴求的程序员便操刀上阵，开始他们的图形设计之旅。这些人因为熟悉程序开发流程，自然就懂得分析功能需求的主次轻重，再加上本身有一定的想法，设计出来的界面可能会更加实用，而他们唯一获缺的就是：美丽素养！

无论是“天生丽质”的美术专人，还是“半道出家”的转行高手，他们都不能肯定自己一定能够做好这份工作，因为Web界面毕竟与专门的美术设计和程序开发不一样，因此，必须有一个初步建立的过程。这就需要多欣赏和借鉴名家的“著作”，而网络上这些相关的网站也多得很，上面提到的CSS禅意花园就是一个非常好的例子。

那么，所谓的美丽素养究竟是什么？具备美丽素养的设计人员所做的Web界面又应该具备哪些素质呢？

美丽素养并非简单的审美能力的提高，更在于积极了解和分析Web的站脚点和面向人群而采用合适的色彩，同时又要理解色彩间搭配的含义，将设计做到具备一定的冲击力。而此冲击力并非一定要张力十足、活力四射，而是用最恰到好处的表现达到一种功能与用户心理的协调，比如CSS禅意花园的安静版最终从诸多版本中脱颖而出。

当然，这些理论层次的东西，说起来容易做起来难，但是它却是通过我们的工作经验总结出来的，足以说明它的重要性。这也是各大公司越来越关注界面设计的关键之一，所以，我们惟有迎难而上！

3、界面功能布局分析

网络上经常讨论的布局是关于以前的table布局和现在主张的div流式布局，但此处我们讨论的并非这些，我们所要讨论的是界面功能的摆放布局，说白了就是各功能模块的摆放位置。

众所周知，大部分人对某些事物或者事情经常具有一种看似约定俗成的共同之处，就好像一提到水果大部分人就会想到苹果一样。基于此，网站EYETRACK(http://www.poynterextra.org/eyetrack2004/index.htm)就专门对大部分用户登录一个网站后眼球关注区域的变化作了调查分析，如下图所示：

很多时候，我们要下载一个软件却苦于找不到下载链接，反而看到的却是诸多的广告，这当然可能是某些网站营生的策略，但确实是“忽悠”消费者一把，大大地浪费了我们的感情。这肯定不是我们设计网站的原则。

如果我们把握了用户登录后的眼球移动规律，那么界面功能的布局也便不是件难事了。主要功能肯定是防止到最显眼的位置，并采用一些特殊方法（如：字体大小颜色突出、图片表现、动画表现等）来吸引用户的眼球，次要功能便可以低调处理。但这并不意味着要网站设计的五花八门，那只能让用户感觉眼花缭乱，反而摸不着头脑，给人一种杂乱无章的感觉。因此，万变不离“协调”二字！