（七）图形用户界面设计（持续更新）

文章目录

• • 7.1 GUI设计原则
  • • 7.1.1 从GUI原型到实现
    • 7.1.2 良好的GUI设计指南
    • • 7.1.2.1 用户控制式
      • 7.1.2.2 一致性
      • 7.1.2.3 个性化和客户化
      • 7.1.2.4 宽容
      • 7.1.2.5 反馈
      • 7.1.2.6 审美和可用性
  • 7.2 桌面GUI设计
  • • 7.2.1 主窗口
    • 7.2.2 辅窗口
    • 7.2.3 菜单和工具栏
    • 7.2.4 按钮及其他控件
  • 7.3 Web GUI设计
  • • 7.3.1 Web应用系统的使能技术
    • 7.3.2 内容设计
    • 7.3.3 导航设计
    • 7.3.4 利用GUI框架支持Web设计
  • 7.4 GUI导航建模
  • • 7.4.1 用户体验故事情节
    • 7.4.2 UX元素建模
    • 7.4.3 行为性UX协作
    • 7.4.4 结构性UX协作

7.1 GUI设计原则

GUI客户端分类：

• 桌面平台的可编程客户端：胖客服端thick client，在客户端上可以实现一定的业务功能
• Web平台的浏览器客户端：瘦客户端thin client，基于web的图形用户界面，需要从服务器获取数据和程序

7.1.1 从GUI原型到实现

1、IS应用系统GUI设计的典型过程是从用例开始的

2、GUI设计的中心问题：用户控制式（条件是系统的完整性、安全性由系统而不是用户来控制）

3、现代用户面向对象程序时事件驱动的，对象对事件和消息作出响应，对象之间的内部通信由外部用户激活的事件来触发

4、GUI原型的双重目的：评价GUI屏幕的感觉并展现它的功能，真正的外观要到实现阶段才能完成

7.1.2 良好的GUI设计指南

GUI设计以用户为中心

7.1.2.1 用户控制式

（主要的GUI设计指南）

1. 用户对控制的掌管
2. No mothering非母亲式原理——程序不应该像母亲一样为你做事：
   • 用户启动行为，因此，如果程序取得控制权的话，用户也要获得必要的反馈（一个沙漏或一个等待的指示器）

7.1.2.2 一致性

（第二条最重要的指南）

1、遵循标准和做事情的常规方式，至少有两方面一致性：

• 符合GUI供应商的标准
• 符合组织内部开发的命名、编码和其他GUI相关的标准

2、整个界面一致，如背景色一致：需要限制GUI developer的创造力

3、与软硬件平台保持一致

7.1.2.3 个性化和客户化

（理解成适应性）

1、是两个相互关联的方针，GUI的个性化是为个人使用的简单客户化，客户化是按照不同的用户组对软件进行裁剪的管理任务

• 个性化（personalization）：单个用户的使用行为
• 客户化（customization）：对某一个特定的组织做一个特定东西

7.1.2.4 宽容

一个好的界面一个以一种宽容的态度允许用户进行实验和出错。

• 允许用户进行实验或出错，鼓励用户探索，允许用户选择错误的路径
• 提供多级撤销/取消undo操作
• 比如是否警告用户取款的后果个性化指南相关

7.1.2.5 反馈

1. 反馈由用户控制式指南派生出来的，与用户控制指南最相关
2. 在系统中为每个用户事件建立视听提示

7.1.2.6 审美和可用性

1. 审美是系统视觉上的吸引力
2. 可用性是与使用界面有关的方便性、简单性、有效性、可靠性和生产率
3. 提高用户满意度

7.2 桌面GUI设计

2、典型windows应用系统包括一个单独的主应用窗口——主窗口，这个主窗口有一组弹出窗口——辅窗口（支持用户在主窗口或其他辅窗口中的活动，许多都是对数据库的CRUD）

3、主窗口和辅窗口之间最主要的区别：主窗口有菜单栏和工具栏，辅窗口没有

4、从编程的角度，窗口是GUI容器，容器可以是主窗口，也可以是对话框（辅窗口）、窗格、面板

5、容器、菜单、控件构成了GUI组件

• 菜单项与快捷键相关
• 属性页是标签夹中标签的窗口名称

7.2.1 主窗口

主窗口有一个边界（框架），框架包括标题栏、菜单栏、工具栏、状态栏以及窗体上可浏览和修改的内容区

• 行浏览器
• 树型浏览器

7.2.2 辅窗口

1、辅窗口忽略了一些不重要的IS应用，对主窗口起到补充作用，它扩展了主窗口的功能，特别是修改数据库的操作（CRUD）

2、辅窗口通常是模态的，用户在任何其他的应用窗口交互之前必须响应并关闭辅窗口

3、例子：登录窗口

4、辅窗口的形式和形状：

• 对话框
• 标签夹：属性页是标签夹中标签的窗口名称
• 下拉式列表
• 消息框

7.2.3 菜单和工具栏

GUI组件包括菜单和工具栏

菜单项与快捷键有关

工具栏包含动作和空间，它们重复最常用的菜单项的功能

7.2.4 按钮及其他控件

菜单和工具栏是在用户界面中实现事件处理的表现形式，类似的事件处理表现形式由GUI控件提供，将控件设计为拦截、理解和实现用户事件，通常可以将控件分为以下两类：

• 动作按钮
• 其他控件

7.3 Web GUI设计

1、Web应用程序是一种允许用户在internet浏览器执行业务逻辑的Web（分布式C/S）系统

2、业务逻辑可以放在服务器或/和客户端

