Windows程序UI设计探讨[资料，笔记]

      又要搞论文交流了，这是一个毫无意义的活动，但是又必须参加又要求和工作相关，实在是苦煞我了。毕竟是要花费时间的，干脆想了这个题目，主要目的是自己想学习一下。

正文.......................

   Windows程序UI设计探讨

1.背景介绍

UI就是用户界面( user interface ) ,概括成一句话就是——人和工具之间的界面。在人和机器的互动过程中，必须经由界面。这个界面实际上是体现在我们生活中的每一个环节的，例如我们开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面，到了使用软件的时候，用户能够通过视觉看到的都是界面。这个界面包括硬件和软件。本文所关注的UI设计特指Windows操作系统下的软件界面。

用户界面设计有三个基本的原则：置界面于用户的控制之下；减少用户的负担；保持界面的一致性。 从程序设计开发的角度来看，界面设计可以分为结构设计、交互设计、视觉设计三个部分。结构设计　是界面的骨架，可以领导整个软件的运行流程和界面的整体。交互设计是程序的神经，使用户与软件处理部分进行沟通，最终目的是使产品让用户能简单使用。 任何产品功能的实现都是通过人和机器的交互来完成的。因此，人的因素应作为设计的核心被体现出来。 视觉设计是程序的脸面，要达到使用户愉悦的目的，包括色彩、字体、页面等。下图可以直观的看出界面在人机交互中的关键地位。

图一：蓝色代表软件内部功能，红色代表界面，绿色代表用户

2. UI设计的一些原则。

对于Windows用户来说，用户认识到的就是所看到的。必须看到的现实就是：界面是面向用户的，用户需要的是开发者开发的应用软件满足其需求，并且易于使用。好的用户界面使得用户不用阅读用户手册或接受培训就能使用应用软件。

2.1 交互设计的一些原则：
　　2.1.1有清楚的，针对性的操作提示。 使用讯息和标签措辞要适当。屏幕上显示的文本是用户主要的信息源。文本措辞直接影响用户的理解。要使用用户的语言，而非技术的语言。讯息措辞要积极，显示用户处于控制之中，并提示如何正确使用软件。如， “你输入了错误信息”还是“帐号应为8位数”会给用户不同的体验。此外，讯息措辞要一致，在屏幕上显示的位置要一致。
　　2.1.2让用户控制界面。"下一步"、"完成"，面对不同层次提供多种选择，给不同层次的用户提供多种可能性。让用户知道自己当前的位置，使其做出下一步行动的决定。允许工作中断，方便退出。整个交互过程提供快速反馈。给用户心理上的暗示，避免用户焦急。
　　2.1.3允许兼用鼠标和键盘等多种输入。同一种功能，提供多种方式。
    2.1.4使用非破坏性的缺省按钮。通常每个屏幕定义一个缺省按钮，如果用户按了回车键调用此按钮。问题是有时用户会意外敲击回车键，结果激活了缺省按钮。缺省按钮决不能有潜在的破坏性，如删除或保存(也许用户根本不想保存)。最好的方法是使用组合键来设置按钮，更彻底的方法是去掉默认按钮，这违背了同时支持多种输入的原则，但是在特定的场合是可以考虑的。

  2.1.5在操作焦点处打开窗口。当用户双击一个对象显示其编辑／详情屏幕，用户的注意力亦集中于此。因而在此处而不是其它地方打开窗口才有意义。
   2.1.6弹出菜单不应是唯一的功能来源，主要功能菜单不应该被隐藏起来。适当使用上下文相关菜单。根据情况提供鼠标右键的这种菜单，缺少过滥都是不科学的。

2.1.7提供标准的常用功能 ,提供界面的快捷方式。如，常用的按钮、菜单应该有和其它同类软件相同的快捷键，一般 打开放在文件菜单下。如果一个菜单项，按下去会弹出一个窗口，那么这个菜单项的文字末尾应该有一个省略号来暗示用户，例如 “打开...”

2.1.8要考虑各种层次的用户的操作水平的不均衡。

2.2视觉设计的一些原则：

2.2.1一致性。保证界面的协调一致。对于列表框来说，如果双击其中的项，使得某些事件发生，那么双击任何其它列表框中的项，都应该有同样的事件发生。所有窗口按钮的位置要一致，标签和讯息的措辞要一致，颜色方案要一致。

