2.1 案例引入在线视频

同学们好

本章我们将开始

交互设计原理的学习

交互设计原理的学习中

我们将首次接触到交互系统

课程将从交互系统概念和定义

交互系统的组成要素进行学习

在实际的设计工作中

交互设计的原理指导着整个

交互设计流程的进行

那么在开始本章的讲解之前

我们来看一则案例

现在有一家集野生动物保护基地

科教宣传的活课堂

野生动物科研场所

市民休闲娱乐于一体的动物园

其配套服务设施的完整性

合理性

智能性

趣味性等将为园区的建设增加一抹亮色

但是

有一个一直令动物园头疼的地方

导览系统的落后和陈旧

目前游客只能依靠平面导游图

来完成园区的游览

导览功能单一化原始化

经调查发现

现有动物园导览系统存在的问题主要有

导视地图识别性较差

色彩材质搭配导致

游客无法清晰的阅读导视信息

信息完善度不够与园区环境不协调等

基于这些问题

要对导览系统进行升级改造

实现智慧化的

多媒介的导览形式

经过会议决定开发出一款集动物园简介

动物的图片

展馆介绍

语音导览

地图导游等于一体的服务类应用软件

同时配合智能化硬件设计

那么在开始设计之前

设计工作小组对整个系统进行定义

首先是要确定这个产品是为谁开发的

是动物园的工作人员还是游览的游客

那么这款软件的开发是针对游客群体的

毋庸置疑

接下来是用这个系统干什么用

动物园主要希望游客通过这个系统

轻松查看各种场馆地图

同时根据游客不同的需求

智能制定观看计划

此外还需要向游客推送门票信息

开放时间

价格优惠等消息

使用场景除了主要满足在动物园中的游览

还需要满足用户在园外的使用

以增强动物园的形象传播效果

那么基于智能手机的移动端app

实现使用是最理想的形式

同时可配合周边产品实现智慧化的导览

针对整个智慧导览的交互系统

有了清晰的描述之后

设计人员才对这个动物园导览的

人机交互系统整体轮廓有一定的认识

很多同学以为有了这么一个蓝本就可以开始设计

很显然还有一些事情没有搞明白

比如整个动物园现在的导览现状是一个什么样子

存在哪些具体的问题

动物园的游客有哪些特点

他们有什么样的需求

动物园相关智慧技术怎么实践

为解决这些问题

设计团队首先要进行前期调研

经调查发现

动物园导览系统存在的问题主要有

导视地图识别性较差

色彩材质搭配导致游客无法清晰的阅读导视信息

信息完善度不够与园区环境不协调

指示牌等标识较陈旧维护不够

引导性指示牌只指出方向并未指出确切距离

标识设计在字体

形状

色彩等方面缺少统一性与个性的区分

且混乱无章

某些重要路口缺乏引导标识

导致游客不能迅速便捷地前往目的地

缺少趣味性只起到了基本的指引功能

导览功能单一原始

没有运用国内外较为先进和便利的技术辅助导视

例如语音导游系统

电子导游设备

多媒体导游

导游APP等等

此外调查还发现我国现有的

动物园移动智慧导览仅为少数

与国外移动博物馆

移动动物园的研究相比来说较少

动物园移动智慧导览的移动性

主要体现在移动二字上

用户可以通过手机

ipad

甚至移动手表

可移动的终端等依靠移动智能通讯技术

实现在移动中进行实时导览

前期调研中最为重要的工作是用户研究

花费最多的时间和精力

用户研究以挖掘用户内在需求

目的

期望

情感和体验为目的

不是定性客观地去研究他们的身高

年龄

体重

与收入等信息

而是转向研究模糊的不确定性因素

包括爱好

审美

需求

情感等

并通过对用户行为的观察得出对设计开发有帮助的地方

动物园移动导览设计中

设计团队所采用的用户研究方法有三种

用户观察与用户访谈

问卷调查

用户角色模型

在用户访谈环节中

设计团队通过电话访谈

互联网访谈

面对面访谈采访了游客

本地居民和动物园的工作人员等

通过访谈发现了一些问题

比如超过一半的用户是偶尔来动物园

他们属于没有目的性的休闲娱乐

