方正方御防火墙UI设计 设计详解

项目背景: 方正信息安全技术有限公司凭借每年的快速增长,已经成为信息安全业内的一匹黑马。防火墙产品线是目前方正安全中实力最强的产品线,立项第三年就开始赢利,在IT领域里,技术和市场同时达到这两个指标,十分罕见。
软件部分由北京大学计算机所开发负责。在这次交给蓝蓝工作室之前,由一家广告公司设计过1.0版,不满意,这次升级为2.0版重新设计界面。
设计周期: 四个月。完成整个软件的几十个页面设计、制作,加程序后的界面调整、建议。
客户评价: 客户及其客户的普遍认同。,后续防虫墙项目界面设计工作。(附设计前后效果对照)
定稿主页: 见下图
方正方御防火墙UI设计方正方御防火墙登录页设计、图标设计 设计说明:

以图标的方式使软件界面更加友好,以色彩来标识重要内容,在视觉上给予更明确的引导。
图片使用上考虑到系统负载,争取使用最小的图片单位重复利用,营造精致丰富的视觉内容。
右面内容可根据实际,增减。

第一个银色方案,简约精巧,有金属质感,比较时尚。以灰色为主色调,蓝色为辅助色,重要部分用彩色,突出主题更明确。
第二个蓝色方案,结构与银色方案相同,以蓝色为主体,与方正其它软件色调比较一致,比较传统。
第三个绿色方案,以绿色为主体,绿色代表和平,安定,在形式上比较特别,更像一个桌面。
(目前,银色和绿色方案,在我搜集到的相同安全产品中,还是比较特别的,银色的没有发现有类似产品,绿色的发现一家,大约刚推广,且形式色调都不同。
联想用的是蓝色,maAcfee用红色,蓝色,瑞星是淡蓝,中灰加桔红,norton用了正红、正绿、正黄,等等,其它安全产品以蓝色据多。)

第一次提案的另两个设计:

方正方御防火墙UI设计提案 工作流程略述:

开发先用原型软件设计所有页面原型文件,保证了项目的进度和一致性。


首页选中第一稿提案,但细节反复推敲非常认真。比如左边导航条等,以客户意见反复修改几十次,客户方十数人意见不能统一,一个月后,最终以设计者综合意见、另提案定稿。

开发规范: 《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

案例解析

ImageInfo 遥感处理软件 设计一览

CASM ImageInfo系统是在国家高技术研究发展计划(863计划)-遥感数据处理平台与应用(2002AA133010)项目支持下,由中国测绘科学研究院研制开发的一套具有我国自主知识产权的定量化智能化遥感数据处理软件。蓝蓝设计为其设计logo、宣传页、产品手册、包装设计、网站。

设计周期:二年。

设计观点

读李永诠设计录有感

如果创作是以“潜意识”之表层思考作为概念是十分危险的。它有如露出水面之冰山,可见及垂手可得,但也只属冰山一角。深度及独特的概念是要往下追寻的。露出之冰峰,虽然容易觅得,自己的作品从其中认识及肯定自己的水准.....

设计每日一贴

年底回顾总结!聊聊扁平化风潮的起与思


在设计领域没有一成不变的规范。看到各位设计师如此热忱地投入极简化用户界面的设计令人欢欣鼓舞。但是,探索扁平化设计是否就意味着绝不使用渐变和阴影?当然不是。事实上,我近期看到的几个很有意思的作品一方面以巧妙的方式呈现出了内容,另一方面也保证了交互的直观易懂,从而实现了扁平化和尺寸直接的平衡。
        在这个互联互通、信息丰裕、功能丰富的数字时代,最简化设计广泛的复兴让人眼前一亮。这自然不会是无所不能的解决方案(没有任何一种风格能做到无所不能),但只要经过深思熟虑和恰当的应用,其能够实现既好用,有舒适的数字体验。


扫一扫,关注蓝蓝设计
Copy right 2007-2018 北京兰亭妙微科技有限公司版权所有 软件界面设计,UI设计公司-北京蓝蓝设计服务热线:400-608-6026 邮箱:weibaobei@163.com