系统界面标准及规范 - 优化版

1、系统界面标准及规范V1.0 第 30 页 共 30 页系统界面标准及规范 V1.0深圳市艾姆诗数码科技有限公司2017.05目录1. 规范说明31.1 目的31.2 原则32. 界面设计理念32.1 易用性32.2 安全性42.3 美观与协调性52.4 一致性102.5 效率132.6 容错性143. 控件通用规范143.1 默认值143.2 必填项163.3 提示语183.4 界面传递193.5 输入框203.6 新增223.7 编辑223.8 删除231. 规范说明1.1 目的以用户为中心，将用户体验细化到具体的可执行的要求，建立界面设计理念及界面布局的通用规则及要求，提升系统公用组件复用

2、度及用户体验，从而提高用户工作效率。1.2 原则平衡原则：保证上下左右平衡，不要堆积数据；保证字体的选择和大小保持一致；预期原则：屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，保持清晰一致的页面设计，所有界面的风格以及具有相同含义的术语保持一致；顺序原则：对象显示的顺序应依需要排列，最小化用户记忆和寻找的成本；规 则 化：显示命令、对话及提示行在系统的设计中尽量统一规范；易用原则：界面应该简单、易于学习、且易于使用；保持界面能很快对用户操作做出反应；美观原则：美观是系统界面的重要部分，可视属性提供了非常好的印象，是传达特定对象的交互行为的重要线索；2. 界面设计理念2.1 易用性l 可写控

3、件检测到非法输入后程序应给出说明，自动获得焦点；l 复选框和选项框按选择几率的高低而先后排列，如图2.1-1； 图2.1-1l 界面空间较小时使用下拉框而不用选项框；l 按钮名称用词准确、易懂；l 系统给予的提示、警告或错误说明应该清楚、明了、恰当；l 如程序处理一些需要较长时间才能完成的操作时，系统应给予诸如“读取中”的提示信息（避免用户怀疑程序是否已经“挂了”，或者验证鼠标是否正常而疯狂点击）；l 当对列表进行数据操作，系统运行读取结果后，界面应停留在被操作的数据所在页。2.2 安全性l 对可能引起致命错误或系统出错的输入字符（如：数量、金额）或动作（如：审核、删除）要加限制或者屏蔽，如图

4、2.2-1 ；图2.2-1l 对可能发生严重后果的操作要有补救措施，通过补救措施用户可以回到原来的正确状态；（如：财务管理的撤审功能）2.3 美观与协调性l 列宽的设计要合理，如图2.3-1/2；图2.3-1图2.3-2（反例-列宽欠合理）l 布局要合理，不宜过于密集，也不能留白过多，合理地利用空间，如图2.3-3/4；图2.3-3图2.3-4（反例-留白过多）l 界面各输入框长度切忌参差不齐；如图2.3-5/6； 查询栏各输入框应保持在同一水平线上；如图2.3-7；图2.3-5图2.3-6（反例）图2.3-7（反例-输入框不在同一水平线）l 尽可能简洁用户界面：突出重要的功能，隐藏复杂的，不

5、常用的功能，如图2.3-8/9；图2.3-8图2.3-92.4 一致性l 新增页面、搜索栏、打印、导入导出模板与列表各字段名称应保持一致；l 同系统从头至尾的外观、行为、操作应该是一致的。 （添加功能对应“添加”和“关闭”按键、编辑功能对应“保存”和“关闭”按键、删除功能对应“确定”和“取消”按键），如图2.4-1/2/3；图2.4-1图2.4-2图2.4-3l 相同功能按钮的样式应该保持一致，当下拉选项较多时，建议使用样式2，如图2.4-4；图2.4-4l 冻结页面搜索栏、功能栏、页码栏和滚动条（视具体情况而定），如图2.4-4/5图2.4-4图2.4-5（反例）2.5 效率l 完成同一功能

