NokiaOEMFirewallWebUI设计规范.doc

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