VB中界面的设计原则及美化
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2006 年第 3 期 总第四十九期
常州工程职业技术学院学报
JOURNAL OF CHANGZHOU INSTITUTE OF ENGIN来自百度文库ERING TECHNOLOGY
Vol . 3 2006 Sep No. 49
VB 中界面的设计原则及美化
王 侃 ①
常州工程职业技术学院
摘 要 良好的界面设计决定了应用程序的易用性和可操作性 ,设计界面时应遵循简洁 、一 致性 、重点突出 、内容和形式的统一的原则 ;在此基础之上 ,本文介绍了美化界面的几个小技 巧 ,如制作半透明窗体 、制作渐变背景色和界面背景花纹的制作 。 关键词 界面 设计原则 美化
Dim pictfile As String ’位图文件名 Dim FILEPATH As String ’文件路径 Sub BackPict (pictfile) ’利用图片框控件装入图片 ,代码略 ’网格控件覆盖整个窗体背景 ,代码略 ’所有单元大小等于基本图案大小
For i = 0 To grid1. Cols - 1 For j = 0 To grid1. Rows - 1 grid1. ColWidth(i) = picture1. ScaleWidth 3 15 grid1. RowHeight (j) = picture1. ScaleHeight 3 15 Next j , i ’选定所有单元
另外 ,图片与图标的使用也可以提高应用 程序的可视效果 ,在某些时候不用文本而利用 图像就可以更形象地传达信息 。带有表示各 种功能图标的工具栏 ,是一种很有用的界面组 成 ,但如果不能很容易地识别图标所表示的功 能 ,反而会事与愿违 。在设计工具栏图标时 , 应仔细考察现在流行什么标准 ,尽量采用通行 的 、意义明确的图标 ,以免引起用户理解上的 歧义 。只要在整个应用程序中合理的利用各 种显示效果并能保持一致 ,这都能更好的促进 内容与形式的统一 。
一致的外观将体现应用程序的协调性 ,如 果缺乏一致性就会使界面混乱而无序 ,这样的 界面将会使应用程序看起来混乱而不严密 ,体
条重要的信息 ,它的标题栏应当安排放在能被 用户第一眼看到的位置 , 而各种操作按钮如 “确 定 ”、“取 消 ”则 应 当 处 于 该 标 题 栏 的 右 下
① 作者简介 :王侃 ,女 ,讲师 。
1. 界面设计原则
1. 1 简洁
界面设计最重要的原则就是简洁与明了 。 对于应用程序而言 ,如果界面看上去很难 ,则 可能程序使用本身也比较复杂 ,而在设计时稍 稍深入考虑一下 ,便有助于创建看上去和用起 来都很简单的界面 。从美学的角度来讲 , 整 洁 、简单明了的设计更有可取性 。
1. 2 一致性
— 56 —
VB 中界面的设计原则及美化
方 ,因为用户通常是要使用按钮来完成窗口的 操作 。将内容相似的控件适当的分组也是非 常重要的 ,按照控件在功能或关系上的联系 , 将它们放在一起 ,在视觉效果上也要比将它们 分散在屏幕的各处要好得多 ,也使得界面层次 分明 ,结构清晰 。
1. 4 内容和形式的统一
一致性原则在设计中是最容易被违反 ,同 时也最容易修改和避免的 ,因此在开发应用程 序之前就应建立设计风格 ,事先规定好设计要 素。
1. 3 重点突出
在绝大多数的程序界面设计中 ,并不是所 有的内容都具有一样的重要性 ,所以应抓住重 点 ,将较重要和经常用到的内容放在对用户来 说处在一目了然的 、显要的位置上 ,次要的内 容则应当处于次要的位置 。习惯的阅读顺序 一般是从左到右 ,从上到下 。按照此原则 ,用 户第一眼看到的应是计算机屏幕的左上部分 , 因此最重要的内容应当放在这里 。比如有一
可以利用网格控件来实现背景花纹 。首 先在 VB 窗体上建立一个网格控件 ,使网格行 不可见 ,去掉固定行和固定列 。
然后设计一个花纹图案 ,形成 BMP 位图文 件 ,如 Pic1. bmp ,或者从其他图像中截取一段 图案 ,也可以利用 Windows 系统提供的图案 ,将 其调入 Picture 控件 。设定网格的每个单元与 该图案大小相同 ,使单元的数量正好覆盖整个 窗体背景 ,再将所以单元均显示该图案 。通过 子程序 BackPict ( ) 实现以上过程 ,不论图案大 小 、窗体大小 ,程序都能自动调整网格控件大 小和网格单元大小及单元数量 。参考代码如 下:
grid1. SelStartCol = 0 grid1. SelStartRow = 0 grid1. SelEndCol = grid1. Cols - 1 grid1. SelEndRow = grid1. Rows - 1 grid1. Picture = Picture1. Picture End Sub Private Sub Form-Load ()
2. 2 制作渐变的的界面背景色
— 57 —
VB 中界面的设计原则及美化
在许多应用程序中 ,经常可以看到以某种 颜色由浅至深的渐变作为背景的窗口 。使用 VB 制作这类窗口的方法有不少 ,而通过调用 API 函数绘制渐变的窗口背景色 ,似乎是一种 既简单又节省资源的方法 。
在 module 文件中加入下列声明语句 : Declare Function CreateSolidBrush Lib“GDI” (ByVal crColor As Long) As Integer Declare Function FillRect Lib“USER”(ByVal hDC As Integer ,lpRect As RECT ,ByVal hBrush As Integer) As Integer Declare Function DeleteObject Lib“GDI”(By2 Val hObject As Integer) As Integer Type RECT ’申明变量 left 、top 、right 、bottom 均为 Inte2 ger 类型 End Type Private Sub Form- Paint () ’申明变量 Color 、hBrush 、OldMode 、RetVal 、 StepSize 、X 均为 Integer 类型 ’申明变量 FillArea 为 RECT 类型 ’对各变量进行初始化设置
在开发应用程序中 ,为了使其更具吸引 力 ,有个良好的界面是非常重要的 。界面的设 计和美化不仅影响到它本身外观的可观赏性 , 而且对应用程序的可操作性也有不可忽视的 作用 。一个有着良好界面的应用程序往往会 给用户一个好印象 ,使用户易于接受并积极使 用 。良好的界面并不是只有专业的美术人员 才能设计出来 ,在 VB 中通过在窗体上拖曳控 件的方式为创建用户界面提供了非常简便的 方法 ,因此了解用户界面的设计原则及美化的 方法 ,是每个程序设计人员都要做的事情 。
2. 界面美化
在遵循以上界面设计原则的基础上 ,再来 谈谈在 VB 中美化界面的几个小技巧 。
2. 1 制作半透明窗体
使用 SetLayeredWindowAttributes 函数 ,可以 轻松的实现半透明窗体 。按照微软的要求 ,透
明窗体窗体在创建时应使用 WS- EX-LAYERED 参数 (用 CreateWindowEx) ,或者在创建后设置 该参数 (用 SetWindowLong) ,我选用后者 。全部 函数 、常量声明如下 :
在界面 上 使 用 色 彩 可 以 增 加 视 觉 上 的 感 染力 ,美化界面突出重点 ,但一定不可滥用色 彩 ,使用色彩过多过滥会给人纷杂的感觉 。每 个人对颜色的喜爱有很大的不同 ,用户的品味 也会各不相同 。颜色能够引发强烈的情感 ,如 果是设计针对普遍用户的程序 ,那一般说来 , 最好保守传统 ,采用一些柔和的 、更中性化的 颜色 。当然 ,对特定的用户就要依据用户自己 的选择了 。少量采用明亮色彩可以有效地突 出或者吸引人们对重要区域的注意 。依据许 多程序设计人员的经验 ,应当尽量限制应用程 序所用颜色的种类 , 而且色调也应该保持一 致。
Private Const WS EX LAYERED = &H80000 Private Const GWL EXSTYLE = ( - 20) Private Const LWA ALPHA = &H2 Private Const LWA COLORKEY = &H1 Private Sub Form Load () Dim rtn As Long rtn = GetWindowLong ( hwnd , GWL EX2 STYL E) rtn = rtn Or WS EX LAYERED SetWindowLong hwnd , GWL EXSTYLE , rtn SetLayeredWindowAttributes hwnd , 0 , 200 , LWA ALPHA End Sub
Private Declare Function GetWindowLong Lib “user32”Alias“GetWindowLongA”(ByVal hwnd As Long , ByVal nIndex As Long) As Long
Private Declare Function SetWindowLong Lib “user32”Alias“SetWindowLongA” (ByVal hwnd As Long , ByVal nIndex As Long , ByVal dwNewLong As Long) As Long
For X = 1 To 80 hBrush = CreateSolidBrush ( RGB ( 0 , 0 , Col2 or) ) RetVal = FillRect (Me. hDC ,FillArea ,hBrush) RetVal = DeleteObject (hBrush) Color = Color - 4 If Color < 0 Then Color = 0 FillArea. top = FillArea. bottom FillArea. bottom = FillArea. bottom + StepSize Next Me. ScaleMode = OldMode End Sub 按 F5 运行 ,就会出现一个以从上至下 、由 浅至深的渐变蓝色为背景的窗口 。对上述代 码稍加改动 ,便可制作出各种颜色和水平方向 的渐变背景 。
现不出应有的价值 ,不但对用户的使用带来不 便 ,甚至还会使用户觉得应用程序不可靠 。因 此设计界面时尽量与当前流行的应用程序风 格一致 。当今 Windows 应用程序一般都有标题 栏 、菜单栏 、工具栏和状态栏等 ,设计时如保持 这样的风格能使用户更容易接受 。另外整个 应用程序中各个界面的风格也要保持一致 。
Private Declare Function SetLayeredWindow Attributes Lib“user32”(ByVal hwnd As Long , By2 Val crKey As Long , ByVal bAlpha As Byte , ByVal dwFlags As Long) As Long 其中 hwnd 是透明窗体 的句柄 ,crKey 为颜色值 ,bAlpha 是透明度 ,取值 范围是[ 0 ,255 ] ,dwFlags 是透明方式 ,可以取两 个值 : 当取值为 LWA-ALPHA 时 ,crKey 参数无 效 ,bAlpha 参数有效 ;当取值为 LWA COLOR2 KEY时 ,bAlpha 参数有效而窗体中的所有颜色 为 crKey 的地方将变为透明 ———这个功能很有 用 :我们不必再为建立不规则形状的窗体而调 用一大堆区域分析 、创建 、合并函数了 ,只需指 定透明处的颜色值即可 。具体代码如下 :
2. 3 制作界面背景花纹
— 58 —
某些应 用 程 序 的 背 景 呈 现 美 观 而 又 富 有 立体感的花纹 ,我们可利用窗体的 Picture 属性 来调用图形文件 ,该方法非常简单且方便 ,但 该方法也有美中不足之处 ,一是图片大小受限 制 ,调整起来也较麻烦 ;二是浪费资源 ,因为一 般的花纹图案基本上都是由小图案重复构成 的。
常州工程职业技术学院学报
JOURNAL OF CHANGZHOU INSTITUTE OF ENGIN来自百度文库ERING TECHNOLOGY
Vol . 3 2006 Sep No. 49
VB 中界面的设计原则及美化
王 侃 ①
常州工程职业技术学院
摘 要 良好的界面设计决定了应用程序的易用性和可操作性 ,设计界面时应遵循简洁 、一 致性 、重点突出 、内容和形式的统一的原则 ;在此基础之上 ,本文介绍了美化界面的几个小技 巧 ,如制作半透明窗体 、制作渐变背景色和界面背景花纹的制作 。 关键词 界面 设计原则 美化
Dim pictfile As String ’位图文件名 Dim FILEPATH As String ’文件路径 Sub BackPict (pictfile) ’利用图片框控件装入图片 ,代码略 ’网格控件覆盖整个窗体背景 ,代码略 ’所有单元大小等于基本图案大小
For i = 0 To grid1. Cols - 1 For j = 0 To grid1. Rows - 1 grid1. ColWidth(i) = picture1. ScaleWidth 3 15 grid1. RowHeight (j) = picture1. ScaleHeight 3 15 Next j , i ’选定所有单元
另外 ,图片与图标的使用也可以提高应用 程序的可视效果 ,在某些时候不用文本而利用 图像就可以更形象地传达信息 。带有表示各 种功能图标的工具栏 ,是一种很有用的界面组 成 ,但如果不能很容易地识别图标所表示的功 能 ,反而会事与愿违 。在设计工具栏图标时 , 应仔细考察现在流行什么标准 ,尽量采用通行 的 、意义明确的图标 ,以免引起用户理解上的 歧义 。只要在整个应用程序中合理的利用各 种显示效果并能保持一致 ,这都能更好的促进 内容与形式的统一 。
一致的外观将体现应用程序的协调性 ,如 果缺乏一致性就会使界面混乱而无序 ,这样的 界面将会使应用程序看起来混乱而不严密 ,体
条重要的信息 ,它的标题栏应当安排放在能被 用户第一眼看到的位置 , 而各种操作按钮如 “确 定 ”、“取 消 ”则 应 当 处 于 该 标 题 栏 的 右 下
① 作者简介 :王侃 ,女 ,讲师 。
1. 界面设计原则
1. 1 简洁
界面设计最重要的原则就是简洁与明了 。 对于应用程序而言 ,如果界面看上去很难 ,则 可能程序使用本身也比较复杂 ,而在设计时稍 稍深入考虑一下 ,便有助于创建看上去和用起 来都很简单的界面 。从美学的角度来讲 , 整 洁 、简单明了的设计更有可取性 。
1. 2 一致性
— 56 —
VB 中界面的设计原则及美化
方 ,因为用户通常是要使用按钮来完成窗口的 操作 。将内容相似的控件适当的分组也是非 常重要的 ,按照控件在功能或关系上的联系 , 将它们放在一起 ,在视觉效果上也要比将它们 分散在屏幕的各处要好得多 ,也使得界面层次 分明 ,结构清晰 。
1. 4 内容和形式的统一
一致性原则在设计中是最容易被违反 ,同 时也最容易修改和避免的 ,因此在开发应用程 序之前就应建立设计风格 ,事先规定好设计要 素。
1. 3 重点突出
在绝大多数的程序界面设计中 ,并不是所 有的内容都具有一样的重要性 ,所以应抓住重 点 ,将较重要和经常用到的内容放在对用户来 说处在一目了然的 、显要的位置上 ,次要的内 容则应当处于次要的位置 。习惯的阅读顺序 一般是从左到右 ,从上到下 。按照此原则 ,用 户第一眼看到的应是计算机屏幕的左上部分 , 因此最重要的内容应当放在这里 。比如有一
可以利用网格控件来实现背景花纹 。首 先在 VB 窗体上建立一个网格控件 ,使网格行 不可见 ,去掉固定行和固定列 。
然后设计一个花纹图案 ,形成 BMP 位图文 件 ,如 Pic1. bmp ,或者从其他图像中截取一段 图案 ,也可以利用 Windows 系统提供的图案 ,将 其调入 Picture 控件 。设定网格的每个单元与 该图案大小相同 ,使单元的数量正好覆盖整个 窗体背景 ,再将所以单元均显示该图案 。通过 子程序 BackPict ( ) 实现以上过程 ,不论图案大 小 、窗体大小 ,程序都能自动调整网格控件大 小和网格单元大小及单元数量 。参考代码如 下:
grid1. SelStartCol = 0 grid1. SelStartRow = 0 grid1. SelEndCol = grid1. Cols - 1 grid1. SelEndRow = grid1. Rows - 1 grid1. Picture = Picture1. Picture End Sub Private Sub Form-Load ()
2. 2 制作渐变的的界面背景色
— 57 —
VB 中界面的设计原则及美化
在许多应用程序中 ,经常可以看到以某种 颜色由浅至深的渐变作为背景的窗口 。使用 VB 制作这类窗口的方法有不少 ,而通过调用 API 函数绘制渐变的窗口背景色 ,似乎是一种 既简单又节省资源的方法 。
在 module 文件中加入下列声明语句 : Declare Function CreateSolidBrush Lib“GDI” (ByVal crColor As Long) As Integer Declare Function FillRect Lib“USER”(ByVal hDC As Integer ,lpRect As RECT ,ByVal hBrush As Integer) As Integer Declare Function DeleteObject Lib“GDI”(By2 Val hObject As Integer) As Integer Type RECT ’申明变量 left 、top 、right 、bottom 均为 Inte2 ger 类型 End Type Private Sub Form- Paint () ’申明变量 Color 、hBrush 、OldMode 、RetVal 、 StepSize 、X 均为 Integer 类型 ’申明变量 FillArea 为 RECT 类型 ’对各变量进行初始化设置
在开发应用程序中 ,为了使其更具吸引 力 ,有个良好的界面是非常重要的 。界面的设 计和美化不仅影响到它本身外观的可观赏性 , 而且对应用程序的可操作性也有不可忽视的 作用 。一个有着良好界面的应用程序往往会 给用户一个好印象 ,使用户易于接受并积极使 用 。良好的界面并不是只有专业的美术人员 才能设计出来 ,在 VB 中通过在窗体上拖曳控 件的方式为创建用户界面提供了非常简便的 方法 ,因此了解用户界面的设计原则及美化的 方法 ,是每个程序设计人员都要做的事情 。
2. 界面美化
在遵循以上界面设计原则的基础上 ,再来 谈谈在 VB 中美化界面的几个小技巧 。
2. 1 制作半透明窗体
使用 SetLayeredWindowAttributes 函数 ,可以 轻松的实现半透明窗体 。按照微软的要求 ,透
明窗体窗体在创建时应使用 WS- EX-LAYERED 参数 (用 CreateWindowEx) ,或者在创建后设置 该参数 (用 SetWindowLong) ,我选用后者 。全部 函数 、常量声明如下 :
在界面 上 使 用 色 彩 可 以 增 加 视 觉 上 的 感 染力 ,美化界面突出重点 ,但一定不可滥用色 彩 ,使用色彩过多过滥会给人纷杂的感觉 。每 个人对颜色的喜爱有很大的不同 ,用户的品味 也会各不相同 。颜色能够引发强烈的情感 ,如 果是设计针对普遍用户的程序 ,那一般说来 , 最好保守传统 ,采用一些柔和的 、更中性化的 颜色 。当然 ,对特定的用户就要依据用户自己 的选择了 。少量采用明亮色彩可以有效地突 出或者吸引人们对重要区域的注意 。依据许 多程序设计人员的经验 ,应当尽量限制应用程 序所用颜色的种类 , 而且色调也应该保持一 致。
Private Const WS EX LAYERED = &H80000 Private Const GWL EXSTYLE = ( - 20) Private Const LWA ALPHA = &H2 Private Const LWA COLORKEY = &H1 Private Sub Form Load () Dim rtn As Long rtn = GetWindowLong ( hwnd , GWL EX2 STYL E) rtn = rtn Or WS EX LAYERED SetWindowLong hwnd , GWL EXSTYLE , rtn SetLayeredWindowAttributes hwnd , 0 , 200 , LWA ALPHA End Sub
Private Declare Function GetWindowLong Lib “user32”Alias“GetWindowLongA”(ByVal hwnd As Long , ByVal nIndex As Long) As Long
Private Declare Function SetWindowLong Lib “user32”Alias“SetWindowLongA” (ByVal hwnd As Long , ByVal nIndex As Long , ByVal dwNewLong As Long) As Long
For X = 1 To 80 hBrush = CreateSolidBrush ( RGB ( 0 , 0 , Col2 or) ) RetVal = FillRect (Me. hDC ,FillArea ,hBrush) RetVal = DeleteObject (hBrush) Color = Color - 4 If Color < 0 Then Color = 0 FillArea. top = FillArea. bottom FillArea. bottom = FillArea. bottom + StepSize Next Me. ScaleMode = OldMode End Sub 按 F5 运行 ,就会出现一个以从上至下 、由 浅至深的渐变蓝色为背景的窗口 。对上述代 码稍加改动 ,便可制作出各种颜色和水平方向 的渐变背景 。
现不出应有的价值 ,不但对用户的使用带来不 便 ,甚至还会使用户觉得应用程序不可靠 。因 此设计界面时尽量与当前流行的应用程序风 格一致 。当今 Windows 应用程序一般都有标题 栏 、菜单栏 、工具栏和状态栏等 ,设计时如保持 这样的风格能使用户更容易接受 。另外整个 应用程序中各个界面的风格也要保持一致 。
Private Declare Function SetLayeredWindow Attributes Lib“user32”(ByVal hwnd As Long , By2 Val crKey As Long , ByVal bAlpha As Byte , ByVal dwFlags As Long) As Long 其中 hwnd 是透明窗体 的句柄 ,crKey 为颜色值 ,bAlpha 是透明度 ,取值 范围是[ 0 ,255 ] ,dwFlags 是透明方式 ,可以取两 个值 : 当取值为 LWA-ALPHA 时 ,crKey 参数无 效 ,bAlpha 参数有效 ;当取值为 LWA COLOR2 KEY时 ,bAlpha 参数有效而窗体中的所有颜色 为 crKey 的地方将变为透明 ———这个功能很有 用 :我们不必再为建立不规则形状的窗体而调 用一大堆区域分析 、创建 、合并函数了 ,只需指 定透明处的颜色值即可 。具体代码如下 :
2. 3 制作界面背景花纹
— 58 —
某些应 用 程 序 的 背 景 呈 现 美 观 而 又 富 有 立体感的花纹 ,我们可利用窗体的 Picture 属性 来调用图形文件 ,该方法非常简单且方便 ,但 该方法也有美中不足之处 ,一是图片大小受限 制 ,调整起来也较麻烦 ;二是浪费资源 ,因为一 般的花纹图案基本上都是由小图案重复构成 的。