当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （1）信息结构与交互设计（1-4） > 第二讲
我们先看一个例子
这个是荷兰博物馆主页的界面
看起来非常简洁
实际上呢它的内容是相当丰富的
我们在浏览时很容易发现
信息组织的规律
想找的内容呢也很容易找到
除了视觉设计
它的信息结构和交互设计
也是相当出色的
那在上一节课中我们讲到
信息结构要考虑情景 内容和用户
在操作层面上
借助任务分析这个工具
可以帮助我们将前面的分析
转换为人机之间的交互任务
任务分析的目的呢
是思考特定的交互模式下
怎么样将用户的意图
转换为合理有效的人机对话过程
这句话说起来有些拗口
我们还是举例来说吧
咱们回到刚才这个
荷兰博物馆的设计案例
访问网站的主要用户呢
可以粗略的分为两类
一类是想去看展览的
还有一类是随便去看看的
那么想去看展览的用户当中呢
有一类是想直接订票的
还有一类
是想先看一看展览信息
再决定是否订票
当然这个用户的意愿
还可以分的更细
比如说订票的时候
我们还想同时看到票价
和交通信息等等
那我们把对用户意图的这种分析呢
可以画成这样的图表
可以看到
这个里面呢画了7种
分解了的用户意图
我们通过进一步的分析
还可以把这些意图归归类
分分主次
梳理出界面需要提供给用户
哪些交互任务
给它们起一个容易理解的名字
比如说要满足直接订票的用户呢
我们可以设计一个订票任务
对想看内容的用户
设计一个参观访问的任务
那么其它可以让用户执行的任务呢
包括交通信息 看评价等等
我们在对每个任务的完成过程呢
逐个进行输入和输出过程的设计
比如说用户点击订票以后
系统应该出现什么反馈等等
那这个分析过程
就是任务分析的方法
Don Norman呢把人和外部世界的交流
解释成左图所示的这种过程
我们来解释一下
在人们采取行动之前呢
会先有一个目标
比如说我想去参观博物馆
那接下来呢
就会形成比目标更具体的意图
比如说我想先去订票
那么这个就是意图
那么为了完成这个订票这个意图呢
我们还要采取更具体的订票的行动
那这个订票行动呢
还包括了一系列的有顺序的动作
比如说先问一下一张票多少钱
在得知有团购优惠的时候呢
还有可能打电话问一问
亲朋好友谁会跟我一块去
那么这样可以一起订票享受优惠
那么在接下来呢会选择
是电话订票呢还是网络订票等等
那么执行这些具体的动作时候呢
还要时时的判断感知动作执行的结果
形成自己对结果的解释
比如说订票成功了没有啊
如果成功了
就完成了一个订票行动的闭环
接下来呢在开始第二个动作意图
比如说查看交通信息
坐车去博物馆等等
以此类推
一直到完成参观博物馆的目标为止
那在这个例子中
参观博物馆这个目标呢
需要形成多个意图
执行若干项具体的动作才能完成
人机互动和人们与真实世界的互动
是相似的
这个过程可以被转化为右面这个图
我们还是以参观博物馆这个目标为例
比如说用户还是要先订票
那么我们可以把订票这个意图
转换为界面上的可选任务
用户在界面上的订票过程呢
可以被设计成一系列具体的操作
比如说点击订票按钮
系统识别到用户点击的操作以后
马上提供反馈的结果
比如说输出一个订票的可视化界面
这个界面被用户看到以后呢
会产生相应的解释
比如我的这个操作对不对
下一步我应该点什么
购票的数量和价格对不对等等
直到完成订票任务的闭环
不知道通过这两个图的对比
你对任务分析是不是有了一定的认识呢
由于界面呢需要和用户发生交互
我们不仅要规划静态的信息结构
还要对输入和输出的动态过程
进行规划和设计
用户的每一步操作
会带来什么样的结果
怎样返回上一级的信息
怎样回到首页等等
任务分析呢是一种工具和方法
它可以帮助设计师关注用户的目标
并且以用户目标为导向
设计合理的交互方式
任务分析的时候呢
需要分析完成不同任务
需要的所有动作和流程
对人和机器的行为呢进行划分
规划出人做什么机器做什么
比如说右图所示的这个图表
在这张图表中呢
显示了对现有ATM机取款任务的规划
这个表格第一栏呢用户意图就是取现
中间呢是人需要进行的操作
最右侧呢是ATM机需要执行的任务
这个图表显示了怎样将用户的意图
转化为操作任务
用户的第一个任务序列呢
是插卡和输入密码
第二个序列是选择取款任务
并且确认
第三个任务是选择金额并且确认
和用户任务相对应的呢
是系统需要负责的任务
比如说在用户插卡以后
就要反馈系统读卡的状态
提示下一步的操作等等
对取款过程更具体的设计呢
还可以用这样一个流程图来表示
那么这类图呢
可以表现用户完成一项操作或一项任务
需要经历哪几个步骤
有哪些逻辑判断
一般我们用矩形框加文字说明
来表示一个操作步骤
那用菱形来表示一个逻辑判断
或者需要用户做出的选择
我们来讲一下这个图表呢
首先它是按照
用户执行操作的流程来设计的
根据这个交互设计我们可以看到
为了取款
用户需要阅读欢迎界面
并且在界面的提示下先插入IC卡
这是一次用户输入
同时呢我们可以设想
每一次的用户输入
ATM机都应该有引导和反馈
左侧呢我们列出了每一次用户操作的时候
ATM机屏幕需要出现的引导信息
接下来屏幕会出现一个
要求输入密码的提示和输入框
引导用户输入密码
用户输入密码后系统核对信息
这个时候呢屏幕上出现了
正在核对信息的提示
如果输入错误会返回到前面一步
如果输入正确
屏幕就会出现用户可以操作的选项
包括取款查询缴费退出等
用户选择取款
屏幕出现输入金额的提示
用户输入金额后
系统出现确认的按钮
要求用户确认
确认后系统吐出钞票
并提示用户退卡或者继续
这两种图表呢都是任务分析的结果
左侧的图呢
关注的是从产生意图
到实现意图的人机任务的分配
右侧的这个图表呢
关注的是实现某个意图
需要完成的具体动作和逻辑判断
我们把右边这种图表也叫做流程图
通过流程图
我们既可以理解交互过程是怎样的
还可以在几个不同方案中进行比较
选择更快捷更方便的方案
比如说这两张图表进行比较呢
可以看出哪些不同呢
第一张取款的流程
比第二张多了一个步骤
仔细看呢原来第二张图的取款流程
采用了指纹识别代替密码输入这个步骤
尽管取款只节省了一步
但是使用者还是会感觉到更快捷
你可能会质疑
这不过就少了一步吗
能有多大改进呢
你还别不信
咱们对比一下iPhone的指纹解锁屏幕
和密码解锁屏幕
这两种操作你更愿意选哪一种呢
当然是指纹解锁
因为手指一按就解锁了
相比之下呢输入密码再解锁
就显得麻烦多了
一般来说
完成一个用户意图
需要的交互步骤越少
给用户带来的体验就越好
这是流程图的另外一种形式
它列出了ATM机可以完成的所有任务
任务分析还有很多其他的方法
比如说右侧的这个列表
反映出了任务执行的层级结构
执行的顺序和所属的关系
比如哪些是平行的可选任务
哪些是平行任务的子任务
哪些是顺序执行的任务等等
不同的任务分析方法
可以体现不同的任务逻辑关系
例如这是另外一种任务分析图
它适合表达多个用户之间
怎么样进行协同的任务
这个图是点餐的流程
顾客提交食物订单以后
系统会同时把信息
告知服务生和厨师
厨师接到信息开始加工食物
同时呢服务生会把食物
及时送到顾客的那里
那么这个任务分析的图示方法呢有很多
我们这里只是介绍了其中的一小部分
如果感兴趣
可以选择有针对性地进行学习
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
