Nokia OEM Firewall WebUI设计规范.docx
《Nokia OEM Firewall WebUI设计规范.docx》由会员分享，可在线阅读，更多相关《Nokia OEM Firewall WebUI设计规范.docx（12页珍藏版）》请在冰豆网上搜索。
NokiaOEMFirewallWebUI设计规范
NokiaOEMFirewallWebUI
1．整体原则3
1．1整体原则3
2．页面区域划分3
2．1界面标题区3
2．2菜单区4
2．3配置区4
2．3．1标题区5
2．3．2内容区5
2．3．3应用框架区6
3．排版7
4．标签7
5．输入域8
5．1输入框8
5．1．1文本输入框8
5．1．2IPv4地址输入框9
5．1．2日期和时间输入框9
5．2复选按钮和单选按钮10
5．3下拉框12
5．4多选框12
5．5组合框13
5．6编组原则13
5．8内容布局13
5．9超链接13
6．按钮13
7．表13
8．操作方式15
8．1添加15
8．2编辑15
8．3删除15
8．4上载15
8．5下载15
8．6筛选15
8．7操作顺序15
8．8离开页面15
9．复杂界面的处理方式16
10．配置错误检查16
1．整体原则
1．1整体原则
✧布局简单整齐，配置内容部分保持左对齐，复杂配置的内容尽量分类，放到Frame框中显示；
✧用户操作方便，重要的和必须的配置项放到前面，同等重要的前提下，一般考虑由大到小，由外到内，使逻辑关系清晰；
✧界面上的术语是标准的和通用的，提示和说明信息言简意赅，末尾用句号；
✧界面的整体配置和操作风格统一，比如添加、编辑方式等；
✧页面中尽量避免出现滚动条；
✧页面颜色，以灰白颜色为主；
✧Apply按钮操作可以应用页面中的多项配置；
✧页面要求在不同分辨率下都能够满屏显示。
2．页面区域划分
2．1界面标题区
标题区从左到右包含管理器名称、主机名、系统当前保存状态、退出链接、公司logo。
2．2菜单区
✧菜单为树状结构；
✧菜单节点的打开和关闭在结点处用两种图标切换；
✧同级菜单节点可以同时为打开状态；
✧菜单的选中状态为字体变为粗体；
✧点击的菜单如果没有对应配置页，则只打开或关闭节点，不做页面刷新；
✧支持菜单的全部展开和全部关闭。
2．3配置区
配置区分为三部分：
标题区、内容区、应用框架区。
2．3．1标题区
内容区显示的内容从左到右依次为标题名称、系统时间及时区、帮助按钮。
✧标题名称：
将打开的功能页面在菜单中的位置体现在标题区，把上一级菜单和本页的菜单名称用“>”隔开，作为本页面的标题。
标题距离左边的分隔栏距离为15pt，距离上面的分隔栏为15pt。
标题区的名称要与菜单名称对应相同。
例如MIP配置页的标题为：
NAT>MIP
✧时间和时区：
显示格式如下：
ThuJul510:
11:
442007CST，距离帮助按钮40pt，距离上面的分隔栏为15pt；
✧帮助按钮：
显示在页面的最右面，距离界面的右边界线为35pt，距离上面的分隔栏为8pt。
点击帮助按钮弹出该页的帮助信息。
2．3．2内容区
内容区可以划分多个配置模块，使界面整齐，并能表现清晰的逻辑关系。
可以用Frame框和横线作为分隔，需要遵循以下原则：
✧如果配置模块内容的形式比较单一，比如都是输入框、下列框和少数的几个单选复选按钮，可用采用Frame框分隔配置模块；
✧如果配置模块中的内容形式繁多，包含列表、下载文件、输入框等，可以考虑用横线分隔；
✧采用哪种形式分隔，还要考虑页面的整体风格，页面中不能同时出现两种分隔形式；
✧分隔的配置模块的Frame上或横线的开通要有明确的名称信息；
包含简单配置内容的界面，不用分隔。
内容区中尽量增加说明信息。
2．3．3应用框架区
✧这个区域包含三个功能按钮：
ResetApplySave。
●这个区域是固定不能被移动的有些情况下（没有功能配置的页面）这个区域是不需要的，按钮将都是不可用状态的。
●用户进入页面时，应用框架的初始状态为：
Reset和Apply按钮都为不可用状态，Save按钮为可用状态。
●当用户对页面配置修改后，Reset和Apply按钮变为可用状态。
●当用户执行Reset操作后，界面回到初始状态。
✧用户失去配置锁状态会在这个区域的右侧显示。
3．排版
颜色
位置
颜色
左侧菜单背景颜色
浅蓝＃E2E3F7
树状菜单内容字的颜色
深蓝色＃01008C
右侧内容的背景颜色
浅灰色＃F5F5F5
右侧内容标题和名称的颜色
深蓝色＃01008C
右侧内容设置内容的颜色
黑色＃020202
超级连接的颜色
蓝色＃0200EC
按钮上字的颜色（可用状态）
黑色＃020202
按钮上字的颜色（不可用状态）
灰色＃ACA996
字体：
位置
Size
FontStyle
标题
18pt
Bold
表格的字段
12pt
Bold
主题标签
标签
。
。
。
。
字体大小可以根据工具设置调节。
4．标签
✧标签使用的原则
●文本输入框的前面必须有标签说明输入的内容，并且标签内容末尾是冒号；
●表的上面有标签说明表的用途，标签位于表的左上角；
●组合框的左上角要有标签，说明分组的功能，标签位于组合框的左上角；
●每个复选按钮后要有标签说明此复选项的含义，标签位于复选按钮的后面；多个复选按钮的前面也要有标签说明复选的目的；
●每个单选按钮后也要有标签说明此单选按钮的含义，标签位于单选按钮的后面，多个单选按钮前也要有标签说明单选的目的；
●在显示数据的信息前面有标签说明显示的内容的含义；
●标签作为数据显示；
●配置页面中出现的按钮要有标签说明按钮的作用；
●在需要隔离某些配置分组时，也可以选择标签说明，即标题标签。
✧标签的格式
标签多为单词的组合，如果是短语，则每个单词（介词和连词除外）的首字母大写，当某一介词已经和某一动词不可分割时，介词也要大写；如果是句子，句子的首字母大写，句子中的专用名称大写。
标签的字体格式见排版中的说明。
5．输入域
5．1输入框
5．1．1文本输入框
文本输入框，一般情况下和标签绑定使用，可以输入各种类型的字符串。
如果输入是必填项，则输入框后面加红星号。
分为两种形式，一种是信息量较少的文本输入框，一般用于输入名称、口令、数值设置等信息，标签和输入框为左右布局；
另外一种是数据量大些的文本输入框，一般是输入备注或说明信息，标签和输入框。
一般为上下布局。
5．1．2IPv4地址输入框
IPv4地址输入框是一种特殊的文本输入框，该输入框只能输入数字和点，并可以将用户输入的不带点分的数字自动转换为IPv4地址的格式。
用于IPv4地址的输入。
5．1．2日期和时间输入框
✧日期的输入框是一种特殊的文本输入框，日期输入框只能输入数字和横线，可以将用户输入的数字组合自动转换为日期格式，一般日期输入框后都会跟有日期选择控件，在控件中选择后，会自动出现在日期输入框中。
✧时间输入框是文本框，必须小时、分、秒分别设置，且输入框后标明范围，只允许输入数字。
5．2复选按钮和单选按钮
✧在什么情况下使用
●一个复选按钮按钮代替两个单选框传boolean值，就象yes/noon/off，尽量要用单选按钮代替复选按钮；
●在两个选择含糊不清的时候不要用单个的复选按钮，用成对的单选按钮；
●在用户能够在一个选择组内选择很多选择的时候用连续的复选按钮；
●用户在一个选择组内仅仅选择一个的时候用单选按钮；
✧复选按钮和单选按钮的布局
●组成的复选按钮和单选框既要有组标签又要有单个独立的控制标签；
●单独的复选按钮一般只有组标签名，控制标签通常省略；
●复选按钮和单按钮的排列最好垂直成直线，但如果时成对的单选框，或者空间有限，也可以水平布局。
●是否放到组合框中，可以根据界面的整体配置。
5．3下拉框
下拉框用于从多个选项中选择一个或不选的情况，这种应用一般不能用其他形式代替，通常情况下，我们会使用复选按钮和单选按钮，但如果采用用复选按钮组合可以选择多个，但不能限制只选择一个，单选按钮只能选择一个，不能不选，在这种情况下使用下拉框是最好的解决方式。
5．4多选框
多选框多数应用于需要选择多个，且备选列表中的项比较多，难以用复选框进行选择，且备选项不确定的情况下。
多选框的操作原则如下：
●左边为备选列表，右边为已选列表；
●用户可以一次选择一个或多个进行左右移动；
●数量超过限定大小会出现纵向滚动条；
●左右两个表格中的数据是不重复的，如一个数据项被用户从左边列表移动到右边列表，则这个数据将会在左边列表清除。
5．5组合框
5．6编组原则
5．8内容布局
5．9超链接
6．按钮
7．表
✧表的样式：
有边框线，灰白相间行，行与行之间没有分隔线，列与列之间有分隔线。
✧表的内容：
包含标题行和内容两部分。
⏹标题行中的标题字体见排版中的字体说明，居中显示，标题内容不换行显示，标题定义要能准确表达下面对应的内容。
⏹表中的内容部分的字体见排版中的字体说明，左对齐显示，内容中包含几个相同属性的内容时，用逗号隔开；比较复杂的内容在同一个表格中分行显示。
✧其他限制：
⏹表的上面要有表名，说明表的作用，位于表的左上部；
⏹如果表中的条数不固定，且可能显示很多条，则在表的中间上面要显示总数；
⏹如果表作为页面的主体且表中的内容不固定，则表的大小随内容的变化而变化；
⏹如果表作为页面配置的一部分位置和显示空间受限，则要固定表的大小，当内容超出显示范围时，使用滚动条。
8．操作方式
8．1添加
8．2编辑
8．3删除
8．4上载
8．5下载
8．6筛选
8．7操作顺序
8．8离开页面
9．复杂界面的处理方式
10．配置错误检查
升级会员 