2.2.2  界面布局很重要。人们是自左而右，从上而下阅读，基于人们的习惯，屏幕的组织也应当是自左而右，从上而下。界面清晰明了，屏幕不能拥挤，拥挤的屏幕让人难以使用。实验结果(Mayhew，1992年)显示屏幕总体盖度不应超过40％，而分组中屏幕盖度不应超过62％。如果要表达的信息比较多，最好分屏显示。  区域排列。当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。区域左对齐是最好的方法。与之相应的标签则应右对齐，置于编辑区域旁。这是屏幕上组织区域的一个整洁有效的方式。 数据对齐要适当。对一列列的数据，通常的作法是整浮点数右对齐，字符串左对齐。  有效组合。逻辑上关联的项目在屏幕上应当加以组合，以显示其关联性。反之，任何相互之间毫不相关的项目应当分隔开。在项目集合间用间隔对其进行分组／或用方框也同样可做到这一点。

2.2.3界面间切换很重要。如果从一个屏幕转换到另一屏幕很困难，用户会很快灰心并放弃。当屏幕流程与用户想完成的工作流程相符，此软件对用户才有意义。由于不同用户工作方式不同，应用软件需要有足够的灵活以支持他们不同的方式。尽可能的提供给用户一个相对容易、自由的操作界面；
　2.2.4 提供视觉线索。图形符号的视觉的刺激远远大于文字。尽量使用真实世界的比喻。如：电话、打印机的图标设计，同样功能用同样的图形。加图标的目的是为了使它更醒目，更突出。但是如果不加区分的全加、滥加，反而突出不了重点，都是重点就等于都不是重点。加图标要保持风格一致，不要一个按钮的图标是XP风格的真彩图标，下一个又成了Win95风格的16色图标，到下一个又成了Mac风格的唯美图标，这样一个大杂烩显得极不专业，降低用户的信赖度。
　2.2.5色彩与内容。整体软件不超过5个色系，尽量少用红色、绿色。近似的颜色表示近似的意思。颜色使用要适当,得一致，以使整个软件有同样的观感。此外，在不同平台上，色彩的表现不尽人意.在一个系统上看上去很好，在另一个系统上常常看上去很糟,需要考虑软件的运行环境而不是开发环境下闭门造车。颜色的使用要遵循对比原则。确保屏幕的可读性，最好的方法是遵循对比原则：在浅色背景上使用深色文字，在深色背景上使用浅色文字。蓝色文字以白色为背景很容易读，但以红色为背景很难辨认。问题出在蓝色与红色之间没有足够反差，而蓝色与白色之间则反差很大。字体使用要适当。要用那些可读性好的字体，如Times Roman。节俭、有效地使用两、三种字体的屏幕看上去远胜于使用五、六种字体的屏幕。此外，字体的使用要一致，要记住每次改变了字体的大小、风格(粗体、斜体、下划线，……)、样式或颜色，都是在使用不同的字体，就表示了他们的不完全一致。显示一定要考虑用户所使用的输入／输出设备，如触摸设备相对要大些。

2.2.6豪华界面，不适合所有的软件。华而不实的感觉往往来自界面。一般来讲，游戏类、播放器类，需要美丽的界面，

3. UI设计原则具体的表现。

下面根据我们的日常工作，在VS2005的开发环境下，C#语言下，讲讲怎么贯彻UI的设计原则，并且简单描述一些界面设计方法的实现。

我们就按照一个程序的运行过程来讲述吧。

1．   启动程序。

一般的程序启动后，显示的是用户登录界面，或者直接进入主程序了。在进入主程序前，如果你的程序启动需要比较长的时间，比如连接数据库，自动检测更新。那么，请给出用户温馨的提示，或者加载适当的loading界面，以避免漫长的不知所措的等待。否则用户可能认为你的程序没有响应，而进行其他不必要的操作。，如果认为自己双击太慢会导致多个程序的运行（如果没有限制）如果认为程序无响可能导致用户调用进程管理杀掉你的程序。一个简单的处理方法就是，在启动的时候，先加载一个带有背景图的窗体，显示内容效果和界面可以根据自己需要定制。或者在设计的时候考虑好需要的时间，使用Timer计时等候。当主程序初始化完毕了，或者计时结束了，传递一个标志，将该窗体隐藏或者关闭，再调用主界面。利用窗体的Opacity属性和Timer可以实现启动界面和主程序的完美过渡。

