5系统设计-用户界面规范(4).ppt

《5系统设计-用户界面规范(4).ppt》由会员分享，可在线阅读，更多相关《5系统设计-用户界面规范(4).ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、用户界面及输出设计-用户界面规范用户界面规范 （B/SB/S细则）细则）用户界面设计用户界面设计用户界面简单、美观和高效是很重要的。根据经验，在设计用户界面时应该遵循以下方面的指导方针。n n关注基本目标。n n为用户提供反馈。n n友好的错误提示。n n设计完整的对话过程。输入设计n n1.1.输入的正确性控制设计输入的正确性控制设计输入的正确性控制设计输入的正确性控制设计n n2.2.输入的方便性设计输入的方便性设计输入的方便性设计输入的方便性设计方便性设计的大多数原则是基于界面设计的基方便性设计的大多数原则是基于界面设计的基本准则的，其目标是使用户能方便、容易地完本准则的，其目标是使用户

2、能方便、容易地完成输入工作。成输入工作。输出设计n提供输出信息最普遍的方法有两种：提供输出信息最普遍的方法有两种：一种是以打印文字的方式提供信息一种是以图和图表的形式提供信息。n在设计输出时，应该考虑下面的问题。在设计输出时，应该考虑下面的问题。输出的目的是什么？输出的目的是什么？谁需要这些信息？谁需要这些信息？需要包含什么信息？需要包含什么信息？输出是打印、在屏幕显示还是两者都要？输出是打印、在屏幕显示还是两者都要？何时需要？何时需要？存在安全和机密问题吗？存在安全和机密问题吗？输出设计n n1.打印报表输出打印报表输出1)1)明细报表明细报表2)2)汇总报表汇总报表3)3)异常报表异常报表

3、4)4)决策报表决策报表n n2.屏幕报表输出屏幕报表输出n n3.图形和多媒体输出图形和多媒体输出n n4.报表设计应该注重的原则报表设计应该注重的原则界面设计n n登录登录 公司标识、系统名称、登录信息、版权信息、语言选择公司标识、系统名称、登录信息、版权信息、语言选择n n主界面主界面 分区、分类分区、分类n n跳窗跳窗 有奖反馈、版本发布、重要通知有奖反馈、版本发布、重要通知n n版权信息版权信息n n关于关于n n表单表单 查询、主从、折叠、说明、访问日志、树控件表单查询、主从、折叠、说明、访问日志、树控件表单n n帮助帮助登录n n登录页面的登录页面的IEIE标题设为标题设为“系统

4、中文全称系统中文全称”。n n在在“登录登录”对话框上需要显示的信息包括：系统名称、公对话框上需要显示的信息包括：系统名称、公司标识、登录信息、语言选择司标识、登录信息、语言选择(根据系统需要选择根据系统需要选择)、版权信、版权信息，登录外框宽息，登录外框宽510px,510px,高高315px315px。说明：系统登录界面各组成部分如下：说明：系统登录界面各组成部分如下：系统名称：（系统简称系统中文全称系统英文全称版本号）公司标识版权信息 语言选择 登录信息用户名、密码、数字证书出错提示登录说明提示说明用户名密 码数字证书密码登录n n有数字证书用户登录：有数字证书用户登录：登录n n无数字

