第5章 界面设计

图书管理系统—用例图

读者请求服务用例
<<uses>>
查询图书
预定图书
登录系统
<<uses>>
查询信息
读者
借阅图书
<<extends>> 归还图书 逾期归还图书
图书管理系统—用例图

图书管理员处理借书、还书的用例
查询信息 包括: 查询图书信息 查询借阅者信息 查询借阅者的借阅......
借出图书

经典案例： 可口可乐个性鲜明的前卫软件“Life Tastes Good”；
http://www.coca-cola.com
工整、全面、细致的通用电气公司软件“We bring good things to life（GE带来美好的生活）”；
http://www.ge.com/

刻意扮演一个数字电子娱乐之集大成者的角色 ，要成为新时代梦想实现者的索尼软件；

所见即所得
◦ 在WYSIWYG交互界面中，其所显示的用户交互行为与应 用程序最终产生的结果是一致的。

直接操纵
◦
直接操纵是指可以把操作的对象、属性、关系显式地表示 出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接 从屏幕上获取形象化命令与数据的过程。

界面要具有一致性 常用操作要有快捷方式 提供必要的错误处理功能 提供信息反馈 允许操作可逆 设计良好的联机帮助 合理划分并高效地使用显示屏幕

多通道用户界面则进一步综合采用视觉、语音、手势等新 的交互通道、设备和交互技术，使用户利用多个通道以自 然、并行、协作的方式进行人机对话，通过整合来自多个 通道的、精确的或不精确的输入来捕捉用户的交互意图， 提高人机交互的自然性和高效性。

桌面隐喻
◦ 桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清 楚地表示计算机可以处理的能力。
组织一组用户进行讨论，让你更了解用户的理解、想法、态 度和需求。
◦ 单独访谈（Individual Interviews）
一对一的用户讨论，让你了解某个用户是如何工作，使你知 道用户的感受、想要什么及其经历等。
二、设计
◦ 常用的素材分析方法是对象模型化，即将用户分析的结果 按照讨论的对象进行分类整理，并且以各种图示的方法描 述其属性、行为和关系。 ◦ 对象抽象模型可以逐步转化为不同具体程度的用户视图。 ◦ 比较抽象的视图有利于进行逻辑分析，称为低真视图（ Low-fidelity Prototype）；比较具体的视图更接近于人 机界面的最终表达，称为高真视图（High-fidelity Prototype）。



4．视觉平衡网页设计时，也要各种元素（如图形 、文字、空白）都会有视觉作用。 5．色彩的搭配和文字的可阅读性 6．和谐与一致性 通过对软件的各种元素（颜色、字体、图形、空白 等）使用一定的规格，使得设计良好的网页看起来 应该是和谐的。

7．个性化 1）符合网络文化：在软件上使用幽默的网络语言，创造 一种休闲的、轻松愉快、非正式的氛围会使软件的访问量 大增。 2）塑造软件个性 另外，软件的整体风格和整体气氛表达要同企业形象相符 合并应该很好的体现企业CI。


（2）分组处理。上面提到，对于信息的分类，不 能超过9个栏目。但如果内容实在是多，超出了9个 ，需要进行分组处理。 如果，你的网页上提供几十篇文章的链接，需要每 隔7篇加一个空行或平行线做以分组。如果你的软 件内容栏目超出9个，如微软公司的软件，共有11 个栏目，超过了9个。为了不破坏Miller公式，在设 计时使用蓝黑两种颜色分开，具体可以访问 www.microsoft.com
◦ 衡量一个以用户为中心的设计的好坏，关键点是 强调产品的最终使用者与产品之间的交互质量， 它包括三方面特性： ◦ 产品在特定使用环境下为特定用户用于特定用途 时所具有的有效性（Effectiveness）、效率（ Efficiency）和用户主观满意度（Satisfaction） ◦ 延伸开来，还包括对特定用户而言，产品的易学 程度、对用户的吸引程度、用户在体验产品前后 时的整体心理感受等。
◦ 用户体验（User Experience，UX）通常是指用户在使用 产品或系统时的全面体验和满意度。 ◦ 用户体验主要有下列四个元素组成：
品牌（Branding） 使用性（Usability） 功能性（Functionality） 内容（Content）
品牌
使用性
用户体验由四个相互依存的元素 构成
三、实施
◦ 随着产品进入实施阶段，设计师对高真设计原型进行最 后的调整，并且撰写产品的设计风格标准（Style Guide），产品各个部分风格的一致性由该标准保证。 ◦ 产品实施或投入市场后，面向用户的设计并没有结束， 而是要进一步的搜集用户的评价和建议，以利于下一代 产品的开发和研制。


