企业综合办公信息系统用户界面设计报告

企业综合管理系统

系统界面设计报告

文档作者： Day up

项目组长：卢铭翔

批准人：

批准日期：2012年月日

版本状态

审阅者

分发

目录

1引言 (3)

1.1编写目的 (3)

1.2读者对象 (3)

1.3术语解释 (3)

1.4参考资料 (3)

2系统需求 (4)

2.1综合事务管理子系统 (4)

2.2流程管理子系统 (4)

2.3台帐管理子系统 (5)

2.4系统管理子系统 (5)

3界面需求 (5)

4总体设计思路 (5)

4.1设计原则 (6)

4.2布局设计 (6)

4.3交互设计 (7)

5应遵循的设计规范 (9)

5.1布局规范 (9)

5.2色彩规范 (9)

5.3字体使用规范 (10)

5.4交互方式一致性规范 (10)

5.5按钮操作规范 (10)

5.6其他规范 (10)

6界面关系图或工作流图 (10)

6.1管理员登陆 (10)

6.2普通用户登录 (11)

7界面设计成果 (11)

7.1主界面 (12)

7.2统一用户管理子界面 (12)

7.3我的事务子界面 (13)

7.4流程管理子界面 (13)

7.5台帐管理子界面 (14)

7.6系统管理子界面 (14)

8界面设计总结 (15)

8.1设计经验分享 (15)

8.2设计缺陷总结 (15)

1引言

1.1 编写目的

本章节的主要内容是对企业综合管理系统的UI设计与实现的编写目的、读者对象、术语解释、执行标准和相关文档进行介绍。

确定用户界面的整体风格，初步设计软件的框架结构，为项目的详细设计、实现、测试和维护提供依据。

1.2 读者对象

用户、项目设计人员、项目开发人员、项目测试人员、项目设计人员。

1.3 术语解释

1.4 参考资料

《用户界面的设计、实现和评价》徐锡山等，国防科技大学，2003.7

《企业综合管理系统需求分析说明书》

网络资料：《软件界面设计布局标准规范》作者：披头

2系统需求

图2-1 系统功能结构图

2.1 综合事务管理子系统

在综合事务管理子系统中，含有待办事务、我申请的、我处理的及草稿箱四个模块。各模块含有其相应的一些功能。

待办事务：该模块主要负责当前登陆的用户查看并处理自己目前需要审批的各类流程。

我申请的：顾名思义，是用来展现当前登陆用户之前申请过的所有的流程，并且可以查看相应的流程信息。

我处理的：是用来展现当前登陆用的审批过的所有的流程，并且可以查看相应的流程信息。

草稿箱：是当前登陆用户之前还没有完成的或者还没有提交的流程，需要进一步完成并提交申请的流程列表。

2.2 流程管理子系统

本系统处理的流程主要包括审批流程和工单流程两类流程。审批流程主要是用来发起相应的工单流程，而工单流程审批结束后，会根据工单的类型和填写的信息，更新对应的台帐数据库表。

审批流程：是负责发起对应的一个或多个不同的工单流程。

工单流程：当工单流程审批结束后，则根据工单上填写的信息对所申请的资产分配给对应的使用人。

2.3 台帐管理子系统

台帐管理子系统主要是对企业内部的资产进行统一的管理，包括：企业的手机卡、3G上网卡、电话等资产，主要操作包括：增加、更新、查找和删除并提供Excel批量导入资产的功能。在该系统中，我们可以查看到企业相应资产的基本信息、使用人信息和空闲状态等。通过该管理系统，企业将更清晰，更轻松的管理企业的资产。

2.4 系统管理子系统

系统管理主要是对用户权限进行管理以及数据字典的管理，权限管理包括组织机构管理、用户组管理、角色管理和资源管理等。

主要是提供对组织机构、用户、角色和资源的增删查改，以及给用户和角色配置对应的系统资源，对用户和角色做统一的系统权限控制，使他们登陆到应用系统中仅获取各自应有权限。

例如在组织机构管理中，用户将看到公司的各个部门以及各部门的用户。并能够对用户进行添加、导入、修改、删除等各种权限操作。

3界面需求

根据本平台是属于公司员工用户管理的平台网站，所以网站采用的是简约的风格，运用绿色做主色调。界面简洁，系统界面主要参考了其他管理平台布局，形成了一个界面简洁，功能明确且易于操作的平台网站，做到实用，兼容性强。

4总体设计思路

这个平台主要是为企业提供一个综合的电子流程办公信息平台，因此网站的功能模块应该排版清晰简洁，以方便使用人员和公司领导对公司日常办公，使申请、审批，发放变得更加快捷、方便，而且上级人员申请只许自己直接通过网络审批就可以发放工单。

