Designing Interfaces Chapter 2

Presentation on theme: "Designing Interfaces Chapter 2"— Presentation transcript:

1 Designing Interfaces Chapter 2
Designing Interfaces Chapter 2. Organizing the Content: Information Architecture and Application Structure 如何组织内容 信息和应用架构

2 你的用户想从你的设计中得到什么 What your users want out of your application. 你的用户想从你的设计应用中得到什么 You may know which idiom or interface type to use, such as 你可以学习一些思想或接口的使用方式 a graphic editor, 图形编辑器 a form, web-like hypertext, 类web的超文本 or a media player媒体播放器 or an idea of how to combine several of them. 怎么组合他们的方法 有很多角度，只介绍已经有深入研究和被证实的两种. Dividing Stuff Up 划分材料 Physical Structure 物理结构

3 不用窗口，树展，链接这些东西来思考，代之以应用中抽象的行为和对象的组织， 特殊的窗口和装饰方式可以推到以后再决定
2.1. THE BASICS OF INFORMATION ARCHITECTURE: DIVIDING STUFF UP 把应用的内容和物理表达方式分开 把应用的内容完全与物理表达分开 不用窗口，树展，链接这些东西来思考，代之以应用中抽象的行为和对象的组织， 特殊的窗口和装饰方式可以推到以后再决定

4 information architecture怎么组织内容和功能
需要指出如何把这些内容和功能结构化表示： 怎么组织它们， 标识它们， 并且通过接口引导用户得到它们 想象你的工作类似于盖房子，你计划一个信息空间，让你的用户住进来

5 有哪些组织方法 大部分应用（和很多网站）都是通过下列方法或这些方法的组合来组织
Lists of objects e.g., an inbox full of messages对象列表，例如一个充满邮件信息的收件箱 Lists of actions or tasks e.g., browse, buy, sell, or register行为或任务列表，如浏览、买、卖、注册 Lists of subject categories e.g., health, science, or technology主题分类列表，如健康，科学，技术 Lists of tools e.g., calendar, address book, or notepad工具列表，如日历，地址本，笔记

6 怎么来选择 根据几种相关的因素来选择 the nature and domain (subject matter) of the application, 应用的自然和领域 users‘ domain knowledge, 用户的领域知识 users‘ comfort level with computers in general, 一般情况下用户对计算机的舒适度 and, most of all, how closely your application needs to match the mental models that users already have of the domain. 最重要的，你的应用如何贴近用户在这个领域中已经有的精神（主观）模式

7 我们在这些列表中运用多种接口原理：用FORM编辑，用媒体播放器娱乐，用网页浏览
LISTS OF OBJECTS对象列表 很多时候，内容的分类是显然的。邮件信息，歌曲，书，图像，搜索结果，金融事务，我们每天都在使用它们 我们在这些列表中运用多种接口原理：用FORM编辑，用媒体播放器娱乐，用网页浏览

8 Lists of photos in iPhoto
相册排序，就像排列在桌上的指甲盖

9 models are most common 最普通的模型
线性结构，通常是排好序的 已经排序的2维表格结构，让用户通过列头排序，可以通过各种规则过滤 通过分层把多个主题项聚集成范畴和子范畴 可以表达关系的层次结构：父子，容器 空间结构，例如图，图表，象桌面用户可以放置东西的结构

10 LISTS OF ACTIONS行为列表 与对象相比，行为是动词替代了名词 从问用户“你做这些想要什么？”变成“你想做什么？” 这里困难的是如何解决行为的数量增长太快的问题 太多的行为比太多的对象更容易让用户难以指出想做什么

11 A friendly task-based organization at http://turbotax.com, 任务友好的缴税接口

12 Figure 2-3. This cell phone contains a linear list of entries in a phone book.手机上的电话本的列表

13 2.1.3. LISTS OF SUBJECT CATEGORIES主题范畴列表
Figure 2-4. iTunes的音乐库范畴划分，通过签名，艺术家，流派等， iTunes自己增加了演奏者作为一个范畴

14 LISTS OF TOOLS工具列表 Figure 2-5. The PalmOS applications screen is a simple linear list of tools 某手机的应用屏幕就是一个简单的工具列表

15 2.2. PHYSICAL STRUCTURE物理结构
Three different physical structures 三种不同的物理结构（多窗口，单窗口，拼接面板）

