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

工资管理系统用户界面设计报告文件状态：[√]草稿[]正式发布[]正在修改文件标识：Company-Project-SD-UI当前版本：X.Y作者：完成日期：2012-12-25机构公开信息项目名称，《用户界面设计报告》机构名称，2012第2页共15页版本历史版本/状态作者参与者起止日期备注项目名称，《用户界面设计报告》机构名称，2012第3页共15页目目录录0.文档介绍............................................................................................................................40.1文档目的.......................................................................................................................40.2文档范围.......................................................................................................................40.3读者对象.......................................................................................................................40.4参考文献.......................................................................................................................40.5术语与缩写解释............................................................................................................41.应当遵循的界面设计规范.................................................................................................52.界面的关系图和工作流程图.............................................................................................63.主界面................................................................................................................................74.子界面A.............................................................................................................................85.子界面B.............................................................................................................................96.美学设计..........................................................................................................................107.界面资源设计...................................................................................................................118.其他..................................................................................................................................15项目名称，《用户界面设计报告》机构名称，2012第4页共15页0.文档介绍0.1文档目的界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。界面设计文档可以让用户对软件产品有了更直观的了解，并且了解各个模块的设计及用意。0.2文档范围文档包括员工管理界面设计，客户管理界面设计，产品管理界面设计，其中各个界面包括框架设计，编程设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计。0.3读者对象购买系统的顾客、系统的所有者、开发者以及管理员。0.4参考文献[1]张海藩，《软件工程导论（第5版）》，清华大学出版社，1900年01月[2]杨培添，《软件界面设计》，电子工业出版社，2007年02月[3]林锐，《Web软件用户界面设计指南》，电子工业出版社，2005年5月0.5术语与缩写解释缩写、术语解释SPP精简并行过程，SimplifiedParallelProcessSD系统设计，SystemDesignKISS保持简单，KeepItSimpleAndStupid…项目名称，《用户界面设计报告》机构名称，2012第5页共15页1.应当遵循的界面设计规范软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。软件用户界面的设计应遵循以下几个基本原则：用户导向原则：明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。界面的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的界面在不同的机器上显示就会造成混乱。KISS原则：KISS原则就是KeepItSimpleAndStupid的缩写，简洁和易于操作是界面设计的最重要的原则。操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。布局控制：关于界面排版布局方面，很多界面设计者重视不够，界面排版设计的过于死板，甚至照抄他人。如果界面的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在界面设计上所要遵循的原理有：视觉平衡：根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计界面时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个道理。色彩的搭配和文字的可阅读性：颜色是影响界面的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为界面设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。为方便阅读软件上的信息，可以参考报纸的编排方式将界面的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体，通用的字体（中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适项目名称，《用户界面设计报告》机构名称，2012第6页共15页合正文。如果在整个页面使用一些特殊字体（如华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。和谐与一致性：通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的界面看起来应该是和谐的。。一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。个性化：符合网络文化企业软件不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在软件上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。塑造软件个性另外，软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业CI。2.界面的关系图和工作流程图设计流程：1、确定软件的整体风格：由于本系统软件设计的是面向中小型企事业单位用的软件，为了能更方便管理信息，所有采用简洁清晰的设计风格。项目名称，《用户界面设计报告》机构名称，2012第7页共15页工资管理系统系统管理用户信息管理工资信息管理用户出勤信息管理用户登录修改密码注册推出系统用户权限管理员工基本信息增员工基本信息删员工基本信息改基本工资信息奖惩信息的查删扣税款信息查删出勤信息的查询及记录工资查询打印工资条2、界面色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。3、确定界面设计的工具：用MicrosoftVisualStudio2008来设计整个软件的界面设计。4、编写JSP语言3.主界面当密码错误时自动提醒出错：进入登陆模块输入用户名、密码注册新用户注册界面顾客身份公共用户界面验证是否有效注册成功员工顾客管理员登陆成功用户界面项目名称，《用户界面设计报告》机构名称，2012第8页共15页4.子界面A登入界面系统管理用户登录修改密码注册退出系统该模块的主要功能：1、用户登录：2、修改密码3、注册4、退出系统。该模块功能的操作方式：如果是新用户，通过注册得到一个用户名，接着输入正确的用户名和登陆密码进入登陆界面，待操作完毕后退出系统。项目名称，《用户界面设计报告》机构名称，2012第9页共15页5.子界面B管理界面用户信息管理工资信息管理用户出勤信息管理用户权限管理员工基本信息增员工基本信息删员工基本信息改基本工资信息奖惩信息的查删扣税款信息查删出勤信息的查询及记录工资查询打印工资条管理界面该模块的主要功能：1、用户信息管理2、工资信息管理3、用户出勤信息管理该模块功能的操作方式：管理员通过此功能来对员工的工资信息进行管理，做好员工工资的管理工作。可以进行一些基本的操作：1、用户权限管理2、员工基本信息增3、员工基本信息删4、员工基本信息改用户信息管理用户权限管理员工基本信息增员工基本信息删员工基本信息改同时可以作进一步的操作：1、基本工资信息2、奖惩信息的查删3、扣税款信息的查删4、工资查询5、打印工资条以及出勤信息的查询及记录