Nokia OEM Firewall WebUI设计规范.docx

1、Nokia OEM Firewall WebUI设计规范Nokia OEM Firewall WebUI1整体原则 311整体原则 32页面区域划分 321界面标题区 322菜单区 423配置区 4231标题区 5232内容区 5233应用框架区 63排版 74标签 75输入域 851输入框 8511文本输入框 8512 IPv4地址输入框 9512日期和时间输入框 952复选按钮和单选按钮 1053下拉框 1254 多选框 1255 组合框 1356 编组原则 1358内容布局 1359 超链接 136按钮 137表 138操作方式 1581 添加 1582 编辑 1583 删除 1584

2、上载 1585 下载 1586筛选 1587操作顺序 1588离开页面 159复杂界面的处理方式 1610配置错误检查 161整体原则11整体原则 布局简单整齐，配置内容部分保持左对齐，复杂配置的内容尽量分类，放到Frame框中显示； 用户操作方便，重要的和必须的配置项放到前面，同等重要的前提下，一般考虑由大到小，由外到内，使逻辑关系清晰； 界面上的术语是标准的和通用的，提示和说明信息言简意赅，末尾用句号； 界面的整体配置和操作风格统一，比如添加、编辑方式等； 页面中尽量避免出现滚动条； 页面颜色，以灰白颜色为主； Apply按钮操作可以应用页面中的多项配置； 页面要求在不同分辨率下都能够满屏

3、显示。2页面区域划分21界面标题区 标题区从左到右包含管理器名称、主机名、系统当前保存状态、退出链接、公司logo。 22菜单区 菜单为树状结构； 菜单节点的打开和关闭在结点处用两种图标切换； 同级菜单节点可以同时为打开状态； 菜单的选中状态为字体变为粗体； 点击的菜单如果没有对应配置页，则只打开或关闭节点，不做页面刷新； 支持菜单的全部展开和全部关闭。23配置区配置区分为三部分：标题区、内容区、应用框架区。231标题区 内容区显示的内容从左到右依次为标题名称、系统时间及时区、帮助按钮。 标题名称：将打开的功能页面在菜单中的位置体现在标题区，把上一级菜单和本页的菜单名称用“”隔开，作为本页面的

4、标题。标题距离左边的分隔栏距离为15pt，距离上面的分隔栏为15pt。标题区的名称要与菜单名称对应相同。 例如MIP配置页的标题为： NAT MIP 时间和时区：显示格式如下：Thu Jul 5 10:11:44 2007 CST，距离帮助按钮40pt，距离上面的分隔栏为15pt； 帮助按钮：显示在页面的最右面，距离界面的右边界线为35pt，距离上面的分隔栏为8pt。点击帮助按钮弹出该页的帮助信息。 232内容区 内容区可以划分多个配置模块，使界面整齐，并能表现清晰的逻辑关系。可以用Frame框和横线作为分隔，需要遵循以下原则： 如果配置模块内容的形式比较单一，比如都是输入框、下列框和少数的几

5、个单选复选按钮，可用采用Frame框分隔配置模块； 如果配置模块中的内容形式繁多，包含列表、下载文件、输入框等，可以考虑用横线分隔； 采用哪种形式分隔，还要考虑页面的整体风格，页面中不能同时出现两种分隔形式； 分隔的配置模块的Frame上或横线的开通要有明确的名称信息； 包含简单配置内容的界面，不用分隔。 内容区中尽量增加说明信息。233应用框架区 这个区域包含三个功能按钮：Reset Apply Save 。 这个区域是固定不能被移动的有些情况下（没有功能配置的页面）这个区域是不需要的，按钮将都是不可用状态的。 用户进入页面时，应用框架的初始状态为：Reset和Apply按钮都为不可用状态，

6、Save按钮为可用状态。 当用户对页面配置修改后，Reset和Apply按钮变为可用状态。 当用户执行Reset操作后，界面回到初始状态。 用户失去配置锁状态会在这个区域的右侧显示。3排版颜色位置颜色左侧菜单背景颜色浅蓝 E2E3F7 树状菜单内容字的颜色深蓝色 01008C 右侧内容的背景颜色浅灰色 F5F5F5 右侧内容标题和名称的颜色深蓝色 01008C 右侧内容设置内容的颜色黑色 020202 超级连接的颜色蓝色 0200EC 按钮上字的颜色（可用状态）黑色 020202按钮上字的颜色（不可用状态）灰色 ACA996字体：位置SizeFont Style标题18ptBold表格的字段1