游览时会因为找不到路

找不到具体的动物区

餐厅

厕所而浪费掉宝贵的游玩时间

绝大部分游客见到叫不上名字的动物

会通过上网查询或者是询问身边人

例如百度地图

UC浏览器等搜索引擎

如果有一款动物园导览类的APP

他们最希望有地图

导航

动物信息介绍等功能

问卷调查是一种用户研究中的定性研究方法

通过对数据的整理

统计

分析

总结得出设计需求

得到有效问卷若干份

包括功能

包括功能

色彩

UI风格

界面风格

界面布局

使用操作

附加因素等问题

获得如图所示的数据

包括功能设置重要性评分

界面设计喜好评分

额外因素影响力的评分

同时设计团队还通过用户故事板发现问题

创造解决方案

通过如图所示的用户行为分析发现

用户使用手机导览的理想流程包括了

下载应用—开启应用—使用导览—

浏览信息—关闭停止使用

通过使用情景的分析发现

休闲时的网络畅通

用户心情放松

姿态舒适

有长时间使用的可能

等候时用户只是偶尔打开应用一看

网络状态可能不佳

使用时间也较短

忙碌时用户可能处于无暇顾及的状态

电量可能不足

用户期望在离线的环境下也可以轻松使用

两种模式的分析创建了如图所示

代表三类人群的用户模型

第一类使用者往往是那些

初到新环境希望快速获得相关资讯的人群

或者是没有目标无意间下载并使用的用户

出于好奇使用他们属于尝新型的新手用户

第二类是用过并且能迅速辩别出常使用的功能

对其他功能漠不关心的中间用户

第三类是热爱旅游喜欢探索新鲜事物的人

他们会经常使用各种与旅游相关的交互类软件

对于设计优的产品会持续关注并长期使用

可能产生依赖感

有自己的独到见解和需求

希望能够反馈意见即为专家用户

并分别针对不同的用户模型创建了故事板

经历了漫长的前期调查和用户研究

设计团队对所有零散的数据和信息进行归类

整理出可供设计使用的需求

包括功能性需求和情感上的需求

这个时候需求的归纳和整理就要联系

软件的设计进行

如图所示

设计团队将功能性需求按照等级划分

整理出3类4等级的需求

同时软件的使用又要满足好用

易用的目标

肯定要照顾用户心理感受和情感需求

因此也罗列出如图所示的情感需求

整个前期的研究阶段基本完成

接下来设计团队要针对不同的

移动系统平台对软件进行设计

大家都知道

现在手机操作系统基本分为

IOS和Android两大阵营

那么首先要做的是明确两大操作系统的

设计规范再进行

图中就是两种不同操作系统中的

设计界面对比

总的设计原则我们在此不做过多的叙述

我们在后面的有一个章节

在界面设计中大家可以详细的去学习

细分下来的原则就分为状态栏设计

标签栏设计

工具栏设计的基本原则

设计的内容包括

启动界面设计

软件框架设计

按钮设计

面板设计

菜单设计

图标设计

滚动条和状态栏设计等

同时也包括了屏幕大小

图标

分辨率

最佳触摸面

最佳操控区域

视觉流等方面的标准和原则

同时还有一些视觉设计元素

色彩搭配等原则

明确了设计规范和原则

以及设计元素之外

设计团队开始信息架构的设计

信息架构的确定基于对用户行为

思考方式的理解并把元素的模式

和顺序呈现给用户

其主要工作是设计组织分类和导航结构

就目前现有APP设计的层级结构主要有

标签式

辐射式

列表式

平铺式

抽屉式等

图中每种架构各有千秋

比如标签式架构广度大

需要更多的识别时间

占用屏幕时间

但多入口的应用可以让用户知道主要做什么

抽屉式架构隐藏层级突出重点

但是操作步骤多

所以要根据页面的不同使用来确定不同的层级架构

由于移动应用的特殊性

深度优先的应用

使任务不流畅

容易使用户产生挫败感

浅且窄的框架能使用户最短路径

最短时间找到需要的信息增加可发现性

若信息量大的应用可以采用隐藏的方式

由于APP的功能分类多种多样

包括通信沟通

媒体传播