16 2.2.1. MULTIPLE WINDOWS 多窗口适应于复杂应用，这里用户希望自己展示屏幕 用户也可能发现多窗口刺激或者困惑
一次开太多窗口容易导致用户丢失他们的目标 但是如果用户只是需要几个不变的窗口并行使用，你可以用多窗口也可以用拼接面板

17 2.2.2. ONE-WINDOW PAGING单窗口 单窗口模型在WEB应用中工作良好，每次一个页面 在WEB应用中人们习惯于这种模型
这也是小型手持设备和手机应用的最佳选择

18 2.2.3. TILED PANES 拼接面板 很多应用在一个窗口中使用拼接面板 只需要在窗口管理中很少的开销，用户可以一下看到很多
最常用的是2面板结构，3面板也正在变得普通 在一个面板中点击就能在另一个面板看到内容 拼接面板占用大量屏幕空间 面板数量太多就需要切换为多窗口模式

19 2.3. THE PATTERNS This chapter's patterns cover both of the approaches to application design just discussed. Some of them mix content structure with physical structure. They illustrate combinations that are known to work exceedingly well, such as the first four patterns: Two-Panel Selector Canvas Plus Palette One-Window Drilldown Alternative Views The next few patterns don't go much into physical presentation, but instead deal with content in the abstract. Wizard talks about "linearizing" a path through a task; it can be implemented as any number of physical presentations. Extras on Demand and Intriguing Branches describe additional ways to divide up content. Wizard Extras on Demand Intriguing Branches Many patterns, here and elsewhere in the book, contribute in varying degrees to the learnability of an interface. Multi-Level Help sets out ways to integrate help directly into the application, thus supporting learnability for a broad number of users and situations. Multi-Level Help

20 2.3. 1 two-panel selector 双面板选择器

21 what 是什么 Put two side-by-side panels on the interface. 肩并肩的两个面板 In the first, show a set of items that the user can select at will; 第一个面板显示用户能选择的项 in the other, show the content of the selected item.第二个面板显示选择项的内容

22 2.3.1.2. use when 什么时候使用 需要展示对象，范畴，行为的列表 邮件箱的信息，网站的项目，歌曲图片库，数据库记录，文件等等
你希望用户看到整个列表的结构，同时以他自己的选择和步调来浏览 这种方式需要较大的屏幕空间，一般不时候手机应用，但是黑莓类大屏幕手机例外

23 2.3.1.3. why 为什么 双面板学习便利，而且已经非常普及
双面板使得用户可以快速前后转移其关注点，例如，有多少未浏览的邮件，现在这个邮件说什么，这种紧密联系有很多优点 物理效果。用户的眼睛不用在两个面板中跨越长距离，不用导航就可以轻松改变选择 减少视觉识别负担。如果窗口页面内容突然改变，用户需要花费更多注意力，而双面板使得用户注意力集中在一个小区域 减少用户记忆负担。例如邮箱，用户不必记忆邮件内容和上下文，只要知道标题，知道位置

24 2.3.1.4. how怎么用 可选择的列表放在顶端或者左边的面板，详细内容放在下面或者右边，因为人习惯于从上到下，从左到右
快速响应用户的选择，并且可使用键盘 采用不同的色彩或者反转使得选择显然可区别 可选择的列表可以是不同的形式，树展，列表等等

25

26 Nortel's Mobile Time Entry application
黑莓的手机双面板功能

27 2.3. 2canvas plus palette 带调色板的画布
Photoshop

28 2.3.2.1. what 把调色板的图标放在画布旁边，用户点击图标，在画布上创建对象 2.3.2.2. use when
用于所有类型的图形编辑器，创建对象并排列于虚拟空间

29 why 这是一种自然的物理对象与虚拟屏幕空间的对应关系，调试板便于可视识别 图标可以重用.

30 2.3.2.4. how 放置一个大的空的区域作为画板. 调色板是图标和按钮组成的区域，必须易于识别 调色板放在顶部或者左边
调色板可以是图片对象，也可以是缩放器或者透镜，要注意混合多种功能可能导致用户迷惑 创建对象的方式可以是拖拽，点击等等

31 脸型 http://mrpicassohead.com.

32 MacPaint 1984年的图形编辑器

33 2.3. 3 one-window drilldown单窗口钻入

34 2.3.3.1. what 在一个窗口显示每一个功能，当用户滑动菜单选项，可以选择功能进入新的页面 2.3.3.2. use when
应用包括很多页面，需要导航。WEB页面，菜单，地址本，日历，邮件 约束条件: 空间限制（手机）或者操作困难（TV）. 用户限制，如用户习惯于单窗口，复杂窗口让他们困惑，呆板的输入设备.

