UI设计,软件UI界面设计,软件界面设计,蓝蓝设计

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

项目背景：	方正信息安全技术有限公司凭借每年的快速增长，已经成为信息安全业内的一匹黑马。防火墙产品线是目前方正安全中实力最强的产品线，立项第三年就开始赢利，在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、瑞星、赛门铁客等十几家相关软件界面比较分析，此处略。