系统界面标准及规范课件.ppt

1、系统界面标准及规范系统界面标准及规范1.总体原则2.原则详述 2.1.用户控制 2.2.清楚一致的设计 2.3.较快的响应速度 2.4.简洁美观3.界面通用规范4.控件通用规范5.主要功能的规范6.软件界面规范列举 6.1通用规范 6.2 登录页 6.3首页/主界面 6.4 主体/细节模式 6.5 分栏浏览 6.6 列表模式 6.7表单模式 6.8 弹出模式 6.9 提示信息符：公式定义页面1.总体原则总体原则w以用户为中心，设计出由用户控制的界面，而不是界面控制用户。w清晰一致的页面设计，所有界面的风格保持一致，所有具有相同含义的术语保持一致.w易于理解,较快的响应速度。w简单美观。2.详细

2、原则详细原则w2.1.用户控制用户控制w用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。w操作上假设是用户-而不是计算机或软件-开始动作。用户扮演主动角色，而不是扮演被动角色。w 提供用户自定义设置。因为用户的技能和喜好各不相同，因此他们必须能够设置个性化界面的某些方面。w 采取交互式和易于感应的窗口。例如，用于在一个绘图程序中选定一个特定感觉-请确保该模式是显然的、可见的，是一个明确的用户选定的结果，并且容易取消。w在后台运行长进程时，保持前台式交互。例如，当正在打印一个文档，即使该文档不能被改变，用户也应该可以最小化该窗口。w 用户喜欢探索一个界面，并经常从尝

3、试和错误中学习。一个有效的界面允许交互式的发现，它只提供一组合适的选择，并在用户可能破坏系统或数据的情况时发出警告。如果可行，还应提供可逆转或可还原的操作。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误，并且使用户易于还原。2.详细原则详细原则w2.2.清楚一致的设计清楚一致的设计w一致允许用户将已有的知识传递到新的任务中，更快地学习新事物，并将更多的注意力集中在任务上。这是因为他们不必花时间来尝试记住交互中的不同。通过提供一种稳定的感觉，一致使得界面熟悉而又可预测。一致在界面的所有方面都是很重要的，包括命令的名称、信息的可视表示，操作行为，以及元素在屏幕和窗口内部的放置。2.详细

4、原则详细原则w2.3.较快的响应速度较快的响应速度w保持界面能很快对用户操作作出反应。在提交操作上时候，统一使用显示处理进度条，提示不要切换窗口,在自动跳转未成功时应显示具体信息。2.详细原则详细原则w2.4.简洁美观简洁美观w界面应该很简单、易于学习、并且易于使用，它还必须提供对应用程序的所有功能的访问；美观是应用程序界面的重要部分，可视属性提供了非常好的印象，并传达特定对象的交互行为的重要线索。w.布局的原则w屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：w平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也

5、会产生视觉疲和接收错误。w预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。w经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择原则。w顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。w规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。3.界面通用规范界面通用规范序序号号名称名称简述简述规范要求规范要求1.默认值各个页面都会存在默认值1.打开一个新界面，光标默认停留在第一个待输入的文本框中。2.如果打开的新界面内容为空，应给出相应的操作提示。例：“点击左侧列表开始操

6、作”3.当选择下拉框不存在默认值时，则默认为空；当存在默认值时，请绑定显示默认值。4.单选框要有默认选项2.必填项对界面必填项的一些规范1.界面的必填项必须以红色*号标识出来。2.当界面排列紧凑时，必填项没有填时，最后提交应弹出警告；但确定后必须停留在相应待输入的文本框中。当界面排列空间比较宽松时，必填项没填时光标移开则在输入框旁边给出提示。3.界面通用规范界面通用规范序序号号名称名称简述简述规范要求规范要求3.提示语提示信息的规范1.提示信息中标点符号请统一为全角符号。2.提示信息如有主语，请统一为您。3.提示信息不宜太长，宽度不宜超过当前窗口的1/2；当超过此比例时，请视具体情况进行换行。

