浅析信息系统中控件在人机交互中的用户体验设计

李雪洁

（兴业银行总行信息科技部，上海 201201）

浅析信息系统中控件在人机交互中的用户体验设计

李雪洁

（兴业银行总行信息科技部，上海 201201）

信息系统中的人机交互设计是一门研究软件系统与用户之间交互关系的学问。用户通过设计优秀的人机交互界面与软件系统进行交流，既可以顺利完成本身业务所需，也达到良好的体验目的。文章主要探讨了人机交互中主要组成元素——控件在信息系统中的相关概念及设计原则，并举例说明合理的控件设计在系统界面中的重要作用。

控件；人机交互；管理信息系统

Internet :www.artdesign.org.cn

控件是用户可与之交互以输入或操作数据的对象。每个控件都有其图形及逻辑功能。管理信息系统界面中的控件设置是人机交互中必不可少的一部分。控件是用户和后台管理系统进行交流的主要对象。它具有可操作性和自创建性，是组建图形用户界面的主要构造模块。下面是以按钮类、列表类、容器类、显示类四大组成部分阐述控件在软件系统界面中的设计规范。

一、按钮类

菜单

菜单：是向用户直接展示的一组功能选项，用户可以通过菜单的内容来了解其功能，并通过逐个点击菜单项来执行自己想要的功能。

1.在标题的设置上，尽量用简洁词组作为菜单按钮导航标题。

2.下拉菜单延展开一般不要超过三层。三层以上的菜单会让用户增加厌烦情绪。

3.鼠标在菜单上移动时，移动到的菜单项要改变其颜色值，以指示鼠标当前悬停在哪个菜单项上。

4.带有子菜单的选项一定要有表示对外展示的箭头，鼠标停留在有箭头菜单项上时，会出现下一级子菜单。

5.菜单项的顺序安排要合理。将同一类菜单项组合在一起。

6.在横向导航栏上，菜单项以重要性顺序从左到右依此排列，而在下拉命令中，重要与非重要的的选项应从上至下依次排列。

7.如果菜单标题字数尽量精简，尽量不要使用省略号。

8.标题字数最好接近，使菜单宽度保持一致。

9.一般情况下，菜单标题字统一采用左对齐。

单选框

单选框：是一种能够被标记选中的按钮状态，具有自动互斥选择性，提供给用户只能一种单项选择性。

1.同一系统上所用的单选框要大小相似，字体一致, 风格简洁明了。

2.点击频率高的选项和主要功能应按从左到右的顺序排列。

3.同一功能或任务的选项应放在一起，减少鼠标移动的距离。

4.如果单选框中的选项个数超过8个，考虑用下拉列表或分组框代替，它们更适合用户体验。

5.由于单选选项是一组相互排斥的选项，可以将单选选项置于一个分组框中，使选择更为明确。

6.尽量使用竖向左边对齐，这样的单选按钮更易于浏览并节省空间。

复选框

复选框：是一种可以被标记多选状态的按钮，让用户进行多项选择。通常用于多选或者用于标记多种功能。

1.各复选框按选择几率的高低而从前至后排列。

2.复选框要有提示多项选择的默认选项。

3.在同一性质结构下，同一组复选框的选择往往可以通过点击统一选项点来统一选择。

4.避免一组复选框中选项个数超过8个。

5.如果选项数过多考虑用下拉列表代替，它占用的空间更少。

6.尽量采用竖向左对齐。

下拉列表框与复选框的不同使用状态：

1.界面空间较小时要选择下拉列表框而不选择复选框。

2.选项数较少时使用复选框，相反使用下拉列表框。

二、列表类

下拉列表

下拉列表：是一种可折叠的列表，正常状态为空白或默认选项。在用户需要进行选择时，点击它能选择想要的选项。

1.传统式：下拉列表尽量不要过长，避免运用垂直滚动条，滚动条形式会存在上下内容不连贯性，增加用户记忆负担。

2.展开式：针对内容较多的下拉列表项建议使用展开式。这种方式可以方便用户查找选择，在视觉上具有一定的连贯性，在同一平面展开多项，给用户一目了然的感觉。（图1）

>图1

3.下拉列表两种操作状态：

