工资管理系统 用户界面设计
工资管理系统用户界面设计报告
文件状态：
[√] 草稿
[ ] 正式发布
[ ] 正在修改文件标识：Company-Project-SD-UI 当前版本：X.Y
作者：
完成日期：2012-12-25
机构公开信息
版本历史
目录
0. 文档介绍 (4)
0.1文档目的 (4)
0.2文档范围 (4)
0.3读者对象 (4)
0.4参考文献 (4)
0.5术语与缩写解释 (4)
1. 应当遵循的界面设计规范 (5)
2. 界面的关系图和工作流程图 (6)
3. 主界面 (7)
4. 子界面A (8)
5. 子界面B (9)
6. 美学设计 (10)
7. 界面资源设计 (11)
8. 其他 (15)
0. 文档介绍
0.1 文档目的
界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。界面设计文档可以让用户对软件产品有了更直观的了解，并且了解各个模块的设计及用意。
0.2 文档范围
文档包括员工管理界面设计，客户管理界面设计，产品管理界面设计，其中各个界面包括框架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计。
0.3 读者对象
购买系统的顾客、系统的所有者、开发者以及管理员。
0.4 参考文献
[1] 张海藩，《软件工程导论（第5版）》，清华大学出版社，1900年01月
[2] 杨培添，《软件界面设计》，电子工业出版社，2007年02月
[3] 林锐，《Web软件用户界面设计指南》，电子工业出版社，2005年5月
0.5 术语与缩写解释
1. 应当遵循的界面设计规范
软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。软件用户界面的设计应遵循以下几个基本原则：
◆用户导向原则：
明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。
要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。界面的设计者要清楚，用户之间差别很大，他们的能力各有不同。
比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的界面在不同的机器上显示就会造成混乱。
◆KISS原则：
KISS原则就是"Keep It Simple And Stupid"的缩写，简洁和易于操作是界面设计的最重要的原则。操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。
◆布局控制：
关于界面排版布局方面，很多界面设计者重视不够，界面排版设计的过于死板，甚至照抄他人。如果界面的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在界面设计上所要遵循的原理有：视觉平衡：
根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计界面时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个道理。
◆色彩的搭配和文字的可阅读性：
颜色是影响界面的重要因素，不同的颜色对人的感觉有不同的影响，例如：
?红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是
一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者
产生什么影响，为界面设计选择合适的颜色（包括背景色、元素颜
色、文字颜色、链节颜色等）。
?为方便阅读软件上的信息，可以参考报纸的编排方式将界面的内
容分栏设计，甚至两栏也要比一满页的视觉效果要好。
?另一种能够提高文字可读性的因素是所选择的字体，通用的字体
（中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适
合正文。如果在整个页面使用一些特殊字体（如华文彩云，华文
行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果
在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就
会疲劳，不得不转移到其他页面。
◆和谐与一致性：
通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的界面看起来应该是和谐的。。
一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。
◆个性化：
?符合网络文化
企业软件不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在软件上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。
?塑造软件个性
另外，软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业CI。
2. 界面的关系图和工作流程图
设计流程：
1、确定软件的整体风格：由于本系统软件设计的是面向中小型企事业单位
用的软件，为了能更方便管理信息，所有采用简洁清晰的设计风格。
2、界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON
做点缀。
3、确定界面设计的工具：用Microsoft Visual Studio 2008来设计
整个软件的界面设计。
4、编写JSP语言
3. 主界面
当密码错误时自动提醒出错：
4. 子界面A 登入界面
系统管理
用户登录修
改
密
码
注
册
退
出
系
统
该模块的主要功能：1、用户登录：
2、修改密码
3、注册
4、退出系统。
该模块功能的操作方式：如果是新用户，通过注册得到一个用户名，接着输入正确的用户名和登陆密码进入登陆界面，待操作完毕后退出系统。
5. 子界面B
管理界面
该模块的主要功能：1、用户信息管理
2、工资信息管理
3、用户出勤信息管理
该模块功能的操作方式：管理员通过此功能来对员工的工资信息进行管理，
做好员工工资的管理工作。
可以进行一些基本的操作：1、用户权限管理2、员工基本信息增3、员工基本信息删4、员工基本信息改
同时可以作进一步的操作：1、基本工资信息2、奖惩信息的查删3、扣税款信息的查删4、工资查询5、打印工资条以及出勤信息的查询及记录。
6. 美学设计
确定网站的整体风格：由于本系统软件设计的是面向中小型企事业单位用的
软件，为了能更方便管理信息，所有采用简洁清晰的
设计风格。
界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。 界面配色基本概念
（1）白纸黑字是永远的主题，谁都说不出不好来。
（2）界面最常用流行色
·兰色——蓝天白云，沉静整洁的颜色。
·绿色——绿白相间，雅致而有生气。
·橙色——活泼热烈，标准商业色调。
·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红
色。
（3）颜色的忌讳
·忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！
·忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。
·忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其
辱！
·忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，
而是最重要，最能揭示和反映主题的颜色，就象领导
者一样，虽然在人数上居少数，但起决定作用。
·忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无
力了，就象病夫一样无可救药。
·蓝色忌纯，绿色忌黄，红色忌艳。
（4）几种固定搭配
·蓝白橙：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
·绿白兰：绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON 做点缀。
·橙白红：橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。
·暗红黑：暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。
界面设计理念
（1）内容决定形式
先把内容充实上，再分区块，再定色调，再处理细节。
（2）先整体，后局部，最后回归到整体。
全局考虑，把能填上的都填上，占位置。然后定基调，分模块
设计。最后调整不满意的几个局部细节。
（3）功能决定设计方向
看软件的用途，决定设计思路.商业性的就要突出赢利目的；政
府型的就要
突出形象和权威性的文章；教育性的，就要突出师资和课程。
7. 界面资源设计
7.1 图标资源
7.2 图像资源
数据流程图DFD:
对应E-R图如下
7.3 界面组件
组件：将某一特定的web应用功能进行封装，包括数据和数据显示。组件有：Action类、meta文件……
8. 其他