7、4.提示信息尽量给出用户下一步操作的提示，避免只提示“您的操作已成功”等。J举例：可改为“您已成功导出数据，导出数量XXX，请点击返回进行下一步操作”5.标点符号的使用:提示语为陈述句时用叹号结尾,例:您的操已成功!如果提示语为疑问句,则用问号结尾,例:是否确认删除XX表?6.当功能按钮为图片按钮时，要加alt属性防治图片不能正确加载出来时,用户不了解图片按扭的作用.7.无记录情况a)删除（请选择需要删除的XXX!）b)导出（当前列表无记录！）c)备份（请选择需要备份的XXX!）d)修改（请选择需要修改的XXX!）7.有记录情况a)未选择记录删除（请选择需要删除的XXX!）其它类同b)单个与批

8、量删除（确定要删除所选择的XXX吗？）；如果有再次确认的，提示最后变成（您将要删除XXX表，是否继续？）c)全部删除（确定要删除本表的所有XXX吗？）；如果是根据通用查询条件，查询出的结果集全部删除（确定要删除当前查询出的数据吗？共计XXX条。）如有其它情况，酌情处理8.操作复杂页面要提供必要的提示信息和帮助，可以加入flash操作效果。9.提示信息超过三条时应该将其分成独立的区域。3.界面通用规范界面通用规范序序号号名称名称简述简述规范要求规范要求4提示框对信息返回的提示展现方式1.对于频繁操作的功能，不要使用alert提示，使用div提示，停顿几秒钟(自定义几秒)后自动消失；如添加主宾栏。

9、类似下图：，此处应封装成一个统一的调用。停顿时间默认为2秒钟，可自己定义2.对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会3.当前操作完成后，如果有必要请给予用户下一步操作的“入口链接”。举例：系统表式维护完毕，应提供“维护年度表式入口”，方便用户快捷操作。5.界面传递父窗体与弹出窗口。1.页面内容过少；对该页面进行操作时，父级页面不可操做；页面功能是按流程操作，针对某个功能需额外进行设置；如上情况请使用弹出页。2.当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回必须更新父窗体的数据。3.弹出页内容少则不加最大化、最小化按扭。弹出窗口最大化后有意义则可加最大化按扭。弹

10、出窗口最小化后放在页面右下角。4.关闭父窗体必须连同子窗体一同关闭。5.子窗体的大小最好不要超过父窗体，且最好不要遮住父窗体的主要信息。6.弹出窗口最好不要超过两层3.界面通用规范界面通用规范序序号号名称名称简述简述规范要求规范要求6.表单对表单的相关规范。1.表单内元素过多，必须要将元素分类，属性相近的放到一起。2.表单详细页尽量不要出现滚动条，如果内容过多，长度超过一屏半时，上下都加保存按扭。7.Table表格列表页面通用规则1.表格的宽度应为百分比显示，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以显示，光标停留后，详细内容以Title显示。2.表格的宽度如果过窄的情况下可以设

11、固定宽度，但要保证有完全的css样式。3.如果没有明显的层次关系的多行记录，可以使用列表形式展现，不要使用树展现；4.字数不规则的记录靠左显示，数量数字居右，列表中字数固定的文字（比如日期，图片等）居中显示,并且距左、右边框留有10px边距。5.如果列表前选择框使用的是Radio Button，则应该默认选中第1条;6.如果没有选中列表中的项，在点击功能操作按钮时，必须有提示“请选择需要XXX的记录“3.界面通用规范界面通用规范序序号号名称名称简述简述规范要求规范要求8.界面布局对界面布局、分辨率的规范1.界面层次不宜超过3层。2.默认窗口设置下，界面内容尽量用百分比显示.不应出现水平、垂直滚

12、动条。3.完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离4.无论在什么位置，用户都可以选择返回当前功能主界面5.页面可用面积最大化6.要对复杂页面加入引导性提示和帮助信息入口7.如果各模块需要出现滚动条，嵌套不可以超过两层。8.打印及汇总模板左侧树采用QQ界面贴近屏幕边缘的显示效果.鼠标经过展开，鼠标移走收起。上面加固定显示按扭,点击按扭则树固定在界面左侧。4.控件通用规范控件通用规范序序号号名称名称简述简述规范要求规范要求9.Button按钮对按钮样式的一些限制1.不允许用户操作的按钮应该置灰，特别要防止用户对按钮进行“连击”。2.按钮的颜色是统一的。3.如果按扭为多个并且按扭字数