1）在列表中点击选项后，再点击确认按钮进行确认；

2） 点击列表中的选项后直接进入链接页面。

列表框

列表框：内容信息量大的选项清单。用户可能用鼠标选择其中一个或者几个选项。

1.列表框最上端是标题栏，左侧为导航标题栏。

2.使用列表框至少10行长度，少于10行的列表最好不要有滑块。

3.对多选列表要提供 “全部选中”和“全部取消”命令设置，可以方便用户进行快速选择。

4.鼠标在列表框上移动时，划过的列能够相应被改变颜色或亮度，以表示鼠标当前选择在哪个列表项上。

5.当出现滚动条的时候，可以通过鼠标操作滚动条来滚动列表的内容。

6.多列表格要用颜色间隔以便区分内容信息。

树状视图

树型视图：是一种能够充分展现层级关系的视图结构，使用它可以一目了然地用父子结构表示复杂的层次关系，直观简洁。

1.最常用的显示方式是在父节点中显示（+）或（-）。用户可以通过点击该符号方便展开或收起父结点下的子节点。

2.在文档管理系统中，可以根据系统特性在父或子节点上设计出具有文件形式的特有图标，把图标加到树状视图中，这样，就会使系统功能更易理解。

3.在树状结构显示层级的同时，避免简陋的单纯结构图，可以根据不同系统风格设计出其特有的界面形象。

三、容器类

对话框

对话框：是人机交流的一种方式，用户通过对话框内放置不同控件的操作，完成特定的命令或任务。

1.同一软件系统中对话框在界面中的设计风格应一致。

2.对话框应该在所有屏幕分辩率模式下都能够正常显示。

3.现有标准模式（1024×768）下显示时，对话框内所需内容应适合该屏幕。并应该确保对话框在其他的屏幕分辩率模式也能够正确显示。

4.避免使用横向滚动条的对话框。

5.如果对话框带有大量内容，尽量竖向排列。

6.二级弹出对话框的设置，不要使用过多复杂的控件元素，使用户容易与上一级混淆。

7.在同一对话框中，不同控件应该用适当方式加以区别。

区分方式：

1.不同颜色

2.空格

3.分组框等

4.分隔符

分组框

分组框：属于界面设计中最简单的控件容器，用于装载一系列具有共性的相关控件。

1.分组框不应该过度使用，会引起界面视觉混乱。

2.通常情况下，分组框的线的设置高度为 1px 。

3.在分组框内部如果有多重结构，尽量不要镶嵌，可以通过布局来展现控件之间的关系。

4.不要将控件用作分组框的主要标题。

5.下列情况可以把控件放入一个分组框里，而不需要对里边的每一个控件进行一一的操作。

1）同时隐藏掉一批控件

2）一起移动一批控件

3）让一批控件共同做某种动画

编辑框

编辑框:相当于一个简易的文本编辑器，用户可以在编辑框中编辑需要的文本。

1.支持不同的文字颜色、不同的字体进行编辑。

2.不要限制图片的尺寸，支持图文混排的输入和显示。

3.不同的段落可以使用不同的内容对齐方式。

4.编辑框内容过多，建议使用垂直滚动条。尽量避免使用横向滚动条。

5.对于输入受限的情况，应使用特殊控件。通常情况对于日期和时间，使用日期和时间特定控件。

6.编辑框的宽度要匹配其内容，宽度的长短是对期望输入的视觉传达。

7.如果期望的输入没有特别限制，应选择与其他编辑框或控件一致的宽度，保持界面整齐。

8.在进行数字输入时，尽量采用特定数字编辑框用于数字输入。

9.当用户在数字字段中输入非数字文本时，不同信息的显示不要出错。

选项卡

选项卡：多个页面并行排列，每个页面独立成一个容器。页面里边可以摆放各种控件来完成不同的功能。用户可以通过点击页面旁边或上方的“选项卡”来切换不同页面。

1.当需要节省页面空间；紧凑布局；且组合的几种信息之间具有关联性时，一般选择选项卡应用。

2.如果用户需要对同一选项卡中不同页面进行对比时，就不应该使用选项卡页面。

3.各个标题应简短明确。字数统一。以便在一行内容纳尽可能多的标签。