2．更新消息。

一般来说，如果程序可以并且用户选择了自动更新的，那么启动后程序会进行这个操作。如果自动更新的话，就需要及时和用户进行交互，即通知用户我要更新了。采用MessageBox的方法，也许会给人突兀的感觉，试想，如果当用户在欣赏电影或埋头工作的时候，“哐”弹出一对话框，肯定是比较鲁莽的方式。如果像msn那样，在任务栏，缓慢弹出动画滑翔窗体，在视觉效果上，会给人以柔和的感觉。

其实现方法是：当触发该事件之后，在TaskBar位置显示窗体，并且利用一个Timer来刷新窗体的位置，实现缓慢上移的效果。在完全弹出后为了保持一段时间，需要在窗体到达最高点时激发Timer2，timer1.Interval = 213;属性，设置为需要停留的时间。然后使用同样的方法将窗体位置下移到最底部后关闭。在窗体上应该提供用户选择的按钮和默认出发按钮。（图二）

3．   菜单

在功能比较强大的情况下，菜单将会比较多，将所有功能都进行罗列不是一种好方法，那样会严重影响用户的视觉效果。处理方法有几种，一是自动隐藏不常用的功能，当用户需要时点击按钮（像微软的小三角一样）显示所有功能。二是，允许用户配置自己常用的菜单项，可以使用XML来存储用户的配置三是使用右键，充分利用上下文菜单ContextMenuStrip。四是，像VS.NET的工具栏一样，将菜单集中隐藏，当鼠标移动到特定区域时显示菜单。下面介绍VSNET工具栏的实现方法：1。对于自动停靠的实现：判断窗体距离屏幕边界的距离，当小与一定距离时，使用Anchor  和 Dock 属性将窗体附着在屏幕边缘，然后将窗体隐藏。这里的隐藏不仅仅 是使用hide，为了再次显示出来，需要重新绘制窗体的大小，视其小到一定程度，比方说一个小矩形。然后使用Timer判断鼠标是否移动到该范围内，是的话，就将窗体的大小设置为正常，重新显示出来。2。是否自动隐藏的按钮，可以使用picturebox来实现。3。使用ListView实现添加工具（菜单）4。使用ListView实现添加栏目。

4 透明窗体

在计算性能和并发性能越来越强大的情况下，也许用户想同时做两件事情，那么如果我们的桌面常常显得有点狭小。对于有底图的需要多层视觉效果的软件用户来说，透明窗体也是一个基本的开始。这样的话，用户可以同时看到前台和后台运行的窗体，岂不是一举两得？在具体的实现上，主要是各种对象的BackColor, TransparencyKey,Topmost，Opacity等一些属性的合理搭配。，还有鼠标在不同层次界面时，各个对象对鼠标的捕获。鼠标的捕获一般可以使用Capture属性的合理变化来实现。如果想一直捕获鼠标，需要使用鼠标钩子，尚在研究中！呵呵。

（图3）

4．   用户的操作

对于用户来说，操作越简单越好，程序的使用思路越清晰越好。下面结合环境简单说明一下常用控件该如何合理使用。

3.5.1对于较长时间的运算：

建议使用进度条（progress bar）比如要进行数据库操作，需要时间长的情况。使用进度条可以让用户有个等待的时间，否则用户不知道你的程序在干什么，用户对于不明不白花费的时间一般容易恼火。设计的时候，对自己的操作运算时间进行估算，确定是否需要使用。如果只有5秒钟，用户一般是可以忍受的，加入进度条反而会产生画蛇添足的效果。

在使用进度条的同时，可以配合使用状态栏。StatusBar经常被放置在窗体的下面，建议使用dock。可以在状态栏中提供多个面板（pane）来提供不同的信息。 状态栏中，通常都会有一个面板来提示程序运行的信息，例如显示进度，时间等。需要扩展的话，需要owerndrawn属性支持。可以添加按钮等，如取消。一般，在长时间的后台运算开始时，在状态栏中设置开始的状态信息，在计算结束之后，清除状态信息或将状态信息设置为停止状态，在后台运行期间通过状态栏来显示必要的错误信息，提示用户当前的状态。比如，进行一个计算时，开始显示：正在计算，请耐心等待。当运算结束时显示：可以结束，正确退出。