5、证书用户登录：无数字证书用户登录：登录-公司标识公司标识n n公司标识应该统一，并放置在登录界面的右上端位置公司标识应该统一，并放置在登录界面的右上端位置(logo(logo标识标识 宽宽56px,56px,高高19px)19px)。登录 系统名称系统名称n n系统名称包括：系统简称、系统中文全称、系统英文全称、系统名称包括：系统简称、系统中文全称、系统英文全称、系统版本号（只能为系统版本号（只能为2 2位数）位数）,这几部分的相对位置参见下这几部分的相对位置参见下图示例图示例 (英文简称用英文简称用Arial Arial 斜体，大小为斜体，大小为36pt,36pt,中文全称用微软简中文全称用

6、微软简标宋，大小为标宋，大小为15pt15pt，英文全称用英文全称用ArialArial，大小为大小为12pt)12pt)。登录 登录信息登录信息n n登录信息包括（登录信息包括（1 1）信息输入（）信息输入（2 2）登录说明（）登录说明（3 3）出错提示。）出错提示。信息输入信息输入 n n用户信息包括用户名、密码、数字证书密码信息用户信息包括用户名、密码、数字证书密码信息 “用户名用户名”、“密密 码码”两端对齐，用户名、密码、数两端对齐，用户名、密码、数字证书密码输入框宽度统一为字证书密码输入框宽度统一为110px110px，（，（输入框颜色输入框颜色和界面保持协调和界面保持协调 ）登录

7、 登录信息登录信息n n在在“登登录录”界面上用界面上用户户名的名的输输入内容要有入内容要有记忆记忆功能，而密功能，而密码码不能有不能有记忆记忆功能。如果用功能。如果用户户登登录时录时CookieCookie失效或第一次登失效或第一次登录录，光，光标标要默要默认认停留在用停留在用户户名框内，当名框内，当输输入用入用户户名后，按名后，按TabTab键键光光标应标应自自动动落入落入密密码码框内。否框内。否则则用用户户名框内要名框内要显显示最近一次登示最近一次登录录的用的用户户名，光名，光标标直接停留在密直接停留在密码输码输入框内，当入框内，当输输入密入密码码再按再按EnterEnter键时键时要要

8、执执行登行登录录验证过验证过程。程。n n系系统统登登录录后，后，统统一一显显示版本信息示版本信息发发布布页页（如有（如有“与我有关与我有关”则为则为此项此项）。）。登录 登录信息登录信息登陆说明n n包括登录提示、包括登录提示、ITIT热线（内容参见示例）热线（内容参见示例）（1 1）除系统名称、版权信息外，所有元素（公司标识、）除系统名称、版权信息外，所有元素（公司标识、输入框、登录按钮、登录提示、输入框、登录按钮、登录提示、ITIT热线、语言选择）热线、语言选择）靠右对齐，距登录外框边缘靠右对齐，距登录外框边缘8px8px）超链接处必须有下划线显示超链接处必须有下划线显示(语言选择除外语

9、言选择除外 )，链接字，链接字体颜色和其他字体一致。体颜色和其他字体一致。登录 登录信息登录信息出错提示出错提示n n登录出错提示必须落在登录页面上，不得以登录出错提示必须落在登录页面上，不得以跳窗形式出现跳窗形式出现 用户名输入出错提示用户名输入出错提示:用户名或密码错误，用户名或密码错误，请重新输入。请重新输入。数字证书输入出错提示：数字证书输入出错提示：证书密码错误，证书密码错误，请重新输入。请重新输入。外部、临时用户以及其他特殊用户、特殊外部、临时用户以及其他特殊用户、特殊情况请项目根据特殊需求自行定制情况请项目根据特殊需求自行定制 登录 登录信息登录信息出错提示放置位置 登录 版权信

10、息、语言选择版权信息、语言选择版权信息版权信息 n n格式为格式为 版权年限版权年限 ZTE Corporation.ZTE Corporation.版权所有。版权所有。例如：例如：2004 ZTE Corporation.2004 ZTE Corporation.版权所有。版权所有。语言选择语言选择 语言选择：根据产品需求自行选择。语言选择：根据产品需求自行选择。主界面-分区分区 n n主界面包含菜单区、导航区、操作区主界面包含菜单区、导航区、操作区3 3个部分。个部分。菜单区导航区操作区主界面-分区分区 n n每个区所包含的内容如下图：每个区所包含的内容如下图：一级菜单二级菜单辅助功能表单

