3.7 UI设计在线视频

大家好

今天我们来分享一下软件设计当中的

用户界面 UI设计

我们先看一下典型的用户界面设计

会发生什么样的错误

典型的错误包括

界面设计缺乏一致性

给用户的记忆负担过重

在界面当中缺少向导和帮助

界面设计的语境不敏感

界面给的反馈不佳

或者界面设计得晦涩难懂

不友好

那么我们在进行界面设计的时候

要遵循什么样的原则

就可以设计出

不具备上面那些错误的界面呢

Theo Mandel在其

关于界面设计的著作当中

提出了三条黄金原则

第一条是

把控制权交给用户

第二条是

减少用户的记忆负担

第三条是

保持界面一致

下面我们分头看看

这几个黄金原则的具体含义

第一个 我们是把控制权交给用户

我们要以不强迫用户进入

不必要或不希望的动作的方式

来定义交互模式

交互模式就是界面的当前状态

例如

在字处理器菜单中选择拼写检查

则软件将转移到拼写检查模式

如果用户希望在这种情形下

进行一些文本编辑

则没有理由强迫用户停留在拼写检查模式

用户应该能够不需要做任何操作

就可以进入或者是退出该模式

另外 我们要提供灵活的交互

我们要把控制权交给用户

我们允许用户进行灵活的交互

由于不同的用户有不同的交互偏好

因此 应该提供选择的机会

例如 软件可能允许用户通过键盘命令

鼠标的移动

数字笔

触摸屏

或语音识别命令等方式

来进行交互

还有

我们要允许用户交互被中断和撤销

即使陷入一系列动作之中

用户也应该能够中断动作序列

去做某些其它的事情

而不会失去已经做的工作

用户也应该能够撤销

他所做的任何动作

另外 当用户的技能级别增长时

可以使交互流线化

并允许定制交互

用户经常发现

他们重复的完成相同的交互序列

因此

值得设计一种宏机制

使得高级用户能够定制界面

以方便交互

使用户与内部的技术细节要隔离开来

用户界面应该能够将用户移入应用的

虚拟世界中

用户不应该知道操作系统

文件管理功能

或其它隐蔽的计算技术

另外 我们在设计

应该允许用户与出现的屏幕上的对象

直接交互

这样

用户会感觉到控制权

当用户能够操纵完成

某任务所必须的对象的时候

并且以一种

该对象好像是真实存在的方式来操纵它的时候

用户就会有一种控制感

例如

允许用户将文件拖到回收站的应用界面

就是一种直接操纵的一种实现

第二个黄金原则是要减轻用户的记忆负担

一个经过设计的用户界面

不会加重用户的记忆负担

因为用户必须记住的东西越多

和系统交互时

出错的可能性也就越大

只要可能

系统应该记住有关信息

并通过有助于回忆的交互场景

来帮助用户

要减少对短期记忆的要求

当用户陷入复杂的任务的时候

短期记忆要求会很强烈

界面的设计应该尽量不要求记住过去的动作

输入

和结果

可行的解决办法

是通过提供可视的提示

使得用户能够识别过去的动作

而不是必须要记住它们

另外 减轻用户记忆负担的一个办法就是

要建立有意义的缺省值

初始的默认集合应该对一般用户有意义

但是用户应该能够说明个人的偏好

然后重置选项

应该是可用的

使得用户可以重新定义初始的默认值

另外 可以通过定义直观的快捷方式

来减少用户的记忆负担

当使用助记符来完成系统的功能时

例如 用Alt+p

激活打印功能

助记符应该以容易记忆的方式

联系到相关的动作上

例如 使用要激活任务的第一个字母

另外

界面的视觉布局应该基于真实世界的象征

例如 一个账单支付系统

应该使用支票薄和支票登记薄

来指导用户的账单支付过程

这使得用户能够

依赖于很好的理解的可视化提示

而不是记住复杂难懂的交互序列

还有以一种渐进的方式来揭示信息

界面应该是以层次化的方式进行组织

即关于某一任务

对象或行为的信息

应该首先在高的抽象层次上呈现

更多的细节应该是在用户表明兴趣之后

再展现给它

第三个黄金原则是 保持界面一致

