信息时代企业后台管理界面UI设计探析

李雪洁

摘 要：信息时代，企业后台管理UI界面设计是软件与用户交互中最感官而直接的层面。界面如同人的面孔，具有吸引用户的直接优势。界面设计的好坏决定用户对软件的第一印象。良好的界面能够引导用户自己顺利完成相应的操作，起到一定的向导作用，并给用户带来轻松愉悦的感受和成功的感觉。相反，由于界面设计的失败让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付之东流。本文从一个设计师的角度来探讨企业后台管理界面中的UI设计。

关键词：UI设计 用户体验 向导式界面 控 件

检 索：www.artdesign.org.cn

一 、界面UI设计概述

1. 元素一致性

根据企业现有的VI视觉设计规范，提取其具有相同含义的设计元素，可以应用到企业后台管理软件界面UI设计中。这样不仅培养用户在视觉感官上与企业VI系列设计保持一致，也可以在已熟悉的企业现有的设计基础上快速掌握与了解系统用户界面。各系统界面风格应保持一致。通过提供一种统一而又稳定的视觉感觉，使得用户对界面熟悉而又可预测。

2. 简单而美观

视觉形象中简洁、美观、快乐和有趣味的形象为人的视觉所乐于接受。而在传达信息过程中，强烈的、明确的和新颖的符号形式能够加强传达的效果。在进行UI界面设计时，设计师应综合两方面的因素，将信息传达和视觉的享受融为一体，在实现界面实用功能基础上提供具有审美趣味和价值的视觉传达设计效果。

通常在界面设计中，扩大功能和保持简单有时是相互矛盾的。一个有效的设计应该平衡这些目标。界面的简洁是要让用户便于使用、便于了解、并能减少用户操作错误的可能性。可以将界面设计元素以审美的角度减少到进行充分交流所需的最少量。在字体、颜色、图标、按钮、布局和对话框的设计上应简单而醒目，设计时应尽量使用人们对自然的反映和语意，简单与熟悉相互关联，尽可能尝试利用用户已有的审美和知识阅历。

3. 注重用户体验

用户体验关注的是用户的行为习惯和心理感受，就是琢磨用户怎么用软件才觉得得心应手。要顾及用户的使用感受。从心理学意义来说，可分为感觉（视觉、触觉、听觉等）和情感两个层次。以人为中心，使系统功能明确，安排合理，让用户通过最少的判断和最少的操作达到简单使用和愉悦的目的，是企业在软件开发过程中应着重思考的一个方面。

在界面中要尽可能使用用户本身熟悉的语言，而不是开发设计者熟悉的语言。 因为在设计界面时要考虑人类大脑处理信息的限度，人类的短期记忆存在不稳定、有限的特征，24小时内平均存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。用户尽量通过已掌握的知识来使用界面，不应超出一般常识，想用户所想，做用户所做，尽量要按照用户自己的方法理解和使用软件系统。一个有序的界面能让用户轻松地使用，浏览者能自由地做出选择，且所有选择是可根据需求而改变的。

4. 拥有良好的直觉特征

用生活中熟悉的表象作为设计元素，给用户任务提供直接而直观的感觉。通过用户利用他们已有的审美习惯与经验，使得预测和熟悉系统界面表示的行为更加容易。界面设计支持用户认知而不是记忆。用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。

二、界面控件的视觉传达设计

1. 窗体 窗口

目前企业后台管理界面软件设计默认的窗体大小标准为1024×768。由于用户屏幕大小可能设置不一，且宽屏已日渐成显示主流，1440×900、1280×1024也普遍存在。因此，在设计期间要考虑在不同显示器下界面延展或伸拉的完整效果。一般有两种措施来解决由于显视屏大小的不同给版式设计带来的不便：

1）将背景做适当延伸设计。以适应不同的版式效果。经过设计的背景使页面在高屏幕分辩率时仍具有一定的完整性 。

2）应用界面自适应技术，当版式宽度大于1024像素时，页面内容会自动伸缩，充满整个版面。页面的伸缩并不改变图文自身的大小，只影响其文字、背景面积的排布。

2. 布局和间距

在不同显示分辨率下，常常会出现控件被伸拉变形的状态。这种情况下，最好采用百分比的形式进行页面布局，按比例设计可以适用于任何分辨率下的布局排列。界面设计中版式分割要接近黄金点比例，使得整体界面宽度跟较长的那部分区域比为约等于1： 0.618。保持页面的视觉平衡。避免拥挤和对空间的浪费，应合理地利用空间。不要让布局本身成为突出的UI元素，保持视觉简洁。避免控件与数据的过分集中而导致的视觉疲劳和判断错误。如果在多个页面中存在类似的控件，应该尽量使得它们在各个页面中出现的位置/大小一致。尽量让窗体中显示大部分常用功能。

3. 图标、图片

在后台界面设计中，图标、图片的色调和风格要保持一致，不同界面中的同一功能应使用同样的图标或图片来展示。图标风格大致分为：简约或精致，平面或立体，古典或现代，写实或卡通，单色或多彩，绚丽或柔和，抽象或具体，有框或无框。无论做任何风格的图标，与系统软件整体设计协调一致是第一位的。通常企业软件系统的UI图标设计应以该行业性质为背景，满足UI设计“用户研究，交互设计，视觉设计，可用性测试”四个重要阶段。

图标的尺寸常有以下几种：16×16，24×24，32×32，48×48，64×64，128×128，256×256；图标的常用格式有以下几种：

1）PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小。但是请注意，PNG格式在网页中，IE6.0或者之前的所有版本不支持透明和半透明，可加入代码解决；