6、或者任务的元素固定放在集中位置，最小化用户的眼和手的移动幅度，如图2.6-1；图2.6-1l 尽可能简化用户操作的步骤；l 滚动条的长度要根据显示信息的长度和宽度能及时变换；l 如列表存在较多功能按键，且没有顺序要求时，应按照使用频率和重要性排列，常用的放在开头，不常用的靠后放置。重要的放在开头，次要的放在后面；2.6 容错性l 对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的权利，如图2.7-1；图2.7-1l 当错误操作发生时，提供妥善的应对措施（具体情况参考用户需求），如图2.7-2；图2.7-23. 控件通用规范3.1 默认值l 打开一个新界面，光标默认停留在第一个待输入

7、的文本框中，如图4.1-1 ；图4.1-1l 当选择下拉框不存在默认值时，则默认为空，如图 ，仓库默认为空，提示“请选择仓库”，如图4.1-2；图4.1-2l 当存在默认值时，请绑定显示默认值，如图4.1-3；图4.1-33.2 必填项l 界面的必填项必须在输入框后以红色 * 号标识出来，并与文本框保持一定间距，如图4.2-1/2/3；图4.2-1图4.2-2（反例- * 号过于紧凑）图4.2-3（反例-必填项无标识）l 必填项没填时，光标移开则在输入框旁边或下方给出提示，如图4.2-4；图4.2-43.3 提示语l 提示信息中如有标点符号，请统一使用半角符号；l 不要用或者少用专业术语，且杜

8、绝错别字；l 提示信息如有主语，请统一为“您”；l 提示信息不宜过长，请简单扼要突出重点；反例-这也太简洁了.l 提示信息尽量给出用户下一步操作的提示。避免只提示“质检失败”等，可改为“质检失败，只能对状态为已入库的数据进行操作”；l 如果空间较小的情况下，提示信息放在输入框下方（切勿把其他输入框/按键挤走；切勿分两行进行提示）如图3.3-1； 图3.3-1（反例）l 标点符号的使用：提示语为陈述句时用句号/叹号结尾，如：“扫描入库成功。”提示语为疑问句时用问号结尾，如：“确定要删除所选择的行吗？”l 删除： 未勾选数据时：请选择数据行。勾选单条或多条时：您确定要删除所选择的行吗？l 编辑：未

9、勾选数据或勾选多条数据时：请选择单条记录进行操作。l 文本域要加入字数限制提示，动态提示还可输入多少个字符,如图3.3-2。例：此处可输入的字数为38/200个。 图3.3-23.4 界面传递 l 当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回更新父窗体的数据；l 关闭父窗体必须连同子窗体一同关闭；l 子窗体的大小最好不要超过父窗体，且最好不要遮住父窗体的主要信息；l 弹出窗口最好不要超过两层；l 子窗体大小设计应合理，反例如图3.4-1；图3.4-1（反例）3.5 输入框l 可以输入的和需求选择的文本框以白色为背景。不可输入和不可选择的文本框以灰色为背景；对于不可输入/选择框，通过鼠

10、标或键盘都不可以让光标定位至此控件。如图3.5-1；图3.5-1l 只允许输入数字（金额、数量和重量等）的输入框根据输入结果，对非法输入给予提示。以在输入框旁出现浮动层的形式显示，如图3.5-2；当用户根据提示修改有效值时，提示信息自动隐藏；图3.5-2l 在读入用户所输入的信息时，根据需要选择是否去掉前后空格.如图3.5-3；图3.5-3l 只允许输入日期、时间的输入框请允许可输可选，并合理判断日期的有效值；l 长度、重量、金额等请标识单位，如图3.5-4；图3.5-3l 当输入的内容达到了字段的长度限制时，请控制不可输入，而不是保存后自动截断或者保存后给予提示；l 对于有限制使用的字符，显示明确的提示信息，（特殊符号包含；;”><,：“”、|+=)-(_*&&%$#!,.。?/ 以及空格）；3.6 新增l 新增记录添加完成后，自动跳转到新增记录所在页；l 提交失败，系统给出提示信息，保留用户已输入的内容，以便编辑后再次提交。并且提供用户必要的引导，使用户明白失败后应该如何处理；l 新增提交时，需对主要标识字段进行重复值、空值（空格）判断；l 必须控制不可重复新增，如图3.6-1；图3.6-13.7 编辑l