工资管理系统用户界面设计

1、工资管理系统用户界面设计报告文件状态：文件标识：Company-Project-SD-UIV早稿当前版本：X.Y正式发布作者：正在修改完成日期：2012-12-25机构公开信息版本历史版本/状态作者参与者起止日期备注 TOC o 1-5 h z HYPERLINK l bookmark0 o Current Document 0文档介绍40.1文档目的40.2文档围40.3读者对象40.4参考文献40.5术语与缩写解释4 HYPERLINK l bookmark2 o Current Document X.应当遵循的界面设计规5 HYPERLINK l bookmark12 o Current

2、 Document 界面的关系图和工作流程图5 HYPERLINK l bookmark14 o Current Document 主界面5 HYPERLINK l bookmark16 o Current Document 4子界面A5 HYPERLINK l bookmark20 o Current Document 5.子界面B5 HYPERLINK l bookmark24 o Current Document 6美学设计6 HYPERLINK l bookmark34 o Current Document 界面资源设计6其他0.文档介绍0.1文档目的界面设计是为了满足软件专业化标准化

3、的需求而产生的对软件的使用界 面进行美化优化规化的设计分支。界面设计文档可以让用户对软件产品有了更 直观的了解，并且了解各个模块的设计及用意。0.2文档围文档包括员工管理界面设计,客户管理界面设计,产品管理界面设计，其 中各个界面包括框架设计，编程设计，按钮设计，面板设计，菜单设计，标签 设计，图标设计，滚动条及状态栏设计。0.3读者对象购买系统的顾客、系统的所有者、开发者以及管理员。0.4参考文献1海藩，软件工程导论（第5版）兀清华大学,1900年01月2培添,软件界面设计,电子工业，2007年02月 3林锐,Web软件用户界面设计指南，电子工业，2005年5月0.5术语与缩写解釋缩写.术语

4、解择SPP精简井行过程，Simplified Parallel ProcessSD系统设计 r System DesignKISS保持简单 f Keep It Simple And Stupid 1.应当遷循的界面设计规软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结 合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。软 件用户界面的设计应遵循以下几个基本原则：用户导向原则：明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点,必须要和用户来沟通，了解他们的需求、目标、期望和偏 好等。界面的设计者要清楚，用户之间差别很大，他们的能力各有不同。

5、比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不 清;有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相 当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很 费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、 存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差 别，设计出的界面在不同的机器上显示就会造成混乱。 KISS原则：KISS原则就是Keep It Simple And Stupid的缩写f简洁和易于操 作是界面设计的最重要的原则。操作设计尽量简单，并且有明确的操作提 示；软件所有的容和服务都在显眼处向用户予以说明等。

6、布局控制：关于界面排版布局方面，很多界面设计者重视不够，界面排版设计的 过于死板,甚至照抄他人。如果界面的布局凌乱，仅仅把大量的信息堆集 在页面上，会干扰浏览者的阅读。一般在界面设计上所要遵循的原理有： 视觉平衡：根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一 些。所以，为了达到视觉平衡,在设计界面时需要以更多的文字来平 衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下， 因此视觉平衡也要遵循这个道理。色彩的搭配和文字的可阅读性：颜色是影响界面的重要因素，不同的颜色对人的感觉有不同的影 响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到，是一种 快活的颜色；黑颜色显

7、得比较庄重,考虑到你希望对浏览者产生 什么影响,为界面设计选择合适的颜色（包括背景色、元素颜色、 文字颜色、链节颜色等）。为方便阅读软件上的信息，可以参考报纸的编排方式将界面的容 分栏设计,甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体,通用的字体（中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适 合正文。如果在整个页面使用一些特殊字体（如华文彩云，华文 行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果 在页面上大量使用，会使得阅读颇为费力,浏览者的眼睛很快就 会疲劳,不得不转移到其他页面。和谐与一致性：通过对软件的各种元素（颜色、字体、图形、空

