东北大学——软件需求分析与系统设计——第七章笔记整理（2020年5月整理）

全九章节的笔记导航目录：其他剩余章节目录

全笔记PDF版下载链接：下载链接

---

本章目录

• 一、GUI设计原则
• • （一）GUI客户端
• 二、桌面GUI设计
• 三、Web GUI设计
• • （一）Web应用系统
  • （二）内容设计
  • （三）导航设计
  • （四）利用GUI框架支持（leverage）Web设计
• 四、GUI导航建模
• • （一）用户体验故事情节（User eXperience Storyboarding，UX）
  • （二）UX元素建模

---

一、GUI设计原则

（一）GUI客户端

1.GUI客户端的分类

• 桌面平台的可编程客户端：胖客户端（thick），在客户端上可以实现一定的业务功能（C/S模型）
• Web平台的浏览器客户端：瘦客户端（thin），基于web，需要从服务器获取数据和程序（B/S模型）

2.GUI设计指南

• 用户控制式（User in control）
  • 用户控制式是主要的GUI指南
  • 非母亲式（No mothering）管理——程序不应该像母亲一样为你做事
  • 用户启动行为；如果程序取得控制权，则用户也要获得必要的反馈（沙漏、进度条……）
• 一致性（Consistency）
  • 同一个程序内不同界面的风格应保持一致（符合操作系统的风格）
    • 界面设计不能过于创新
  • 符合组织内部开发的命名、编码和其他与GUI相关的标准
• 个性化和客户化（Personalization & Customization）
  • Personalization + Customization = Adaptability
  • 个性化：单个用户的使用行为
  • 客户化：对某一个特定的组织做一个特定东西
• 宽容（Forgiveness）
  • 允许用户进行实验或出错，鼓励用户探索，允许用户选择错误的路径
  • 提供多级撤销 / 取消（undo）操作
  • 比如是否警告用户取款的后果？这与个性化指南相关
• 反馈（Feedback）
  • 反馈由用户控制式指南派生出来的，与用户控制指南最相关
  • 在系统中为每个用户事件建立视听提示
• 审美和可用性（Aesthetics & Usability）
  • 审美是系统视觉上的吸引力
  • 可用性是与使用界面有关的方便性、简单性、有效性、可靠性和生产率
  • 提高用户满意度

---

二、桌面GUI设计

（一）主窗口（Primary Window）

1.主窗口的性质

• 主窗口有一个边界（框架）
• 框架包含窗口的标题栏、菜单栏、工具栏、状态栏以及窗体上可浏览或修改的内容区
• 窗体可浏览和修改的内容可以组织成窗格
• 窗格的分类
  • 行浏览器——用垂直滚动条或键盘上的键向上向下浏览这些记录
  • 树状浏览器——用锯齿状的列表显示相关的记录（JavaFX.TreeView）
• 主窗口区别于辅窗口的一个典型特征是：主窗口有菜单栏和工具栏，而辅窗口没有

（二）辅窗口（Secondary Window）

1.辅窗口的性质

• 通常是模态窗口——在最上层，使用其他窗口前必须关闭辅窗口
• 辅窗口的分类
  • 对话框（dialog box）
  • 标签夹（tab folder）
  • 下拉列表（drop-down list）
  • 消息框（message box）

（三）菜单和工具栏

（四）按钮及其他控件

---

三、Web GUI设计

（一）Web应用系统

1.Web应用程序

• Web应用程序是一种允许用户在Internet浏览器执行业务逻辑的Web（分布式C/S）系统
  • 业务逻辑可以放在服务器或/和客户端
• 在Web应用系统中，菜单项、按钮、超链接这些GUI组件用于用户事件编程
• 链接到其他网页的方式
  • 网页标题下的菜单栏
  • 菜单栏下面的面包屑区域
  • 左边和右边的菜单面板

2.使能技术（Enabling Technology）

• 维护Web客户端和服务器之间的连接的最原始的机制是Cookie
• 脚本（script）和小程序（applet）用于创建动态的客户端页面
  • 脚本——由浏览器解释执行的程序（JavaScript编写）
  • 小程序（applet）——编译好的组件，在浏览器环境中执行