主页将把网站的功能和特色展现出来，通过几个模块来完成申请和分配过程，其中包括我的事务、流程管理、台帐管理、系统管理，同时显示出显示流程的名称和流程的说明，在页面的最上边显示日期、登录人和所属的部门。

网站在满足用户需求的，保证功能完善的同时，会采用经典蓝色背景主题，给用户清晰专业的感觉，便于人机与功能之间的交互。

4.1 设计原则

以用户需求作为设计中心来源，从用户需求出发来提高用户体验；

功能需求为主要任务，其次是功能实现的方法。在界面左边将功能统一显示出来，让用户一眼便能明白有需要的相关操作在哪里，有哪些功能应该怎么操作，从而提高用户体验的效果；

明确设计风格，公司内部网站要简洁大方，清晰美观；

遵循客户对任务和需求的见解，听取客户提出的意见，尽量修改到客户所要求的结果；

合理布局，网站页面主要有文字，图片，色彩等元素组成。界面要有机制的组织这些元素，充分清晰的表现出网站主题和信息架构，给用户良好的操作界面和视觉效果；

响应系统整体设计，系统初步架构拟定好之后。

4.2 布局设计

主界面的布局要清晰整洁,让用户在主界面清晰的布局上能尽快找到自己所需要的功能，要能充分展现系统所提供的信息，加强用户体验。界面实用且兼容性强，以方便用户实用。

页面的左边是母版页，含网站名称、欢迎信息等内容。左边是模块导航栏，通过左边导航栏进入相关模块，在右边主页面显示，主页面根据不同模块显示不同内容。

4.3 交互设计

交互设计主要包括网站设计过程中的整体架构设计思路和网站的框架实现思路。通过对产品的界面和行为进行交互设计，让产品和用户之间建立一种有机关系，从而可以有效达到使用者的目标。

4.3.1设计思路

界面要形成对用户希望的使用方式，尊重用户及其目标。

在交互设计上集中体现在用户操作上的更高效率，以及用户的满意度。

最大可能性的提示信息，在需要的地方给出相应的提示，方便用户操作。

最大化的可见价值和最小化的支持成本是完全处于客户的角度上考虑的，尽量使客户达到低投资高回报的要求。

更快、更简单的实现以及简单的用户手册更能加强用户体验，使其用的舒心，容易操作，不至于操作复杂。

安全的设计，用户的一些隐私信息部至于被泄露，从而使网站的安全性加强，不受有害信息侵入。

4.3.2实现思路

从计算机科学的角度来说，将交互设计看作是解决数据存储和进行有效的访问的技术，在设计过程中注重从算法和信息架构上对界面交互进行优化，注重逻辑性；从心理学的角度来说，将交互

设计看作是非理性人在有限的认知资源下寻求问题解决的过程，在设计过程中注重从人的外显行为和内在认知范式上对界面进行优化，注重情境相关性。

一、页面信息规范

1.标题规范

用于规定整个产品中所有不同层级不同功能的页面应该使用的标题的规则。

2.新窗口链接规范

用于规定页面链接是采用新窗口打开还是本窗口打开的规则。

二、交互信息规范

交互提示规范主要用于规定在交互过程中交互的方式及其信息提示，包括：

1.预先信息提示

所有交互进行前需要提供充分给用户的预先应该知道的提示信息。

a.表单提交类

表单提交的步骤，每个表单项的要求需要给出提示信息。（如申请提交确认。）

b.差异化规则

当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示。或者给出帮助链接。

2、操作信息提示

所有交互进行中需要提供操作相关的提示。

a.操作确认提示

一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。

b.操作错误提示

当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交）

3、结果信息提示

交互进行后给出结果反馈是应该给出适当的提示

a.查询类结果

任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。

b.保存类结果

一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、

失败红色、普通灰色。

c.附加类结果

一个表单是对其他数据进行附加的，如评论等。提交成功后应直接跳转到操作产生的结果展示部分。（如提交评论后应该直接展示给用户他提交的评论）

三、通用控件规范

当有一些功能会被多个模块复用的时候（如标准评论框、标准好友选择器等），需要把这些功能提炼出来设计成通

用控件被多个模块共用。

有了页面信息规范、交互信息规范、通用控件规范就能保证页面信息的一致、交互方式及提示的一致、通用功能模块一致。从而保证产品的一致性，并提高产品质量。

5应遵循的设计规范

5.1 布局规范

1.界面窗口长宽要合适，让用户赏心悦目；

2.窗口上按钮布局要与界面协调，不能太拥挤也不要太空旷；

3.不要有过于刺眼的颜色，色彩不要过于繁杂；

4.菜单深度不要太深，快捷键不要冲突；

5.工具栏上的图标简洁美观，尽量符合其实际含义；

6.状态栏上要显示操作后窗体发生的变化。

5.2 色彩规范

1.前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等；

