概要设计(Web)
人事管理系统功能规范(Web 部分)
文档信息：
项目组成：
文档变更历史：
相关文档：
审核结果：
目录
1 简介 (4)
1.1 背景 (4)
1.2 目标 (4)
2 功能描述 (4)
Web 部分 (5)
2.1.1 登录 (5)
2.1.2 导航栏 (7)
2.1.3 员工资料管理 (8)
2.1.4 请假提交 (13)
2.1.5 请假审核 (21)
2.1.6 考勤管理 (29)
2.1.7 加班申请 (36)
2.1.8 加班审核 (42)
2.1.9 业绩评定 (52)
2.1.10 工资查询 (61)
2.1.11 登出 (69)
1简介
1.1 背景
蓝山公司的主营业务是软件开发，公司规模为70人左右，其部门包括人事部、财务部、研发部、销售部等。公司的人员类型有以下几种：普通员工、部门经理、人事部成员和总经理。其中人事部有一个人事经理，三个人事助理。该管理系统的主要功能是管理员工资料、管理员工考勤、计算员工薪资和业绩评定等。大部分涉及对敏感数据修改的工作都仅由人事部完成，如计算工资、修改考勤记录；并且有些只有人事经理才可以处理，如定制部门、指定员工的基本薪资等。普通员工可以通过Web 浏览自己的基本资料、考勤信息、薪资信息和请假记录等。员工也可以通过Web 提出请假和加班申请，如果所属部门的经理审批通过，人事部就可以登记在案。人事经理默认拥有人事助理的所有权限，部门经理默认拥有普通员工的所有权限，总经理默认拥有部门经理的所有权限。
1.2 目标
该文档描述人事管理系统的详细功能定义，并对模块划分、业务流程进行了定义。所有设计人员、开发人员、测试人员以及其他团队成员都应该以该文档作为产品的功能定义，并衍生出其他文档。
2功能描述
人事管理系统主要用于对公司内部员工、部门等人事信息进行管理，并提供了相关人事职能，为人事部提供了管理工具，同时让员工可以通过公司内部网络实现自我管理，提高了整体运作效能。
公司的人员类型有以下几种：普通员工、部门经理、人事部经理和人事助理。权限定义如表 1 所示。
表 1
整个系统分为两大主要功能模块和后台数据库服务器模块（见图1）：
i.通过B/S（浏览器/服务器）结构实现的Web部分
Web部分主要供员工使用。普通员工可以通过Web 浏览自己的基本资料、考
勤信息、薪资信息和请假记录等。员工也可以通过Web 提出请假和加班申请。
ii.通过C/S（客户端/服务器）结构实现的Windows部分
Windows部分主要供人事部使用。主要功能是管理员工资料、管理员工考勤、
计算员工薪资和业绩评定等。大部分涉及对敏感数据修改的工作都仅由人事部
完成，如计算工资、修改考勤记录；并且有些只有人事经理才可以处理，如定
制部门、指定员工的基本薪资等。
iii.通过SQL Server 2000企业版实现的后台数据库服务器模块
数据库中存储了人事管理系统中所有的信息和数据，为保证稳定性和良好的并
发访问能力，采用SQL Server 2000企业版来实现。
图 1 人事管理系统结构图
本文档只描述了Web部分的功能规范，其他部分可以参看另外两门课程（《SQL Server 2000 数据库程序设计》和《基于C# 的Windows 应用程序设计》或《基于VB. NET 的Windows 应用程序设计》）的功能规范。
Web 部分
2.1.1登录
登录界面如图2所示。登录时，需要输入用户名及密码，并单击“登录”按钮，完成登录过程。
图 2 登录页面
功能说明：
●登录名/密码
●登录名必须是本单位数据库中已经设置好的登录名，否则登录时会提示出错
●读取浏览器端的Cookie值，如果员工以前登录过，则自动显示上次的登录名，光
标定位在“密码”文本框。若以前没有登录过，则光标停留在“登录名”文本框，
且文本框显示空白
●密码长度不得超过20个字符，超过以后限制输入。可允许的字符至少要包括数字
（0~9）、大写字母（A~Z）和小写字母（a~z）。但在这个登录页面，密码没有受到
限制。在这里如果密码不正确，则无法进入系统。限制密码格式是在后面的“修改
登录密码”模块涉及的
●密码用掩码* 显示，长度根据已设值进行限制（默认为8~20位），不能为空。若
为空或是没有按照格式输入，则显示“密码错误，请重试！”
●登录
●如果登录者的输入是正确的，则直接进入“员工资料管理”模块的主界面
●若“登录名”输入有误，则在“登录”按钮下面显示错误提示信息：“用户不存在，
请重试！”，鼠标停留在“登录名”文本框，如图3所示
●若“密码”输入有误，则在“登录”按钮下面显示错误提示信息：“密码错误，请
重试！”，鼠标停留在“密码”文本框
控件说明：
2.1.2导航栏
员工登录成功后所看到的每一个网页的顶部都有一个导航栏，该导航栏上面列出了所有功能模块的链接，单击链接即可进入相应模块的主界面。该导航栏方便了员工在不同模块之
间的切换，如图4 所示。
功能说明：
点击导航栏中每个功能模块的链接，都会进入相应模块的主界面。这个主界面默认为该功能模块下属的几个子链接中的第一个链接页。但是，有可能会根据登录者拥有的权限不同而出现不同的登录页面。比如在“请假审核”模块中，若普通员工进入则会显示“对不起，该网页属经理专用，请退出”等字样，只有经理级别以上的登录者才可以进入该页面。
控件说明：
2.1.3员工资料管理
员工登录成功后首先进入的就是该模块，该模块共有如下三个网页，可通过网页左侧的链接进行切换。默认显示“显示员工资料”页。
(1)显示员工资料页
该页为模块的起始页，该页界面如图5所示。
图 5 员工资料控件说明：
(2)员工查询页
默认界面如图6所示。
图 6 员工查询
功能说明：
●查询姓名的输入框
●在按员工姓名查询时，系统支持模糊查询，即可以只输入姓名的一部分
●文本框可以为空，但搜索结果会显示“对不起，没有找到匹配的记录”
●搜索按钮
●如果查询结果只有一个人，则网页直接跳转到员工资料页
●如果查询结果有多个，则以DataGrid形式显示每一员工的登录名、姓名、所属部门
及电子邮件，如图7所示
?单击DataGrid 控件中的员工姓名则跳转到员工资料页
?单击所属部门则在DataGrid 控件中重新显示该部门的所有员工，如图8所示
?单击电子邮件则启动邮件客户端程序
图7 多条查询结果
图8 同一部门搜索结果
控件说明：
(3)修改登录密码页
默认界面如图9所示。
图9 密码修改
功能说明：
●单击“修改密码”按钮时，旧密码与数据库中的密码进行校验。若不符，则在“旧
密码”文本框右处显示“旧密码不正确”，同时清空所有文本框
●密码长度根据已设值进行限制（默认为8~20），且密码中必须包含数字、大写字母
和小写字母。若不符的话，则在“新密码”文本框右处显示“请输入复杂密码”，
同时清空所有文本框
●新密码不能与旧密码相同，且不能为空。若相同，则在“新密码”文本框右处显示
“新密码不能与旧密码相同”。若为空，则在“新密码”文本框右处显示“密码不
能为空”
●新密码与新密码确认必须相同。若不相同，则在“新密码”文本框右处显示“密码
确认不正确”
控件说明：
2.1.4请假提交
员工可通过单击导航栏上的“请假提交”进入该模块。共有如下四个网页，可通过网页左侧的链接进行切换。默认显示“提交请假”页。
(1)提交请假页
该页为模块的起始页，默认界面如图10所示。
图10 请假提交
功能说明：
●如果请假时间超过预设值（默认为5天，40小时），则审核者必须为总经理。一旦
用户选择的天数超过默认值，则下拉框中的可选值不变，但详细记录中的审核者默认为“总经理”
●当按下“提交”按钮时，需要检查请假是否符合如下规定
?请假事由不能为空
?输入日期必须正确，起始时间不能晚于结束时间
?所请的小时数不能超过可用的年假小时数
?已申请的请假时间不能重复申请使用
●如果提交成功，则显示提示信息
●如果提交失败，则显示出错提示。分别为：
?请假事由不能为空，如图11所示
?请检查输入日期的正确性
?所请的小时数超过可用的年假小时数
?提交请假记录失败
控件说明：
(2)取消请假页
默认界面如图12所示。
图12 取消请假
功能说明：
●网页显示所有已提交但没有批准的请假记录。用DataGrid控件显示结果
●点击数据网格中的“详细情况”时，显示这条记录的审批者以及请假原因，如图13
所示
●如果没有符合条件的记录，则不显示DataGrid，而显示提示信息：“对不起，没有
可取消的记录”，如图14所示
当单击数据网格最右面的“取消”按钮时，则弹出对话框“真的要取消吗？”，当用户单击“是”，则对选定的记录进行取消操作
图13 请假的详细情况
图14 没有可取消的记录
控件说明：
(3)历史记录查询页
默认界面如图15所示。
图15 历史查询首页
功能说明：
●网页最初显示如图15所示，起始时间默认为一个月之前的日期，结束时间默认为
当前日期的第二天
●在用户单击“搜索”按钮之后，若有记录则在该页面上以DataGrid 控件的形式显
示所有的记录，如图16所示
●若没有记录，则显示“没有找到任何记录！”，如图17所示
图17没有找到记录
●当输入的时间格式不正确时，会有错误提示信息出现，如图18所示。起始时间和
结束时间中有任一个为空时会有“该项不能为空！”的出错提示出现
图18 日期格式错误
●单击DataGrid中的某条记录的“详细情况”后，则在DataGrid的上面显示该记录
的详细信息，如图19所示。详细信息包括
?审批者
?请假事由
?如果是已否决，则显示否决理由
图19 详细情况
控件说明：
人机交互技术Web界面设计
人机交互技术 Web界面设计学号: 姓名:
一、Web界面设计的基本概况 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。 模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 二、Web界面设计要求及目的 Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。 Web界面设计要素 a)Web界面布局
web界面设计
一、实验目的和要求 1) 熟悉Web站点的信息交互模型和结构 2) 熟悉Web界面设计的基本思想和原则 3) 掌握Web界面设计的工具和技术 二、实验内容与原理 (一) 实验内容: 要求根据Web界面设计的原则(简洁、一致性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。 (二)实验步骤： 1)选择一种界面设计工具，并熟悉它； 2）针对一个具体的网站（学校、个人、公司）设计应用，进行Web界面规划和概要设计； 3）选择WEB界面设计要素，设计出网页 三、设计方案 1）使用的数据库是MySQL，数据库表如图所示： news表: news_user表:
2)该网站为新闻发布系统，该网站有浏览新闻、添加新闻、修改新闻、删除新闻功能。用户权限分为管理员、普通用户权限。 a)网站主页 b）单击标题，检测如果未登陆，进入登陆页面
c)如果没有登陆账号，则进行注册
d)如果登陆成功则进入新闻浏览界面。如果是普通用户，浏览界面如图所示： 如果是权限用户，浏览界面如图所示： e)详细内容：
f) 如果是管理员用户，则有更新新闻权限,如下图所示： f) 如果是管理员用户，则有添加新闻权限,如下图所示：
我使用的开发工具是VS2012,工程类型为https://www.360docs.net/doc/6e10728175.html, Web Forms Application.VS2012集成了https://www.360docs.net/doc/6e10728175.html, MVC 4，全面支持移动和HTML5，WF 4.5相比WF 4，更加成熟。该版本中包含了新的Metro应用程序模板，增加了JavaScript功能、一个新的动画库，并提升了使用XAML的Metro应用程序的性能。 3）网站业务流图
一个Web系统的界面设计和开发
一个Web系统的界面设计和开发1.工作流程（下图，是整个开发过程中与界面设计相关的主要流程工作） 从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。 在需求分析阶段，参与了对客户的访问和调研； 在概要设计阶段，参与了部分系统设计分析工作； 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈； 在代码开发阶段，参与了系统表现层的设计开发。
2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。 本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则 在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。 一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。 ·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例
Web界面设计规范方案
Web应用界面设计规范（Design Specific ation for Web UI） 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。 到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁，终于到公司了，但是你却迟到了。 结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？ ②什么是用户体验
用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。 表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。 表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。 表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种
Web界面设计规范
Web应用界面设计规范（Design Spe cification for Web UI） 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。 到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁，终于到公司了，但是你却迟到了。 结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？ ②什么是用户体验 用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。 表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。 表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。 表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。
Web界面设计
1100310120 潘飞达 Web界面设计 一实验目的和要求 1) 熟悉Web站点的信息交互模型和结构 2)熟悉Web界面设计的基本思想和原则 3)掌握Web界面设计的工具和技术 二预备知识 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。(1)Web信息交互模型 模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性： 1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 (3)Web界面设计基本原则
1)了解浏览者的心理状态 2)内容与形式的统一 3)减少浏览层次 4)特点明确 5)统一整体的形象 6)Web界面设计的3C原则 (4)Web界面概要设计 1)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实施 2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格 3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究 (5)Web界面设计要素 ?Web界面布局 ?Web界面的色彩 ?Web界面的字体 ?Web界面的动画与多媒体 ?Web界面的导航 (6)Web界面设计技术与工具 主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。 三、实验内容 1、选择界面设计工具：Dreamweaver ，辅助工具Photoshop 2、设计内容：糗事百科网页 本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。专业机构的研究表明，彩色的记忆效果是黑白的3.5倍，所以网站要色彩丰富。本网站的底色为浅棕色，配以白色和棕色的文字，色彩搭配非常适宜。 在导航条中，链接处显得简单明确，分类合理，让人一目了然。整个界面简单大气，毫无冗余和凌乱之感，十分赏心悦目。
WEBUI设计要求规范
内蒙古万德系统集成有限公司 WEB UI设计(流程/界面)规范 目录 一：UI设计基本概念与流程...................................................................................................... - 3 - 1.1 目的.................................................................................................................. - 3 - 1.2范围 .................................................................................................................. - 3 - 1.3 概述.................................................................................................................. - 3 - 二：UI界面用户体验设计原则与规范.............................................................................................. - 4 - 1：应该遵循的基本原则..................................................................................................... - 4 - 2：页面外观规范........................................................................................................... - 4 - ②宽带页面........................................................................................................... - 5 - ③自适应............................................................................................................. - 5 - ④其他页面........................................................................................................... - 5 - 基本结构.............................................................................................................. - 6 - 页面版式：............................................................................................................ - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。............................................ - 6 - 版块组合形式.......................................................................................................... - 7 - 3：色彩规范............................................................................................................... - 8 - 4：字体规范.............................................................................................................. - 10 - ①文字格式......................................................................................................... - 10 - ②标题类............................................................................................................ - 12 -
Web应用界面设计规范
Web应用界面设计规范 主讲人：ARay 目录： 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要
①日常生活中的遭遇 X员工悲惨的一天： 早晨起来，发现闹钟没有按原先设定响起来。 一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁，终于到公司了，但是你却迟到了。 结果：尽管你已经非常努力，但是你还是迟到了。 那么，让我们看看这一连串 的倒霉事， 是什么让我们如此狼狈？
②什么是用户体验 用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现： 表现一：过分使用各种奇形怪状、五颜六色的控件。 表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。 表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。 表现五：消息框信息含糊、混乱。比如软件弹出一个消息
开发部web界面设计规范
开发部Web界面设计规范 版本修订历史
1.目录结构规范 1)目录建立原则：以最少的层次提供最清晰的访问结构。 2)目录的命名以小写英文字母、下划线组成。 3)根目录一般只放index.html已经其他必须的系统文件。 4)根目录下的images用于存放各页面都要使用的公用图片。 5)所有JS等脚本存放在根目录下的scripts或js目录。 6)所有CSS文件存放在根目录下的style或css目录。 2.设计命名规范 页面基本框架结构 navbar container—就是将页面中的所有元素包在一起的部分 header—是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素 navbar—等同于横向的导航栏，是最典型的页面元素，也可以命名为nav menu—此区域包含一般的链接和菜单，也可以命名为subNav,links main—是网站的主要区域，也可以命名为content sidebar—此区域包含网站的次要内容，例如最近更新内容列表等。 footer—包含一些附加信息，也可以命名为copyright 命名规则注意点 1)尽量考虑为元素命名其本身的作用或用意，达到语义化不要使用表面形式命名，如：red/left/big 等 2)组合命名规则：[元素类型]-[元素作用/内容]。如搜索按钮btn-search、登录表单form-login。 3)凡涉及交互行为的元素通常会有正常、悬停、点击和已经浏览等不同样式。参考：搜索按钮 btn-search、btn-search-hover、btn-search-visited
图片命名规则 1)图片名称分为头尾两部分，用下划线隔开。禁止用中文名。 2)头部分表示此图片的大类性质。 例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。 3)尾部分用来表示图片的具体含义，用英文字母表示，如banner_ad.gif logo_firefox.gif button_next.gif menu_aboutus.gif title_news.gif pic_people.jpg 4)有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。
一个Web系统OA界面设计和开发
一个Web系统OA界面设计和开发 早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。 但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。 我写这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考。 另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。 1.工作流程 下图，是整个开发过程中与界面设计相关的主要流程工作。
从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。 在需求分析阶段，参与了对客户的访问和调研； 在概要设计阶段，参与了部分系统设计分析工作； 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈； 在代码开发阶段，参与了系统表现层的设计开发。 2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。 本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则 在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。 一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少
WEB界面设计
中北大学 实验报告 专业软件工程 课程名称人机交互的软件工程方法学号1121011502 姓名吴亚楠
辅导教师常旭青成绩
3.政府部门 内容： 政府网站，即是指一级政府在各部门的信息化建设基础之上，建立起跨部门的、综合的业务应用系统，使公民、企业与政府工作人员都能快速便捷地接入所有相关政府部门的政务信息与业务应用，并获得个性化的服务，使合适的人能够在恰当的时间获得恰当的服务。但是，具体到中央政府和地方政府而言，由于政府职能的巨大差异，中央政府门户网站和地方政府（特别是地级市政府）门户网站在具体功能、体系结构及业务流程等方面存在着很大的不同。就具体功能来说，中央政府门户网站主要是向全社会甚至是世界宣传和展示中国政府形象，让人们能够对中央政府的基本情况有个切实的理解和认识；向公众提供全面、系统、权威、详实的法律、法规、部门规章以及规范性政府文件及其准确的解读和分析等，让社会有法可依；作为中央门户，向人们提供接入所有中央政府机构和省级地方政府的平台和通道；根据特定内容，向公众提供专门的服务。而地方政府门户网站的主要功能是直接面向本地社会公众处理与人们密切相关的那些事务，为提高政府行政效率、改善地方经济社会发展环境搭建虚拟平台。 功能： 门户网站是政府部门信息发布的总平台，也是政府部门集中对外提供服务的总平台，这个平台能够为政府提供虚拟主机、电子邮件、信息检索等服务；能通过导航程序在技术、功能等方面实现网站间有机衔接；能对政府部门的网站域名、应用项目、网页风格、电子邮箱、连接方式、数据结构等进行统一规划、管理；政府网站建设能起到政府对外宣传和招商引资的作用；能为广大公众在网上浏览咨询直接办事提供服务，把电子政务推进到实用阶段。 布局： 分栏为主 风格： 建设部网站的设计风格基本代表了中央部委网站的设计风格，蓝色调为主，最上面是政府单位名称，紧跟着是频道设置、部委动态、职能设置、行政许可等等，而且部委网站设置功能比较齐全，更新速度比较及时，政策性功能大于办事功能等。
Web页面设计规范
Web页面设计规范 编号： 版本号： 受控状态： 作者： 分发号：
文档修改历史记录文档修改记录
目录 1引言6 1.1 目的 6 1.2 范围 6 1.3 缩略术语 6 1.4 参考资料 6 2WEB页面框架内容6 2.1 页面框架 6 2.2 页面布局 6 2.2.1 布局原则 6 2.2.2 布局要求7 2.2.2.1 页面分割7 2.2.2.2 页面结构8 2.2.2.3 页面展现9 2.2.2.4 页面美化10 2.3 页面字体11 2.4 边距11 2.5 表格12 2.6 段落排版13 2.7 Frame 13 2.8 其他页面元素14 3页面风格15 3.1 风格分类15 3.2 页面风格应用15
4WEB页面交互15 4.1 页面元素焦点切换16 4.1.1 信息填写16 4.1.2 鼠标交互响应16 4.2 页面信息交互18 4.2.1 操作结果确认18 4.2.2 其他规则18 4.3 页面信息提示19 4.4 键盘响应支持21 5WEB页面通用规范22 5.1 一般页面功能22 5.1.1 新增22 5.1.2 修改22 5.1.3 删除22 5.1.4 查询23 5.1.5 取消23 5.1.6 保存23 5.1.7 重置23 5.1.8 返回23 5.1.9 分页23 5.1.10 全选24 5.2 一般页面规则24 5.2.1 默认值 24 5.2.2 必填值 24
5.2.3 界面传递25 5.2.4 窗口嵌套25 5.2.5 输入框操作25 5.2.6 在线帮助功能25 5.2.7 菜单功能要求26 5.2.8 快捷键功能27 5.2.9 快捷键的限制27 5.2.10 页面的规范性28 5.2.11 系统易用性29 5.2.12 输入安全性要求30 5.2.13 独特性要求31 5.2.14 多窗口的应用与系统资源31 6页面编程技术使用规范32 6.1 页面元素命名32 6.2 DHTMLx控件35 6.3 Flex控件35 7页面资源规格说明35 7.1 图标35 7.2 图片36 7.3 多媒体 36 8附录37 8.1 基于DHX的CSS规格示例37 8.1.1 表格CSS示例 37 8.2 典型应用的页面示例37