等待指针的使用，在进行计算的时候，尤其在很难计算出这些操作的进度的情况下，设置前台鼠标指针为wait cursor是对用户一个很好的提示。如果有些操作必须是阻塞的，这时需要使用等待指针（wait cursor）也是对用户很好的交代。同样，光标的形状是非常灵活的，合理的使用能够给用户恰当的提示。

总之，使用上面的控件，能通过可视化的方式通知用户有一些程序正在执行过程中，可能需要等待一定的时间。

在程序中合理使用try…finally语句可以达到很好的效果。保证无论遇到什么情况，是正常也还，是异常也好，反正最后都会执行到finally。

3.5.2操作开始之后，在适当的时候提供必要的程序开关。

用户应当能够通过界面操作取消或终止较长时间的运算。不管你在做什么，都要给用户一个机会，因为用户是程序的使用着。当然，不能让用户，任何时间都可以插手程序的操作，比方，一个数据保存的界面，保存，关闭，取消三个按钮，当正在保存数据的时候，如果强行关闭的话，会导致数据的异常，在这种情况下就需要适当的启用，禁用控件。对于该界面来说，“保存”点击后，禁用“关闭按钮”。在保存处理完毕后，再启用“保存按钮”。

3.5.3适时合理禁用一些菜单

通过可视化的方式提示用户在运行某些程序的时候某些功能是被禁用的，程序结束后，重新启用一些被禁止的菜单和控件，并通过适当的方式提示用户操作已完成。同时，适当的启用禁用菜单可以使用户更清晰的理解应用程序的工作流程，理解应用程序执行的逻辑。比如用户，一般先要看你界面上什么功能可以使用，什么需要达到一定的前提才能使用。在执行某功能的时候，通过禁用启用，可以知道这个不能执行。当执行完毕后，用户发现，哦，那个按钮亮了，可以执行了。

3.5.4验证用户的输入，使用validation control。

避免因为用户的失误，导致程序的失败，意外。使用界面友好的MessageBox，注意要在提示对话框中使用适当的按钮和图标，它的重载比较多，根据具体的情况选择不同的图标和按钮。比方说，如果用户强行退出，可以弹出警告，这个时候就应该告诫用户可能产生的不良后果。

3.5.5使用适当的控件

使用TreeView控件来显示有层次的数据，使用ListView来显示一组具有多个列的数据，使用DataGrid控件可以让用户改变每一个单元格中的数据，使用TabControl可以将窗体中的控件按照使用逻辑进行分类，根据具体的需要开发复合控件，扩展控件，自定义控件。

3.5.6 合理使用Splitters Docking与Anchoring属性

当窗体放大时，你的窗体上的各种元素是否能够按照比例放大，并且填充区域呢。

用Splitter控件来分离用户区域，使用Dock属性的Fill选项使控件能够填充屏幕的一部分，设置Anchor可以在窗口大小变化时，保证窗体中的控件与窗体的相对位置不发生变化。通过设置

3.5.7不同分辨率下显示效果的自动调整。

考虑到用户的使用环境，程序在高分辨率下，字体，图片，显示需要随着分辨率自动调整，以满足用户的视觉效果。

3.5.8通过使用Common Dialog可以让用户通过熟悉的界面来实行标准的操作

ColorDialog，FontDialog，OpenFileDialog等等

3.5.9．对于较长时间的操作，不要阻塞主线程，也就是UI线程

如果时间长的话，建议使用多线程。可以使用ThreadPool.QueueUserWorkItem()来进行异步调用。在该类中，管理线程，QueueUserWorkItem：将方法变成代理，将代理交给QueueUserWorkItem，如果没有其他线程，则立即计算，否则需要等待，给用户提供 取消/停止 的功能。从其它线程中更新用户界面中的控件，需要使用BeginInvoke和delegate。Hook，当前线程中调用的方法，获得另外线程中的方法，在另外的线程中操作。不是用来创建线程，只是让线程去执行想执行的方法。代理  函数指针的封装，自己作为对象 在程序中传递，实现callback机制。在NF2中，使用辅助线程Backgroundworker

3.5.10 关闭确认原则。关闭需要激活原则，使权限不够的用户不能关闭程序。对实时软件尤其重要。