第2章设计QQ用户登录界面
通过对本章的学习，在学会设计QQ登录界面的同时，还能了解设计用户界面的一些相关知识，如V isual C# 2008工具箱、属性窗口的使用，以及使用【格式】菜单的菜单命令来美化用户界面等。
2.1 用户界面设计
用户界面设计是Visual C# 2008程序设计中非常重要的工作，本节首先介绍了用户界面的概述和类型，然后再介绍设计用户界面的一些基本原则，读者在设计用户界面时，应当遵循这些基本原则。
2.1.1 用户界面概述
用户界面是应用程序的重要组成部分，设计用户界面时，有许多问题需要考虑：例如一共需要使用多少个窗体、要不要使用菜单、要不要创建工具栏、采用什么样的方式来与用户交换信息、应当给用户提供哪些帮助等。
由此可见，在设计用户界面之前，应当了解该应用程序的用途及用户的计算机水平层次，据此设计出合理、美观的用户界面，用户界面决定了应用程序的易用性，从而决定了应用程序的整体质量。
2.1.2 用户界面的类型
基于Windows应用程序的用户界面主要有两种类型：第一种是单文档界面（SDI），第二种是多文档界面（MDI）。Microsoft Windows操作系统中自带的写字板程序就是一个单文档界面应用程序的例子，它只能处理一个文档，如需要处理另一个文档，则必须关闭前一个文档，写字板程序如图2-1所示。
图2-1 写字板——单文档界面应用程序
多文档界面应用程序有很多，如Microsoft Excel，它允许同时处理多个文档，如图2-2所示，可以通过窗口菜单来切换当前窗口中的活动文档。
图2-2 Microsoft Excel——多文档界面应用程序
除了SDI界面和MDI界面，比较常见的还有对话框型界面和类似于“Windows资源管理器”的界面。对话框型界面如Windows中的计算器；类似于“Windows资源管理器”的界面由两部分组成，左边是层次视图区，右边是内容显示区，这种界面便于浏览大量的文档、图片和目录等。
2.1.3 设计用户界面的基本原则
说明：关于【格式】菜单中各菜单项的使用及作用将在本章后面的内容中（第2.3节）详细介绍，并应用到本章介绍的实例（QQ登录界面设计）中。
1. 控件的位置拖放安排
在绝大多数的用户界面设计中，并不是所有的元素（如控件等）都具有相同的重要性，所以应抓住重点，将较重要的元素定位在对用户来说处在一目了然的位置，重要的和需要经常访问的元素应当处于显著的位置，次要的元素则应当处于次要的位置。习惯的阅读顺序一般是从左到右，从上到下。按照此原则，用户第一眼看到的应是计算机屏幕的左上部分，因此最重要的元素应当定位在这里，如同网页设计一样。比如有一条重要的数据信息，它的标题栏应当安排放在能被用户第一眼看到的位置，而各种操作按钮则应当处于该标题栏的下方，因为用户通常要使用按钮来完成窗口的操作。将控件和元素适当分组也是非常必要的，可以尝试根据“功能”和“关系”来组成一个逻辑信息组。按照控件在功能上的联系，将它们放在一起，在视觉效果上也要比将它们分散在屏幕的各处要好得多。在通常情况下，可以使用框架控件（GroupBox）来帮助控件的合理编排。
Visual C# 2008的控件一般都具有Location（位置）属性，可以通过设置该属性来安排控件位置，当然也可以使用鼠标直接拖放。
2. 控件的大小与一致性编排
控件的大小设置是程序设计时经常遇到的问题，虽然操作非常简单，但在决定控件大小时却很让人头疼。合理设置控件的大小以达成一致性是界面设计中的重要问题之一，一致性的外观将体现应用程序的协调性。如果缺乏一致性就会使界面混乱而无序，这样的界面将会使应用程序看起来混乱而不严密，体现不出应有的价值，不但对用户的使用带来不便，甚至还会使用户觉得应用程序不可靠。Visual C# 2008提供的控件丰富多样，但是，应该抛弃使用较多不同控件的想法，而应当尽量使用协调性强的控件，来选择最适合自己应用程序的特定控件子集。例如，当有ListBox、ComboBox等多种控件被同时利用时要尽可能的使它们采用同一风格。再如，在控件中使用相同的颜色作为背景色等，如果没有特别需要，尽量不使用鲜艳的颜色。
在应用程序中保持不同控件的一致性对提高应用程序的可用度来讲也是非常重要的。如果两种控件选择了不同的颜色和显示效果，那么应用程序将会显得十分不协调。所以在确定设计思路时，一定要坚持用同一种风格贯穿整个应用程序的想法，用这个思路来完成整个程序的设计。
3. 合理利用空间，保持界面的简洁
在界面的空间使用上，应当形成一种简洁明了的布局。在用户界面中使用空白空间有助于突出元素和改善可用性。即合理使用窗体控件之间以及控件四周的空白区域。一个窗体上控件太多会导致界面杂乱无章，给寻找字段或者控件带来不便或困难。因此，在设计中需要
插入空白空间来突出设计元素。各控件之间一致的间隔以及垂直与水平方向各元素的对齐也可以使设计更为明了，行列整齐、行距一致、整齐的界面安排也会使其容易阅读。在此，可以合理利用Visual C# 2008提供的几个工具，合理调整控件的间距、排列和尺寸等。
另外，界面设计最重要的原则就是简洁明了。对于应用程序而言，如果界面看上去很难，则界面的使用可能也比较复杂，而在设计时稍稍深入考虑一下，便有助于创建看上去和用起来都很简单的界面。从美学的角度来讲，整洁、简单明了的设计更有可取性。在界面设计中，一个普遍易犯的错误就是力图用界面来模仿现实世界的对象，这样的设计，只是对自己的设计增加难度，对用户并没有真正的好处。最好的设计就是根据对现实对象的理解来设计出自己的、并能为用户带来方便的界面。
4. 合理利用颜色、图像和显示效果
在界面上使用颜色可以增加视觉上的感染力，现在的许多显示器能够显示上百万种的不同颜色，这很容易使人想要全部使用它们。如果在开始设计时没有仔细地考虑，颜色也会像其他基本设计原则一样出现许多问题。每个人对颜色的喜爱有很大的不同，用户的品味也会各不相同。颜色能够引发强烈的情感，如果是设计针对普遍用户的程序，那一般说来，最好保守传统，采用一些柔和的、更中性化的颜色。当然，对特定的用户就要依据用户自己的选择了。少量的明亮色彩可以有效地突出或者吸引人们对重要区域的注意。依据许多程序设计人员的经验，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。
另外，图片与图标的使用也可以增加应用程序视觉上的影响，所以细心的设计也是必不可少的。在某些时候不用文本而利用图像就可以更形象地传达信息，但常常不同的人对图像的理解也不一样。带有表示各种功能图标的工具栏，是一种很有用的界面组成，但如果不能很容易地识别图标所表示的功能，反而会事与愿违。在设计工具栏图标时，应查看一下其他的应用程序，以了解已经创建了的普遍的大众可认可的标准。例如，用Windows的图标来表示相似的功能。总之，在设计自己的图标与图像时，应尽量使它们简单。
用户界面也广泛使用各种显示效果，合理的选择显示效果，也能表达特定的设计意图，选择静态或动态显示，可带给用户不同的信息。动感的显示是对象功能的可见线索，虽然用户可能对某个术语还不熟悉，但动态的实例可体会设计者的意图。按下按钮、旋转按钮和点亮电灯的开关等都能进行动感表示，一看到它们就可以看出其用处。例如，用在命令按钮上的三维立体效果使得它们看上去像是被按下去的，如果设计平面的命令按钮，就会失去这种动感，因而不能清楚地告诉用户这是一个命令按钮。然而在某些情况下，可能平面的按钮是适合的，但不管怎样，只要在整个应用程序中合理地利用各种显示效果并能保持一致，这都能更好地促进内容与形式相互统一。
总之，一个好的应用程序不仅要有强大的功能，还要有美观实用的用户界面。界面设计不仅仅是编程的问题，也需要一定的美学修养。用户界面是应用程序的一个重要组成部分，一个应用程序的界面往往决定了该程序的易用性与可操作性。
2.2 给窗体添加控件
窗体是用户界面各元素中的最大容器，用于容纳其他控件（如标签、文本框、按钮等）。本小节将介绍给窗体添加控件的方法和步骤。
给窗体添加控件的方法有多种，这里介绍最常用的两种：
（1）通过双击工具箱中的控件将控件添加到窗体中；
（2）选择工具箱中的控件后，通过在窗体上绘制的方法添加控件。
接下来通过一个例子来介绍给窗体添加控件的具体步骤。
2.2.1 通过双击添加控件
启动Microsoft V isual C# 2008 Express Edition，在【起始页】的【最近的项目】列表中选择第1章创建的“Welcome”项目，然后通过点击设计器顶部的选项卡切换到“Welcome”项目的窗体设计器窗口“Form1.cs [设计]”，如图2-3所示。
图2-3 窗体设计器窗口
通过双击工具箱中的控件来给窗体添加控件的步骤如下：
说明：这里以给“Welcome”项目的“Form1”窗体添加两个Label控件（即标签控件，将在后面的章节中详细介绍）为例。
（1）展开工具箱的【公共控件】列表（也可以展开【所有Windows窗体】列表），在列表中找到名为“Label”的控件，如图2-4所示。
图2-4 Label控件
（2）双击Label控件，这时可以看到窗体“Form1”中出现了一个名为“Label1”的控件，如图2-5所示。
图2-5 添加了1个Label控件的窗体
（3）接下来再次双击Label控件，同样这时可以在窗体中看到一个名为“Label2”的控件。
2.2.2 绘制控件
通过双击工具箱中的控件来给窗体添加控件的步骤如下：
说明：这里以给“Welcome”项目的“Form1”窗体添加两个TextBox（文本框）控件和两个Button（按钮）控件为例。
（1）在工具箱的【公共控件】列表中找到并单击TextBox控件。
（2）然后在窗体上按下鼠标左键，并拖动至合适的大小，松开鼠标后，可以看到窗体上出现了TextBox控件，这时的窗体如图2-6所示。
图2-6 添加TextBox控件
（3）接下来按照同样的方法再给窗体绘制一个TextBox控件和两个Button控件，如图
2-7所示。
图2-7 绘制控件
然后，这样的用户界面并不美观，下一节将介绍使用【格式】菜单调整控件的大小和位置，从而达到美化用户界面的目的。
2.3 使用【格式】菜单
当前窗口为窗体设计器窗口时才会显示【格式】菜单，单击该菜单展开其菜单项，如图2-8所示。
图2-8 【格式】菜单
每一个菜单项又有一些子菜单项，这些菜单项的功能和作用读者可以通过其标题简单推测出来，这里就不做详细介绍。
接下来介绍使用【格式】菜单的部分工具美化上一节介绍的Form1窗体用户界面的方法和步骤。
（1）首先单击选中第一个TextBox控件，然后按住鼠标【Ctrl】键不放，再用鼠标选中第二个TextBox控件，选中后如图2-9所示。
图2-9 选中两个TextBox控件
说明：从图2-9可以看到，第一个TextBox控件的外框左右两端各有一个空心的正方形图案，而第二个TextBox控件左右两端的方块图案则是实心的，表明以后所有的使用【格式】菜单的调整都是以第一个TextBox控件为基准的，即以左右两端显示空心方块图案的控件为基准。
（2）接下来使用【格式】→【对齐】→【左对齐】菜单命令，则可以看到第二个TextBox 控件的左边缘与第一个TextBox控件的左边缘处于同一垂直线上，并且被调整的是第二个TextBox控件。表明调整是以第一个TextBox控件为基准的。
（3）接下来再使用【格式】→【使大小相同】→【宽度】菜单命令，调整两个TextBox 控件的宽度一致，调整后如图2-10所示。
图2-10 调整文本框的位置和宽度
（4）用鼠标选中Label1控件，使用拖拽的方法将其移动到第一个TextBox控件的左边，不放开鼠标左键微调Label1的位置，可以看到Label1控件和TextBox控件的位置有如图2-11所示的三种情况。
图2-11 调整Label1控件位置的三种情况
说明：Visual C# 2008会自动提供轮廓线来帮助用户设置控件的对齐方式，上面出现的三种情况是由于两者高度不一致的情况而产生的。第1种情况表明Label1控件与TextBox 控件的对齐方式为顶端对齐；第2种情况表明Label1控件与TextBox控件的对齐方式为中间对齐；而第3种情况表明Label1控件与TextBox控件的对齐方式为底部对齐。在这里使用第二种对齐方式。
（4）按照同样的方法将Label2移动到第二个TextBox控件的左边，并使得Label1与Label的左边缘对齐，如图2-12所示。
图2-12 调整标签的位置
（5）选择Button1控件，使用轮廓线将Button1控件的左边缘与Label1和Label2控件的左边缘对齐。
（5）然后选择Button1和Button2控件，分别使用【格式】→【使大小相同】→【宽度】和【格式】→【使大小相同】→【高度】菜单命令，调整两者的宽度和高度一致（6）最后使用轮廓线分别设置Button1控件的左边缘与Label1和Label2控件的左边缘对齐、Button2控件的右边缘与TextBox1和TextBox2控件的右边缘对齐，并使得Button1和Button2控件的高度位置一致，调整后的最终效果如图2-13所示。
图2-13 调整后的最终效果
然后，图2-13看到的往往不是用户希望的用户界面最终设计效果，例如要将Form1设计成一个登录窗体，就应当修改窗体Form1以及其中控件的一些属性，以达到更好的显示效果，下一节将介绍如何修改这些属性。
2.4 修改对象的属性
本节将介绍如何设置“Welcome”项目Form1窗体中各控件的属性，这些控件的属性及其作用将会在后面的章节中详细介绍。
2.4.1 修改窗体的T ext属性
窗体的Text属性用于设置该窗体标题栏中显示的文本信息，若“Welcome”项目Form1窗体是用于登录的，则应当将其Text属性改为“登录”。
修改窗体的Text属性可以使用属性窗口直接修改，也可以使用程序代码来修改，下面首先介绍使用属性窗口直接修改的方法和步骤，而使用程序代码修改将在后面的章节章介绍。
（1）首先单击窗体Form1的标题栏或者窗体中任意的空白部位（不能单击窗体中的控件），则窗体边缘出现一个轮廓框，表明Form1窗体被选中，其后一切的操作都是针对Form1窗体而进行的。
说明：使用属性窗口设置对象属性的第一步都是先选中该对象，即必须先确定需要设置属性的对象，这是很容易理解的。
（2）然后拉动属性窗口的滚动条，找到并选择窗体的Text属性，如图2-14所示。
图2-14 选择窗体的Text属性
（3）删除默认的Text属性值“Form1”，然后输入“登录”，这时再单击Form1窗体，可以看到其标题栏中的文本发生了改变，如图2-15所示。
图2-15 修改窗体的Text属性
2.4.2 修改窗体中各控件的属性
从上一小节介绍的修改窗体的Text属性可以看出，使用属性窗口修改对象的属性的步骤有三个：
第一步：选中需要修改属性的对象；
第二步：在属性窗口中找到需要修改的属性；
第三步：输入新的属性值。
接下来修改窗体中的Label、TextBox、Button控件的属性，以达到登录窗体的用户界面要求。
（1）修改Label1和Label2的Text属性分别为“用户名”和“用户密码”。
说明：为了使Label1和Label2的大小一致，可以在Label1文本内容“用户名”中分别加入两个空格。
（2）因为第二个TextBox控件是用来输入密码的，大家都知道，密码信息不会直接显
示出来，而一般情况下是用“*”来代替。因此应当设置第二个TextBox控件的PasswordChar 属性值为“*”，如图2-16所示。
图2-16 修改文本框的PasswordChar属性
（3）最后将Button1和Button2控件的Text属性分别设为“登录”和“取消”，设置完毕后的窗体Form1如图2-17所示。
图2-17 一个简单的登录界面
设计完毕后，关闭V isual C# 2008开发工具，会提示是否保存该项目，“Welcome”项目将作为第3章（一个简单的C#程序）的实例，因此这里选择不保存。
2.5 设计QQ用户登录界面
本节将详细介绍如何使用Visual C# 2008设计一个类似于QQ用户登录的用户界面。
图2-18 腾讯的QQ用户登录界面
2.5.1 修改窗体的属性
首先打开Visual C# 2008开发工具，创建一个名为“QQLogin”的新项目。按照前面介绍的方法将默认的窗体Form1的Text属性设为“QQ用户登录”。
1. 修改窗体的大小
修改窗体大小的方法有两种，第一种是使用鼠标的拖拽拉动窗体的边缘，以修改窗体的大小，适用于要求不是很精确的情况；第二种则是使用窗体的Size属性精确修改。
这里使用窗体的Size属性精确修改成“330, 245”，如图2-19所示。
图2-19 修改窗体的Size属性
说明：Size属性表示对象的对小，窗体（包括其他的所有控件）的Size属性均以像索为单位。
2. 设置窗体的Icon属性
窗体的Icon属性用于确定窗体左上角标题栏中显示的图标。找到并选择窗体的Icon属
性（），然后单击右边的按钮，在弹出的打开对话框中选择QQ
的图标文件。
说明：QQ的图标文件可以在本书的源代码文件中找到，其文件名为“QQ.ico”。
3. 修改窗体的背景颜色
窗体的背景颜色由窗体的BackCorlor属性决定，它支持RGB颜色表示，找到并选择窗体的BackCorlor属性，清楚其默认值，然后输入与QQ用户登录界面颜色一致的RGB颜色值“225, 246, 251”，如图2-20所示。
图2-20 修改窗体的背景颜色
4. 设置窗体的MaxmizeBox属性
窗体的MaxmizeBox属性用于确定标题栏中的系统最大化按钮是否可用，它有True 和False两个可选值，其默认值为True，这里应当将其设为False，如图2-21所示。
图2-21 设置窗体的MaxmizeBox属性
5. 设置窗体的AutoSizeMode属性
窗体的AutoSizeMode属性用于指定用户界面元素自动调整自身大小的模式，它有GrowOnly和GrowAndShrink两个可选值，这里应当选择GrowAndShrink，表示不能手动调整窗体的大小，如图2-22所示。
图2-22 设置窗体的AutoSizeMode属性
6. 设置窗体的St art Position属性
窗体的StartPosition属性用于确定程序运行时，窗体第一次出现的位置，它有如图2-23所示的5个可选值，这里应当选择CenterScreen，表示窗体第一次出现的位置为显示器的屏幕中央。
图2-23 设置窗体的Start Position属性
至此，对窗体属性的修改工作已完毕，这时查看窗体Form1的外观，应当如图2-24所示。
图2-24 设置完属性的窗体
2.5.2 添加图片框控件
在工具箱中的【公共控件】列表中找到PictureBox控件，使用绘制控件的方法在窗体上绘制一个PictureBox控件，并调整其大小和位置如图2-25所示。
图2-25 绘制PictureBox控件
然后在PictureBox控件的属性窗口找到并选择Image属性（），
单击右边的按钮，将弹出一个名为【选择资源】的对话框，在该对话框中选定【本地资源】单选按钮，并单击【导入】按钮，在弹出的打开对话框中选择QQ登录图片，选择完毕
后如图2-26所示。
说明：QQ登录图片的图片文件可以在本书的源代码文件中找到，其文件名为“QQLogin.bmp”。
图2-26 选择QQ登录图片
选择完QQ登录图片后，单击【本地资源】对话框中的【确定】按钮，关闭【本地资源】对话框，这时的窗体外观如图2-27所示。
图2-27 添加QQ登录图片
2.5.3 添加面板控件
接下来为窗体添加一个面板（Panel）控件，Panel控件可以在工具箱中的【容器】列表中找到，选择Panel控件，同样用绘制控件的方法在窗体上绘制一个Panel控件，并调整其大小和位置如图2-29所示，然后找到并选择Panel控件的BorderStyle属性，将其值设置为FixedSingle，如图2-28所示。
图2-28 设置Panel控件的BorderStyle属性
接下来调整Panel控件的背景颜色，如同设置窗体的背景颜色一样，找到并选择Panel
控件的BackCorlor属性，然后将其值修改为，修改完毕后的窗体如图2-29所示。
图2-29 添加面板
2.5.4 添加标签控件
在工具箱中的【公共控件】列表中找到标签（Label）控件，依次添加3个Label控件并调整好位置，再将各自的Text属性值设为“QQ帐号”、“QQ密码”和“状态：”，设置完毕后的窗体如图2-30所示。
图2-30 添加标签控件
2.5.5 添加组合框控件
在工具箱中的【公共控件】列表中找到组合框（ComboBox）控件，依次在窗体上添加2个ComboBox控件并调整好位置，如图2-31所示。
图2-31 添加组合框控件
选中第二个表示登录状态的ComboBox控件，将其FlatStyle属性设置成Flat，FlatStyle 属性用于确定组合框的显示模式，如图2-32所示。
图2-32 设置组合框的FlatStyle属性
接下来将第二个ComboBox控件的Text属性值设为，然后找到并选择Items属性，然后单击右边的按钮，在弹出的【字符串集合编辑器】对话框依次输入6个列表项，如图2-33所示。
图2-33 【字符串集合编辑器】对话框
最后在【字符串集合编辑器】对话框中单击【确定】按钮，ComboBox控件的属性设置完毕后的QQ用户登录窗体Form1如图2-34所示。
图2-34 设置组合框控件属性
2.5.6 添加文本框控件
在工具箱中的【公共控件】列表中找到文本框（TextBox）控件，在窗体上添加一个TextBox 控件，调整好大小和位置后如图2-35所示。
图2-35 添加文本框控件
2.5.7 添加带链接的标签控件
在工具箱中的【公共控件】列表中找到带链接的标签（LinkLabel）控件，在窗体上添加两个LinkLabel控件，调整好大小和位置后，将各自的Text属性分别设为“申请帐号”和“忘记密码？”，如图2-35所示。
图2-36 添加LinkLabel控件
B/S 系统界面设计规范 1.引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受，提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。 1.3. 定义 术语定义： 效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。 容器：即HTML 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为单元格是放置图片的容器。 样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种
UI用户界面设计 大作业课程设计报告 题目：依依旅行系统前台应用及后台管理院别：信息与控制学院 专业：计算机科学与技术 学生姓名： 7宋依依 指导教师：孙丽云 成绩： 2015年 6 月 12 日 一、系统概述 1.1课程设计题目： 依依旅行系统前台及后台管理 1.2 课程设计运行环境： Java，MyEclipse6.5，Tomcat5.x Microsoft SQL Server 2008 360安全浏览器7.1 1.3 课程设计实现技术： 基于HTML，CSS，JSP等技术的应用 二、依依旅行系统需求分析 2.1系统功能需求：
系统的功能需求包括一下几个方面 （1）游客在不登录的情况下只可以进行相关旅行，车票，酒店信息的查询。（2）游客通过注册登录或者登录后，可以通过网络查询景点的信息概况和预定景点票，酒店，车票（飞机票，火车票，或者租车）。 （3）游客登录后还可以进行各种订单的退订，个人信息的修改。 （4）系统管理员可以查看游客的预定请求和取消预定的请求。 （5）系统管理员可以对系统的数据库进行维护，例如增加、删除和修改景点信息，增加、删除工作人员帐户，增加和删除旅行用户。 三、依依旅行系统概要分析 3.1旅游系统模块介绍 满足以上需求的管理系统主要包括以下几个模块。 （1）旅游数据维护模块 基本数据维护模块提供了使用者录入、修改并维护基本数据的途径。例如对游客及导游及工作人员各项信息的更新和修改。 （2）旅游业务模块 基本业务模块主要用于实现游客查询景点信息和预定的管理，可以登陆系统预定景点游票和导游预定，工作人员可以处理预定信息和取消预定信息等操作。 （3）数据库管理模块 在系统中，所有景点信息以及工作人员和导游的帐户信息都要进行统一管理，景点的使用情况和预定情况也要进行详细的记录，要用统一的数据库平台进行管理。 （4）旅游信息查询模块 信息查询模块主要用于查询景点的信息和游客的预定信息。 下图所示表示了旅游开发管理系统的功能需求： 3.2旅游数据维护模块 数据维护模块包括如下图所示的几个方面： （1）修改更新景点信息：系统管理员可以更新和修改景点信息。 （2）更新和修改信息：系统管理员可以更新和修改旅游景点和酒店出行，删除游客的信息。 （3）添加景点信息：系统管理员可以添加景点及景点信息。 （4）删除景点信息：系统管理员可以删除景点及景点信息。 3.3旅游业务模块 旅游业务模块包括一下几个方面： （1）注册登陆后，更改个人信息 （2）查询信息：游客查询景点使用信息及景点概括信息。 （3）预定取消景点：游客预定景点票。 （4）酒店预订：游客可一根据情况预定酒店。 （5）出行方式：游客可以根据自己的情况选择出行方式。 3.4数据库管理模块 数据库模块包括一下一个方面： （1）游客信息管理：信息包括游客的姓名，电话号码，及联系方式等。（2）景点信息管理：景点信息包括景点的名称，代号，概况等。
工程学院 课程设计说明书 课程名称: 计算机应用基础课程设计 课程代码: 题目: 用户登录界面程序设计 年级/专业/班: 学生姓名: 学号: 开始时间: 2011 年 4 月25 日 完成时间: 2011 年 5 月 8 日 课程设计成绩： 指导教师签名：年月日 目录 摘要 (2) 1 引言 (3)
2 设计方案 (4) 2.1程序功能设计 (4) 2.1.1系功能描述 (5) 2.1.2系结构分析 (5) 2.1.3系统流程分析 (5) 2.2程序界面和代码设计 (7) 2.2.1系统工程设计框架 (7) 2.2.2系统各界面设计及代码设计 (7) 3 结果分析 (11) 结论 (14) 致谢 (15) 参考文献 (16)
摘要 随着计算机的普及，计算机高级语言已经运用到生活中的各个方面，本次课程设计使用VB语言作为开发工具，进行了用户登录系统的程序设计，该程序能实现用户登录系统的模拟功能，进行用户的登录，提醒，注册，退出等操作，这些操作都能模拟实际生活中的登录情况，最后分析所开发软件系统的优点和不足。该运行界面清晰实用，操作方便。 关键词：用户登录模拟操作界面
1 引言 随着科学技术的发展，计算机已经应用到生活、工作的各个方面。VB一种可视化的、面向对象和采用事件驱动方式的高级程序设计语言，可用于开发Windows环境下的各类应用程序。本次课程设计主要内容就是使用VB编制简单、实用的小程序，以巩固我们所学的计算机VB语言知识，提高分析问题和解决问题的能力，锻炼我们独立动手的能力以及综合创新能力。 1.1 选题背景 通过一个学期对Visual Basic 高级语言程序设计的学习，我已经掌握了一些常用的控件的使用方法，对简单的程序设计的常用算法也有了一定的了解，还掌握了对文件输入与输出的一些基本操作。为了进一步加深理解、验证、巩固课堂教学内容，加深对可视化编程思想的理解，强化Visual Basic对程序流程控制、常用控件的属性、事件、方法的理解和使用；为了进一步提高编程能力、程序的调试能力，理论联系实际的能力；巩固所学的这些程序设计的方法，为了达到后续课程对实际编程计算能力的要求，特选定“用户登录界面程序设计”题目作为课程设计实践教学环节的题目，有助于培养综合运用所学知识解决实际问题的能力，可以充分发挥想象力和创新能力；有助于提高独立思考能力，自学能力 1.2任务与分析 任务：设计一用户的登录窗口界面，实现模拟用户登录系统时的各种情况 具体要求：遵循面向对象和结构化程序设计的编程思路，设计合理的界面，设置所需控件及其属性，编写相应的事件过程，并上机调试程序，在基本要求达到后，进行一定创新设计 预期功能：实现用户成功登录系统，当用户明不正确或者密码错误时，提醒用户重新输入或者注册，当三次登录失败时，强制性退出操作界面。 涉及的VB知识点：界面设计，command控件、text控件及其属性，随机的读出于追加。
B/S系统界面设计与开发详解 早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。 但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。 这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；其目的就是希望能和大家一起探讨一下这个问题，希望能供大家参考，起到抛砖引玉的作用。 另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我也尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。1.工作流程 下图，是整个开发过程中与界面设计相关的主要流程工作。
从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。 在需求分析阶段，参与了对客户的访问和调研； 在概要设计阶段，参与了部分系统设计分析工作； 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈； 在代码开发阶段，参与了系统表现层的设计开发。 2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。 本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则 在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。 一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对*作接口，直接点击高于右键*作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少*作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的*作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。
用户界面设计说明 书
[键入公司名称] [键入文档标题] [键入文档副标题] [键入作者姓名] 2012/11/27
修订历史记录
目录 1 引言................................................... - 3 - 1.1编写目的............................................ - 3 - 1.2项目背景............................................ - 4 - 1.3定义、缩略词........................................ - 4 - 1.4参考资料............................................ - 5 - 2 应当遵循的界面设计规范 ................................. - 5 - 2.1用户界面设计原则.................................... - 5 - 2.2界面一致性.......................................... - 5 - 2.3布局合理化原则.......................... 错误!未定义书签。 3 界面的关系图和工作流程图 ............................... - 7 - 4 主界面................................................ - 10 - 4.1主界面............................................. - 10 - 4.2子界面A ........................................... - 11 - 4.3子界面B ........................................... - 12 - 4.4子界面C ........................................... - 13 - 4.5子界面D ........................................... - 14 - 4.6子界面E ........................................... - 15 - 4.7子界面F ........................................... - 16 - 5 美学设计.............................................. - 17 -
一个Web系统的界面设计和开发1.工作流程（下图，是整个开发过程中与界面设计相关的主要流程工作） 从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。 在需求分析阶段，参与了对客户的访问和调研； 在概要设计阶段，参与了部分系统设计分析工作； 在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈； 在代码开发阶段，参与了系统表现层的设计开发。
2.需求分析 在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。 主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查 这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。 本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。 还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则 在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。 一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。 ·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例
用户界面设计实例 ● 设计的系统名称：个人日常事务管理系统 ● 针对用户群是：广大电脑用户（有一定的电脑操作基础），officer 和广大学 生。 一、系统需求分析（The system requirement ） 针对officer 和学生们的需求分析，从我自身分析：对于我日常的安排我平 时会用专门的记事本记录和更改，对于日常各种事务可能会冲突或不变携带，现在针对这些需求，设计出符合此人群适合的一款系统来帮助人们更好的安排日程和完成工作。此系统是要面向个人的，同企业系统相比，此软件要力求操作简单，效率要高效，由于针对的人群是officer 和大学生，这些人都是年轻的一代人，对计算机和系统都比较了解，而且倾向于华丽的界面，但是该系统同时要解决高效，较少的操作较快地达到用户的需求。由于工作原因或计算机系统崩溃等用户在本机保存的日程安排等数据可能丢失的情况，同时，有些情况下可能无法连接网络，此系统应支持 1.、本机数据保存。2、可以上传到服务器数据库，用户注册可获得免费的空间，用户注册后，只要登录就能在随时随地获得自己的日程安排等信息。 二、系统功能定义（The function definitions ） 个人日程管理系统主要是提供个人时间日程安排系统软件，它具有相当方便的操作接口，让用户能够对所安排的行程一目了然，除去主要功能还附带了更多功能和小工具，安排的行程可以生成通行路线，并会根据天气预报提醒当天安排是否影响。而且用户可以注册，注册后用户有更多的服务，安排的日程数据可以保存到本地同时可以更新到服务器，这样用户就算到外地也可以随时查看自己的日程安排，同时其他功能有：时钟提醒、通讯录、效率评估等。 实现功能（主界面导航）： 个人日常事 务管理系统
软件工程（课程设计）题目：图书管理系统—界面设计 学院河北大学工商学院 学科门类工学 专业软件工程 学号 2012484331 姓名梁雪山 指导教师王思乐 2014年12月7日
河北大学学年论文（课程设计）任务书 （指导教师用表）
河北大学学年论文（课程设计）成绩评定表学院：河北大学工商学院
一、引言 1、编写目的 编写本文档的目的是根据系统分析工程师和客户沟通的结果，对用户需求进行了全面细致的分析，深入描述《图书管理系统》软件的功能，确定该软件设计的限制和定义软件的其他有效性需求。该需求规格说明书的读者对象为本图书管理系统软件小组的研发工程师、测试工程师、销售工程师，版权归XXX所有，严禁外传。 2、背景 随着社会信息量的与日俱增，作为信息存储的主要媒体之一图书，数量、规模比以往任何时候都大的多，不论个人还是图书管理部门都需要使用方便而有效的方式来管理自己的书籍。在计算机日益普及的今天，对个人而言若采用一套行之有效的图书管理系统来管理自己的书籍，会方便许多。对图书管理部门而言，以前单一的手工检索已不能满足人们的要求，为了便于图书资料的管理需要有效的图书管理软件。 图书管理系统软件LMS V1.0是一套功能比较完善的数据管理软件，具有数据操作方便高效迅速等优点。该软件采用功能强大的数据库软件开发工具进行开发，具有很好的可移植性，可在应用范围较广的DOS、WINDOWS系列等操作系统上使用。除此以外，LMS V1.0可通过访问权限控制以及数据备份功能，确保数据的安全性。 3、定义 LMS：Library Management System 图书交流系统 4、参考资料 《软件工程导论》（第五版）作者：张海藩清华大学出版社 《软件界面设计》杨培添电子工业出版社 二、项目概述 1、面向的用户 该系统主要面向的是学生、教师等读者，图书管理员和超级管理员。 2、实现目标 对已经设计出的功能在界面上形成对应的物理按键。确保界面美观，程序
经典登录界面制作 声明本登录使用jsp编写，可在MyEclipse8.5等软件中执行 1.登录界面图： 2.登录代码 Login.jsp <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@ taglib prefix="fmt" uri="https://www.doczj.com/doc/da9682729.html,/jsp/jstl/fmt" %> <%@ taglib prefix="c" uri="https://www.doczj.com/doc/da9682729.html,/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>