35 2.3.3.3. why 保持简单，用户不用分散注意力. 每个人都已经习惯使用WEB浏览器，一个页面一个页面的切换成为习惯
使用多个窗口可以查看多个页面，但是即使有导航也容易导致迷惑 单窗口钻入模式是对复杂模式的替代，由于种种限制，不能采用复杂模式.

36 2.3.3.4. how 在小屏幕中使用，面板大小要适度. 对这些功能面板，设计一个明显的入口，用户选择之后，（钻入）进入相关的功能面板
用户可以退回上一层。如 back/forward按钮, 或者 “Done” or “Cancel” 按钮 无需图形，简单的线性层次结构最好 ，可以有快速按钮. 典型的轮辐结构非常合适

37 Mac OS X System Properties tool ，左边是主窗口，列出所有性质，钻入后的功能在右边
用左上“Show All” 按钮返回. Mac的屏幕通常很大，用户水平各异. 这个设计并非为了适应小屏幕，而是为了图标排列的密度，这种密度难以应用于双面板模式

38 Pine email client 是轻量级纯文本的用户接口，可完全用键盘控制
可用于纯文本终端，可能是用户需求导致的设计.

39 2.3.4. alternative views 可选视角

40 what 让用户选择结构上不同的视角，不仅仅是表面上的不同 use when 网页，编辑器，地图应用，或者其他需要不同格式内容的情况。 有些应用提供了字体大小，语种，排序，缩放等轻度改变， 但这些可能还不够

41 2.3.4.3. why 无法在单一设计中使用所有场景： 例如打印预览. 使用可选视角的其他一些原因:
客户端不同，有的是桌面，有的是PDA，有的是阅读器. 用户倾向于速度，或者视觉，或者其他 需要一个临时性的视角以深入观察（例如放大镜）

42 2.3.4.4. how 选择几个要用的不能在同一个窗口实现的场景. 对于这些可选视角，主要内容应该相同
如果屏幕足够大，可以同时显示多个视角. 在主窗口设置 “switch” 功能. 确认易于切换回缺省视角. 当用户前后切换，保存切换状态 ，如图标在文档中的位置,未提交的更改等等，否则切换会导致用户迷惑 缺省视角可以保存，便于不同用户习惯，下次不必再次设置. 如浏览器，桌面，

43 Windows Explorer 和 Mac Finder 都容许多种选择视角，每个视角都可以前后切换.
表可以通过列来排序, 如果想看到图片， 可以用其他视角

44 Google‘s 搜索结果返回的不仅仅是个普通HTML Web 页面,而是包括了 PDF, Word, Powerpoint 等等文档.
如果你没有Word 或者 Powerpoint 怎么办? 选择视角: the HTML "translation."

45 WORD可使用不同的视角. 包括 the normal view, intended for most editing tasks;
a "print layout" view, which shows how the document might appear on printed pages; a "reading" mode for uncluttered viewing; and an "outline" view, which shows the structure of the document. Someone might use the outline view to gain insight if you loaded a large, unfamiliar document, for instance,

46 2.3.5wizard

47 2.3.5.1. what 引导用户按照预先设定的次序，一步一步完成任务 2.3.5.2. use when 任务很长且复杂，用户难以控制
任务长且有分支，需要用户决定下一步走向. 用户愿意接受控制，别让我想，直接告诉我下一步怎么干.好像机场指示牌，我们不需要知道机场设计，只管照做 有些创造性的活动，或者用户自己需要学习的情况不合适

48 why 分而治之原则. 通过把任务划分为不同片段组成的序列，从而简化任务. 把任务事先安排好，相信按指示照做就OK.

49 2.3.5.4. how 2.3.5.4.1. “CHUNKING” THE TASK任务分割
PHYSICAL STRUCTURE物理结构

50 2.3.5.4.1. “CHUNKING” THE TASK任务分割
把任务分成不同的片段，或者不同的组合，片段和组合都有先后次序 例如在线订购包括产品选择，支付信息，账单地址等等，后者的选项依赖于前者 需要确定如何划分任务，使得用户便于选择. 例如软件安装 wizard, 用户可以选择是否安装可选组件; 这么做的原因是用户通常不知道选择的相关性。 平衡片段的数量和每个片段的复杂度. two-step wizard是愚蠢的做法, fifteen-step wizard 太繁琐.