4.在同一排标签中，当点击其中一项标签时，应以不同颜色加以区分。

5.在一般的选项卡中，保持标签只在一行内显示。如果分为多级，容易让用户误以为是其子级。

6.切换各内容标签，时间相同，保持一致，不要有延迟。

7.不要使用滚动条，给用户产生额外负担。

8.如果使用图标加文字会更容易让用户识别。

四、显示类

文本

文本：用于记载和储存文字信息。

1.在文本编辑与输入中避免不必要的缩写词，不易理解。

2.验证码输入中，一般英文输入不区分大小写。

3.句号、逗号、问号，破折号等尽量采用简单的标点符号来显示。

4.在同一界面中，标题类与内容类的字体，字号要统一。

5.日期格式

1）日期或其他规范类控件显示格式要一致。

2）特殊控件如日期控件等不采取手工录入，用选择形式。

6.输入特殊字符时，如有错误，要有提示显示。

7.密码输入要有相关提示：密码是否允许特殊字符；是否区分大小写及密码的可输入长度。

8.有必要时规定输入字符长度。

9.输入文本尽量使用左对齐。

10.如果输入字符较长的情况下，可以设置文字编辑框。

11.保持文字内容清楚。简单明确；避免使用冗长的文字用于用户反馈。

12.对于重要信息的文字内容使用下列两种形式：

1）可以设置防止复制

2）在文字上印有附带版权的logo

悬浮提示

悬浮提示: 在界面所传达的信息中，当用户鼠标停留在内容上或在输入一段错误信息时，系统为了帮助用户更明确其内容含义，会自动浮现出一段解释说明该内容的文字。

1.一般状态下不显示出来，在必要说明情况下。提示信息应简明扼要，避免过长。

2.提示信息应该与正文加以区分，可以用字体或颜色辨别。

3.鼠标移开后默认提示信息将自动消失。

4.在错误的判断下，避免只有缩写词，应该尽量解释到底是什么出了错。

5.在出错消息文字中表达要简短、清楚、具体，说明重点。

进度条

>图2

>图3

>图4

>图5

进度条：用于显示某种事情的进展情况。常用图例如下：

1.进度条通常被用于加载事情的进度显示，可以用横向进度，也可以用其他创意形式代替。

2.通常情况下，是从左向右延伸，表示进度的速度及当前完成状态。

3.但可以根据实际需要，任意选择进度条的增长方向。

4.在其他轻松气氛下的网站或APP上，可以制作图案或者动效，让它们自动跟随进度增长。

5.可以设置一定的取值范围，让进度条根据取值自动更换填充内容的颜色。

滚动条

滚动条：使界面内容在水平或垂直方向滚动，以便在有限的空间内尽量多的放置内容。

1.滚动条的长度及占整个框架比要根据显示信息量的多少来设置，以利于用户了解显示信息的位置和整体内容的多少。

2.尽量避免水平滚动条。横向字数伸拉过长，会影响用户阅读积极性。

解决方式：1）加宽窗口、减小文本的宽度。

2）使文本自动换行。

3.可以改变传统模式，根据实际情况设计出最符合界面的精确指示。

结 语

上述方面谈到了管理信息系统中几类控件的设计规范与原则。以按钮类、列表类、容器类、显示类为举例，逐条列举出软件系统的一些基本规律及设计过程中的注意事项。如果系统界面控件能在其强大的使用功能基础上，再加上专业的规范设计，舒适的用户体验，那么，在控件对于后台管理系统的操作性及可视化上，都会发挥出更多的功能与作用，让整个信息系统在实际操作中更具有良好的用户体验性。■

The Analysis of User Experience Design of Controls in Information System

LI Xue-jie
(China Industrial Bank co.,Ltd. Information & Technology Dept.,Shanghai 201201,China )

Human-computer interaction design in information system is a science of studying interactions between software systems and users. Users communicate with software systems through the well-designed user interfaces in order to accomplish tasks and get good experiences. This article discusses the definitions and design principles about the controls in information systems, which is the main component in human-computer interaction, and introduces examples of how well-designed controls contributing to user interfaces.

control; Human-computer interaction; management information system

G202

A

1008-2832（2017）01-0092-03

检 索:www.artdesign.org.cn