允许用户将当前的任务放入有意义的环境中

很多界面使用

数十个屏幕图像来完成

实现复杂的交互层次

那么 提供提示器

例如窗口的标题

图标

一致的颜色编码

等等

来帮助用户知晓

当前工作环境是十分重要的

另外

用户能够确定它来自何处

以及如何转换到新的任务

在完整的产品线内保持一致性

也有助于保持界面的一致

一个应用序列

即一个产品线

都应采用相同的设计原则

以保持所有交互的一致性

如果过去的交互模型已经建立起了用户期望

除非有不得已的理由

否则请不要改变它

一个特殊的交互序列

一旦变成了事实的标准

如 使用Alt加s来存储文件

则用户遇到每一个应用

均会如此期望

那么 如果改变了这些标准

如 使用Alt+s来激活送放比例

那么这样会导致不必要的混淆

我们看完了用户界面设计的三个黄金原则

我们下面来看一下用户界面设计的模型

用户界面的分析和设计全过程

始于创建不同的系统功能模型

不同的系统功能模型

就是从外部看时对系统的感觉

那我们的

设计模型

包括

首先是

完成系统功能任务

我们可以分为面向人和面向计算机的

然后考虑哪些应用到界面设计的

各种设计的问题当中

我们分析和设计用户界面时

可以考虑四种模型

一种是工程师建立的用户模型

为了建立有效的用户界面

开始设计之前

我们必须对预期用户加以了解

包括用户的年龄 性别 身体状况

教育 文化程度

和种族背景

动机

目标

以及性格

此外 我们可能还要对用户进行分类

它是一个新手

还是对系统有所了解的一个用户

间歇性用户

或对系统有了解的经常性用户

那么第二个是

软件设计师创建的设计模型

也就是用户模型的设计实现

还有用户的心理模型

也就是用户

对系统产生的系统感觉

也就是

最终用户在脑海里对界面产生的印象

例如

某个餐厅评级移动App的用户

来描述其操作

那么系统感觉将会引导用户来进行回答

准确的回答要取决于用户的经验

对于新手来说 只能做一些简要的回答

还取决于用户对应用领域软件的熟悉程度

一个对餐厅评级应用程序有深刻了解

但是 只使用了这个系统几次的用户

可能会比已经使用了该系统好几个星期的新手

对该应用程序的功能描述回答得更为详细

那么

还有一个模型就是由系统实现者创建的

实现模型

实现模型组合了计算机系统的外在表现

比如界面的观感

结合了所有用来描述系统语法

和语义的支撑信息

书

手册

录像带

还有帮助文件

当系统实现模型

和用户心理模型相一致的时候

用户通常就会对软件感到很舒服

使用起来也很有效

为了将刚才说到的这些模型融合起来

所开发设计模型

必须要包含用户模型中的一些信息

实现模型必须准确

反映界面的语法和语义信息

不幸的是 这四种模型

可能相去甚远

那么界面设计人员的任务就是要

消除这种差距

导出一致的界面展示

用户界面分析和设计过程是迭代的

可以用螺旋模型

用户界面分析和设计过程

开始于螺旋模型的内部

且包括四个不同的框架活动

界面分析建模

界面设计

界面构件

和界面确认

螺旋意味着每个活动都将多次的出现

每绕螺旋一周

表示需求和设计的进一步细化

在大多数情况下

构建活动涉及到原型开发

这是唯一实用的

确认设计结果是否有效的方式

界面分析活动的重点

在于那些与系统交互的用户的轮廓

记录技能级别

业务理解

以及对新系统的一般感悟

并定义不同的用户类别

对每个用户类别进行需求引导

本质上

软件工程师

试图去理解每位用户的系统感觉

一旦定义好了一般需求

就将进行更详细的任务分析

标识 描述和细化用户

为了达到系统目标而执行的任务

作为分析动作的一部分

而收集的信息

被用于创建界面的分析模型

使用该分析模型作为基础

设计活动就可以开始了

界面设计的目标就是

定义组界面对象

和动作

以及它们的屏幕展示

使得用户能够以满足系统所定义的

每个使用目标的方式

来完成所有的定义任务