11、系统名称用户信息功能按钮快捷图标组织标识公司标识主界面菜单区菜单区 n n菜单区包括（菜单区包括（1 1）公司标识、（）公司标识、（2 2）系统名称、（）系统名称、（3 3）一级菜）一级菜单、（单、（4 4）辅助功能、（）辅助功能、（5 5）用户信息。）用户信息。如图所示：如图所示：主界面菜单区菜单区 n n系统名称系统名称 系统名称：包括系统英文简称（大小：系统名称：包括系统英文简称（大小：33px,33px,字体：字体：ArialArial）、）、系统中文全称（大小：系统中文全称（大小：16px,16px,字体：字体：ArialArial）、）、系统英文全称（大小：系统英文全称（大小：10

12、px,10px,字体：字体：ArialArial）、）、系统版本系统版本号号(版本号只能为版本号只能为2 2位数位数 )四部分内容。（标题图片高度四部分内容。（标题图片高度不超过不超过41px41px）。）。l l公司标识公司标识公司标识公司标识 正确使用统一的正确使用统一的正确使用统一的正确使用统一的公司标识公司标识公司标识公司标识，并放置在主界面顶部的左端位置。，并放置在主界面顶部的左端位置。，并放置在主界面顶部的左端位置。，并放置在主界面顶部的左端位置。公司公司公司公司标识标识标识标识要符合公司要符合公司要符合公司要符合公司CICICICI标准标准标准标准(宽：宽：宽：宽：49px49p

13、x49px49px，高：高：高：高：17px)17px)17px)17px)。主界面菜单区菜单区 n n一级菜单一级菜单 用词：一级菜单只为功能描述，不能是其它。用词：一级菜单只为功能描述，不能是其它。菜单文字以菜单文字以4-64-6个为主，争取完全一样；名词个为主，争取完全一样；名词+动词结构动词结构一致，争取押韵；文字要标准、专业、简炼，不要太口一致，争取押韵；文字要标准、专业、简炼，不要太口语化，菜单之间用竖线隔开语化，菜单之间用竖线隔开,高度为高度为22px22px。一级菜单应有一级菜单应有“系统管理系统管理”项，如果有与当前用户有关项，如果有与当前用户有关的功能，应该增加的功能，应该

14、增加“与我有关与我有关”菜单，如果有菜单，如果有“我的工我的工作台作台”等类似菜单，则统一改为等类似菜单，则统一改为“与我有关与我有关”。在在“与我有关与我有关”菜单中增加菜单中增加“常用操作常用操作”子菜单，其中子菜单，其中的菜单项可由用户自定义。的菜单项可由用户自定义。n n辅助功能辅助功能 辅助功能包括：问题反馈、访问日志、版本信息、帮助、辅助功能包括：问题反馈、访问日志、版本信息、帮助、关于、注销，他们内容和顺序不能改变，关于、注销，他们内容和顺序不能改变，显显示模式示模式为为跳跳窗形式。窗形式。n n用户信息用户信息 方式：日期方式：日期+欢迎欢迎+用户名用户名(姓名姓名+工号工号)

15、例如：例如：20042004年年1111月月3030日日 欢迎欢迎 王方王方102563102563主界面导航区导航区 n n导航区包括（导航区包括（1 1）功能按钮、）功能按钮、（2 2）二级菜单二级菜单 如下图所示：主界面导航区导航区 n n二级菜单二级菜单 二级菜单分OUTLOOK式、树状结构二种n nOutlookOutlook式式 （1 1）2 2层层2 2级级菜单使用菜单使用OUTLOOKOUTLOOK式式（2 2）文字一律左对齐）文字一律左对齐 n nTreeTree式式（1 1）二二级级菜菜单为单为TreeTree时时，TreeTree的的结结构不构不应应超超过过3 3层层。（