任务分析是交互设计至关重要的环节，在以用户为中 心的设计中，关心的是如何从用户那里理解和获取用 户的思维模式，进行充分、直观的表达，并用于交互 设计。 描述用户行为的工具有很多，目前经常提到的是通用 标识语言UML（Unified Markup Language）。




UML系统开发中的模型： 功能模型: 从用户角度展示系统的功能，包括用例图。 对象模型: 采用对象、属性、操作、关联等概念展示系 统的结构和基础，包括类图、对象图、包图。 动态模型: 展现系统的内部行为。 包括序列图、活动图 、状态图。



UML是数据库设计过程中，在E-R图（实体-联系 图）设计后的进一步建模。 UML中的各个图的功用如下： 1、用例图 描述角色以及角色与用例之间的连接关系。说 明的是谁要使用系统，以及他们使用该系统可以做 些什么。一个用例图包含了多个模型元素，如系统 、参与者和用例，并且显示了这些元素之间的各种 关系，如泛化、关联和依赖。


UML-Unified Model Language 统一建模语言， 又称标准建模语言。是用来对软件密集系统进行可 视化建模的一种语言。 统一建模语言（UML）是一种模型化语言。模型大 多以图表的方式表现出来。 一份典型的建模图表通常包含几个块或框，连接线 和作为模型附加信息之用的文本。这些虽简单却非 常重要，在UML规则中相互联系和扩展。



2．KISS（Keep It Simple And Stupid）原则 简洁和易于操作是界面设计的最重要的原则。 操作设计尽量简单，并且有明确的操作提示； 软件所有的内容和服务都在显眼处向用户予以说明 等。

3、布局控制 避免界面排版过于死板、界面布局过于凌乱 1）Miller公式。根据心理学家George A.Miller的 研究表明，人一次性接受的信息量在7个比特左右 为宜。总结一个公式为：一个人一次所接受的信息 量为 7±2 比特。这一原理被广泛应用于软件建设 中，一般网页上面的栏目选择最佳在5～9个之间， 如果软件所提供给浏览者选择的内容链接超过这个 区间，人在心理上就会烦躁、压抑，会让人感觉到 信息太密集，看不过来。



UML 2.0共有10种图示，分别为组合结构图、用例 图、类图、序列图、对象图、协作图、状态图、活 动图、组件图和部署图，它们分别用以表现不同的 视图。 在任务分析中使用UML工具，可以清晰地表达一个 交互任务诸多方面的内容，包括交互中的使用行为 、交互顺序、协作关系、工序约束等等。
1、结构分类：包括用例图、类图、对象图 、构件图和部署图， 2、动态行为：包括状态图、活动图、顺序 图和协作图， 3、模型管理：包含类图。
第5章 界面设计
重点大学计算机专业系列教材

界面设计原则 理解用户 设计流程 任务分析 以用户为中心的界面设计

Baidu Nhomakorabea
是人与机器之间传递和交换信息的媒介，包括硬件 界面和软件界面； 是计算机科学与心理学、设计艺术学、认知科学和 人机工程学的交叉研究领域。




人机界面的定义、起源及发展趋势； 人机界面设计中认知心理学、人机工程学、人 机界面的艺术设计、色彩设计等； 人机界面设计，硬件人机界面的设计风格、人 文关怀等； 软件人机界面的形式与标准、软件人机界面设 计、Internet网页界面设计、图标设计等； 人机界面设计评价与可用性测试；


