山东大学：《人机交互技术》课程教学资源（PPT课件讲稿）第5章 界面设计

第五章界面设计 山东大学计算机学院 山束方器 SHANDONG UNIVERSETY

山东大学计算机学院

内容提要 ■ 界面设计原则 理解用户 ■设计流程 ■任务分析 ·以用户为中心的界面设计 山求水器 Lecture 4 2 SHANDONG UNIVERSETY

Lecture 4 2 内容提要 ◼ 界面设计原则 ◼ 理解用户 ◼ 设计流程 ◼ 任务分析 ◼ 以用户为中心的界面设计

课程目标 掌握图形用户界面的主要思想和设计的一般原则。 ·了解用户、用户体验、用户交互分析以及设计流程。 掌握任务分析方法方法，重点掌握：使用行为分析、 顺序分析、协作关系分析。 掌握以用户为中心的界面设计方法。 山求水器 SHANDONG UNIVERSETY

课程目标 ◼ 掌握图形用户界面的主要思想和设计的一般原则。 ◼ 了解用户、用户体验、用户交互分析以及设计流程。 ◼ 掌握任务分析方法方法，重点掌握：使用行为分析、 顺序分析、协作关系分析。 ◼ 掌握以用户为中心的界面设计方法

5.1界面设计原则 口根据表现形式，用户界面分为 命令行界面 图形界面 ■多通道用户界面 山求水器 Lecture 4 4 SHANDONG UNIVERSETY

Lecture 4 4 5.1界面设计原则 ❑ 根据表现形式，用户界面分为 ◼ 命令行界面 ◼ 图形界面 ◼ 多通道用户界面

5.1.1图形用户界面的主要思想 图形用户界面的三个重要思想 o桌面隐喻(desktop metaphor) o所见即所得(What You See Is What You Get,VYSIWYG ) 直接操纵(Direct manipulation) 山东方图 Lecture 4 SHANDONG US:VERSETY

5.1.1图形用户界面的主要思想 ◼ 图形用户界面的三个重要思想 ❑ 桌面隐喻(desktop metaphor) ❑ 所见即所得（What You See Is What You Get，WYSIWYG ） ❑ 直接操纵(Direct manipulation) Lecture 4 5

1.桌面隐喻(desktop metaphor 桌面隐喻是指在用户界面中用人们熟悉的桌面上的图 例清楚地表示计算机可以处理的能力。 图形具有一定的文化和语言独立性，可以提高搜索目标的效 率。 ▣ 图形用户界面中的图例可以代表对象、动作、属性或其他概 念。 表达方式：图例和文字 文字适用于表达某些抽象概念 图例更易于识别，占用较少屏幕空间，可独立于语言 Lecture 4 6 SHANDONG UNIVERSETY

Lecture 4 6 1.桌面隐喻(desktop metaphor) ◼ 桌面隐喻是指在用户界面中用人们熟悉的桌面上的图 例清楚地表示计算机可以处理的能力。 ❑ 图形具有一定的文化和语言独立性，可以提高搜索目标的效 率。 ❑ 图形用户界面中的图例可以代表对象、动作、属性或其他概 念。 ❑ 表达方式：图例和文字 ◼ 文字适用于表达某些抽象概念 ◼ 图例更易于识别，占用较少屏幕空间，可独立于语言

隐喻的表现方法 ■ 静态图标 ·动画 ·视频 山求水器 SHANDONG UNIVERSETY

隐喻的表现方法 ◼ 静态图标 ◼ 动画 ◼ 视频

矩形 隐喻的分类 口四○@口口□□ 基本形状 O△☐A◇©O⊙⊙®⑧ 凸0▣▣厂L00Q0日▣ 回@⌒口©V。海(g〔] 0〔){) 箭头总汇 直接隐喻：隐喻本身就带有操纵的 →白个↓台意L同风 90风→→D》早0凸 十华风 对象 公式形状 十一X中昌鹏 流程图 ·如Word中的表格、图表等图标，图标 ▣@◇□▣▣▣。O☑U o口□Q☒⊕X6△7区D 分别代表了操纵对象。 A90@ 新建 旗帜 是个☆合奇⊙西@可的每 口工具隐喻：代表所使用的工具 打开(Q) ￥风厅口A阶 E ·如用磁盘图标隐喻存盘操作、用打印机 门D您口口口世回海黑 转换☑ DO回 按钮 图标隐喻打印操作等，这种隐喻设计简 保存S 习回回同回四回回国口 单、形象直观，应用也最为普遍。 号存为A 过程隐喻：通过描述操作的过程来 打印凹 暗示该操作 如Word中的撤销和恢复图标。 山素方器 Lecture 4 SHANDONG UNIVERSETY

隐喻的分类 ❑ 直接隐喻：隐喻本身就带有操纵的 对象 ◼ 如Word中的表格、图表等图标，图标 分别代表了操纵对象。 ❑ 工具隐喻：代表所使用的工具 ◼ 如用磁盘图标隐喻存盘操作、用打印机 图标隐喻打印操作等，这种隐喻设计简 单、形象直观，应用也最为普遍。 ❑ 过程隐喻：通过描述操作的过程来 暗示该操作 ◼ 如Word中的撤销和恢复图标。 Lecture 4 8

2.所见即所得(WYSIWYG 在VYSIWYG交互界面中显示的用户交互行为与应用程序 最终产生的结果是一致的。 非VYSIWYG的编辑器，用户只能看到文本的控制代码 对于最后的输出结果缺乏直观的认识。（latex编辑器 ) de向te里阳化 34海时 ETEX Author Guidelines for Pacific Graphics Poster Proceedings Manuscripts 来山t网生”之g1鞋好年曰进在t DevrFdlad国e6 ienctee Aheracl 博时e书 TeAT请AT在制Ne的上akh体原nt ne tf3ndAL海ue odae hr.Ah 博市南自海编国长牛光。 Gt44*yd4474 p前2cn isiint-htetties Lecture 4 9 SHANDONG UNIVERSETY

Lecture 4 9 2.所见即所得（WYSIWYG） ◼ 在WYSIWYG交互界面中显示的用户交互行为与应用程序 最终产生的结果是一致的。 ◼ 非WYSIWYG的编辑器，用户只能看到文本的控制代码， 对于最后的输出结果缺乏直观的认识。（latex编辑器）

WYSIWYG的弊端 如果屏幕的空间或颜色的配置方案与硬件设备所提供 的配置不一样，在两者之间就很难产生正确的匹配。 文本处理器都提供了定义章、节、小节等的标记，这 些标记显式地标明了对象的属性，但并不是用户最终 输出结果的一部分。 MILLEE:Mobile and Immersive Learning for Literacy in Emerging Economies. http://www.cs.berkeley.edu/~mattkam/millee/ Researchers Matthew Kame Research Areas Learning Sciences and Technologies.. Read more SHANDONG UNIVERSETY

WYSIWYG的弊端 ◼ 如果屏幕的空间或颜色的配置方案与硬件设备所提供 的配置不一样，在两者之间就很难产生正确的匹配。 ◼ 文本处理器都提供了定义章、节、小节等的标记，这 些标记显式地标明了对象的属性，但并不是用户最终 输出结果的一部分