3、在Web应用系统中，菜单项、按钮、超链接这些GUI组件用于用户事件编程

4、链接到其他 页的方式有：

• 页标题下的菜单栏
• 菜单栏下面的面包屑区域
• 左边和右边的菜单面板

5、GUI web屏幕的实体可以被划分为框架

7.3.1 Web应用系统的使能技术

1、大多数web应用系统的核心使能技术是Web服务器，它给浏览器提供 页。

2、维护Web客户端和服务器之间的连接的最原始的机制是Cookie

3、脚本script和小程序applet用于创建动态的客户端页面

4、小程序applet是一个编译好的组件，在浏览器环境中执行沙袋概念

5、服务器页中的脚本使用标准数据访问库来访问数据库

• 典型使能技术如：ODBC，JDBC，远程数据对象（RDO）和ActiveX数据对象（ADO）

6、服务器端的使能技术：超文本标记语言HTML，动态服务器页面ASP、Java服务器页JSP

7、 页的使能技术：客户端脚本（JavaScript/VBScript）、可扩展标记语言（XML）文档、Java applet、JavaBean或ActiveX控件

8、部署体系结构支持跟先进的Web应用系统，包括4个层次的计算结点tiers：

• 浏览器客户端

  • 可在客户端运行浏览器外的应用代码（脚本或小程序）

• Web服务器

  • 处理来自浏览器的页面请求，并动态生成页面和要在客户端执行和显示的代码

• 应用服务器

  • 在系统实现涉及分布式对象时，应用服务器不可或缺，它处理业务逻辑

• 数据库服务器

  • 业务构件封装存储在数据库中的持久数据

7.3.2 内容设计

1、内容设计必须思考 如何将 站或Web应用系统的可视内容展现在用户的Web浏览器上

2、桌面设计和Web内容设计的区别：设计师不一定认识 站或Web应用系统的观众

3、从 站到Web应用系统的统一 continuum

• Web应用系统是一个包含部分或全部未确定内容的 站。只有当访问者从Web服务器请求 页后，其内容才最后确定。因为最后的 页内容根据访问者的行动请求变化，这种 页成为动态 页。
• 静态和动态 页的区别——源于Web服务器和应用服务器之间的区别
  • Web服务器管理静态 页
    • 他找到浏览器请求的结果页面并将他们发送到浏览器
  • 应用服务器管理动态 页
    • 他从Web服务器接收不完整的页面，扫描 页代码，与数据库通信并请求需要的信息，在 页上插入新的信息，并把 页传给Web服务器

4、表单

• 表单在页面中显示信息给用户，允许输入数据或发送信息组合给服务器处理并显示结果
• 表单设计指南：
  • 决定域的类型
  • 确定域的适当大小
  • 尽可能制定域的应用格式——文本巨作，数字居右
  • 等（P265）

7.3.3 导航设计

1、如果有什么区别的话，Web应用系统中的导航往往比桌面中的用户界面更友好

2、菜单和链接——是 页之间导航的两个主要工具

• 菜单和链接有类似的==功效（affordance）==——指用户期望GUI项具有的行为

7.3.4 利用GUI框架支持Web设计

1、MVC的困境

• 可编程客户端和基于Web的应用系统中，在presentation和control之间分离和消除循环是架构中的一个棘手问题。
• 棘手是因为——presentation提交请求给control服务，control决定应接收响应的Presentation对象。
• 相关技术：集中（模型1，presentation和control对象成对出现）和分散（模型2，核心的PCBMER框架提倡二者物理隔离）

2、使用Struts技术

动作表单属于PCBMER的bean层

7.4 GUI导航建模

• GUI设计者的任务是把互相依赖的屏幕联系在一起，使结构容易理解，用户不至于在打开的屏幕中迷失。
• GUI设计应方便用户通过界面探索，说明应用程序功能的主要技术是一个设计较好的菜单和工具栏结构

7.4.1 用户体验故事情节

（User eXperience（UX）story boarding）

1、UX故事情节建模的5个步骤：

• 在用例中添加参与者
  • 包括定义参与者的结局应用能力、领域知识和用户进入系统的频率
• 为用例添加可用性特点
  • 可用性是一个非功能性需求，通常被定义为补充规范类的系统限制
• 定义UX元素
  • 其中包括确定GUI容器和构件。一个特殊的固定格式的类模型用来战线UX元素
• 用UX元素为用例流程建模
  • UX驱动下的结构性协作建模
• 为用例建立屏幕导航模型
  • UX驱动下的行为性协作建模

7.4.2 UX元素建模

1、最普及的是包构造型，称为，定义了一个包含UX故事情节的包

2、相关UML构造型

• ——屏幕抽象定义为输出到屏幕的窗口
• ——代表了窗口的容器形式
• ——在屏幕的任何区域展现，存在于form中

3、域标签：

• Editable说明字段是否能被用户修改
• Visible说明字段在用户的视野中是否可见（但是程序仍然可以访问）隐藏域建模
• Selectable意味着字段是否可选择（高亮或其他，表明是活动的）
• 例如：一个域具有标签值，如{editable = true ,visibility = visible}。相应地，可以利用一个公共可见性图标标记域可见性（名字前有“+”），对隐藏性的“-”

7.4.3 行为性UX协作

UML交互图（顺序图/协作图）用于表示事件的UX流程

7.4.4 结构性UX协作

1. 结构性UX协作产生UX-构造型类图
2. 结构性UX协作模型可以作为用例的导航图，它是UX故事情节的基础。为此，结构性UX协作模型用箭头表示类之间的关系，已说明屏幕、输入窗口和容器之间可能的导航关系