程序员必须掌握——界面设计

  一听说某程序员在做界面设计，也许会嗤之以鼻。

  界面设计，哼，有什么困难，又有什么技术含量，不就是橫画画竖画画嘛，没得可提，更没法跟后台研发比。

  但是这种观点大错特错。其实界面设计并非我们想象的那样容易，若是非得说没什么技术含量，那只能说明一个问题：我们没有认认真真得去做界面。而是把重心全部放在后台功能实现了。不管别人信不信，反正我信了。

  其实，界面设计，不仅折射出我们的态度，同时体现一个人的思想。

  比如对一个查询出来数据列表进行增删改查操作的界面，请问你脑海中第一个画面是如何的？

  我想大部分应该是这样的吧：

    

  曾有过开发经验的，会在此基础继续完善，因为若是查询的结果太多，整个页面盛放不下，所以必须有个分页。好滴，我们继续完善。

    

  这个界面功能俱全啊，分页有了，功能也有了。这下应该好了吧。但是不然，再仔细看看，还是有点别扭。没有吧，看过drp的都知道，视频老师可是这么设计的。对，drp中确实如此，但是并不代表这样设计的有思想，设计的最棒。本着以全心全意为人民服务的角度，我们继续完善：

    

  看出这个图与上图的区别了吗？

  只有加了样式吗？其中一个最重要的变化是：分页靠右，功能按钮靠左。知道为什么吗？

  这个举动背后可是隐藏了很大的秘密。

  这样设计应该是考虑很周到了吧。只能说基本可以了吧。但是想过这个问题吗？虽然使用了分页技术，但是每页的记录差不多十条记录吧。那对第一二条的记录进行操作，有没有感觉到别扭呢？从第一条移动鼠标定位下面的功能按钮？这么长的距离，有没有想过如何减少移动的距离，其实若是将就一些，其实也没问题，但是将就问题，就等于放弃思考的机会，放弃进步的机会。那如何办呢？

   

  看看这个图有什么变化呢？对了，比上图多了一行菜单，左边功能菜单，右边分页菜单，利用这样的方式即可介绍上述距离长的问题。

  那若是熟练于此系统此页面，再使用这样方式进行操作是不是有点不专业，高手不使用鼠标，而是使用快捷键。使用快捷键的人士，给人一种神秘感，一种专业感，让人不由升起敬佩之情。

  因此，这个页面可以使用快捷键来控制。快捷键功能小弟没实现，只是有这个想法。但是小弟使用另一种方便的操作—右键功能。

  在此网页上，对这个列表使用右键功能。在实现右键菜单功能时，发现了一个问题。在ie中getElementsByName函数不支持div，table标签。它只支持html中自带的控件，比如button，input标签。但是右击菜单的思路是在一行中点击任何地方即可弹出右击菜单，所以需要设置一行中所有列字段的name值相同。但是这种思路火狐，谷歌都没问题。唯有ie不可用。

  解决方案如下：小弟重写了getElementsByName这个函数。

  var tags=new Array( "A","DIV","INPUT");       //重写getElementsByName方法    var getElementsByName = function(tag, name){ var returns = document.getElementsByName(name);          if(returns.length>1) { return  returns;     } returns=new Array();  for(var i=0;i<tag.length;i++) {  var e = document.getElementsByTagName(tag[i]);   for(var j=0;j<e.length;j++)   {   if(e[j].getAttribute('name')==name)      {  returns[returns.length]=e[j];}   } }   return returns; };

  使用这个函数时，首先判断若是ie浏览器则使用重写的函数。若是其他的浏览器，则直接调用本身的函数即可。

//若是ie浏览器if(document.all && window.external) { returns[returns.length-1].checked=true;  } else {  getElementsByName(tags,num).item(2).checked = true;}

  通过这系列，界面设计是想象的那么容易吗？原来自己设计的界面之所以感觉容易，并且感觉从中学习不到什么，是因为当初没有给自己学习的机会，没有把精力投入界面中，而是完全注重功能实现。

  其实，当学习一个东西的时候，应该多思考一些。思考尝试，这就是项目经验，不思考不尝试，肯定没有什么收获。