第10章应用程序界面设计
一、授课内容
授课科目：计算机基础（VB）
授课内容：第10章数据的输入输出
授课类型：讲授
授课时间：？学时
主讲教师：朱泽民
二、教学目的要求
知识目标：
1．掌握Visual Basic菜单编辑器的使用；
2．掌握下拉式和弹出式菜单的设计方法；
3．熟练掌握通用对话框控件的常用属性、事件和方法；
4. 掌握多窗体程序设计的一般步骤和方法。
能力目标：
培养学生“提出问题、分析问题、解决问题”科学的思维方法。
情感目标：
通过创设情景，激发学生应用VB编写程序的学习兴趣，培养学生独立思考、勇于探究的学习精神；鼓励学生编写程序来解决实际生活中的问题。
三、教材分析
述：用户界面是一个应用程序最重要的部分。在windows环境下操作一个软件，最直观方便的莫过于窗体、对话框、菜单、工具栏等。
教学重点：本章重点介绍菜单、对话框等界面设计的相关内容。
教学难点：通用对话框的设置与使用。
四、教学方法
问题教学法、讲授法、类比法、讨论法等。
五、教学过程
（一）导入新课
对用户而言，界面就是应用程序，无论花多少时间和精力来编制和优化代码，应用程序的可用性仍然依赖于界面。
（二）讲授新课
10.1 菜单
菜单提供了一种人机对话的方式，方便用户选择应用系统的各种功
能。
有关菜单的术语。
（1）菜单栏、（2）菜单标题、（3）菜单项、
（4）子菜单、（5）分隔线、（6）复选菜单、
菜单按使用形式有下拉式和弹出式两种。
10.1.1用菜单编辑器建立菜单
菜单编辑器是Visual Basic提供的用于设计菜单的工具。可以使用如下几种方法打开菜单编辑器：
（1）执行“工具”菜单中的“菜单编辑器”命令。
（2）使用快捷键Ctrl+E。
（3）单击工具栏中的“菜单编辑器”按钮。
（4）用鼠标右键单击窗体，打开快捷菜单，然后单击“菜单编辑器”命令。
菜单项属性区
菜单项显示区
菜单项编辑区
【例10-1】设计一个应用程序，通过菜单修改窗体的背景颜色。
（P213）
分析：本例要通过菜单修改窗体的颜色，则需要添加一个菜单，并且要为相应的菜单项编写事件过程。在菜单编辑器里添加一个主菜单和两个菜单项，通过单击菜单项来实现改变窗体的背景颜色。
10.1.2 运行时创建和修改菜单
部分应用程序运行过程中需要动态地增减菜单项，即要生成动态菜单。动态菜单是对常规菜单的一种扩展，菜单项不再是固定不变的，它可根据用户的操作内容动态地添加与之有关的菜单项或删除与之无关的菜单项。例如：在许多软件的File菜单中可以自动地添加并改变菜单项，用以保存最近几次调用过的文件名。使用菜单控件数组可以达到这一目的。
10.1.3 弹出式菜单的建立
Visual Basic提供了PopMenu方法来显示弹出式菜单。格式如下：[对象.]PopupMenu <菜单名> [ ,flags [ ,X [ ,Y [ ,BoldCommand ] ] ] ]
PopupMenu方法参数表
参数Flags参数值说明
<菜单名
>要激活的弹出式菜单的名称
X,Y整型数据指定弹出式菜单被激活时显示在屏幕上的位置坐标，缺省时，显示位置指定在当前鼠标光标位置
vbPopupMenuLeftAlign X值定义为弹出式菜单左边界位置
Flags vbPopupMenuCenterAlign X值定义为弹出式菜单的中
心位置vbPopupMenuRightAlign
X值定义为弹出式菜单的右
边界位置vbPopupMenuLeftButton
能用鼠标左键单击选择弹
出式菜单的菜单命令vbPopupMenuRightButton
能用鼠标右键单击选择弹
出式菜单的菜单命令
【例10-3】编写一个应用程序，通过弹出式菜单实现字体的变化。（P216）
10.2对话框
Visual Basic中对话框分为3类：预定义对话框、自定义对话框和通用对话框。
预定义对话框是系统提供的，Visual Basic提供的预定义对话框有两种：输入和输出对话框，分别使用InputBox和MsgBox函数调用。（第三章内容）
自定义对话框是用户根据自己的需要自行设计的。
通用对话框（CommonDialog）是一种可以添加到应用程序中的特殊控件。
10.2.1通用对话框
Visual Basic的通用对话框CommonDialog控件提供了一组基于Windows的标准对话框界面。使用通用对话框控件，可以显示文件打开、另存为、颜色、字体、打印和帮助六种对话框。使用前，必须先
把“通用对话框”控件添加到工具箱中，具体步骤如下：
（1）选择“工程”菜单中的“部件”命令，打开“部件”对话框；
（2）在控件选项卡中选中“Microsoft Common Dialog Controls 6.0”；
（3）选择“确定”按钮，即可把通用对话框控件添加到工具箱中。
在使用通用对话框控件时，可以直接在设计阶段将其添加到窗体
中。可以放置在窗体的任何位置，程序运行时，控件被隐藏。若要显示通用对话框，可以对它的Action属性赋予相应的值；也可以使用Show方法来打开对应对话框。
Action属性Show方法说明
1ShowOpen显示文件打开对话框
2ShowSave显示另存为对话框
3ShowColor显示颜色对话框
4ShowFont显示字体对话框
5ShowPrinter显示打印机对话框
6ShowHelp显示帮助对话框
除了Action属性外，通用对话框主要的共同属性还有：
属性说明
CancelError
通用对话框内有一个“取消”按钮，用于向应用程序警告用户想取消当前操作。当CancelError属性值为True时，若用户单击“取消”按钮，通用对话框自动将错误对象Err.Number设置为
32755（cdlCancel）以便供程序判断。若CancelError属性设置为False，则单击“取消”按钮时不产生错误信息
DialogTitle
用户自行设计对话框标题栏上显示的内容
Flags
Flags属性可修改每个具体对话框的默认操作
对CommonDialog控件属性的设置有三种方法：
（1）代码窗口中设置（2）属性窗口中设置（3）属性页中设置。属性页中设置方法是：在属性窗口中单击“自定义”，或者选中CommonDialog控件图标单击右键，选择属性项，弹出“属性页” 对话框。
下面详细讨论使用CommonDialog控件显示每一种类型的对话框。1．文件“打开”对话框
说明文件“打开”对话框的相关属性：FileName、FileTitle、Filter、FilterIndex、InitDir。
【例10-4】编写一个应用程序，用于打开一个文本文件进行编辑。（P219）
分析：打开文本文件要用到通用对话框的“打开”对话框，将对话框的Action属性设为1或调用ShowOpen方法即可。
2．“另存为”对话框
“另存为”对话框所涉及的属性基本上和“打开”对话框一样，只是还有一个 DefaultExt属性，用于表示存储文件的默认扩展名。
【例10-5】编写一个应用程序，将文本框中的内容保存到一个文本文件。（P221）
3．“颜色”对话框
颜色对话框的一个重要的属性：Color。它用来返回或设置用户指定颜色的值。
【例10-6】编写一个应用程序，设置文本框的背景颜色。（课本P222）4．“字体”对话框
在使用字体对话框设置字体之前，必须先设置Flags属性值。该属性通知CommonDialog控件是否显示屏幕字体、打印机字体或两者皆有之。如果没有设置Flags属性值而直接使用CommonDialog控件，Visual Basic将显示如图所示的错误提示。
通用对话框用于字体操作时涉及到的重要属性有：
（1）Flags属性
（2）Font 属性集
（3）Color属性
【例10-7】编写一个应用程序，通过“字体”对话框设置文本框的字体。要求程序运行后，选择字体为楷体、二号、有下划线，效果如图10-17所示。（课本P224）
5．“打印”对话框
10.2.2 自定义对话框
自定义对话框就是用户自己设计的一个窗口，窗口中放置了一些用于交互信息的控件。
对话框不同于普通窗口，没有最大化、最小化按钮，不能改变大小，所以根据对话框的特性，需要在设计自定义对话框窗体时对窗体做出如下所示的一些属性设置。
要显示和使用自定义对话框，需要调用对话框的Show方法。根据Show方法参数的不同，自定义对话框可以分为模式对话框和无模式对话框。
（1）将自定义对话框窗体作为模式对话框显示。此时，在退出对话框之前，只能对该对话框进行操作。
格式：<自定义对话框窗体名>.Show vbModal
（2）将自定义对话框窗体作为无模式对话框显示。此时除可操作对话框外，可以在不退出对话框的同时转移焦点去操作程序的其他部分。
格式：<自定义对话框窗体名>.Show
10.3多重窗体程序
10.3.1 多重窗体的设计
多重窗体是指一个应用程序中有多个并列的普通窗体，每个窗体可以有自己的界面和程序代码，完成不同的功能，可以利用多重窗体来设计功能更加强大，结构更复杂的应用程序。
【例10-9】编写一个拥有三个窗体的多重窗体程序，要求第一个窗体作为启动窗体，在第二个窗体上画直线，在第三个窗体上画圆。（P230）10.3.2 Sub Main过程
启动过程（Sub Main）：一个较复杂的应用程序通常有多个窗体或多个工程，在显示窗体之前一般要进行一些初始化操作，需要在启动程序时执行一个特定的过程。一个工程可以含有多个标准模块，但Sub Main过程只能有一个。一个程序中如果设计了Sub Main过程，则它必须被优先执行。
Sub Main过程必须建立在标准模块中，在标准模块代码窗口中输入“Sub Main” ，再回车即可建立了Sub Main过程框架。例如，在一个应用程序中有一个标准模块和三个窗体。在标准模块中创建一个Sub Main过程如下：
Sub Main（）
…… '初始化程序
Form3.Show
End Sub
此时程序运行Sub Main过程，先执行初始化程序处理，再完成显示Form3窗体功能。
10.3.3 闲置循环与DoEvents 语句
10.4 多文档界面设计
10.4.1 多文档界面概述
用户界面样式主要有单文档界面和多文档界面两种。多文档界面（Multiple Document Interface）是由一个父窗口及多个子窗口组成的，Visual Basic 6.0就是一个多文档界面的例子，用户在一个工程中可以打开多个窗体界面进行编辑。
1．多文档界面的形式
在多文档界面中，有且只有一个主文档窗体（MDI主窗体），它的窗体区域不能放置除菜单类组件以外的任何控件，但可以拥有多个子窗体（MDI子窗体），MDI主窗体是子窗口的容器；MDI子窗体不能独立存在，只能在MDI主窗体的窗体区域内活动。
一般来说，在程序运行过程中，MDI窗体有如下特性：
（1）所有子窗体均显示在MDI窗体的工作区中。
（2）最小化子窗体时，它的图标将限制于MDI窗体上而不是在任务栏中。
（3）最大化子窗体时，它的标题与MDI窗体的标题一起显示在MDI 窗体的标题栏上。
（4）MDI窗体和子窗体都可以有各自的菜单，当子窗体加载时覆盖MDI窗体的菜单。
2．与MDI有关的属性、事件和方法
（1）属性（MDIChild、WindowState）
（2）方法
①Arrange方法：该方法用来以不同的方式排列MDI中的窗体或图标。
格式：
②Dim语句：用该语句可以增加MDI子窗体。
格式：Dim 对象变量名 As [New] 对象类型
③事件：QueryUnload
10.4.2建立多文档应用程序
建立一个MDI应用程序的一般步骤：
1．创建MDI窗体
2．创建子窗体
3．建立MDI窗体的控制区
4．编写程序代码
10.5 工具栏和状态栏设计
工具栏和状态栏都属于高级控件，在使用前必须将这些控件添加到工具箱中。添加方法为打开“部件”对话框，选择“Microsoft Windows Common Control 6.0”即可。
10.5.1 工具栏设计
制作工具栏有两种方法：第一种方法是手工制作；另一种方法是通过组合使用ToolBar和ImageList控件，使工具栏制作与菜单制作一样简单易学。使用ToolBar和ImageList控件制作工具栏的步骤如下：（1）在ImageList控件中添加所需要的图像。
（2）在ToolBar控件中创建Button对象。
（3）在ButtonClick事件中用Select Case语句对各按钮编程。
样式（Style）：Style属性决定按钮的样式，共6种。
值常数按钮说明
0tbrDefault普通按钮按下按钮后恢复原态，如“新
建”按钮
1tbrCheck开关按钮按下后保持按下状态，如“倾
斜”等按钮
2tbrButtonGroup编组按钮一组按钮同时只能一个有效，
如“左对齐”等
3tbrSeparator分隔按钮对不同的选项按钮组进行分组
4tbrPlaceholder占位按钮作为占位符使用，以便安放其他
控件
5tbrDropdown菜单按钮具有下拉式菜单，如word中字体
大小
3．编写ButtonClick事件代码
工具栏控件的常用事件有ButtonClick事件和Change事件。当用户单击按钮时，将激发ButtonClick事件。实际上，工具栏上的按钮是控件数
组，此时可以用按钮的Index属性或Key属性标识被单击的按钮。
（1）用索引Index确定按钮
部分程序段为：
Private Sub Toolbar1_ButtonClick(Byval Button As ComctLib.Button) Select Case Button.Index
Case 1 FileNewProc
Case 2 FileOpenProc
………………..
End Select
End Sub
（2）用关键字Key确定按钮
Private Sub Toolbar1_ButtonClick(ByVal Button As MSCcomctLib.Button)
Select Case Button.Key
Case " TNew " FileNewProc ' TNew ,TOpen 假设为按钮的关键字
Case " TOpen " FileOpenProc
………………..
End Select
End Sub
10.5.2 状态栏设计
状态栏通常位于窗口的底部，形式上是一个长方条，主要用于显示应用程序的各种状态信息和对用户进行提示，如：系统日期、软件版本等。在Visual Basic中，用StatusBar控件建立状态栏，StatusBar控件也属于ActiveX控件。
设计状态栏时，在窗体上添加StatusBar控件，在属性窗口单击“自定义”右边的“…”或用鼠标右键单击控件，然后选择“属性”来显示“属性页”对话框。选择属性页对话框上的“通用”选项卡，其中包括Style（样式），MousePointer（鼠标指针），SimpleText（简单文本），OLEDropMode（OLE 放置方式），Enabled（有效）和ShowTips（显示提示）属性。
在运行时，可以通过Text，Picture和Width等属性动态地改变窗格对象。
（1）索引（Index）（2）“插入窗格”（3）文本（Text）（4）图片（Picture）
（5）工具提示文本（ToolTipText）（6）关键字（Key）（7）对
齐（Alignment）（8）样式（Style）（9）窗格对象的最小宽度、实际宽度和自动调整大小（10）斜面
状态栏控件的事件包括PanelClick事件和PanelDblClick事件等。如果需要获得相应状态栏的单击事件，可以在PanelClick事件过程中使用Select Case语句。该事件包含的参数能够指出发生单击的窗格对象。相应的代码可如下：
Private Sub StatusBar1_PanelClick（ByVal Panel As MSComctlLib.Panel）
Select Case Panel.Index
Case 1 ' 相应处理程序段1…
Case 2 ' 相应处理程序段2…
Case Else ' 处理其他情况…
End Select
End Sub
程序运行时，可以通过程序重新设置某些窗格的属性值，这样可以随时显示当前系统的工作状态。其中一些状态系统已具备，可直接使用（如插入改写状态），不需要编程实现；对于系统没有提供的状态，则需要编写代码来实现。
（三）课时小结
本节课主要讲了菜单的设计及通用对话框的设计与使用方法。简单的介绍了工具栏和状态栏的设计。
（四）布置作业
1．课外作业
（1）课后选择题与填空题；
（2）综合题第1小题。
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 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种
实验三图形用户界面设计 实验目的 1．掌握Java语言中GUI编程的基本方法 2．掌握Java语言中AWT组件的基本用法 3．掌握Java语言中Swing组件的基本用法 实验导读 1.通过图形用户界面(GUI：Graphics User Interface)，用户和程序之间可以方便地进 行交互。 AWT(Abstract Windowing Toolkit)，中文译为抽象窗口工具包，是Java提供的用来建立和设置Java的图形用户界面的基本工具。AWT由Java中的java.awt包提供，里面包含了许多可用来建立与平台无关的图形用户界面(GUI)的类，这些类又被称为组件(components)。 Swing是一个用于开发Java应用程序用户界面的开发工具包。它以抽象窗口工具包（AWT）为基础使跨平台应用程序可以使用任何可插拔的外观风格。Swing开发人员只用很少的代码就可以利用Swing丰富、灵活的功能和模块化组件来创建优雅的用户界面。 JDK写程序所有功能都是靠虚拟机去操作本地操作系统。比如window下，就是JDK 用windows API实现功能。而awt包中很多组件是组件自身去调用本地操作系统代码swing包中的组件采用的是调用本地虚拟机方法，由虚拟机再调用本地操作系统代码。意思就是中间多了一层，这样就加强了swing包的移植性，与本地关系不那强了。 图3.1 AWT常用组件继承关系图 Container为容器，是一个特殊的组件，该组件中可以通过add方法添加其他组件进来。 2.布局，容器中的组件的排放方式。常见的布局管理器： FlowLayout（流式布局管理器）：从左到右的顺序排列。Panel默认的布局管理器。 BorderLayout（边界布局管理器）：东，南，西，北，中。Frame默认的布局管理器。 GridLayout（网格布局管理器）：规则的矩阵
1.用户满意度=功能+___人机界面_____+响应时间+可靠性+易安装性+____信息____+可维护性+其他因素 2. ____人机交互（人机对话）____是指人与计算机之间使用某种语言、以一定的交互方式，为了完成任务进行的一系列信息交换过程。 3.软件界面设计分为____功能性设计界面____、____情感性设计界面____、____环境性设计界面____。 4.进行系统分析和设计的第一步是___用户分析_____。 5.使用较早，也是使用最广泛的人机交互方式是____交互方式____。 6.软件界面开发流程包括____系统分析____、____系统设计____、____系统实施____三个阶段 7.设计阶段包括界面的____概念设计____、____详细设计____、____原型建立____与界面实现以及综合测试与评估等8.VB 是以结构化___Basic_____语言为基础、以____事件驱动作____为运行机制的可视化程序设计语言。 9.菜单使用形式主要有____菜单操作____和____Tba控件操作____两种。 10.随着计算机图形技术的发展，以直接操纵、桌面隐喻以及所见即所得为特征的____图形用户界面____技术广泛被计算机系统采用。 11.在用VB 开发应用程序时，一般要布置窗体、设置控件的属性、___编写代码___。 12. 假定在窗体上有一个通用对话框，其名称为CommonDialog1,为建立一个保存文件对话框，则需要把Action 属性设置为__value__。 13. 计时器事件之间的间隔通过__interval__属性设置。 14. 语句“Print “5+65=”;5+65”的输出结果为__5+65=70__。 15. 设有下列循环体，要进行4次循环操作，请填空。 x = 1 Do x = x * 2 Print x Loop Until__x<=32__ 16. 下列程序段的执行结果为__2 3 5__。 x = 1 y = 1 For I = 1 To 3 F= x + y x = y y = F Print F; Next I 17. 以下为3个列表框联动的程序，试补充完整。 Private Sub Dir1_Change() File1.Path=Dir1.Path End Sub Private Sub Drive1_Change() Drivel.Path=File1.Path;Dir1.Path=Drivel.Path__[7]__ End Sub 18. 在下列事件过程中则响应该过程的对象名是cmdl，事件过程名是__窗口标题事件__。 Private Sub cmd1_Click() Form1.Caption=“VisualBasic Example” End Sub 19. 当将文本框的SelStar 属性设置为0时，表示选择第开始位置在第一个字符之前，设置为1时表示__[9]__。 20. 以下程序代码实现单击命令按钮Command1 时形成并输出一个主对角线上元素值为“-”，其他元素值为“+”第6*6 阶方阵。 Privas Sub Command1_Click() DimA(6,6) For I = 1 To 6 For J = 1 To 6 If I = J Then Print “-” Else __[10]__ End If Print A (I,J); Next J Print Next I End Sub 21. 字母B的KeyAscii 码值为65，其KeyCode码值___[11]__。 22. Visual Basic 中的控件分为3类：__[12]_、ActioveX 控件和可插入对象。
浅析网页界面设计——首页设计 首页设计，需开宗明义突出主题 开宗明义，无论是对于一篇文章、一场会议或一部专题片，还是对于一个网站来说，都是必不可少的。那么能为一个网站开宗明义的地方（标签）就是Title（标题）和Description（描述、副标题），而能够为Title和Description 提供进一步诠释的就是网站的首页。 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上，反过来说，页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中，网站标题、副标题、菜单（狭义上的导航，请参看《WEB导航设计》）、用户登录信息、关于、版权信息这几项是网站的基础信息，是一个网站身份的象征，承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命，在设计页面时，这些信息必不可少。 而网站的首页，除了需要显示以上这些基础信息之外，最重要的是还承担着网站转化率的重任，这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢？我的理解是把网站所提供的产品或劳务通过版式设计、文案设计、色彩设计之后，展示在首页适当的位置，并使其不受其它信息元素干扰，甚至使其它元素为它（产品或劳务）服务。 突出主题思想 知道了首页需要展示哪些信息，知道了信息之间的权重，如何把信息呈现得更符合信息本身，却不是一件容易的事，需要时间的磨练与经验的积累。就设计本身而言，是一件感性的事，不像数学公式，它缺乏严谨的理论做为指导，所以在工作中，经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性，在重要信息的设计上突出设计的主题思想，在与Boss、同事讨论时，尽量把讨论的重点放在主题思想的呈现方式与其对转化率（或市场目标）的作用之上。你可以说这是功利的设计，没错，所有的设计都是以商业利润为最终目的。 如何突出 在版式设计上，要求把信息分门别类，让用户在扫描（只为扫描而设计，请参考《Don’t Make Me Think》）页面时保证视觉流的流畅性，在短时间内（3-5秒）发现首页包函哪些区域（如菜单、广告、注册、个人信息、链接、按钮等），方便用户在第一时间内做出选择。在设计过程中，建议严格遵循四个排版的原则，即：对比、对齐、重复和亲密性（请参看《写给大家看的设计书》)。如https://www.doczj.com/doc/5f17483315.html,、https://www.doczj.com/doc/5f17483315.html,、https://www.doczj.com/doc/5f17483315.html,的首页设计。
概要 微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态内建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。
纠正示意 去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。 反例示意 操作没有主次，让用户无从选择
纠正示意 首先要避免并列过多操作让用户选额，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
2. 流程明确 为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒；而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。 二、清晰明确 作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。
宽带收费管理系统用户界面设计报告 机构公开信息
- 2 - 新闻发布系统《用户界面设计报告》 版本历史
目录 0.1 文档目的 (4) 0.2 文档范围 (4) 0.3 读者对象 (4) 0.4 参考文献 (4) 0.5 术语与缩写解释 (4) 1. 应当遵循的界面设计规范 (4) 1.1：易用性： (5) 1.2易用性细则 (5) 2. 界面的关系图和工作流程图 (5) 2.1前台管理完成界面功能一览 (5) 2.3 界面关系及工作流程 (6) 2.3.1前台管理界面关系 (6) 3. 界面关系 (6) 3.1 登录界面 (6) 3.1.1 页面说明 (6) 3.1.2 页面迁移图 (6) 3.1.3 页面说明 (7) 3.1.4 前置条件 (8) 3.1.5 关联数据表 (8) 3.1.6 补充说明： (8) 3.2 前台管理主界面 (8) 3.2.1 页面说明 (8) 3.2.2 页面迁移图 (9) 3.2.3 页面说明 (9) 3.3 入网登记单界面 (11) 3.3.1 页面说明 (11) 3.3.2 页面迁移图 (11) 3.3.3 页面说明 (12) 4．总后总结：................................................................................................. 错误！未定义书签。
- 4 - 新闻发布系统《用户界面设计报告》0. 文档介绍 0.1 文档目的 宽带收费管理系统《用户界面设计报告》。是为了开发宽带收费管理系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。 本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。本文也是项目完成后系统验收的依据。 0.2 文档范围 本文档主要包含以下几部分： 1. 文档介绍 2. 界面设计规范 3. 界面关系图 4. 主界面说明 0.3 读者对象 本文档的读者主要包含以下几类： 1. 界面设计人员 2. 美工人员 3. 编码人员 4. 测试人员 0.4 参考文献 提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下： [标识符] 作者，文献名称，出版单位（或归属单位），日期 例如： [AAA]作者，《立项建议书》，机构名称，日期 [SPP-PROC-SD]SEPG，系统设计规范，机构名称，日期 0.5 术语与缩写解释 1. 应当遵循的界面设计规范 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设
UI设计工作流程 很多没有在正规的大公司工作过的设计师同学问过我面试时如果面试官问项目开发的工作流程是什么？其实，我觉得每个公司可能有自己的工作流程，有些些公司可能需要设计师从前期立项到中间开发到后期产品测试和项目上线的跟进要全程参与而有些公司可能只需要设计师在产品研发阶段进行参与，但不管那种方式，我觉得设计师有必要知道一个产品从立项到完成的所有步骤。现在我大概介绍一种工作流程给大家。 一、产品设计阶段 首先在一个项目开始之前会是立项，领导或者相关部门提出想法给产品经理，产品经理拿到项目之后，会对整个项目进行分析，这中间产品经理需要做很多工作。 1、首先产品经理配合市场部门进行市场分析，来搞清楚目标市场和产品定位，如果时 间充足的话，尽可能的也要做用户调研来确定产品的用户需求的挖掘和分析。 2、竞品分析也是产品经理和设计师都要做的功课。 3、这些前期工作完成之后，剩下的要做原型设计，预算产品周期，疏通整个产品流程，出原型图交给交互设计师 当然产品经理在做这些工作时是要保持时刻跟其他部门的同事密切共同的，例如产品的市场定位需要找市场部门的同事进行沟通，产品设计规范，界面布局等需要找UI设计师来沟通。而开发环境和项目周期可能要找到技术开发的同事来进行协调。有些公司还有专门的交互设计师，需要产品经理在前期制作原型图和交互设计师充分配合完成交互说明，以方便
后期的视觉设计和技术开发。 二、UI视觉设计 产品原型（包括前期交互稿）完成之后需要交付给UI设计师进行视觉设计，这里指的UI设计其实严格来说是属于GUI，因为UI的本意为user interface（用户界面）涵盖了交互设计，用户体验设计和视觉设计。而交互设计和用户体验是在产品开始之时就已经同时展开的，所以这里说的设计通常指的GUI界面视觉设计。 1、在UI设计师开始之前，要充分了解产品定位，通过目标用户的喜好风格分析开确定视觉设计的大概调性。 2、进行竞品分析，找出竞品优劣， 3、搜索素材灵感，多找优秀设计作为自己设计灵感的来源是一个非常有效的方法（参考学习而不是让你去抄袭）。 1）确定配色，布局和设计风格。 2）进行界面设计。 3）完稿后进行可用性测试，修改修改修改直至最重定稿。 在整个视觉设计中，设计师除了把控好整体的视觉设计风格，更要有耐心设计好各个细节，例如icon，字体，元素之间的间距等这些不起眼的地方往往代表了整个app的质量，细节之处做好，会给用户在视觉上带来一种安全可靠的感觉，所以细节非常重要。 这里有必要说一下视觉设计规范。有些公司的视觉规范是在视觉设计开始之前就要订下来的，而有些公司是整个视觉设计完成之后再来制定视觉规范。为什么可以这样呢，视觉规范是为了方便整个设计团队在设计时更容易进行沟通来进行的，而设计工作在进行中可能会随时进行变更视觉风格，所以设计前期来确定设计规范的话，可能会对后期的设计带来一定的限制，所以设计师内部可能会有一个简单的设计文档来进行交流。等设计稿定下来之后，再来制作标准的设计视觉规范，方便后期开发和之后设计工作继续跟进。 整个设计稿确定之后，设计师要出高保真视觉稿，交给技术来进行沟通，同时还需要对
1、页面命名 每个页面都要有与之模块对应的名称。 2、页面兼容性 （1）页面大小兼容 o自适应1366*768px及以上的分辨率 o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条） （2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。 （3）浏览器兼容 兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。 o文字 文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。 o容图片 容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作 显示数据（表格） （1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。 （2）单无格：文字图片容左对齐，数字、金额容右对齐。 （3）操作容原则上均用文字表达，如“编辑-删除” （4）鼠标划过表格单行时，颜色高亮。 （5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。 （6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。 选中数据 （1）勾选全选则选中当页所有记录 （2）去掉当页某个记录的勾选，则全选也去掉勾选。 （3）翻页后，自动去掉已勾选的记录及全选的勾选。 （4）翻页后是否进行选择记录的保留应试具体业务而定。 （5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据 （1）新增的记录必须排在新增页的首行； （2）所有列表页面默认按数据新增时间倒序排列。 （3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （4）提交成功后自动回到数据列表页。 （5）提交时需对主要标识字段进行重复值、空值（空格）判断。 修改数据 （1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。 （2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。 （4）提交时需对主标识字段进行重复值、空值（空格）判断。 查询数据 （1）把所有查询条件全部显示出来，并放在查询列表上方位置。 （2）每个查询条件必须有预置文案。 （3）每次查询后保留当前输入的查询条件。
人机界面设计原则 “以人为本” 1. 以用户为中心的基本设计原则 在系统的设计过程中，设计人员要抓住用户的特征，发现用户的需求。在系统整个开发过程中要不断征求用户的意见，向用户咨询。系统的设计决策要结合用户的工作和应用环境，必须理解用户对系统的要求。最好的方法就是让真实的用户参与开发，这样开发人员就能正确地了解用户的需求和目标，系统就会更加成功。 2. 顺序原则 即按照处理事件顺序、访问查看顺序(如由整体到单项，由大到小，由上层到下层等与控制工艺流程等设计监控管理和人机对话主界面及其二级界面。 3. 功能原则 即按照对象应用环境及场合具体使用功能要求，各种子系统控制类型、不同管理对象的同一界面并行处理要求和多项对话交互的同时性要求等，设计分功能区分多级菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面，从而使用户易于分辨和掌握交互界面的使用规律和特点，提高其友好性和易操作性。 4. 一致性原则 包括色彩的一致，操作区域一致，文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、形状、字体自成一体，不同设备及其相同设计状态的颜色应保持一致。界面细节美工设计的一致性使运行人员看界面时感到舒适，从而不分散他的注意力。对于新运行人员，或紧急情况下处理问题的运行人员来说，一致性还能减少他们的操作失误。 5. 频率原则
即按照管理对象的对话交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等，提高监控和访问对话频率。 6. 重要性原则 即按照管理对象在控制系统中的重要性和全局性水平，设计人机界面的主次菜单和对话窗口的位置和突显性，从而有助于管理人员把握好控制系统的主次，实施好控制决策的顺序，实现最优调度和管理。 7. 面向对象原则 即按照操作人员的身份特征和工作性质，设计与之相适应和友好的人机界面。根据其工作需要，宜以弹出式窗口显示提示、引导和帮助信息，从而提高用户的交互水平和效率。 Apple Human Interface Guide——人机交互界面设计原则 人机交互原idliulei 则之1——隐喻 通过隐喻把人们对世界的理解转化为软件中的概念和特性是很有优势的。隐喻帮助用户建立任务的心智模型。使用通俗易懂的隐喻来表述具象或相似的概念，可以让用户对计算机环境有所掌握。比如说，Mac OSX 使用文件夹的隐喻表示储存文档的概念；用户可以整理他的硬盘，就和整理自己的档案柜一样。另一个例子是iTunes 的播放列表和iPhoto 的相册，它们就像现实世界里的音乐播放列表和相册一样。Dashboard 里的widget 也是一种隐喻，因为它需要完成的任务目的能够直接传达给用户。（可以参见Dashboard widget的设计指引。） 对于某个元素，隐喻可以建议它的使用方式，但是使用方式不应该被隐喻的实现所限制。在隐喻所建议使用方式与电脑能实现、扩展隐喻的能力之间要保持好平衡。举例来说，用户放到回收站的东西数量不应该被真正垃圾桶能容纳的东西数量所限制。 人机交互原则之2——反映用户的心智模型
山西大学计算机与信息技术学院 实验报告 姓名学号专业班级计算机科学与技术 课程名称 Java实验实验日期2014/5/29 成绩指导教师陈千批改日期 实验名称实验8 图形界面程序设计 一、实验目的 掌握常用GUI控制组件及其事件处理。 二、实验内容 1．编程包含一个标签和一个按钮，单击按钮时，标签的内容在“你好”和“再见”之间切换。 程序代码： import java.awt.Color; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; public class ChangeGUI extends JFrame { /** * */ private static final long serialVersionUID = 1L; private JButton button; private JLabel label; public ChangeGUI() { super("Say Hello"); JPanel panel = new JPanel(); JPanel panel2 = new JPanel(); setLayout(new GridLayout(2, 1, 0, 5)); button = new JButton("OK"); button.setBackground(Color.ORANGE); button.setForeground(Color.RED); panel.add(button); button.addActionListener(new OKActionListener()); label = new JLabel("你好");
第七章图形用户界面设计--实验题目 一、实验目的 1. 掌握GUI编程的基本概念。 2. 掌握基于Swing和AWT的图形用户界面的编程原理。 3. 理解容器和组件的概念，初步掌握事件编程的基本技巧。 4. 掌握Swing包中的基本组件和基本事件类。 5. 掌握常用布局管理器的使用。 二、实验内容 1．编写一个能够转换华氏温度和摄氏温度的程序。在“摄氏温度”文本域输入一个值并点击华氏按钮（两个按钮—摄氏按钮、华氏按钮），在华氏文本域显示相应的华氏温度。 反之，在“华氏文温度”文本域输入一个值，点击摄氏按钮，在摄氏文本域中显示相应的摄氏温度。 2．编写程序，使得当按下鼠标时显示鼠标的位置。 3．编写程序，界面上包括一个标签、一个文本框和一个按钮。当单击按钮时，程序把文本框中的内容复制到标签中。 4．编写满足下列要求的程序： （1）创建1个框架并将其内容窗格布局管理器设置为BorderLayout。 （2）创建2个面板并把它们添加到框架。 （3）每个面板包含3个按钮，面板使用BorderLayout布局管理器。 （4）单击按钮时，在控制台显示信息指明按钮被单击。 5．编写一个应用程序，实现如下图所示的图形界面．要求单击关闭按钮能够关闭窗口并结束程序运行。 6．编写一个应用程序，实现如下图所示的图形界面，要求单击按钮将窗口的背景颜色设置为相应的颜色。设置颜色可以调用容器的setBackground(Color c)方法，参数Color 可以使用java awt.Color类的常量，如Color.RED等。 7．编写一个应用程序，其外观是一个框架窗口，窗口中放置一个多行文本框，下方放置3个按钮，3个按钮名分别为“OK”、“Cancel”、“Exit”，鼠标单击前两个按钮，在文本框中显示按钮上文字，单击“Exit”按钮，关闭并退出程序。 8．编写一个应用程序，实现如下图所示的图形界面。要求在文本框中输入有关信息，单
网站界面设计应遵循的几个原则 网站用户界面（Website User Interface）是指网站用于和用户交流的外观、部件和程序等等。如果你经常上网的话，会看到很多网站设计很朴素，看起来给人一种很舒服的感觉；有点网站很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。网站界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。通常的讲，企业网站用户界面的设计应遵循以下几个基本原则： 1．用户导向（User oriented）原则 设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于网站的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。 2．KISS（Keep It Simple And Stupid）原则 KISS原则就是"Keep It Sample And Stupid"的缩写，简洁和易于操作
是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网页的下载不要超过10秒钟（普通的拨号用户56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；网站所有的内容和服务都在显眼处向用户予以说明等。 3．布局控制 关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有： （1）Miller公式。根据心理学家George https://www.doczj.com/doc/5f17483315.html,ler的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如https://www.doczj.com/doc/5f17483315.html,的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices 共八个分类。https://www.doczj.com/doc/5f17483315.html,的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而很多国内的网站在栏目的设置远远超出这个区间。 （2）分组处理。上面提到，对于信息的分类，不能超过9个栏目。
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设计 【摘要】本文基于用户体验剖析网页UI设计，阐述了网页界面视觉设计和网页界面交互设计重要性。结合当前人们的生活方式、行为习惯及心理体验等方面论述如何进行网页UI设计。 【关键词】网页UI设计；视觉设计；视觉吸引；交互设计；交互艺术 随着信息化的深入，网页成为人们浏览信息、获取信息、放眼世界的主要窗口之一。在传统网页的界面设计中，人们认为网页界面设计就是美工，而美工就是单纯对网页进行装饰。随着网络技术的发展与普及，网页界面设计的技术在不断的进步，设计的理念也在不断的更新，网页界面设计不再是单纯的视觉设计，而是将视觉设计与人的行为习惯、生活方式、心理体验等结合在一起的设计，基于用户体验的网页UI设计是当前研究的热点。 一、网页UI设计及用户体验 UI即User Interface（用户界面）的简称，指对软件的人机交互、操作逻辑、界面美观的整体设计。网页UI设计用户体验（User Experience，简称UE）则是一种纯主观在用户使用产品过程中建立起来的感受。由于生活习惯、文化背景、行为方式及心理体验等不同，用户体验产品时会有不同的感受，一个好的UI设计要能充分满足大众的需求，使用户在体验过程中都能心情愉悦、操作流畅、交互高效。 就网页UI设计而言，用户浏览网页的需求是什么？抽象出来可以归纳为两点：一浏览信息，二操作数据。这里的数据是指在数据库中躺着的数据，用户在单纯浏览信息时，不会对页面背后的“数据”造成任何操作，但用户进行点击链接、跳转页面和处理信息时，就要和页面背后的数据进行交互。所以，在做网页UI 设计时候主要满足于用户的这两方面的需求，第一是用户在浏览信息时候，要有一个赏心悦目的界面，即网页界面的视觉设计要美观。第二是用户在操作数据时候要高效，即网页界面的交互设计灵活。 二、网页界面视觉设计 爱美之心人皆有之，漂亮的网页界面能吸引浏览者的眼球、提高网页的浏览量。传统网页美工设计，更注重网页的布局以及网页的颜色搭配，换言之，就是重在设计网页平面效果图和以及对网页进行装饰。随着人们生活节奏的加快，快餐文化日渐丰富，仅靠传统网页美工已不能适应当今网页发展的需要。那么，如何让你的网站跟上时代的步伐，满足当今用户的需求呢？ 从用户体验出发：什么东西能让我们从电脑屏幕上看到接近于现实世界的东西？是视觉吸引，视觉吸引是非常有效的提示工具，通常在用户第一次打开某个应用，或进入某个新的界面时出现。简单的视觉吸引能扭转乾坤，把令人沮丧万
设计“好看”的用户界面（王咏刚 2003年10月） 1 问题引入 两周前，我的一个朋友小W找我聊天，跟我说了件烦心事儿：他们公司开发的一套行业软件在竞标时败给了竞争对手；当时，用户给出的理由是，小W他们的软件界面粗糙、简陋，看上去远不如竞争对手的界面那么专业。当然，小W和我都明白，对于竞标失败而言，这个理由并不充分——在行业软件市场上，大多数竞标失败都有着更深的背景原因，比如客户关系的好坏；但在公开场合里，软件性能、售后服务、用户界面等更为冠冕堂皇的理由却总能成为客户拒绝你的最好托词。为了不在今后的竞标中被客户和竞争对手轻易抓住把柄，小W下决心改进他们的软件界面。 经过研究，小W和同事们发现，他们公司开发的所有软件几乎都存在用户界面粗制滥造的通病。程序员们经常随心所欲地设计窗口、摆放控件，图标、字体和颜色的使用也没有统一的标准，由此开发出来的软件尽管在功能和性能上都表现得非常出色，但界面大多简陋不堪，一眼看上去就像是土法烧制的陶盆儿陶罐儿——单独摆在桌上还不觉得怎样，一旦和官窑里烧出的上等瓷器摆在一起，立马就会相形见绌，惨不忍睹。 为了改变现状，小W他们的第一反应是请专业的美工来主持界面设计工作。小W说：“好看不好看的问题当然属于艺术范畴。程序员们都是工程师，没有半点儿艺术头脑，再怎么折腾也是白搭。所以，我们一定要请专职的平面设计师来设计界面，程序员只要按照设计师的思路编程实现就行了。” 这个主意听上去不错，小W也的确从广告公司请来了一位平面设计师。 “当然，像麦肯、奥美那样的大广告公司我们也请不起。我们请的那人是专做平面设计的，身价不高，在行里却也小有名气——当然，比我们这些外行强多了。” “那么后来呢？”我喝着咖啡不怀好意地问，那情形就像是电影《绿茶》里姜文在向赵薇刨根问底。 “后来？要是后来一切都OK了，我还找你干什么？”小W把一肚子苦水倒在我面前。原来，平面设计师来到小W的公司以后，工作还算努力，也画出了许多漂亮的界面设计稿，但程序员们就是没法把这些设计变成现实：要么是设计出的界面像游戏软件的界面一样动感十足，让人难以接受（用户方的领导绝不会容忍下属们对着游戏画面优哉游哉地完成日常工作）；要么是设计出的界面与软件的功能自相矛盾，必备的功能没法融入到界面之中（比如，为了保证美观，设计师限制了子窗口的大小，结果好几个控件就找不到立锥之地了）；要么是界面设计得过于前卫，根本就无法用现有的窗体或控件技术实现……光是这些技术问题还不算什么，最要命的是，设计师经常对程序员们指手划脚，总是说“你们不懂，这是艺术规律”。结果，艺术规律败给了严酷的现实：当平面设计师给出的方案一次又一次被程序员们否决，大多数程序员开始消极怠工了，几乎所有人都放下了手头的工作，一边摇头一边嘟哝：“界面都定不下来，还编什么程序？”。 “你说，我该怎么办呢？”小W痛苦地问。 “你说呢？”我幸灾乐祸，一脸坏笑。 2 一些题外话 像其他软件开发环节一样，用户界面设计也可以借助一些现成的工具。 有一次，我们要为客户准备一个产品方案。方案里的好几个软件模块我们从来就没有真正实现过（这种“空手套白狼”的做法在行业软件市场里相当普遍）。为了让我们的方案更有说服力，售前工程师们干脆用制图软件Visio 里的用户界面绘制功能，把尚未问世的软件模块画得有模有样，窗体、菜单、按钮、工具栏、对话框等界面元素也都一应俱全。在方案里集成了这些界面图片以后，半数以上的用户就不会怀疑这套系统的真实性了——毫无疑问，这也是一种界面设计工作，尽管其中有些招摇撞骗的味道。 应当说，要描述和展现用户界面设计方案，最直观的方法就是把界面的样子画出来。在程序员看来，白板或稿纸上的一张界面示意图往往就能说明所有问题。不过，当我们需要在不同的开发环境中交换设计方案，或是要管理和检索界面设计文档的时候，图片信息就不如格式化的文本信息那样方便了。为此，人们陆续设计出了许多“用户界面描述语言”。利用这些语言，我们可以像编写程序那样“编写”用户界面。比如说，Delphi中用来描述窗体特性的*.dfm文件，其中的文本内容就是一种相当不错的用户界面描述语言。 与其他描述性语言类似的是，用户界面描述语言也有标准化和XML化的倾向。迄今为止，人们已经提出了AAIML、AUIML、XIML、XUL、UIML等一系列基于XML 标准的用户界面描述语言①。W3C正在制订的XForms标准②也是XML家族的一员，它很可能成为未来设计和开发Web用户界面的核心技术之一。 有关用户界面描述语言的研究和探索工作的确有助于
《用户界面设计》课程教学大纲 一、课程编号： 3152100291 二、课程名称：用户界面设计32学时 Design of User Interface 三、课程教学目的 本课程是一门软件专业选修课程。课程目标是使学生了解人机交互的概念、不同时期的用户界面特点、理解用户界面设计的基本原则和方法；根据软件技术发展的趋势，以基于Web的软件应用系统为例，结合当前主流界面实现技术，如QT4、wxWidgets、Adobe Flex 等，让学生熟练掌握软件系统用户界面设计的主要过程和可用性评价方法；最后，展望用户界面技术，让学生简单了解用户界面的新技术理论。 四、课程教学基本要求 1.了解用户界面的基本概念和历史发展 2.掌握用户界面设计方法学的广泛内涵、用户界面设计的基本方法和基本原则 3.掌握交互设计与用户界面设计的关系 4.掌握图像用户界面的特点和主要实现方法 5.基于主流技术，掌握基于Web的软件应用系统的用户界面设计实现过程 6.理解典型的三阶段事件处理机制和MVC的设计模式，能够使用主流技术进行软件 应用系统设计与开发，包括前台界面、中间业务逻辑和后台数据。 7.掌握可用性的概念和基本准则，能够对用户界面进行可用性测试和评估 8.了解用户界面新技术 五、教学内容及学时分配 1．绪论2学时软件应用系统的用户界面 用户界面与系统逻辑结构 用户界面设计与软件设计 2．人机界面概述2学时人机界面的概念、历史和特点 人机界面中的人机交互 交互设计与用户界面设计
3．用户界面设计的方法和原则2学时用户界面设计的内涵 用户界面设计的主要技术和方法 用户界面设计的基本原则 4．GUI界面设计2学时图形用户界面技术简介 Windows应用软件界面 MFC界面设计基础 5．Web界面设计2学时Web技术与基于Web的应用系统 Web界面的基本结构和常见组件 基于Ajax的Web界面设计 6．RIA界面设计2学时RIA简介 ActionScript语法及编程 基于Flex的RIA界面设计 7．MVC设计模式及实现框架技术2学时多层应用架构 MVC设计模式 MVC的典型实现框架 8．用户界面的国际化2学时国际化/本地化的概念 用户界面实现国际化的方法 9．可用性评估2学时可用性评估的概念和准则 可用性测试方法 10．用户界面新技术介绍 2 学时多通道用户界面 CSCW用户界面