界面构件通常开始于

创建可评估使用场景的一些圆形

最后是界面确认

界面确认

着整于

界面正确的实现每个用户任务的能力

适应所有任务变化的能力

以及达到所有一般用户需求的能力

界面容易使用和学习的程度

还有作为工作中的得力工具

用户对界面的接受程度

也是我们界面确认的一个重要内容

那么我们下面分头来看看

界面分析

和建模

界面设计

界面构件和界面确认

先看一下界面分析

界面分析意味着了解

通过界面与系统交互的人

也就是了解最终用户

还要了解最终用户

为完成工作要执行的任务

另外 作为界面的一部分

而显示的内容也需要了解

还要了解任务处理的环境

那么我们对用户

是要进行分析

那么用户是经过训练的专业人员

技术员

办事员

还是制造业的工人

用户平均受教育的水平如何

用户是否具有学习书面资料的能力

和渴望

接受集中的培训等等

用户群中使用的主要交流语言是什么

如果用户在使用软件过程中出错

结果会怎么样

用户是否是系统所解决问题的领域的专家

用户是否想了解界面背后的技术等等

这些是我们要了解用户的一些问题

第二个 我们要进行任务分析和建模

任务分析的目标就是给出

以下一些问题的答案

比如

在指定环境下用户将完成什么工作

当用户工作时将完成什么任务和子任务

在工作中

用户将处理什么特殊的问题域的对象

工作任务的顺序

工作流是如何展开的

任务的层次关系又是如何等等

在进行任务分析和建模的时候

我们要制定一些用例

用例是用来定义基本的交互方式

然后我们要把

任务进行细化

细化那些交互任务

然后我们要把对象进行细化

对象表示了

界面上的一些对象或者是类

另外 我们要对工作流进行分析

定义了当涉及多个成员角色时

工作过程是如何进行的

那么 关于工作流

我们可以使用UML当中的泳道图来理解

当大量扮演着不同角色的用户

使用某个用户界面时

有时候

除了任务分析和对象细化之外

还有必要要进行工作流的分析

工作流分析使得软件工程师可以很好的理解

在涉及多个成员角色时

工作过程将如何完成

比如 我们来举一个例子

某公司打算将处方药的开方

和给药的过程全部自动化

全部过程将围绕一个WebApp进行考虑

医生或者是他们的助手

药剂师和病人

都可以访问这个应用系统

当病人请求重填处方的时候

会发生的情形

如

我们的泳道图所示

图中表明了

三个角色的任务和决定

这些信息可以通过访谈

或者是每个角色

书写用例来获取

事件流使得

界面设计师认识到了三个关键的界面特征

第一

每个用户通过界面实现不同的任务

因此

为病人设计的界面

在感官上要与为药剂师 医生设计的界面

有所不同

第二个特征是

为医生和药剂师设计的界面

应该能够访问和实现

来自辅助信息源的信息

比如药剂师应该能够访问

库存信息

医生应该能够访问其它可选药物的信息

第三个特征

泳道图中很多活动都可以采用任务分析

和对象求精

使其进一步的细化

例如“填写处方”

隐含着

邮购支付

访问药房

或者是访问特殊药品的分发中心这样的

细化内容

好

显示内容分析

我们要在界面上显示哪些内容呢

我们这个部分

也是我们要分析的内容

不同类型的数据

是否要放置屏幕上的固定位置

例如

照片一般显示在右上角

用户能否定制内容的屏幕位置

是否对所有内容赋予适当的屏幕标识

为了便于理解

应如何划分长篇报告等等

另外 界面设计的时候

我们还要考虑合理的响应时间

几乎所有的计算机交互系统的用户

都时常需要帮助

联机帮助

使用户不离开用户界面

就能够解决问题

另外

错误处理

通常 交互式系统

给出的出错信息和警告

我们应该具备以下的特征

一

要让用户可以理解语言描述的问题

二

应该提供如何从错误中恢复的建设性意见

三

我们应该指出

错误可能导致哪些不良后果

比如会破坏数据文件

以便用户检查是否出现了这些情况

或者已经出现了的情况下

如何进行改正

应该伴随着视觉或者听觉上的提示