生活辅助

休闲娱乐

工具支持

行业应用等

此次设计的动物园APP定位为实用服务类

其功能主要包括

园区介绍

场馆及景点

地图

便民服务

联系我们

登录

下载

反馈等

其中登录

下载

儿童手表电子定位等功能暂未启用

会作为版本升级和后续开发设计的内容

信息架构进一步转化为低保真原型

低保真线框图它是信息架构和视觉设计的汇集

通过拉线框的方式清晰的表达

界面各个功能的布局与优先级排列

并在一定程度上为视觉设计指出了前进方向

线框图中可以标注任何细节

注明功能规格

图中原型为第一次设计原型的低保真推敲方案

因动物园方的开发要求

1.0版本并未要求将儿童智能手表的

搭载功能设计其中

我们这里主要展示主界面

景点游玩和地图页面的低保真线框图

到了这一步

有些同学会以为直接进入到

界面的实现和细节优化

但最好的做法是对低保真原型进行测试

事实上

在动物园导览app的设计过程中采用

五点量表测试方法

获得用户使用APP时的主观体验与感受

来作为改进设计和检验设计的数据支撑

那么这一步就是我们常说的可用性测试

对用户体验的各个环节进行打分

测试选取了10人

6男4女

其中3人为儿童

7名成人进行测试

在手机上对APP原型进行

点击操作并填写测试报告

还通过测试用户使用产品时的工作负荷量

包括心智负荷

身体负荷

时间负荷

精力耗费

表现绩效和挫折程度等来评估产品的可用性

主要是通过制定典型任务

分析每个用户完成任务时间

间接对产品作出评价

当然项目还没有完成

我们要完成敏捷开发就必须迅速地进行迭代程序

对低保真原型进行修改和完善

那么接下来就是完整的精细的界面设计阶段

这个阶段包括软件的logo设计

以华南虎为设计元素

绿色的底色给人生机勃勃的自然体验

最终方案选择视觉对比度较好的右图

还有开机页面

引导页面

主页面

地图页面等页面的界面设计

同时标签

图文

动效

反馈等细节也应该面面俱到

为最后的高保真做准备

那么图上就是经过一轮设计之后

得到的高保真方案的一部分展示

高保真方案最接近用户使用时的界面

也几乎就等于使用时的界面

但是这样的设计是不是就可以上线呢

我们在前面对低保真方案

进行过简单的可用性测试

那么高保真方案同样需要可用性测试

项目采用了典型测试任务

简单说就是让用户使用软件完成任务

记录耗时

操作次数以及过程中的一些反馈

图中是软件测试任务的流程图

根据这个流程图进行不同的任务测试

用表格记录下来

这4个例子就是不同功能分类下具体的任务

比如查看大熊猫的信息

查到票价

科普活动

观看老虎视频

表格记录下平均消耗的时间

平均的点击次数

以及分析原因

同时还有各项指标的评分

在这张表格中包含了生理负荷

心智负荷

时间负荷

精力消耗

挫折程度的评分和分析

这只是针对一项任务的分析表格

不同的任务应该制定多张表格

通过对动物园移动智慧导览APP的可用性测试

发现其基本实现了一款服务类APP的要求

设计中有值得肯定的地方

但也存在不足

例如用户在情感体验方面还没有强烈的愉悦感

说明产品的趣味性仍需要加强

因其本身使用环境限制

所以用户在是否继续使用和

购买迭代产品上会有所顾虑

也就是说用户粘度还不够

如果将儿童智能手表的功能也纳入移动智慧导览中

并增加分享和互动等功能

移动智慧导览的用户使用量也许会有所提升

根据这种分析对现有界面设计进行改进和迭代

得到现在的这些页面

方案是最终作为开发对象的方案

现可在动物园官网上下载

运用绘画术语描述该方案设计风格

就是相对写实与逼真

视觉体验也更为直观

配色依旧采用绿色和蓝色明快自然

材质设计的运用在该方案中得到了充分体现

因此营造的视觉体验也较好

在设计之外的工作还有技术开发

测试

运营和推广等

但是到这一步

项目的设计部分基本就告一段落啦

那么后续的升级和迭代工作将根据不同的反馈进行