链接的功效是进入另一个页面。菜单的功效也是移动到另一个页面,但偶尔菜单项可以在呈现另一个页面时做一些附加的处理。此外,菜单可以分层,因此一些菜单项事实上并不进入另一个新的页面,而是展现一个子菜单项的下拉列表。
- 章末习题
- 个性化、适应性、客户化GUI指南与现场概念相关
- 一个GUI桌面窗口可以被划分为 窗格
- GUI Web屏幕的实体可以被划分为 框架
- 沙袋概念与applet有关
- JSP属于PCBMER的表示层
- Struts的动作表单属于PCBMER的bean层
- 窗口不是UX构造型,输入表单、屏幕、区域(compartment)是UX构造型
- UX元素建模
- 最普及的是包构造型,称为<<storyboard>>,定义了一个包含UX故事情节的包
- 相关UML构造型
- <<screen>>——屏幕抽象定义为输出到屏幕的窗口
- <<input form>>——代表了窗口的容器形式
- <<compartment>>——在屏幕的任何区域展现,存在于form中
- 域标签:
- Editable说明字段是否能被用户修改
- Visible说明字段在用户的视野中是否可见(但是程序仍然可以访问)
- Selectable意味着字段是否可选择(高亮或其他,表明是活动的)
- 一个域具有标签值,如{editable = true ,visibility = visible}。相应地,可以利用一个公共可见性图标标记域可见性(名字前有“+”),对隐藏性的“-”
- 行为性UX协作
- UML交互图(顺序图/协作图)用于表示事件的UX流程
- 结构性UX协作
- 结构性UX协作产生UX-构造型类图
- 结构性UX协作模型可以作为用例的导航图,它是UX故事情节的基础。为此,结构性UX协作模型用箭头表示类之间的关系,已说明屏幕、输入窗口和容器之间可能的导航关系2
- GUI导航建模
- GUI设计者的任务是把互相依赖的屏幕联系在一起,使结构容易理解,用户不至于在打开的屏幕中迷失。
- GUI设计应方便用户通过界面探索,说明应用程序功能的主要技术是一个设计较好的菜单和工具栏结构
- 用户体验故事情节User eXperience(UX)story boarding
- UX故事情节建模的5个步骤:
- 在用例中添加参与者
- 为用例添加可用性特点
- 可用性是一个非功能性需求,通常被定义为补充规范类的系统限制
- 定义UX元素
- 其中包括确定GUI容器和构件。一个特殊的固定格式的类模型用来战线UX元素
- 用UX元素为用例流程建模
- UX驱动下的结构性协作建模
- 为用例建立屏幕导航模型
- UX驱动下的行为性协作建模
- UX故事情节建模的5个步骤:
- 利用GUI框架支持Web设计
- MVC的困境
- 在可编程客户端和基于Web的应用系统中,在presentation和control之间分离和消除循环是架构中的一个棘手问题。
- 棘手是因为——presentation提交请求给control服务,control决定应接收响应的Presentation对象。
- 相关技术:集中(模型1,presentation和control对象成对出现)和分散(模型2,核心的PCBMER框架提倡二者物理隔离)
- 使用Struts技术
- MVC的困境
- 面包屑breadcrumb和导航面板
- 面包屑区域通常在页面的顶部,刚好放在顶部菜单的下面。该区域有一组链接标签组成,用于告诉用户他们的当前位置
- 导航面板与面包屑类似,但他们更可能应用于交易应用系统,显示一个交易工作流程的所有步骤,且除非取消交易的进行,否则不允许移动到以前的步骤。
- 按钮
- 顶部菜单用于整个网站的导航。左手菜单和右手菜单的涉及原则更灵活。
- 把网站或应用系统的关键要素集中放在用户首先看到的左手边更为明智
- GUI设计原则
- GUI客户端
- 桌面平台的可编程客户端:胖客服端thick client,在客户端上可以实现一定的业务功能
- Web平台的浏览器客户端:瘦客户端thin client,基于web的图形用户界面,需要从服务器获取数据和程序
- 从GUI原型到实现
- 良好的GUI设计指南
- 以用户为中心,用户控制式——主要的GUI设计指南
- 用户对控制的掌管
- No mothering非母亲式原理——程序不应该像母亲一样为你做事
- 用户启动行为,因此,如果程序取得控制权的话,用户也要获得必要的反馈(一个沙漏或一个等待的指示器)
- 一致性
- 整个界面一致,如背景色一致
- 需要限制GUI developer的创造力
- 与软硬件平台保持一致
- 整个界面一致,如背景色一致
- 个性化和客户化
- 个性化personalization:单个用户的使用行为
- 客户化customization:对某一个特定的组织做一个特定东西
- 宽容
- 允许用户进行实验或出错,鼓励用户探索,允许用户选择错误的路径
- 提供多级撤销/取消undo操作
- 比如是否警告用户取款的后果?这与个性化指南相关
- 反馈
- 反馈由用户控制式指南派生出来的,与用户控制指南最相关
- 在系统中为每个用户事件建立视听提示
- 审美Aesthetics和可用性——二者都关系到用户满意度
- 审美是系统视觉上的吸引力
- 可用性是与使用界面有关的方便性、简单性、有效性、可靠性和生产率
- 提高用户满意度
- 以用户为中心,用户控制式——主要的GUI设计指南
- GUI客户端
- 桌面GUI设计
- 窗口是GUI的容器
- 单独的主应用窗口,主窗口
- 主窗口有一个边界(框架),框架包含窗口的标题栏、菜单栏、工具栏、状态栏以及窗体上可浏览或修改的内容区(——可以组织成窗格),如果需要可以有水平、垂直滚动条
- 主窗口区别于辅窗口的一个典型特征是,主窗口有菜单栏和工具栏而辅窗口没有
- 主窗口的一组弹出窗口——辅窗口,通常是模态窗口,在最上层,使用其他窗口前必须关闭
- 如登录窗口是辅窗口,对主窗口起到补充的作用
- 容器菜单控件一起构成GUI组件
- 菜单项与快捷键相关
- 属性页是标签夹中标签的窗口名称
- Web GUI设计
- Web应用程序是一种允许用户在internet浏览器执行业务逻辑的Web(分布式C/S)系统
- 业务逻辑可以放在服务器或/和客户端。
- 在Web应用系统中,菜单项、按钮、超链接这些GUI组件用于用户事件编程
- 链接到其他网页的方式有:
- 网页标题下的菜单栏
- 菜单栏下面的面包屑区域
- 左边和右边的菜单面板
- Web应用系统的使能技术
- 维护Web客户端和服务器之间的连接的最原始的机制是Cookie
- 脚本script和小程序applet用于创建动态的客户端页面
- 小程序applet是一个编译好的组件,在浏览器环境中执行
- 服务器页中的脚本使用标准数据访问库来访问数据库
- 典型使能技术如ODBC,JDBC,远程数据对象(RDO)和ActiveX数据对象(ADO)
- 服务器端的使能技术:超文本标记语言HTML,动态服务器页面ASP、Java服务器页JSP
- 网页的使能技术有:客户端脚本(JavaScript/VBScript)、可扩展标记语言(XML)文档、Java applet、JavaBean或ActiveX控件
- 部署体系结构支持跟先进的Web应用系统,包括4个层次的计算结点tiers
- 浏览器客户端
- 可在客户端运行浏览器外的应用代码(脚本或小程序)
- Web服务器
- 处理来自浏览器的页面请求,并动态生成页面和要在客户端执行和显示的代码
- 应用服务器
- 在系统实现涉及分布式对象时,应用服务器不可或缺,它处理业务逻辑
- 数据库服务器
- 业务构件封装存储在数据库中的持久数据
- 浏览器客户端
- 内容设计
- 必须思考 如何将网站或Web应用系统的可视内容展现在用户的Web浏览器上
- 桌面设计和Web内容设计的区别:设计师不一定认识网站或Web应用系统的观众
- 从网站到Web应用系统的统一continuum
- Web应用系统是一个包含部分或全部未确定内容的网站。只有当访问者从Web服务器请求网页后,其内容才最后确定。因为最后的网页内容根据访问者的行动请求变化,这种网页成为动态网页。
- 静态和动态网页的区别——源于Web服务器和应用服务器之间的区别
- Web服务器管理静态网页
- 他找到浏览器请求的结果页面并将他们发送到浏览器
- 应用服务器管理动态网页
- 他从Web服务器接收不完整的页面,扫描网页代码,与数据库通信并请求需要的信息,在网页上插入新的信息,并把网页传给Web服务器
- Web服务器管理静态网页
- 表单
- 导航设计
- 如果有什么区别的话,Web应用系统中的导航往往比桌面中的用户界面更友好
- 菜单和链接——是网页之间导航的两个主要工具
- 菜单和链接有类似的功效(affordance)——指用户期望GUI项具有的行为
- Server solutions make the software
- Client solutions sell the software
- UI design is a multidisciplinary有关各种学问的 activity