QQ登录界面设计C#.docx
《QQ登录界面设计C#.docx》由会员分享，可在线阅读，更多相关《QQ登录界面设计C#.docx（24页珍藏版）》请在冰点文库上搜索。
QQ登录界面设计C#
第2章设计QQ用户登录界面
通过对本章的学习，在学会设计QQ登录界面的同时，还能了解设计用户界面的一些相关知识，如VisualC#2008工具箱、属性窗口的使用，以及使用【格式】菜单的菜单命令来美化用户界面等。
2.1用户界面设计
用户界面设计是VisualC#2008程序设计中非常重要的工作，本节首先介绍了用户界面的概述和类型，然后再介绍设计用户界面的一些基本原则，读者在设计用户界面时，应当遵循这些基本原则。
2.1.1用户界面概述
用户界面是应用程序的重要组成部分，设计用户界面时，有许多问题需要考虑：
例如一共需要使用多少个窗体、要不要使用菜单、要不要创建工具栏、采用什么样的方式来与用户交换信息、应当给用户提供哪些帮助等。
由此可见，在设计用户界面之前，应当了解该应用程序的用途及用户的计算机水平层次，据此设计出合理、美观的用户界面，用户界面决定了应用程序的易用性，从而决定了应用程序的整体质量。
2.1.2用户界面的类型
基于Windows应用程序的用户界面主要有两种类型：
第一种是单文档界面（SDI），第二种是多文档界面（MDI）。
MicrosoftWindows操作系统中自带的写字板程序就是一个单文档界面应用程序的例子，它只能处理一个文档，如需要处理另一个文档，则必须关闭前一个文档，写字板程序如图2-1所示。
图2-1写字板——单文档界面应用程序
多文档界面应用程序有很多，如MicrosoftExcel，它允许同时处理多个文档，如图2-2所示，可以通过窗口菜单来切换当前窗口中的活动文档。
图2-2MicrosoftExcel——多文档界面应用程序
除了SDI界面和MDI界面，比较常见的还有对话框型界面和类似于“Windows资源管理器”的界面。
对话框型界面如Windows中的计算器；类似于“Windows资源管理器”的界面由两部分组成，左边是层次视图区，右边是内容显示区，这种界面便于浏览大量的文档、图片和目录等。
2.1.3设计用户界面的基本原则
说明：
关于【格式】菜单中各菜单项的使用及作用将在本章后面的内容中（第2.3节）详细介绍，并应用到本章介绍的实例（QQ登录界面设计）中。
1.控件的位置拖放安排
在绝大多数的用户界面设计中，并不是所有的元素（如控件等）都具有相同的重要性，所以应抓住重点，将较重要的元素定位在对用户来说处在一目了然的位置，重要的和需要经常访问的元素应当处于显著的位置，次要的元素则应当处于次要的位置。
习惯的阅读顺序一般是从左到右，从上到下。
按照此原则，用户第一眼看到的应是计算机屏幕的左上部分，因此最重要的元素应当定位在这里，如同网页设计一样。
比如有一条重要的数据信息，它的标题栏应当安排放在能被用户第一眼看到的位置，而各种操作按钮则应当处于该标题栏的下方，因为用户通常要使用按钮来完成窗口的操作。
将控件和元素适当分组也是非常必要的，可以尝试根据“功能”和“关系”来组成一个逻辑信息组。
按照控件在功能上的联系，将它们放在一起，在视觉效果上也要比将它们分散在屏幕的各处要好得多。
在通常情况下，可以使用框架控件（GroupBox）来帮助控件的合理编排。
VisualC#2008的控件一般都具有Location（位置）属性，可以通过设置该属性来安排控件位置，当然也可以使用鼠标直接拖放。
2.控件的大小与一致性编排
控件的大小设置是程序设计时经常遇到的问题，虽然操作非常简单，但在决定控件大小时却很让人头疼。
合理设置控件的大小以达成一致性是界面设计中的重要问题之一，一致性的外观将体现应用程序的协调性。
如果缺乏一致性就会使界面混乱而无序，这样的界面将会使应用程序看起来混乱而不严密，体现不出应有的价值，不但对用户的使用带来不便，甚至还会使用户觉得应用程序不可靠。
VisualC#2008提供的控件丰富多样，但是，应该抛弃使用较多不同控件的想法，而应当尽量使用协调性强的控件，来选择最适合自己应用程序的特定控件子集。
例如，当有ListBox、ComboBox等多种控件被同时利用时要尽可能的使它们采用同一风格。
再如，在控件中使用相同的颜色作为背景色等，如果没有特别需要，尽量不使用鲜艳的颜色。
在应用程序中保持不同控件的一致性对提高应用程序的可用度来讲也是非常重要的。
如果两种控件选择了不同的颜色和显示效果，那么应用程序将会显得十分不协调。
所以在确定设计思路时，一定要坚持用同一种风格贯穿整个应用程序的想法，用这个思路来完成整个程序的设计。
3.合理利用空间，保持界面的简洁
在界面的空间使用上，应当形成一种简洁明了的布局。
在用户界面中使用空白空间有助于突出元素和改善可用性。
即合理使用窗体控件之间以及控件四周的空白区域。
一个窗体上控件太多会导致界面杂乱无章，给寻找字段或者控件带来不便或困难。
因此，在设计中需要插入空白空间来突出设计元素。
各控件之间一致的间隔以及垂直与水平方向各元素的对齐也可以使设计更为明了，行列整齐、行距一致、整齐的界面安排也会使其容易阅读。
在此，可以合理利用VisualC#2008提供的几个工具，合理调整控件的间距、排列和尺寸等。
另外，界面设计最重要的原则就是简洁明了。
对于应用程序而言，如果界面看上去很难，则界面的使用可能也比较复杂，而在设计时稍稍深入考虑一下，便有助于创建看上去和用起来都很简单的界面。
从美学的角度来讲，整洁、简单明了的设计更有可取性。
在界面设计中，一个普遍易犯的错误就是力图用界面来模仿现实世界的对象，这样的设计，只是对自己的设计增加难度，对用户并没有真正的好处。
最好的设计就是根据对现实对象的理解来设计出自己的、并能为用户带来方便的界面。
4.合理利用颜色、图像和显示效果
在界面上使用颜色可以增加视觉上的感染力，现在的许多显示器能够显示上百万种的不同颜色，这很容易使人想要全部使用它们。
如果在开始设计时没有仔细地考虑，颜色也会像其他基本设计原则一样出现许多问题。
每个人对颜色的喜爱有很大的不同，用户的品味也会各不相同。
颜色能够引发强烈的情感，如果是设计针对普遍用户的程序，那一般说来，最好保守传统，采用一些柔和的、更中性化的颜色。
当然，对特定的用户就要依据用户自己的选择了。
少量的明亮色彩可以有效地突出或者吸引人们对重要区域的注意。
依据许多程序设计人员的经验，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。
另外，图片与图标的使用也可以增加应用程序视觉上的影响，所以细心的设计也是必不可少的。
在某些时候不用文本而利用图像就可以更形象地传达信息，但常常不同的人对图像的理解也不一样。
带有表示各种功能图标的工具栏，是一种很有用的界面组成，但如果不能很容易地识别图标所表示的功能，反而会事与愿违。
在设计工具栏图标时，应查看一下其他的应用程序，以了解已经创建了的普遍的大众可认可的标准。
例如，用Windows的图标来表示相似的功能。
总之，在设计自己的图标与图像时，应尽量使它们简单。
用户界面也广泛使用各种显示效果，合理的选择显示效果，也能表达特定的设计意图，选择静态或动态显示，可带给用户不同的信息。
动感的显示是对象功能的可见线索，虽然用户可能对某个术语还不熟悉，但动态的实例可体会设计者的意图。
按下按钮、旋转按钮和点亮电灯的开关等都能进行动感表示，一看到它们就可以看出其用处。
例如，用在命令按钮上的三维立体效果使得它们看上去像是被按下去的，如果设计平面的命令按钮，就会失去这种动感，因而不能清楚地告诉用户这是一个命令按钮。
然而在某些情况下，可能平面的按钮是适合的，但不管怎样，只要在整个应用程序中合理地利用各种显示效果并能保持一致，这都能更好地促进内容与形式相互统一。
总之，一个好的应用程序不仅要有强大的功能，还要有美观实用的用户界面。
界面设计不仅仅是编程的问题，也需要一定的美学修养。
用户界面是应用程序的一个重要组成部分，一个应用程序的界面往往决定了该程序的易用性与可操作性。
2.2给窗体添加控件
窗体是用户界面各元素中的最大容器，用于容纳其他控件（如标签、文本框、按钮等）。
本小节将介绍给窗体添加控件的方法和步骤。
给窗体添加控件的方法有多种，这里介绍最常用的两种：
（1）通过双击工具箱中的控件将控件添加到窗体中；
（2）选择工具箱中的控件后，通过在窗体上绘制的方法添加控件。
接下来通过一个例子来介绍给窗体添加控件的具体步骤。
2.2.1通过双击添加控件
启动MicrosoftVisualC#2008ExpressEdition，在【起始页】的【最近的项目】列表中选择第1章创建的“Welcome”项目，然后通过点击设计器顶部的选项卡切换到“Welcome”项目的窗体设计器窗口“Form1.cs[设计]”，如图2-3所示。
图2-3窗体设计器窗口
通过双击工具箱中的控件来给窗体添加控件的步骤如下：
说明：
这里以给“Welcome”项目的“Form1”窗体添加两个Label控件（即标签控件，将在后面的章节中详细介绍）为例。
（1）展开工具箱的【公共控件】列表（也可以展开【所有Windows窗体】列表），在列表中找到名为“Label”的控件，如图2-4所示。
图2-4Label控件
（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控件位置的三种情况
说明：
VisualC#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修改窗体的Text属性
窗体的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一个简单的登录界面
设计完毕后，关闭VisualC#2008开发工具，会提示是否保存该项目，“Welcome”项目将作为第3章（一个简单的C#程序）的实例，因此这里选择不保存。
2.5设计QQ用户登录界面
本节将详细介绍如何使用VisualC#2008设计一个类似于QQ用户登录的用户界面。
图2-18腾讯的QQ用户登录界面
2.5.1修改窗体的属性
首先打开VisualC#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.设置窗体的StartPosition属性
窗体的StartPosition属性用于确定程序运行时，窗体第一次出现的位置，它有如图2-23所示的5个可选值，这里应当选择CenterScreen，表示窗体第一次出现的位置为显示器的屏幕中央。
图2-23设置窗体的StartPosition属性
至此，对窗体属性的修改工作已完毕，这时查看窗体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控件
2.5.8添加复选框控件
图2-37添加复选框控件
2.5.9添加按钮控件
最后在工具箱中的【公共控件】列表中找到按钮（Button）控件，在窗体上添加3个Button控件，并将各自的Text属性分别设为“查杀木马”、“设置”和“登录”。
整好位置后的窗体如图2-35所示。
图2-38添加按钮控件后的最终效果
小结
介绍了一个实例——QQ用户登录界面的设计，通过对该实例的学习，让读者对VisualC#2008用户界面设计有一个整体、系统的认识，并且能够设独立的计出优秀的用户界面。
升级会员 