全九章节的笔记导航目录：其他剩余章节目录
全笔记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流程
- 行为的分类
- 用户行为（如点击按钮、输入等）
- 环境行为（如系统跳转等）——名称前要加“$”符号
- UX驱动下的行为性协作建模
-
为用例建立屏幕导航模型
- 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}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
