欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-22 10:13:03
全九章节的笔记导航目录:[其他剩余章节目录](https://blog.csdn.net/momentni/article/details/109260971)全笔记PDF版下载链接:[下载链接](https://download.csdn.net/download/momentni/13027629)...

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

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



一、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流程
      • 行为的分类
        • 用户行为(如点击按钮、输入等)
        • 环境行为(如系统跳转等)——名称前要加“$”符号
          东北大学——软件需求分析与系统设计——第七章笔记整理(2020年5月整理)
  • 为用例建立屏幕导航模型

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

(二)UX元素建模

1.相关构造型

  • <<storyboard>>——包构造型,定义了一个包含UX故事情节的包
  • <<screen>>——屏幕抽象定义为输出到屏幕的窗口
  • <<input form>>——代表了窗口的容器形式
  • <<compartment>>——在屏幕的任何区域展现,可以被多个屏幕复用
    东北大学——软件需求分析与系统设计——第七章笔记整理(2020年5月整理)

2.域标签:

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

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