2.主色调为浅色，浅绿或者淡蓝，淡色可以使人舒适，

3.如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色；

4.字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

5.3 字体使用规范

1.目录页用小字号，精致简洁整齐；

2.正文页用大字号。为的是让用户看得舒坦；

3.慎用不容易看清楚的楷体，楷体的作用等于图片，主要起美化版面的作用；

4.多用对搜索引擎友好的标粗，来表示重点。

5.4 交互方式一致性规范

1.打开链接一律在新选项卡中打开，避免用户当前信息丢失；

2.窗口长宽比例要协调。

5.5 按钮操作规范

1.按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置；

2.长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度；

3.按钮的大小要与界面的大小和空间要协调；

4.避免空旷的界面上放置很大的按钮。

5.6 其他规范

首页更新成本

a)首页设计不能只考虑美观、协调，要考虑24小时更新一遍之要求。更新是网站的生命，

一定要最大限度地降低首页更新成本。

b)交叉自动同步更新的设计，可有效降低各种首页更新成本，给读者内容丰富即时的感觉。

c)更新即时的首页是网站的资源，因为是资源，更多的标题会拥上这个首页。如此，正循

环，这个首页也就火了。更新不即时的首页是网站的鸡肋，会越来越寂寞，最终会被荒废。

d)每个首页的设计成至少要有一个读者点击进去的理由。即时更新比独家内容成本低。

6界面关系图或工作流图

6.1 管理员登陆

图6-1管理员登陆界面关系图

当登录的用户为管理员时候，管理员能看到以权限管理模块下的角色管理、资源管理、角色资源界面，统一用户管理界面下的用户管理、群组管理以及组织单元管理界面。

6.2 普通用户登录

图6-2 普通用户登录界面图

当登录的用户为普通用户时，用户能查看自己的用户信息并根据需要修改用户信息。同时

用户也可以根据管理员分配的资源权限访问相应的资源模块。.

7 界面设计成果

本系统界面主要分为3个交互展示部分，即主标题栏的相关操作和根据登录用户角色的不同而有相应区分的功能菜单部分以及根据不同功能菜单定制的展现页面。

7.1 主界面

图7-1 主界面布局

上图为平台主界面格局，主界面上方为简单的一些基本操作和个人信息，退出系统等按键，下方左侧为功能区，右边为实际操作的工作区。

7.2 统一用户管理子界面

图7-2 统一用户管理界面

上图为统一用户管理界面，左边功能栏列出了当前登录用户所拥有的权限功能，用户可以点击进入到相关模块进行管理操作。例如在组织机构管理中，用户将看到公司的各个部门以及各部门的用户。并能够对用户进行添加、导入、修改、删除等各种权限操作。

7.3 我的事务子界面

图7-3我的事务子界面

上图为本平台我的事务界面，本界面保持左边功能栏、母版页不变，以表格的方式列出我的事务界面，用户可以再该界面查询待办事项、我申请的、我处理的以及草稿箱，可以在该界面通过相关按钮对用户需要做的事、已经做完的和还没做完的事进行查询、修改的功能。

7.4 流程管理子界面

图7-4 流程管理页面

上图为流程管理页面，用户进入到审批流程可对待审批的事项进行相关操作。若进入到工单流程，则可对所申请的相关事物进行供给，如：手机3G审批流程、手机费用工单流程和3G费用工单流程。

7.5 台帐管理子界面

图7-5 台帐管理页面

上图为台帐管理子页面，在台帐管理界面中只包含资产台帐，在资产台帐中用户可以对企业的手机卡号、3G上网卡和电话等资产进行管理。

7.6 系统管理子界面

图7-6 系统管理页面

在系统管理中包含权限管理和数据字典两个子项目。数据字典是对该系统中个各事务需要注意的进行总结，这就使得管理员对系统的管理更方便、快捷。

8界面设计总结

8.1 设计经验分享

本次界面左边框的设计非常好，左边的模板排列让用户对功能一目了然，能让用户最快找到自己需要的功能。面布局条理清晰模块鲜明增强了用户体验，界面实用、美观，给用户带来很好的人机交互体验。

基本操作按钮统一放在左边，让用户操作起来非常方便。

本次清淡的色彩布局也是一大亮点，以浅绿，浅蓝色等其他淡色调系辅助搭配，以清爽简洁为主。合理利用颜色、图像和显示效果来达成内容与形式的统一。淡绿的背景颜色，让忙于工作的人心中带来一丝清凉，避免大面积红、黑之类刺眼的颜色，在给用户带来专业简洁感的同时，清淡的色调也非常保护用户眼睛。

8.2 设计缺陷总结

缺陷：缺少快捷键，让习惯键盘操作的用户人机交互体验会稍差一点。

产生原因：平台暂时还没有实现快捷键功能。

改进建议：在后续的完善阶段看需求酌情添加。