16、2 2）显示具有层次关系的元素，从根节点到叶节点，可以）显示具有层次关系的元素，从根节点到叶节点，可以逐级展开和收缩。逐级展开和收缩。（3 3）树树中中每每一一级级节节点点都都包包含含图图标标和和文文本本，用用不不同同的的图图标标表表示节点的展开和收缩状态。示节点的展开和收缩状态。（4 4）同同层层次次的的节节点点图图标标相相同同，上上下下级级节节点点之之间间应应有有适适当当的的缩进，令层次关系更清晰。缩进，令层次关系更清晰。（5 5）底色为）底色为F5F5F5 F5F5F5 主界面操作区操作区 n n操作区包括：（操作区包括：（1 1）快捷图标（）快捷图标（2 2）组织标识（）组织标识（3

17、3）表单）表单 如下图所示：主界面操作区操作区 l l组织标识组织标识组织标识组织标识 对对对对具具具具有有有有多多多多组组组组织织织织的的的的系系系系统统统统，登登登登录录录录时时时时要要要要根根根根据据据据用用用用户户户户默默默默认认认认组组组组织织织织机机机机构构构构进进进进入入入入相相相相对对对对应应应应的的的的系系系系统统统统页页页页面面面面，如如如如需需需需访访访访问问问问其其其其他他他他组组组组织织织织机机机机构构构构数数数数据据据据，请请请请到到到到主主主主页页页页面面面面右右右右上上上上角角角角的的的的下下下下拉拉拉拉框框框框切切切切换换换换（如如如如下下下下图图图图所所所所

18、示示示示位位位位置置置置）。组组组组织织织织标标标标识识识识要要要要统统统统一从人事在一从人事在一从人事在一从人事在线线线线系系系系统读统读统读统读取。取。取。取。系系系系统统统统如如如如需需需需按按按按组组组组织织织织来来来来管管管管理理理理数数数数据据据据，可可可可用用用用组组组组织织织织标标标标识识识识切切切切换换换换不不不不同同同同的的的的组组组组织织织织场景；否则，只显示当前用户的组织标识信息。场景；否则，只显示当前用户的组织标识信息。场景；否则，只显示当前用户的组织标识信息。场景；否则，只显示当前用户的组织标识信息。主界面分类分类 n n 标准界面主要有两种类型：标准界面主要有两种

19、类型：OutLookOutLook式、式、TreeTree式式OutLook式 主界面分类分类 Tree Tree 式式 跳窗 跳跳窗窗是是指指用用户户成成功功登登录录应应用用系系统统后后立立即即弹弹出出的的信信息息提提示示窗窗口口，共共包包括括三三种种类类型型：有有奖奖反反馈馈、版版本本发发布布、重重要要通通知知。窗窗口口的的高高度度可可以以根根据据文文字字的的多多少少适适当当增增加加，窗窗口口的的外外观观、主主题题、宽宽度度(450px)(450px)、按按钮钮等等都都不不能能改改变变，窗窗口口的的标标题题命命名名为为-跳跳窗窗类类型型，正文内容必须包括当前发布时间。正文内容必须包括当前发

20、布时间。v有奖反馈 跳窗vv 版本发布版本发布 当当产产品品进进行行大大版版本本发发布布时时采采用用如如下下跳跳窗窗。窗窗口口的的主主题题、发发布布时时 间间、新新增增功功能能等等内内容容根根据据系系统的实际情况而定。统的实际情况而定。版本信息 n n当前版本号是大版本当前版本号是大版本时时，使用，使用VX.Y.0VX.Y.0（如（如V5.1.0V5.1.0）；）；当前版本号是当前版本号是小版本小版本时时，使用，使用VX.Y.ZVX.Y.Z（如（如V5.0.01V5.0.01）；）；当前版本号是当前版本号是紧紧急版本急版本时时，使用使用VX.Y.Z.vVX.Y.Z.v（如（如V5.0.01.a