2）GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画。缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿。要解决此问题，必须在存成此格式时候，添加相同背景色的杂边；

3）JPG：有损压缩，优点是文件小，图像颜色丰富。缺点是不支持透明和半透明；

4）ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色。

4. 颜色

UI界面设计中整体色彩搭配要融为一体，起提示作用的部分要清楚醒目。不要强迫用户使用自己不喜欢的颜色，可以开发让用户自己修改界面的颜色的功能。可以增加程序对色盲用户的可访问性，使程序可运行在单色显示器上。确保在文本和背景色之间存在良好的对比。

一般情况下，界面元素可以使用中间色调，在256色模式下使用中间色调可以避免视觉上的刺激，适合长时间停留阅览。界面设计中，活动对象的色彩应该鲜明；而非活动对象的色彩应该暗淡。企业常用搭配的灰色系色调有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。但灰色背景的元素在界面上会让人感觉到不可编辑性，所以不能大面积使用。

5. 文字

UI设计中文字是作为占据界面设计中重要比率的元素，它的字体、大小、颜色和排布对软件界面整体设计十分重要。文字主要包括标题、信息、正文、链接等几种主要形式。标题是内容的简概说明，一般比较醒目、优先编排。标题文字的字体和大小可以根据当前界面设计内容及整体布局来定。正文信息内容里，文字以中号，黑色或中性色系有利于阅读为基本原则。不可修改的字段，一般使用灰色文字显示。链接文字以醒目显示，以便与一般内容文字区分。鼠标划过链接文字的颜色会改变。文字与背景色搭配应合理协调，反差不宜太大，少用刺目、强烈色调。尽量使用纯文本，而不是文字形式的图片，图片要远远大于纯文本，影响页面显示速度。

三、人机交互中的用户体验

人机交互是一门研究系统与用户之间的交互关系的学问。人机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流，并进行操作。下面以控件为例说明人机交互中用户体验的应用。

1. 按 钮

按钮：用于响应用户的点击操作，并在用户点击之后告知程序，从而去执行某种功能。常用按钮包括像“确定”、“取消”、“关闭”和“帮助”等命令按钮。同一系统中按钮大小应基本相近，名称不要太长，免得占用过多的界面位置，给阅读带来不便。

对于含有按钮的对话框不应该支持缩放，避免在窗口缩小时遮住右上方常用按钮。要将常用按钮与对话框主体分开，这种分开使常用按钮更易于查找和识别。如果页面内容较多，需要垂直滚动条时，同等功能的按钮应保持在内容顶部或底部始终呈现，方便用户随时看到。

排列在底部的常用按钮右对齐，通常依照按钮的使用频率及重要程度从左到右依次排列，这样适合用户的阅读习惯。当只有一个常用按钮时，一般将其居中放置。避免使用多行或多列的命令按钮，多行或多列的命令按钮对用户来说会产生烦躁情绪，并易混淆，在点击时容易产生错误。

2. 列表视图

列表视图：系统数据库中的列表视图是一个虚拟表，其内容由查询定义。列表视图包含一系列带有名称的行和列数据。行和列的数据来自定义视图的查询所引用的表，并且在引用视图时动态生成。列表视图至少15行，少于15行的列表视图不要有滑块，不需要滚动条。那些被经常使用的查询可以被定义为常规默认，从而使用户不必为以后的操作每次指定全部的条件。

通过视图，用户只能查询和修改他们所能见到的数据。数据库中的其它数据则既看不见也取不到。数据库授权命令可以使每个用户对数据库的检索限制在特定的数据库对象上，但不能授权在数据库特定行和特定的列上。在列表可排序时采用可单击的表头，可单击的表头只应用于排序。

3. 消息框

消息框：用于在必要的时候弹出来给用户一个明确的提示，通常由“提示信息+确认”按钮组成。可分成警告框、确认框和提示框三种。

1）警告框：用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

2）确认框：用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

3）提示框：用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

区分消息框的类型，采用带“确定”按钮的信息消息框向用户提供有警告的信息。采用带“是”、“否”，以及“确定”、“取消”按钮的确认框在继续进行前需要用户输入的情形下予以确认。采用危急提示框可以通知用户进行工作前需要修改一个错误。避免不必要的消息框，不要用出错消息来报告正常行为，而应该用来报告不正常或不期望的结果。不要对很容易恢复的操作进行确认。问用户问题时，采用“是”和“否”按钮代替“确定”和“取消”按钮，这样使问题易于理解。确保消息框选项按钮与文本一致，例如：不要用“是”和“否”为非提问消息的响应。

同样，不要使用多个效果相同的选项按钮。例如，除非有不同的操作结果，否则不要同时提供“否”和“取消”按钮。“否”按钮意味执行操作，而“取消”应该取消操作。在消息框弹出时会自动选择默认按钮，应将最安全的或最常用的选项作为默认按钮。

结 语

在上述方面谈到了企业后台管理界面UI设计中涉及到的几个方面。虽然企业UI界面设计属于IT后台展示部分，大多数系统或平台只是企业内部员工使用，但在开发建设软件系统的同时，在其强大的使用功能基础上，再加上专业的界面设计，舒适的用户体验，那么，软件系统对内将充分体现企业形象，提高部门影响力与凝聚力，让员工在使用过程中心情愉悦，集中精力的投入到工作中，提高工作效率。

对外将体现在企业文化团队建设上，部门的形象展示上。通过加强企业UI形象设计，才会让企业在同行业中占有更重要的地位，更好的展示企业的良好面貌与综合实力。