项目背景: | 方正信息安全技术有限公司凭借每年的快速增长,已经成为信息安全业内的一匹黑马。防火墙产品线是目前方正安全中实力最强的产品线,立项第三年就开始赢利,在IT领域里,技术和市场同时达到这两个指标,十分罕见。 软件部分由北京大学计算机所开发负责。在这次交给蓝蓝工作室之前,由一家广告公司设计过1.0版,不满意,这次升级为2.0版重新设计界面。 |
设计周期: | 四个月。完成整个软件的几十个页面设计、制作,加程序后的界面调整、建议。 |
客户评价: | 客户及其客户的普遍认同。,后续防虫墙项目界面设计工作。(附设计前后效果对照) |
定稿主页: | 见下图 |
以图标的方式使软件界面更加友好,以色彩来标识重要内容,在视觉上给予更明确的引导。
图片使用上考虑到系统负载,争取使用最小的图片单位重复利用,营造精致丰富的视觉内容。
右面内容可根据实际,增减。
第一个银色方案,简约精巧,有金属质感,比较时尚。以灰色为主色调,蓝色为辅助色,重要部分用彩色,突出主题更明确。
第二个蓝色方案,结构与银色方案相同,以蓝色为主体,与方正其它软件色调比较一致,比较传统。
第三个绿色方案,以绿色为主体,绿色代表和平,安定,在形式上比较特别,更像一个桌面。
(目前,银色和绿色方案,在我搜集到的相同安全产品中,还是比较特别的,银色的没有发现有类似产品,绿色的发现一家,大约刚推广,且形式色调都不同。
联想用的是蓝色,maAcfee用红色,蓝色,瑞星是淡蓝,中灰加桔红,norton用了正红、正绿、正黄,等等,其它安全产品以蓝色据多。)
工作流程略述:
开发先用原型软件设计所有页面原型文件,保证了项目的进度和一致性。
首页选中第一稿提案,但细节反复推敲非常认真。比如左边导航条等,以客户意见反复修改几十次,客户方十数人意见不能统一,一个月后,最终以设计者综合意见、另提案定稿。
开发规范: 《FG39版本开发webui清单》:三层目录结构、目录名称、网页名称;
《FG39版本开发需求规格说明书(讨论稿)》:网页说明;
“webui初版”目录:网页明细。
其中,提供的网页名称及导航目录冲突处,均以《FG39版本开发webui清单》为准
确定的规范:
1. 页面名称:全部小写,按模块表意(模块目录作为文件名前缀,如《FG39版本开发webui清单》中示例)。
2. 控件命名:主要控件名称命名要表意(form名、form内控件名称、JavaScript程序引用的控件名称)。同页面的各个元素均不要重名。全部小写加连字符、表意。如:obj_name、time_type等。
3. 内嵌程序:应该提供能力范围内的所有内嵌程序(包括复制防虫墙的已有脚本),并支持主流浏览器中的兼容性(IE、FireFox、Opera)。JavaScript格式:为了自动化测试程序能够识别,应该遵循以下格式:
共十条,此处略。
3)javascript程序中使用[]作为下标运算,而不要使用()。如:document.forms["FormName"],document.getElementsByName("inputName")[1]。
4)使用HTML的ID对象时,不要将之作为document的下属对象变量名直接使用,否则Mozzila Firefox均不认。应该使用getElementById("idName")代替直接引用id对象。
更多的兼容性问题可以参看文档《Javascript的IE和Firefox兼容性汇编》。
4. 页面的titile定义成通用模块,便于日后改动。
5. 所有路径均使用绝对路径。
6. 图片会有频繁改动或更新,所以要事先定义好所有的图片名称,日后改动只需要替换文件,不必重新改名。
7. 每个页面都可以通过点击所在菜单或tab进行自刷新,即添加自身的超链接。(防虫墙的自刷新是我们自己手动改的,由于没有事先定义css,所以引起tab页面文字颜色的问题。)
8. 设计合适的三级菜单实现方法,不要沿用防虫墙的导航文件方式,否则该文件非常难以控制和维护。
可以参考fortigate的导航栏实现。
9. 所有页面的显示和样式均要兼容各种主流浏览器(IE、FireFox、Opera)。
10. 操作行为统一,既要支持鼠标行为又要支持键盘行为。如针对提交按钮,回车和单击的行为一致;针对select下拉选单,方向键选择和单击的行为一致;针对checkbox,space选择和单击的行为一致;等等。
11. 图标问题:已有操作图标可沿用防虫墙,如对象添加、删除、修改等;防虫墙没有的图标则需要重新设计。
收集了国内外联想、McAfee/quickcleen、瑞星、赛门铁客等十几家相关软件界面比较分析,此处略。
400-608-6026