21、V5.0.01.a）n n版本信息按版本信息按时间顺时间顺序序进进行倒排序行倒排序显显示，所有的版本更新（包括小示，所有的版本更新（包括小版本和版本和紧紧急版本）都要在版本信息中急版本）都要在版本信息中进进行行说说明。明。版本信息 n n版本信息标题：规范命名为：系统中文全称版本信息标题：规范命名为：系统中文全称 n n版本信息内容：内容包括每次发布的版本、发布时间、增版本信息内容：内容包括每次发布的版本、发布时间、增加功能、修改功能、修复缺陷，每一条信息必须以增加、加功能、修改功能、修复缺陷，每一条信息必须以增加、修改或修复开头。（第一次发版除外）修改或修复开头。（第一次发版除外）n n发布

22、时间按倒序排列发布时间按倒序排列 关于 n n“关于关于”页面的页面的IEIE标题设为标题设为：系：系统统中文全称，主体内容必中文全称，主体内容必须须包括包括系系统简统简介、系介、系统统主要功能描述两大主要功能描述两大类类，热线热线和版和版权权信息也必不可信息也必不可少。少。（以跳窗形式出现，窗口宽度不超过（以跳窗形式出现，窗口宽度不超过700px700px）表单 n n表单整体排版布局要美观大方，要有统一的字体写号、色调、提表单整体排版布局要美观大方，要有统一的字体写号、色调、提示用词、提示窗口、按钮也在表单相同的位置（全部靠右）。示用词、提示窗口、按钮也在表单相同的位置（全部靠右）。n n

23、区域的排列：当一个版面有超过一个的编辑区域的时候，就要用区域的排列：当一个版面有超过一个的编辑区域的时候，就要用某种方式来组织这些区域，使得版面同时具有吸引力和效率。如某种方式来组织这些区域，使得版面同时具有吸引力和效率。如下图所示，就是左对齐可编辑区域，使得左手边的每个编辑区域下图所示，就是左对齐可编辑区域，使得左手边的每个编辑区域对齐于一条直线，一个接一个。相应的标签也应该左对齐并且位对齐于一条直线，一个接一个。相应的标签也应该左对齐并且位于编辑区域的旁边。这是一个简洁有效的方法来安排版面上的编于编辑区域的旁边。这是一个简洁有效的方法来安排版面上的编辑区域辑区域 表单 n n查询表单查询表

24、单 ：查询类型表单布局风格如下：查询条件分布在：查询类型表单布局风格如下：查询条件分布在上部，查询结果显示在下部。与查询操作相关的按钮位于上部，查询结果显示在下部。与查询操作相关的按钮位于查询条件控件右侧，与查询结果操作相关的按钮位于查询查询条件控件右侧，与查询结果操作相关的按钮位于查询结果的右部或上部。结果的右部或上部。表单 n n主从表单主从表单 ：主从类型表单布局风格如下：主表按：主从类型表单布局风格如下：主表按1 13 3列横列横向排列显示（不得超过向排列显示（不得超过3 3列），附表标题全部按横向排列列），附表标题全部按横向排列 表单 n n折叠表单折叠表单 ：折叠类型表单布局风格如

25、下：多个表单可以用折叠方：折叠类型表单布局风格如下：多个表单可以用折叠方式显示，节省空间。折叠表单式显示，节省空间。折叠表单 ：折叠类型表单布局风格如下：多：折叠类型表单布局风格如下：多个表单可以用折叠方式显示，节省空间。个表单可以用折叠方式显示，节省空间。表单 n n说明文字说明文字 ：说明文字要和表单最左边对齐，与表单最底部：说明文字要和表单最左边对齐，与表单最底部至少至少10px10px距离。若出错说明字体则为红色。距离。若出错说明字体则为红色。表单 n n访问记录访问记录 ：访问记录、操作记录都用折叠方式，里面信息：访问记录、操作记录都用折叠方式，里面信息背景不可带底纹。背景不可带底纹。表单 n n树控件：树控件：如果操作区有树型控件如果操作区有树型控件,导航区只能用导航区只能用OUTLOOKOUTLOOK式式菜单。菜单。谢谢！