如何摆脱菜鸟界面（二）

   在前面的《如何摆脱菜鸟界面（一）》中我们展示了菜鸟界面与大鸟界面的区别，这里我们来讲解如何摆脱菜鸟界面。

 

  我们大家都知道菜鸟跟大鸟们的差距不是一天两天就能消除的，我们首先需要做的就是使自己的界面摆脱菜鸟级的水平。

 

  摆脱菜鸟界面第一步，要有自己的设计原则。

  这点是很重要的，作为一个设计人员，我们必须要有自己的设计原则或者说设计风格，比如有人注重特效，有人看重精简操作，例如对于我来说，我比较喜欢精简的界面，那么我设计的界面的整体格局就是比较简单的（注意保持整体格调一致）。

 

  摆脱菜鸟界面第二步，要有全局观。

  全局观可以体现你的设计思想，体现你的思路是否清晰。怎么做到有全局观呢？比如我们先从布局做起，先设计界面的整体布局（总体界面分为几块），然后是局部的布局（每一块都放些什么），别人一看你的界面布局代码，就知道你是有设计过的，而不是一个“菜鸟”。

 

  摆脱菜鸟界面第三步，学会未雨绸缪。

  这点是需要经验的，对于没有经验的菜鸟们来说，一定要睁大眼睛，牢牢记住下面需要考虑到的情况。

 

  1.按时交工。

  这点主要是针对你有一些额外的服务性的功能，而这些功能你又没有把握，那么你要把额外功能实现推迟，可以不考虑去掉，先保证基本功能可以按时交付。没有一个老板喜欢总是拖延工期的员工。

 

  2.边做边测。

   做web界面，最大的一个问题就是浏览器兼容性问题，而没有考虑过兼容问题的界面一眼就会被看穿，所以要想摆脱菜鸟界面，一定要考虑兼容性问题，要在几大浏览器上都进行测试。

 

  根据浏览器的内核，可分为三大类：

   1）IE（IE6/IE7/IE8/IE9）及IE内核的浏览器（TT/遨游/世界之窗/360/sougou）

  2）FireFox(FF3.5/FF4)

  3）谷歌/safari/sougou

 

  对于我们初步的测试，可从三类中任意挑选一个，比如我们挑选一个IE，一个FF，一个谷歌即可（对于初步测试完毕后，问题也基本处理差不多的时候，再测试其他浏览器）。

 

  先测样式：先看打开各个浏览器是否“变形”，然后通过更改浏览器显示页面大小，使用放大和缩小（页面比例）这三种方法进行测试；最后改变分辨率继续使用以上三种方法进行测试；

 

  再测浏览器对js的支持：在ie下可用来测试js脚本的错误，js的一些属性方法有些浏览器不支持，可通过使用jquery或者自己用js编写一些自己需要的方法即可。

        

  对几个浏览器需要注意的几个问题，尤其是ie6，很惹人烦，它的margin属性解析出来比别的浏览器要大，还有好多css样式属性不支持，如非a标签的hover属性，min-width等属性都不支持，具体的大家在做之前一定要先查询一下，js同理；除此之外，大家要权衡一下div和table的使用，div灵活兼容性不好，table死板兼容性好，但是什么情况下如何使用大家要提前考虑清楚。

 

  注意：一定不要等到全部做完再进行测试，这样很有可能导致你的界面完全变形，我们需要按照单元测试的原则一点一点的进行测试，而且还有一点很重要：尽量更改css或js，少更改代码结构。

 

  上面这些方法只是针对初次接触web界面设计的人的一些提醒，而要想真正摆脱“菜鸟界面”，还需要我们去实践。

 

  以上这些提醒只是我对最近项目设计的一些总结，大家如果有什么好的建议，请留下您的评论，我们可以更好地交流。