• 访问数据库的使能技术——标准数据访问库（Data Access Libraries）
  • ODBC
  • JDBC
  • RDO（远程数据对象）
  • ADO（ActiveX数据对象）
• 服务器端的使能技术
  • HTML（超文本标记语言）
  • ASP（动态服务器页面）
  • JSP（Java服务器页）
• 网页的使能技术
  • JavaScript / VBScript
  • XML文档
  • Java applet
  • JavaBean
  • ActiveX控件

3.部署体系结构

• 浏览器客户端——在客户端运行浏览器外的应用代码（脚本或小程序）
• Web服务器——处理来自浏览器的页面请求，并动态生成页面和要在客户端执行和显示的代码
• 应用服务器——在系统实现涉及分布式对象时，应用服务器不可或缺，它处理业务逻辑
• 数据库服务器——业务构件封装存储在数据库中的持久数据

（二）内容设计

1.内容设计的目标

• 如何将网站或Web应用系统的可视内容展现在用户的Web浏览器上
• 设计必须具更具有适应性，并考虑到不同用户的需要、兴趣、技能和偏好

2.从网站到Web应用系统的统一（continuum）

• Web应用系统——包含部分或全部未确定页面内容的网站
• 动态网页——由应用服务器管理，找到浏览器请求的结果页面并将他们发送到浏览器
• 静态网页——由Web服务器管理，从Web服务器接收不完整的页面，扫描网页代码，与数据库通信并请求需要的信息，在网页上插入新的信息，并把网页传给Web服务器

3.表单

（三）导航设计

1.菜单和链接

• 网页之间导航的2个主要工具
• 具有类似的功效
  • 功效：指用户期望GUI项具有的行为
• 菜单的分类
  • 顶部菜单——用于整个网站的导航
  • 左手菜单——用于导航到达网站控制以外的网页——放置网站的关键要素
  • 右手菜单——显示网站范围内的网页

2.面包屑和导航面板

• 面包屑——用于告诉用户当前的位置（当前工作的页面），放置在页面的顶部菜单下面
• 导航面板——显示一个交易工作流程的所有步骤，且不允许返回上一步

3.按钮

（四）利用GUI框架支持（leverage）Web设计

1.MVC困境

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

2.Struts技术

---

四、GUI导航建模

（一）用户体验故事情节（User eXperience Storyboarding，UX）

1.UX建模的5个步骤

• 在用例中添加参与者

• 为用例添加可用性特点

  • 可用性是一个非功能性需求，通常被定义为补充规范类的系统限制

• 定义UX元素

  • 其中包括确定GUI容器和构件。一个特殊的固定格式的类模型用来展现UX元素

• 用UX元素为用例流程建模

  • UX驱动下的行为性协作建模
    • UML交互图（顺序图/协作图）用于表示事件的UX流程
    • 行为的分类
      • 用户行为（如点击按钮、输入等）
      • 环境行为（如系统跳转等）——名称前要加“$”符号
        

• 为用例建立屏幕导航模型

  • UX驱动下的结构性协作建模
    • 结构性UX协作产生UX-构造型类图
    • 结构性UX协作模型可以作为用例的导航图，它是UX故事情节的基础

（二）UX元素建模

1.相关构造型

• <<storyboard>>——包构造型，定义了一个包含UX故事情节的包
• <<screen>>——屏幕抽象定义为输出到屏幕的窗口
• <<input form>>——代表了窗口的容器形式
• <<compartment>>——在屏幕的任何区域展现，可以被多个屏幕复用
  

2.域标签：

• Editable——说明字段是否能被用户修改 {editable = true / false}
• Visible——说明字段在用户的视野中是否可见（但是程序仍然可以访问）{Visibility= visible/ hidden}
• Selectable——意味着字段是否可选择（高亮或其他，表明是活动的）{Selectable= true / false}

本文地址：https://blog.csdn.net/momentni/article/details/109259676