8、白等）使用一定 的规格，使得设计良好的界面看起来应该是和谐的。致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一 致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需 要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各 种功能操作。当然,软件设计的一致性并不意味看刻板和一成不变， 有的软件在不同栏目使用不同的风格,或者随看时间的推移不断的改 版软件，会给浏览者带来新鲜的感觉。个性化：符合网络文化企业软件不同于传统的企业商务活动，要符合Internet网络文化 的要求。首先，网络最早是非正式性、非商业化的，只是科硏人员用 来交流信息。其次，网络信息是只在计算机屏幕上显示而没

9、有打印出 来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另 外，许多人在上网的时候是在家中或网吧等一些比较休闲,比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在软件上使用幽默的网络语言，创造种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。塑造软件个性另外，软件的整体风格和整体气氛表达要同企业形象相符合并应 该很好的体现企业CI。2.界面的关系图和工作流程图设计流程：1、确定软件的整体风格：由于本系统软件设计的是面向中小型企事业单位用的软件,为了能更方便管理信息，所有

10、采用简洁清晰的设计风格。用户权限管理丄员.LM本倍息增员匸歴本佶息删员匸歴本倍息改出勤倍息的査询及记录2、界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON 做点缀。3、确定界面设计的工具：用Microsoft Visual Studio 2008来设计整 个软件的界面设计。4、编写JSP语言3主界面当密码错误时自动提醒出错:负工密码修改用户信息管理模块负工信息修改O修改密码修改负工信息谆理负i4.子界面A登入界面该模块的主要功能：1、用户登录:2、修改密码 3、注册4、退出系统。该模块功能的操作方式：如果是新用户，通过注册得到一个用户名，接着输入正确的用 户名和登陆密码进入登陆界面

11、，待操作完毕后退出系统。5.子界面B管理界面用户权限管理员.L屣本倍息删员匸歴本信息改岀勋倍息的査询及记录该模块的主要功能：1、用户信息管理2、工资信息管理3、用户出勤信息管理该模块功能的操作方式：管理员通过此功能来对员工的工资信息进行管理，做好员工工资的管理工作。可以进行一些基本的操作：1、用户权限管理2、员工基本信息增3、 员工基本信息删4、员工基本信息改同时可以作进一步的操作：1、基本工资信息2、奖惩信息的查删3、扣税款 信息的查删4、工资查询5、打印工资条以及出勤信息的查询及记录。6美学设计确定的整体风格：由于本系统软件设计的是面向中小型企事业单位用的软件，为了能更方便管理信息，所有采

12、用简洁清晰的设计风格。 界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点 缀。界面配色基本概念(1 )白纸黑字是永远的主题,谁都说不出不好来。界面最常用流行色兰色一一蓝天白云，沉静整洁的颜色。绿色一一绿白相间，雅致而有生气。橙色一一活泼热烈，标准商业色调。暗红一一宁重、严肃、高贵，需要配黑和灰来压制刺激的红色。颜色的忌讳忌脏一一背景与文字容对比不强烈，灰暗的背景令人沮丧！忌纯一一艳丽的纯色对人的刺激太强烈抗议，缺乏涵。忌跳一一再好看的颜色，也不能脱离整体。脱离群众是自取其 辱！忌花一一要有一种主色贯穿其中，主色并不时面积最大的颜色, 而是最重要，最能揭示和反映主题的颜色,就象领导 者一样,虽然在人数上居少数，但起决定作用。忌粉一一颜色浅固然显的干净，但如果对比过弱，整得苍白无力 了，就象病夫一样无可救药。蓝色忌纯，绿色忌黄，红色忌艳。(4)几种固定搭配蓝白橙：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点 缀。绿白兰：绿为主调。白底,绿标题栏,兰色或橙色按钮或ICON 做点缀。橙白红：橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON 做点缀。暗红黑：暗红主调。黑或灰底，暗红标题栏，文字容背景为浅 灰色。界面设计理念容决定形式先把容充实上，再分区块，再定色调，再处理细节。先整体，后局部，最后回归到整体。全局考虑，把能填上的都填上，占位置。然后定基调，分