13、不同时，按钮上如果只有两个字，则这两个字之间和两个字的两边都需要一个空格，如果多个按扭上字数同为两个时，则不需要。11。图片关于页面上图片的规范1.页面上所有的图片需加alt属性（以确保在图片没加载出来时了解其作用）4.控件通用规范控件通用规范序序号号名称名称简述简述规范要求规范要求13.文本域多行记录的限制1.如果有“清空”功能，再清空之前要进行提示2.文本域要加入字数限制提示，动态提示还可输入多少字符；格式为：此处可输入的字数为38/300个14.输入框输入框的状态和限制1.可以输入的和需要选择的文本框以白色为背景；不可输入不可选择的文本框以灰色为背景；对于不可输入/选择框，通过鼠标或键盘

14、都不可以让光标定位至此控件。2.在界面上明确各个文本框的TAB键的顺序；3.只允许输入数字的输入框根据输入结果，非法给予提示。以在输入框旁出现浮动层的形式显示。4.只允许输入日期、时间的输入框请允许可输可选。5.当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示。6.对于有限制使用的字符。显示明确的提示信息，（如、|、”、:、*、?）7.输入框的长度由CSS文件统一限定，非特殊情况，不得更改。5.主要功能的规范主要功能的规范序号序号 功能名称功能名称功能简述功能简述规范要求规范要求15.新增增加一条或多条记录1.新增记录分情况排列，例：主宾栏按序号排列

15、，新增记录添加完后，跳转到新增记录所在页。2.提交失败时必有保留用户已输入的内容，以便再次提交；并且提供用户必要的引导，使用户明白失败后应该如何处理。3.提交时需对主要标识字段进行重复值、空值（空格）判断。4.当已明确知道信息不能新增时，新增按钮应该置灰。16.修改修改单条记录1.从列表进入修改完成后必须回到原记录所在页，且刷新显示修改后的值。2.提交失败后有明显的提示信息，保留用户已修改的内容，以便再次提交。3.提交失败时向隐藏页提交，并给出提示。-删除它4.当已明确知道信息不能修改时，应将不可操作的功能按钮置灰。5.所有向后台提交为防止连续点击，当前页锁屏，操作完成后解锁。（做出示例）17

16、.删除删除一条或多条记录1.删除重要信息时必须有二次确认删除的提示信息，提示的格式见界面规范提示语.2.删除成功后刷新不显示被删除的记录。3.在列表删除时，只要列表数据没删完，直接停留当前页，已删除的数据不显示且不刷新列表，若列表数据全部删除，则刷新列表；在明细删除时，成功后返回列表。-删除它4.当被删除的记录与其它记录存在关联时，请按需求界定，给予不允许删除提示信息。5.当已明确知道信息不能删除时，应将删除按钮置灰。5.主要功能的规范主要功能的规范序号序号 功能名称功能名称功能简述功能简述规范要求规范要求18.查询按各条件查询。1.列表查询后定位到列表第一页。报表查询后定位到报表第一页。删除

17、这一句2.每次查询后尽量保留当前查询条件,（当查询和列表在一个面时，保留，不在不保留。）3.当未查询到任何记录时，需给予未查找相关记录的提示信息。19.保存保存当前变更1.当保存所费时间较长时，需给予进度界面提示。2.必须控制不可以重复保存。3.页面有修改，未保存时关闭窗口时，提示用户是否保存。暂时做不到4.弹出提示操作，确认继续危险动作的按扭默认为第一个按扭加虚线框提示。20.返回返回前一个页面1.当从一个页面点击按钮或链接进入子页面时，子页面必须提供返回按钮；视具体情况而定，如果这两个页面之间切换操作频繁，需要提供“返回”按钮。21.翻页1.带条件进行翻页时，翻页同时可执行查询功能。22.全选实现单页全选功能。1.勾选全选则选中当页所有记录。