7、2ptBold主题标签标签。字体大小可以根据工具设置调节。4标签 标签使用的原则 文本输入框的前面必须有标签说明输入的内容，并且标签内容末尾是冒号； 表的上面有标签说明表的用途，标签位于表的左上角； 组合框的左上角要有标签，说明分组的功能，标签位于组合框的左上角； 每个复选按钮后要有标签说明此复选项的含义，标签位于复选按钮的后面；多个复选按钮的前面也要有标签说明复选的目的； 每个单选按钮后也要有标签说明此单选按钮的含义，标签位于单选按钮的后面，多个单选按钮前也要有标签说明单选的目的； 在显示数据的信息前面有标签说明显示的内容的含义； 标签作为数据显示； 配置页面中出现的按钮要有标签说明按钮的作

8、用； 在需要隔离某些配置分组时，也可以选择标签说明，即标题标签。 标签的格式 标签多为单词的组合，如果是短语，则每个单词（介词和连词除外）的首字母大写，当某一介词已经和某一动词不可分割时，介词也要大写；如果是句子，句子的首字母大写，句子中的专用名称大写。 标签的字体格式见排版中的说明。 5输入域51输入框511文本输入框 文本输入框，一般情况下和标签绑定使用，可以输入各种类型的字符串。如果输入是必填项，则输入框后面加红星号。 分为两种形式，一种是信息量较少的文本输入框，一般用于输入名称、口令、数值设置等信息，标签和输入框为左右布局； 另外一种是数据量大些的文本输入框，一般是输入备注或说明信息，

9、标签和输入框。一般为上下布局。512 IPv4地址输入框 IPv4地址输入框是一种特殊的文本输入框，该输入框只能输入数字和点，并可以将用户输入的不带点分的数字自动转换为IPv4地址的格式。用于IPv4地址的输入。 512日期和时间输入框 日期的输入框是一种特殊的文本输入框，日期输入框只能输入数字和横线，可以将用户输入的数字组合自动转换为日期格式，一般日期输入框后都会跟有日期选择控件，在控件中选择后，会自动出现在日期输入框中。 时间输入框是文本框，必须小时、分、秒分别设置，且输入框后标明范围，只允许输入数字。 52复选按钮和单选按钮 在什么情况下使用 一个复选按钮按钮代替两个单选框传boolea

10、n值，就象yes/no on/off，尽量要用单选按钮代替复选按钮； 在两个选择含糊不清的时候不要用单个的复选按钮，用成对的单选按钮； 在用户能够在一个选择组内选择很多选择的时候用连续的复选按钮； 用户在一个选择组内仅仅选择一个的时候用单选按钮； 复选按钮和单选按钮的布局 组成的复选按钮和单选框既要有组标签又要有单个独立的控制标签； 单独的复选按钮一般只有组标签名，控制标签通常省略； 复选按钮和单按钮的排列最好垂直成直线，但如果时成对的单选框，或者空间有限，也可以水平布局。 是否放到组合框中，可以根据界面的整体配置。53下拉框 下拉框用于从多个选项中选择一个或不选的情况，这种应用一般不能用其他

11、形式代替，通常情况下，我们会使用复选按钮和单选按钮，但如果采用用复选按钮组合可以选择多个，但不能限制只选择一个，单选按钮只能选择一个，不能不选，在这种情况下使用下拉框是最好的解决方式。54 多选框 多选框多数应用于需要选择多个，且备选列表中的项比较多，难以用复选框进行选择，且备选项不确定的情况下。 多选框的操作原则如下： 左边为备选列表，右边为已选列表； 用户可以一次选择一个或多个进行左右移动； 数量超过限定大小会出现纵向滚动条； 左右两个表格中的数据是不重复的，如一个数据项被用户从左边列表移动到右边列表，则这个数据将会在左边列表清除。55 组合框56 编组原则58内容布局59 超链接6按钮

12、7表 表的样式：有边框线，灰白相间行，行与行之间没有分隔线，列与列之间有分隔线。 表的内容：包含标题行和内容两部分。 标题行中的标题字体见排版中的字体说明，居中显示，标题内容不换行显示，标题定义要能准确表达下面对应的内容。 表中的内容部分的字体见排版中的字体说明，左对齐显示，内容中包含几个相同属性的内容时，用逗号隔开；比较复杂的内容在同一个表格中分行显示。 其他限制： 表的上面要有表名，说明表的作用，位于表的左上部； 如果表中的条数不固定，且可能显示很多条，则在表的中间上面要显示总数； 如果表作为页面的主体且表中的内容不固定，则表的大小随内容的变化而变化； 如果表作为页面配置的一部分位置和显示空间受限，则要固定表的大小，当内容超出显示范围时，使用滚动条。8操作方式81 添加82 编辑83 删除84 上载85 下载86筛选87操作顺序88离开页面9复杂界面的处理方式10配置错误检查