软件用户界面（Software User Interface）是指软件用于和 用户交流的外观、部件和程序等等。 很多软件设计很朴素，看起来给人一种很舒服的感觉； 有的软件很有创意，能给人带来意外的惊喜和视觉的冲击； 而相当多的软件页面上充斥着怪异的字体，花哨的色彩和图 片，给人网页制作粗劣的感觉。 软件界面的设计，既要从外观上进行创意以到达吸引眼球的 目的，还要结合图形和版面设计的相关原理，从而使得软件 设计变成了一门独特的艺术。
功能性
内容

计算机和领域经验对易于学习和易于使用的影响
侧重于易于使 用
专 计算机 家
领 家 专 域
计算机经验 领域经验 侧重于易于学 习
一、用户的观察和分析
◦ 情境访谈（Contextual Interviews）
走进用户的现实环境，尽量了解你的用户的工作方式、生活 环境等情况。
◦ 焦点小组（Focus Groups）



3、对象图 与类图极为相似，它是类图的实例，对象 图显示类的多个对象实例，而不是实际的类。 它描述的不是类之间的关系，而是对象之间的 关系。 4、包图 包图用于描述系统的分层结构，由包或类 组成，表示包与包之间的关系。
http://www.sony.com/index.php

平易近人、亲情浓郁的通用汽车公司软件体现 了“以人为本”的企业定位和营销策略；
http://www.gmchina.com/

服务全面、细致、方便，处处体现"宾至如归"服 务理念的希尔顿大酒店软件。
http://www1.hilton.com/en_US/hi/index.do

用户的含义
◦ 简单的说，用户是使用某种产品的人，其包含 两层含义： ◦ 1）用户是人类的一部分； ◦ 2）用户是产品的使用者。 ◦ 产品的设计只有以用户为中心，才能得到更多 用户的青睐。
◦ 偶然型用户：既没有计算机应用领域的专业知识，也缺少 计算机系统基本知识的用户。 ◦ 生疏型用户：他们更常使用计算机系统，因而对计算机的 性能及操作使用，已经有一定程度的理解和经验。但他们 往往对新使用的计算机系统缺乏了解，不太熟悉，因此对 新系统而言，他们仍旧是生疏用户。 ◦ 熟练型用户：这类用户一般是专业技术人员，他们对需要 计算机完成的工作任务有清楚地了解，对计算机系统也有 相当多的知识和经验，并且能熟练地操作、使用。 ◦ 专家型用户：对需要计算机完成的工作任务和计算机系统 都很精通的，通常是计算机专业用户，称为专家型用户。


1．用户导向（User oriented）原则 设计网页首先要明确使用者，要站在用户的观点和立场上 来考虑设计软件。要作到这一点，必须要和用户来沟通， 了解他们的需求、目标、期望和偏好等。 设计者要清楚用户的差别性。比如：有视觉障碍（如色盲 、色弱），对很多的颜色分辨不清；有听觉障碍，对于软 件的语音提示反映迟钝；用户的计算机使用经验较少，难 以应付更复杂高级的操作。另外，用户使用的计算机配置 (显卡、声卡、内存、网速、操作系统以及浏览器）等不 尽相同。 设计者如果忽视了这些差别，设计出的网页在不同的机器 上显示就会造成混乱。


命令行界面可以看作是第一代人机界面，其中人被看成操 作员，机器只做出被动的反应，人用手操作键盘，输入数 据和命令信息，通过视觉通道获取信息，界面输出只能为 静态的文本字符。 图形界面可看作是第二代人机界面，是基于图形方式的人 机界面。由于引入了图标、按钮和滚动条技术，大大减少 了键盘输入，提高了交互效率。
<<include>> 检查用户帐号
图书管理员 <<extends>> 收回图书 收回逾期图书
图书管理系统—用例图

系统管理员进行系统维护的用例
增加书籍 移除书籍 增加标题
更新标题
移除标题 系统管理员
查询信息
移除或更新读者
增加读者



类图描述系统中的类，以及各个类之间的关系 的静态视图。 能够让我们在正确编写代码以前对系统有一个 全面的认识。 类图是一种模型类型，确切的说，是一种静态 模型类型。类图表示类、接口和它们之间的协 作关系。