美化系统菜单.docx

管理类业务系统菜单部分美化经验分享，把所有好的东西拿过来拼凑并不容易能形成整体的效果

这个项目是最近忙乎接近一年的大型管理类软件系统的菜单折腾、折磨、优化过程的经验分享，以前开发软件系统都是用微软的网站风格，一般中小型的管理类软件，用那个效果也不错，用了好几年客户也能接受，虽然不是很漂亮，也没办法，只能做到这个程度了，没有美工的天赋，再加上当时公司里美工也少，认识的朋友圈子里都是写程序的多，美工做得好的也很少，所以没办法，只能直接仿造微软的网站效果，全部拿过来思想，稍微改变一下菜单上的文字等，这些年感觉过硬的专业的网站设计师真的很难找，一直在寻觅这方面的人才，希望以后能进行长期合作。

碰到的设计师往往有2种，一种只会做html不会图片处理，有一种只会图片处理，不会

html，还有第三种是2个都会都不精，废话少说，直接就看效果图如下：

前几年从程序员的眼光看，也是非常漂亮的，当时没有采用折叠菜单、用树型结构的菜单导航，大概用了好几年也在好几个中小型项目里应用过，总结下来有几点不太友好：

颜色有些黯淡、有些沉重，同时会让人感觉有些笨重，虽然开发人员喜欢，最终客户不太喜欢这个颜色搭配。

不大好应用其他效果，很容易变成颜色搭配不协调的问题，颜色乱的局面会产生，更不能用一些鲜艳的颜色，那会显得更乱。

按钮的权限控制写起来比较麻烦，例如上面的一部分都是用了HTC技术，写了不少

JavaScript。

后来用了折叠的菜单控件，ComponentArt的树控件，但是菜单项太多了后，导致有些子菜单显示不友好，无法自动适应高度等问题，同时颜色搭配也成了难题，选了好几个风格，总的来说，都很失败，客户也很不满意。

以上效果组合虽然都用了Microsoft、ComponentArt的，但是搭配在一起，非常不协调，虽然当个来讲都是业界比较好的，但是拼凑到一起，很难看了，可能你自己看着也觉得恶心一些，我也觉得实在是拿不出手，不过也是没办法，没有专业的页面设计人员协助，也是一时找不到合适的人分包这部分工作，或者外包给合适的单位来处理。

这个就像有个比较有名的比喻，把所有美女的脸上的优点都集中起来，组合一个新美女出来，很可能就是恶魔，同样还有一个俗话一样，我们心目中想象的是天仙美妹，但是我们通过自己的两手亲自画出来就是丑陋的恶魔，不是这方面的专业人才，很容易搞不好整体的效果，局部的效果谁都可以搞好，但是整体的效果，的确是需要有水平才可以。

其实以前也参与做过一些设计不错的项目，但是这些项目要么现在跑不起来，要么丢的丢，要么当时没在乎，更本没保存过，这导致自己需要用时，又开始从头开始折磨，或者还有一个心理就是，我自己做绝对能比你的做得好，当时根本看不上眼，当轮到我真的需要自己做的时候，做出来的东西，真的丑陋得很，根本拿不出手，客户也不能满意。

后来想办法，又找专业做网站设计的朋友，做了一个大概花费了1000多元的设计费，大体效果是如下：

这个色调是足够好了，但是不够大气，几百个菜单也不好分布上去，只适合少量菜单的网站前台展示型功能，也让我很头痛，不是经常做后台管理的，他们的设计思想也不一样，有的设计出来的东西，是效果图，无法直接拿过来用，很让人头大的。

实在没办法，又想办法找了前台展示方面做得非常好的同行，大老远跑过去取经学习，把人家10来的积累给拿过来，用到了自己的项目里，感觉效果明显好了很多，效果图如下：

这个页面效果，非常适合大型内部管理类系统，可以很轻松的容得下几十个模块，几百个菜单，而且子菜单的现实方式，展现方式也非常友好，界面也简介一些，不容易看着很腻，或者色彩很艳丽，而且头部还可以折叠，可以节省很多屏幕空间，方便看更多的数据列表，用了这个展示效果后，客户也比较满意，再也不提对界面不满意的事情了，也解决了一个很闹心的事情，这些事情当然不能指望程序员都能搞定，他们根本没有美敢，也不关心整个项目的效果，自己的模块也做不过来，毕竟也不能给他们太多的压力。

折叠的效果如下：看起来也很简洁、很清爽。

刚开始为了赶进度，每个模块都做了一个菜单，后来感觉这些代码都是重复的，没必要有几十个菜单文件，又简化为2个菜单文件，就可以把这几百个菜单弄得好好的，也用了一些缓存功能，把用户的菜单都缓存起来，这样展示的效果就更快一些了，文件数量也少了很多，最起码编译的速度，编译后的可执行文件的大小也少了不少吧，把几十个文件干掉，最后只变成了2-3个文件，心里也很爽的。

当然菜单的管理、显示的先后顺序，菜单的移动、菜单的权限设置等是跟我自己的通用权限管理工具是集成在一起，菜单想怎么折腾就这么折腾，很方便，权限想怎么设置就怎么设置，普通开发人员也根本不用关心这些繁琐的事情，他们只要会用工