并且

永远不应该把错误归咎于用户

另外

我们要设计菜单和命令标记

键入命令

曾经是用户和系统交互的主要方式

并广泛用于各种应用当中

现在 面向窗口的界面采用点击

和选取方式

减少了用户对键入命令的依赖

另外 应用系统的可访问性也非常重要

随着计算型应用变得无处不在

软件工程师必须确保界面设计包含

使得有特殊需求的用户

也能够易于访问的机制

这样可以使界面能够达到

各种级别的可访问性

另外 在界面设计的时候

我们也需要注意国际化的问题

用户界面经常是一个

为一个国家和一种语言所设计的

在面对其它国家的时候

我们只能够应急对付

设计师面临的挑战

就是要设计出全球化的软件

软件设计师有

对国际化指导方针

可以使用

对于几十种具有成百上千的字母和字符的

自然语言的管理

已经提出的Unicode标准

就是用来解决这种挑战的

方案

好 我们看一下WebApp

和移动应用系统界面设计的时候

要注意哪些问题

在进行WebApp

和移动应用系统设计的时候

我们要时刻弄清楚

用户在哪里

我们的界面应该为访问过的WebApp

或者是移动应用提供提示

而且 要提示用户当前在内容层次当中

所处的位置

另外 我们还要告诉用户

现在他可以做什么

界面应该总是能够帮助用户理解当前的选择

哪些功能可以使用

哪些链接是可用的

哪些内容是相关的

另外

我们还要让用户了解

用户去过哪里

能够再去哪里

我们的界面必须要便于导航

提供一张地图

以容易理解的方式来实现

这张地图要显示了用户在WebApp

或者是移动应用系统中

曾经访问过哪里

以及还可以访问哪里的

明确的一些提示

有效的WebApp

和移动应用系统的界面

应该是什么样的呢

如Bruce Tognozzi建议

有效的界面在视觉效果上

是明显的

宽容的

并且慢慢的给用户灌输控制感

用户能够很快的看到他们的选择范围

领会怎样达到他们的目标

然后做他们的工作

有效的界面

要使用户不必关心系统的内部操作

所有的工作都被谨慎而连续的保存下来

从而使用户有充分的选择余地

可以在任何时刻

取消任何动作

有效的应用和服务

从用户那里要求最少的信息

同时可以完成最多的工作

我们应该像这样的设计目标而努力

另外 我们要考虑一下绘制用户的目标

将用户的目标映射到特定界面行为上

对于大多数的WebApp

和移动App来说

用户的主要目标其实比较少

应该将这些目标映射到特定的界面行为上

界面设计人员必须回答

界面是如何让用户完成每一个目标的

图中所展示的上方的位置是

图像

图标

和一些公司的名称

在这些的下面 是一些

主要目标的主要功能菜单栏

然后 在界面的左侧

是一些导航菜单

在右面中间的位置

是核心内容的部分

其中右上角是图像的部分

其余的核心内容的部分

可以放一些主页的文字

另外 作为界面设计

我们也要考虑一些美学方面的设计

在美学方面设计的时候

我们可能要注意

不要害怕留白

要强调核心内容

我们的组织布局元素

要按照从左上角到右上角的逻辑顺序展开

将页面中的导航内容和功能

地域进行分组

不要尝试

要求用户使用滚动条来扩展他们的空间

另外 在设计布局时考虑分辨率

浏览器的窗口大小等

美学方面的设计细节

最后我们看一下界面设计

如何进行评估

界面设计评估我们要走过一个循环

首先 我们拿到初步的界面设计

然后建立第一级的原型界面

用户对原型界面进行用户界面评估

用户界面评估会给设计者提供一些反馈

设计者研究评估的结果

然后对设计进行一些修改

修改之后 建立第二级的

界面原型

然后再次的交给用户进行评估

得到用户的反馈

经过这样几次循环

最终得到

建立第n级的原型界面

得到用户满意之后

产生最终的

界面原型结果

以上是我们今天关于界面设计

所讨论的所有内容

包括界面设计的原则

界面设计的内容

界面设计的模型

界面设计如何进行评估

今天我们所有讲述的内容就到这里

谢谢大家