系统界面标准及规范优化.docx

系统界面标准及规范优化.docx

《系统界面标准及规范优化.docx》由会员分享，可在线阅读，更多相关《系统界面标准及规范优化.docx（25页珍藏版）》请在冰豆网上搜索。

系统界面标准及规范优化

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

————————————————————————————————作者：

————————————————————————————————日期：

系统界面标准及规范V1.0

深圳市艾姆诗数码科技有限公司

2017.05

1.规范说明

1.1目的

以用户为中心，将用户体验细化到具体的可执行的要求，建立界面设计理念及界面布局的通用规则及要求，提升系统公用组件复用度及用户体验，从而提高用户工作效率。

1.2原则

平衡原则：

保证上下左右平衡，不要堆积数据；保证字体的选择和大小保持一致；

预期原则：

屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，保持清晰一致的页面设计，所有界面的风格以及具有相同含义的术语保持一致；

顺序原则：

对象显示的顺序应依需要排列，最小化用户记忆和寻找的成本；

规则化：

显示命令、对话及提示行在系统的设计中尽量统一规范；

易用原则：

界面应该简单、易于学习、且易于使用；保持界面能很快对用户操作做出反应；

美观原则：

美观是系统界面的重要部分，可视属性提供了非常好的印象，是传达特定对象的交互行为的重要线索；

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-4

图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.5-3

●当输入的内容达到了字段的长度限制时，请控制不可输入，而不是保存后自动截断或者保存后给予提示；

●对于有限制使用的字符，显示明确的提示信息，（特殊符号包含；;’”><,｀‘：

“［”｛、\|｝］+=）-（_*&&^%$#@!

~,.。

?

/以及空格）；

3.6新增

●新增记录添加完成后，自动跳转到新增记录所在页；

●提交失败，系统给出提示信息，保留用户已输入的内容，以便编辑后再次提交。

并且提供用户必要的引导，使用户明白失败后应该如何处理；

●新增提交时，需对主要标识字段进行重复值、空值（空格）判断；

●必须控制不可重复新增，如图3.6-1；

图3.6-1

3.7编辑

●从列表进入编辑完成后，必须回到原记录所在页，且刷新显示编辑后的值；

●编辑提交失败后系统给出明确的提示信息，并保留用户已编辑的内容，以便再次编辑提交；

●必须控制不可重复保存，如图；

图

3.8删除

●删除成功后，刷新不显示被删除的记录；

●当被删除的记录与其它记录存在关联时，请按需求界定，给予不允许删除提示信息，如图3.8-1；