智能环境监控系统项目网站后台管理系统改版过程

    此项目一直是由我主要负责和跟进的，后台网站管理系统是由开发的同事很早就自行做了的，所以我主要是根据网站已有的现状进行的改版设计。第一眼看到程序员做的网站，内心还是有点崩溃的，因为整个页面风格给人的感觉真是一言难尽。

     网站原本的样子已经找不到图片了，之前做的时候也是习惯性的把东西做完就整理归档，所以也没保留改版前的截图。在网上随意找了张同类型的图来说明吧。改版前的网站大概就这种风格，左边菜单是这种树状型，顶部整了个项目名称和logo。

 

     从左边菜单点击进去后，内容页面全在一个页面上，大概是这种样子（红线标注）。

 

   

     页面风格、颜色什么的就不吐槽了，毕竟是没进行视觉设计的网页。然后我点击了所有能点击的页面，查看了整个网站的交互逻辑，发现菜单内容有些错乱，有些地方逻辑也走不通。然后跟开发的同事讨论了我发现的问题，确定了一些东西后才开始着手改版设计。

     按照我们部门的规定，做视觉设计是需要先做几版设计方案，然后从中挑选一个来进行全面设计。我进行了配色方案的制定，出了几版设计初稿，最终确定用以下配色方案的设计稿。

 

     主色的选择，主要是基于项目是关于智能环境检测的，蓝绿色能给人安定的感觉。强调色主要是为了突出某些重要内容，再配以合适的辅助色，就完成了基本的配色。

     对于页面布局，这个也是花了很多时间和精力的。我将网站页面逻辑梳理了一番，整理了框架图（刚翻看了文件夹，竟然被我删了，手贱啊），然后首先把一级菜单的页面做了，然后再把其余页面补充完。逻辑不通的地方首先是跟程序那边沟通，然后再做设计，避免做无用功。

     这一切还算顺利，最让我头痛的就是首页。本来是想学人家国外网站做dashboard，但是由于项目自身原因没做，就用的设备监控页面做首页，毕竟这是最重要的内容。由于这个页面所包含的内容很多，所以在布局方面是经过多次尝试（包括按钮的位置，三种显示方式的切换方式，颜色的搭配等等），还和同事开会讨论过，最后才修改完的，都不能说修改好，因为还是有些地方做得不够好。

 

 

     我已经忘记首页是修改过好多次了，但是我记得过程是痛苦的，心力交瘁。还好最后还是顺利完成了所有页面。

     最后就是标注、切图等等后续工作。

     至此，改版页面就算完成了。