系统界面标准及规范优化文档格式.docx
《系统界面标准及规范优化文档格式.docx》由会员分享,可在线阅读,更多相关《系统界面标准及规范优化文档格式.docx(25页珍藏版)》请在冰豆网上搜索。
屏幕上所有对象,如窗口、按钮、菜单等处理应一致化,保持清晰一致的页面设计,所有界面的风格以及具有相同含义的术语保持一致;
顺序原则:
对象显示的顺序应依需要排列,最小化用户记忆和寻找的成本;
规则化:
显示命令、对话及提示行在系统的设计中尽量统一规范;
易用原则:
界面应该简单、易于学习、且易于使用;
保持界面能很快对用户操作做出反应;
美观原则:
美观是系统界面的重要部分,可视属性提供了非常好的印象,是传达特定对象的交互行为的重要线索;
2.界面设计理念
2.1易用性
●可写控件检测到非法输入后程序应给出说明,自动获得焦点;
●复选框和选项框按选择几率的高低而先后排列,如图2.1-1;
图2.1-1
●界面空间较小时使用下拉框而不用选项框;
●按钮名称用词准确、易懂;
●系统给予的提示、警告或错误说明应该清楚、明了、恰当;
●如程序处理一些需要较长时间才能完成的操作时,系统应给予诸如“读取中…”的提示信息(避免用户怀疑程序是否已经“挂了”,或者验证鼠标是否正常而疯狂点击);
●当对列表进行数据操作,系统运行读取结果后,界面应停留在被操作的数据所在页。
2.2安全性
●对可能引起致命错误或系统出错的输入字符(如:
数量、金额)或动作(如:
审核、删除)要加限制或者屏蔽,如图2.2-1;
图2.2-1
●对可能发生严重后果的操作要有补救措施,通过补救措施用户可以回到原来的正确状态;
(如:
财务管理的撤审功能)
2.3美观与协调性
●列宽的设计要合理,如图2.3-1/2;
图2.3-1
图2.3-2(反例-列宽欠合理)
●布局要合理,不宜过于密集,也不能留白过多,合理地利用空间,如图2.3-3/4;
图2.3-3
图2.3-4(反例-留白过多)
●界面各输入框长度切忌参差不齐;
如图2.3-5/6;
查询栏各输入框应保持在同一水平线上;
如图2.3-7;
图2.3-5
图2.3-6(反例)
图2.3-7(反例-输入框不在同一水平线)
●尽可能简洁用户界面:
突出重要的功能,隐藏复杂的,不常用的功能,如图2.3-8/9;
图2.3-8
图2.3-9
2.4一致性
●新增页面、搜索栏、打印、导入导出模板与列表各字段名称应保持一致;
●同系统从头至尾的外观、行为、操作应该是一致的。
(添加功能对应“添加”和“关闭”按键、编辑功能对应“保存”和“关闭”按键、删除功能对应“确定”和“取消”按键),如图2.4-1/2/3;
图2.4-1
图2.4-2
图2.4-3
●相同功能按钮的样式应该保持一致,当下拉选项较多时,建议使用样式2,如图2.4-4;
图2.4-4
●冻结页面搜索栏、功能栏、页码栏和滚动条(视具体情况而定),如图2.4-4/5
图2.4-5(反例)
2.5效率
●完成同一功能或者任务的元素固定放在集中位置,最小化用户的眼和手的移动幅度,如图2.6-1;
图2.6-1
●尽可能简化用户操作的步骤;
●滚动条的长度要根据显示信息的长度和宽度能及时变换;
●如列表存在较多功能按键,且没有顺序要求时,应按照使用频率和重要性排列,常用的放在开头,不常用的靠后放置。
重要的放在开头,次要的放在后面;
2.6容错性
●对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的权利,如图2.7-1;
图2.7-1
●当错误操作发生时,提供妥善的应对措施(具体情况参考用户需求),如图2.7-2;
图2.7-2
3.控件通用规范
3.1默认值
●打开一个新界面,光标默认停留在第一个待输入的文本框中,如图4.1-1;
图4.1-1
●当选择下拉框不存在默认值时,则默认为空,如图,仓库默认为空,提示“请选择仓库”,如图4.1-2;
图4.1-2
●当存在默认值时,请绑定显示默认值,如图4.1-3;
图4.1-3
3.2必填项
●界面的必填项必须在输入框后以红色*号标识出来,并与文本框保持一定间距,如图4.2-1/2/3;
图4.2-1
图4.2-2(反例-*号过于紧凑)
图4.2-3(反例-必填项无标识)
●必填项没填时,光标移开则在输入框旁边或下方给出提示,如图4.2-4;
图4.2-4
3.3提示语
●提示信息中如有标点符号,请统一使用半角符号;
●不要用或者少用专业术语,且杜绝错别字;
●提示信息如有主语,请统一为“您”;
●提示信息不宜过长,请简单扼要突出重点;
反例-这也太简洁了..
●提示信息尽量给出用户下一步操作的提示。
避免只提示“质检失败”等,可改为“质检失败,只能对状态为‘已入库’的数据进行操作”;
●如果空间较小的情况下,提示信息放在输入框下方(切勿把其他输入框/按键挤走;
切勿分两行进行提示)如图3.3-1;
图3.3-1(反例)
●标点符号的使用:
提示语为陈述句时用句号/叹号结尾,如:
“扫描入库成功。
”
提示语为疑问句时用问号结尾,如:
“确定要删除所选择的行吗?
●删除:
未勾选数据时:
请选择数据行。
勾选单条或多条时:
您确定要删除所选择的行吗?
●编辑:
未勾选数据或勾选多条数据时:
请选择单条记录进行操作。
●文本域要加入字数限制提示,动态提示还可输入多少个字符,如图3.3-2。
例:
此处可输入的字数为38/200个。
图3.3-2
3.4界面传递
●当子窗体的任何操作影响了父窗体的数据时,子窗体关闭返回更新父窗体的数据;
●关闭父窗体必须连同子窗体一同关闭;
●子窗体的大小最好不要超过父窗体,且最好不要遮住父窗体的主要信息;
●弹出窗口最好不要超过两层;
●子窗体大小设计应合理,反例如图3.4-1;
图3.4-1(反例)
3.5输入框
●可以输入的和需求选择的文本框以白色为背景。
不可输入和不可选择的文本框以灰色为背景;
对于不可输入/选择框,通过鼠标或键盘都不可以让光标定位至此控件。
如图3.5-1;
图3.5-1
●只允许输入数字(金额、数量和重量等)的输入框根据输入结果,对非法输入给予提示。
以在输入框旁出现浮动层的形式显示,如图3.5-2;
当用户根据提示修改有效值时,提示信息自动隐藏;
图3.5-2
●在读入用户所输入的信息时,根据需要选择是否去掉前后空格.如图3.5-3;
图3.5-3
●只允许输入日期、时间的输入框请允许可输可选,并合理判断日期的有效值;
●长度、重量、金额等请标识单位,如图3.5-4;
●当输入的内容达到了字段的长度限制时,请控制不可输入,而不是保存后自动截断或者保存后给予提示;
●对于有限制使用的字符,显示明确的提示信息,(特殊符号包含;
;
’”>
<
`‘:
“[”{、\|}]+=)-(_*&
&
^%$#@!
~,.。
?
/以及空格);
3.6新增
●新增记录添加完成后,自动跳转到新增记录所在页;
●提交失败,系统给出提示信息,保留用户已输入的内容,以便编辑后再次提交。
并且提供用户必要的引导,使用户明白失败后应该如何处理;
●新增提交时,需对主要标识字段进行重复值、空值(空格)判断;
●必须控制不可重复新增,如图3.6-1;
图3.6-1
3.7编辑
●从列表进入编辑完成后,必须回到原记录所在页,且刷新显示编辑后的值;
●编辑提交失败后系统给出明确的提示信息,并保留用户已编辑的内容,以便再次编辑提交;
●必须控制不可重复保存,如图;
图
3.8删除
●删除成功后,刷新不显示被删除的记录;
●当被删除的记录与其它记录存在关联时,请按需求界定,给予不允许删除提示信息,如图3.8-1;