工资管理系统 用户界面设计参考模板

1、1 / 16工资管理系统用户界面设计报告文件标识：Company-Project-SD-UI当前版本：X.Y作 者：文件状态： 草稿 正式发布 正在修改完成日期：2012-12-25机构公开信息版 本 历 史版本/状态作者参与者起止日期备注 目目目 录录录 0. 文档介绍文档介绍.40.1 文档目的.40.2 文档范围.40.3 读者对象.40.4 参考文献.40.5 术语与缩写解释.41. 应当遵循的界面设计规范应当遵循的界面设计规范.52. 界面的关系图和工作流程图界面的关系图和工作流程图.53. 主界面主界面.54. 子界面子界面 A .55. 子界面子界面 B.56. 美学设计美学设计

2、.67. 界面资源设计界面资源设计.68. 其他其他.60. 文档介绍文档介绍0.1 文档目的文档目的界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。界面设计文档可以让用户对软件产品有了更直观的了解，并且了解各个模块的设计及用意。0.2 文档范围文档范围文档包括员工管理界面设计，客户管理界面设计，产品管理界面设计，其中各个界面包括框架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计。0.3 读者对象读者对象购买系统的顾客、系统的所有者、开发者以及管理员。0.4 参考文献参考文献 1 张海藩， 软件工程导论（第 5

3、 版） ，清华大学出版社，1900 年 01 月2 杨培添， 软件界面设计 ，电子工业出版社，2007 年 02 月3 林锐， Web 软件用户界面设计指南 ，电子工业出版社，2005 年 5 月0.5 术语与缩写解释术语与缩写解释缩写、术语缩写、术语解解 释释SPP精简并行过程，Simplified Parallel ProcessSD系统设计，System DesignKISS保持简单，Keep It Simple And Stupid1. 应当遵循的界面设计规范应当遵循的界面设计规范软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设

4、计变成了一门独特的艺术。软件用户界面的设计应遵循以下几个基本原则： 用户导向原则：用户导向原则：明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。界面的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲） ，对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽

5、视了这些差别，设计出的界面在不同的机器上显示就会造成混乱。 KISSKISS 原则：原则：KISS 原则就是Keep It Simple And Stupid的缩写，简洁和易于操作是界面设计的最重要的原则。操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。 布局控制：布局控制：关于界面排版布局方面，很多界面设计者重视不够，界面排版设计的过于死板，甚至照抄他人。如果界面的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在界面设计上所要遵循的原理有：视视觉觉平平衡衡：根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉

6、平衡，在设计 界面时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个道理。 色色彩彩的的搭搭配配和和文文字字的的可可阅阅读读性性 ：颜色是影响界面的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为界面设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。为方便阅读软件上的信息，可以参考报纸的编排方式将界面的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体

7、，通用的字体（中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。 和和谐谐与与一一致致性性 ：通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的 界面看起来应该是和谐的。一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。当然，软件设

8、计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。 个个性性化化：符合网络文化企业软件不同于传统的企业商务活动，要符合Internet 网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的、非正式性的、轻

9、松活泼的文化。在软件上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。塑造软件个性另外，软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业 CI。2. 界面的关系图和工作流程图界面的关系图和工作流程图设计流程：1、 确定软件的整体风格：由于本系统软件设计的是面向中小型企事业单位用的软件，为了能更方便管理信息，所有采用简洁清晰的设计风格。工资管理系统系统管理用户信息管理工资信息管理用户出勤信息管理用户登录修改密码注册推出系统用户权限管理员工基本信息 增员工基本信息 删员工基本信息 改基本工资信息 奖惩信息的查删扣税款信息查删出勤信息的查询及记录工资

10、查询打印工资条 2、界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON 做点缀。3、确定界面设计的工具 ：用 Microsoft Visual Studio 2008 来设计整个软件的界面设计。4、编写 JSP 语言3. 主界面主界面进入登陆模块输入用户名、密码注册新用户注册界面 顾客身份公共用户界面验证是否有效注册成功员工顾客管理员登陆成功用户界面当密码错误时自动提醒出错：4. 子界面子界面 A登入界面登入界面系统管理用户登录修改密码注册退出系统该模块的主要功能：1、用户登录：2、修改密码3、注册4、退出系统。该模块功能的操作方式：如果是新用户，通过注册得到一个用户名，接着输入正确

11、的用户名和登陆密码进入登陆界面，待操作完毕后退出系统。5. 子界面子界面 B管理界面管理界面用户信息管理工资信息管理用户出勤信息管理用户权限管理员工基本信息 增员工基本信息 删员工基本信息 改基本工资信息 奖惩信息的查删扣税款信息查删出勤信息的查询及记录工资查询打印工资条 管理界面该模块的主要功能：该模块的主要功能： 1、用户信息管理2、工资信息管理3、用户出勤信息管理该模块功能的操作方式：该模块功能的操作方式：管理员通过此功能来对员工的工资信息进行管理，做好员工工资的管理工作。可以进行一些基本的操作：1、用户权限管理 2、员工基本信息 增 3、员工基本信息 删 4、员工基本信息 改用户信息管

12、理用户权限管理员工基本信息 增员工基本信息 删员工基本信息 改同时可以作进一步的操作：1、基本工资信息 2、奖惩信息的查删 3、扣税款信息的查删 4、工资查询 5、打印工资条以及出勤信息的查询及记录。 工资信息管理基本工资信息 奖惩信息的查删扣税款信息查删工资查询打印工资条 用户出勤信息管理出勤信息的查询及记录6. 美学设计美学设计确定网站的整体风格 ：由于本系统软件设计的是面向中小型企事业单位用的软件，为了能更方便管理信息，所有采用简洁清晰的设计风格。界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON 做点缀。 界界面面配配色色基基本本概概念念（1 1）白白纸纸黑黑字字是是永永远远

13、的的主主题题，谁谁都都说说不不出出不不好好来来。（2 2）界界面面最最常常用用流流行行色色 兰色蓝天白云，沉静整洁的颜色。 绿色绿白相间，雅致而有生气。 橙色活泼热烈，标准商业色调。 暗红宁重、严肃、高贵，需要配黑和灰来压制刺激的红 色。（3 3）颜颜色色的的忌忌讳讳忌忌脏脏背景与文字内容对比不强烈，灰暗的背景令人沮丧！忌忌纯纯艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。忌忌跳跳再好看的颜色，也不能脱离整体。脱离群众是自取其辱！忌忌花花要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。 忌忌粉粉颜色浅固然显的干

14、净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。 蓝蓝色色忌忌纯纯，绿绿色色忌忌黄黄，红红色色忌忌艳艳。（4 4）几几种种固固定定搭搭配配 蓝蓝白橙：蓝为主调。白底，蓝标题栏，橙色按钮或ICON 做点缀。 绿绿白兰：绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。 橙橙白红：橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON 做点缀。 暗暗红红黑：暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。 界界面面设设计计理理念念（1）内内容容决决定定形形式式 先把内容充实上，再分区块，再定色调，再处理细节。（2）先先整整体体，后后局局部部，最最后后回回归归到到整整体体。 全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。（3）