51 PHYSICAL STRUCTURE 一般而言，每一步都是一个分离的页面，通过Back 和 Next按钮导航, 缺点是用户没有全局的信息. 要容许用户前进后退，否则如果重新开始会让用户有挫败感，有时候可以利用双面板展示过程，显示当前状态和所有步骤列表 每个页面都可以采用各种模式（第四章介绍）

52 网络缴税系统指导如何一步一步填表，包括很多金融细节，每个片段为一个页面

53 Expedia（日历和记事本的功能） 每个页面是一个多面板结构

54 2.3.6 extras on demand 随需而来的例外

55 2.3.6.1. what 在前端显示最重要的内容，隐藏其他，使得界面简洁，用户使用方便. 2.3.6.2. use when
需要显示的内容太多，但是其中一些不太重要或者不常用. 你愿意用更简洁的接口，但是这些功能不得不放在一些地方

56 2.3.6.3. why 简洁的接口比复杂的好，特别对于新用户或者不需要太多功能的用户。让用户选择是否看到全部功能比你来选择更好
如果你的设计让80%的用户感觉容易上手，你就和专家做的一样好! 随需而来的例外模式可以让你节省大量的接口界面空间

57 how 仅仅保留最常用的最重要的接口，将其他功能放到其他页面或者面板中，明确标识如何得到其他功能，如"More Options." Many UIs ">>", "…", 用户可以关闭这些功能，返回正常状态.

58 CNN, 用户可选择是看概要还是全部

59 Windows 2000文件搜索. 有可选项

60 2.3.7intriguing branches 启发性的分支

61 what 在不可预期的地方设置上下文关键字链接，引导好奇的用户 use when 用户在按部就班的阅读，你希望给出附加的信息，而这些信息不会干扰用户的正常阅读 需要用一种优雅的方式解决，快速阅读用户容易忽略，一些用户可以使用

62 2.3.7.3. why 人们总是好奇的，总是有时间和动力看新奇有趣的东西.. 启发性分支让你的接口更有趣
可以通过内嵌链接创建启发性分支. 其他的方式，如按钮， “Learn more…”? 也很有趣

63 how 首先对你的用户有深入理解. 他们对什么感兴趣? 接口在哪里让他们愿意花时间进一步阅读？ 然后建立附加内容的接口. 可以是下划线链接, 标题, 按钮, 菜单项, 图表, 或者可点击的其他东西，挑起用户的好奇心. 同样需要提供一个明显的方式让用户返回

64 Gmail‘设置页面，没有用“help. ” 而用 “Learn more”
Gmail‘设置页面，没有用“help.” 而用 “Learn more”. “Learn more” 是一种正面表达, 不象 "Help,".

65 Flickr 的照片浏览有很多这种启发性分支

66 Adobe‘s PDF reader 也具有这种启发性分支功能

67 2.3.8multi-level help 多层次帮助

68 2.3.8.1. what 混合轻量级和重量级的帮助技术支持用户不同需求. 2.3.8.2. use when
你的应用很复杂. 一些用户需要全方位的帮助, 但是用户没空看这些，你懂的. 你要尽量帮助这些不耐烦的用户. 你的软件能适应于从初学者到专家的不同层次

69 2.3.8.3. why 用户通过软件做不同的事情，初学者到专家，有数不清的层次，有人愿意看教程，有人不看 .增加简单的提示不会打扰用户工作
帮助是一种易于获取，然而并非强加的方式，否则令人厌烦.

70 2.3.8.4. how 在不同层次建立帮助, 深层次可以提供更多的帮助信息. 直接在标题和指令上给出帮助.
对工具条给出简介，一到两行介绍足够 稍微长的介绍可以用一个动态面板窗口显示，可以滚动，移开后消失 在一个分离的窗口显示帮助. “Live” 技术支持, 通过 , the Web, or telephone. 非正式社区支持，但是通常只是一些特别有价值的软件才有这种社区

71 当你启动 MATLAB, 命令直接显示帮助: "To get started, select MATLAB Help or Demos from the Help menu."
工具条上面的 “How to Add” and “What‘s New” 按钮可以开启新的窗口，给出更详细的帮助

72 每个按钮都有工具条

73 Rollover help

74 在 MATLAB 其他的一些接口, 选择一个对象将有一个描述，通过单独面板实现.

75 点击上个窗口的 underlined word “plot” 得到全方位帮助窗口，即帮助文档

76 MATLAB 用户可以通过电话和网络得到技术支持

77 最后，还可以去MATLAB社区寻求帮助