“救在身边”app设计在线视频

前面两个小节我们认识了产品要解决的问题

收集了能解决问题的用户相关信息

我们对整个问题的定义已经很清晰

现在要做的就是对问题提出有效的解决方案

在第一节的时候我们定义过产品的目标

以及产品的大致实现方法

所以这里我们主要进行的是app的设计

上一节结尾我们埋了一个伏笔

这一节要完善结构层的内容

结构层主要是产品的信息架构和交互设计

信息架构通过各种原型和板块内容的设计

完成方案设计

信息架构中又要选择导航设计等

同时前面信息架构的设计

我们强调过它的三要素

用户

内容和情境

前面我们介绍过卡片分类

这种确定信息架构的方法

卡片分类有开放式和封闭式两种方法

这里我们采用了封闭式和开放式相结合的办法

首先我们设计了app大致的设计流程

从刚开始的注册

登录到app主体

App又因为要满足前面的功能和内容

所以提供了安全知识学习

测试和“我”三大板块

然后制作了资料管理

活动管理

收藏

紧急呼救

疾病

运动

生活

急救常识

理论测试

实践测试

知识共享

每日资讯

药品

紧急用品

紧急呼救

地图定位这些卡片

然后邀请一些用户

专家对这些卡片进行分类

分类之前并说明不限于这三种分类

经过分类我们发现资料管理活动管理

收藏被分到了“我”的分类之下

疾病

运动

生活

急救常识被分到了安全知识学习的分类之下

理论和实践测试被分到测试之下

其余的卡片则被测试者自行进行了分类

知识共享和每日资讯被分为一类

急救用品

药品被分为一类

紧急呼救和地图定位被分为一类

这样原来的三个板块就增加到了六个板块

我们将多出来的三个分组的

各组卡片进行对比比较

“知识共享”应该是具有社交属性的板块

而“每日资讯”属于信息资讯或者热点的板块

但是相比其他的卡片

这两张放在一起的组合最合适

参考“新浪微博”等社交软件

也是集成了信息分享和获取的功能板块

急救用品和药品放在一起是因为这是属于物品类

所以不管是物品的使用教学或者是销售平台

这两个放在一起是比较合适的

而紧急呼救和地图定位功能更像是app的附属属性

或者技术特色

所以放到一起

当然这种分类方式是从用户角度出发完成的

我们先为这三个板块命名为“互动”

“急救商城”和“SOS”

这样的话“知识互动”和“每日资讯”就成为了

以安全知识交流为主要内容的社交板块

而“急救用品”

“药品”可以作为物品的使用教学

放在安全知识下面

但是独立出来则可以成为在线商城

在前面的用户研究阶段

用户旅程图讲到过用户请求急救的行为

这里的紧急呼救和地图定位

就是为这个行为设置的功能

除了已经设置的卡片

每个分类还需要补充一些功能

比如“我”是用户相关资料的管理

app的相关设置是必要的

参照其他app的做法

也可以放置在“我”的分类下

急救商场中会产生交易

所以这里需要添加一个“我的订单”

方便用户查看自己的购买活动

测试环节有我们前面提到的奖励机制

鼓励用户学习安全知识

所以“我”下面需要管理用户的奖励

这里设置“我的积分”

“我的证书”来管理用户的学习奖励

安全知识学习基本分为了四大板块

但分几个板块不是最重要的

因为不论你怎么分都不可能完全符合用户的分类

所以为了方便用户尽快找到相关知识

需要设置快速的搜索机制

这里添加一个“紧急搜索”

同样在“急救商城”也需要设置一个“搜索”

在“SOS”急救板块

紧急呼救和地图定位只是满足了施救的顺利

但是医学上急救需要患者的病历

所以这里还需要一个版块

存储和管理用户的急救信息

结构层一个重要内容是信息的设计

我们完成了一级内容和二级内容

接下来是补充二级内容

这个时候用头脑风暴的方法

把功能点或者内容写在卡片上

然后贴在每个功能点下

这里我们看到的就是小组同学

在头脑风暴之后粘贴的内容

这些分类或者内容到底正不正确先不用考虑

在第一节的时候我们把

测试和迭代的过程放在概念设计之后

其实从信息架构的设计这里开始

就可以测试和评估

比如用户的姓名

电话和病历

紧急联系方式这些刚开始是放在“我”下面的

但是我们为了区分用户

使用软件的资料和急救的资料

所以将这些信息放在了“SOS”中“我的”分类下

接下来的任务就是把卡片分类的结果精细化

设计成我们的信息架构

卡片分类阶段我们采用了

开放和封闭的卡片分类形式

这种形式很自然地有app设计者的思维参与

所以从一开始就规定了

信息的分类方式是按照组织结构来分

其他几种方式是什么呢

我们复习一下

时间

字母

地理位置

格式分类

接下来我们的方案流程是按照受众

还是主题来设计呢

肯定是不能按照受众

因为年龄

性别等不是安全知识学习的首要驱动因素

而且前面我们用户故事板中每个主人公

都是带有一定目的使用app的

所以应该主要以任务形式组织

而在知识分类下可以采用主题

比如疾病

运动等这些分类就是不同的主题

接下来是架构模式

很显然数据库

超链接

线性啊这些模式都不适用

所以用层级模式

现在大家看到的是我们整个app的信息架构

一共是6个板块的层级结构

接下来我们每个版块去看看

首先是安全急救知识学习版块

前面三个版块包含了日常生活遇到的安全状况

最后的紧急常识主要从频发的

一些紧急普及急救常识

比如食物中毒

心脏骤停

同时还有急救药品的使用方法学习

但是用户的认知逻辑和

我们分类的逻辑是不一样的

用户不会给自己的疼痛分科

或者很难分得清楚

这个道理就像病人去医院

首先感知的是自己的症状

再根据症状查找科室

往往查找科室是最麻烦的事情

所以我们这里要让用户避免这种麻烦

直接按照自己的身体部位

出现的问题或症状去学习

这里是测试和互动的信息架构

知识共享和每日资讯下的

这些内容只是我们列举的一些方面

但是不限于这些内容

紧急商店作为急救用品和药品的电商入口

主要出售相关物品

这个地方的 “客服”与淘宝店家的 “客服”有所区别

这个地方的“客服”更像是

订单和购买管理的入口

“SOS”按照我们之前的设置

没有多大的变化

测试分为理论测试和实践测试

练习的模式分为很多种

同时测试的题型按照不同的格式类型

主题

题目类型设置不同测试渠道

实践测试属于线上线下的结合

向用户开放线下的安全知识教育活动

讲座

志愿活动

这些活动可以增加用户的安全学习积分

结构层信息架构设计基本完成

接下来是对app的界面交互流程进行设计

交互设计最好是在其他画图软件中去完成

把软件的交互流程用线框图的形式表现出来

这里的界面显示的是完成查看

头部创伤出血这样一个任务的流程

首先是打开app

进入到注册和登录界面

这里我们进入到登录

如果没有账号则点击右上角按钮注册

进入到注册界面

注册完成登录进入到app的主页面

主界面可以通过选择“头部”按钮

或者通过搜索关键词进入到“头部”部位

选择“头部出血”按钮

进入到“图文”的安全知识界面

通过下翻查看更多内容

查看头部流血的处理注意事项

通过切换教学材料格式

查看视频的处理知识

同样也是下拉查看更多的注意事项

到这里查看头部流血的知识的任务就完成了

按“返回”按钮回到选择界面

再次返回就回到了软件的主页面

现在的这些页面是常见紧急情况的知识学习界面

操作的逻辑和前面的“头部出血”处理知识一致

同样也采用了列表的导航模式

学习内容通过图文的形式表现

图文相比视频具有更高的可靠性

相对于视频对网络数据的要求更低

这在紧急情况是很必要的

接下来是进行测试

页面顶端标签栏左右

可切换实践和理论的测试

这里实践测试按照时间的形式进行组织

右上角切换按钮可切换至

按照地理位置进行组织

点击第三项活动

进入到活动的详情页面

活动详情页通过分享按钮

即可分享活动至其他社交平台

我们再次回到刚刚理论和实践的选择界面

这次进入的是理论测试页面

理论测试页面主要按照题型进行分类

底端是用户的测试管理标签

点击“随机测试”进入到答题界面

底部状态栏可进行收藏的操作

可以观察对错情况

切换顶部标签进入“解析”页面

查看题目的答案解释

接下来这个页面是进行专项的练习

通过点击这些标签可以进入到

不同的测试模式

不同的测试结束之后

用户可以通过测试主界面的

测试管理查看相关情况

比如用户在测试主界面

点击“我的错题”就可以查看和复习自己错误的题目

接下来是互动版块

主要分为“今日话题”和“知识共享”两个部分

“今日话题”通过官方制造话题版块

吸引用户讨论

“知识共享”目前有“民间小技巧”和“误区推送”两个话题

后期可以根据用户反馈迭代

点击第一条“知识共享”话题查看

可分享到其他社交平台

点击“误区推送”查看另一版块内容

接下来我们来看“每日资讯”里面的话题

这里主要有官方组织和推送热门话题和讨论

急救商店提供安全用品和一些药品

查看更多即可查看更多具体的药品分类

底部标签可以切换不同的物品

这里我们点击冠心病药品进入到具体的商品界面

这些商品按照卡片式陈列

加入购物车之后

在购物车查看相关信息并购买

最后的客服则是用户购买物品之后的售后服务

这6个界面是用户使用软件资料的管理和设置

隐藏在主界面“我”的图标按钮中

通过跳板导航的形式跳转到“我”的界面

“SOS”快捷按钮位于app的右上角

方便用户随时在使用app的时候申请“SOS”急救

首次使用用户需接受相关条款

填写用户资料

在使用SOS急救时

app会向附近的app用户或者医疗单位发送信息

并显示实时定位

用户也可以接受附近的急救申请

选择是否帮忙

这些就是app的交互流程的设计

属于结构层的内容

App的设计工作最后一层是表现层

也就是界面设计和美化工作

这个时候最好不要急着把线框图转化为漂亮的界面设计

最好检查或者直接做用户测试

然后对交互设计进行迭代

这样做可以及时发现问题

避免界面设计的错误

比如首页的身体部位选择

在做用户测试的时候发现

用户反馈整个过程中出现了太多的页面转移

感觉操作繁琐

我们反推出用户从app主页到

学习界面的一个流程

发现一共出现了两次页面跳转

在身体部位选择页面还出现页面的切换

所以很有可能频繁的页面跳转和切换

给用户造成了繁琐的感觉

这里需要改进的是页面的切换

如果在页面不转变的情况下

完成不同内容的跳转就需要改变导航方式

我们来看看哪种导航模式最好呢

导航要做到不影响页面内容的展示就要独立出来

与页面内容分离

这样的导航有标签导航

抽屉式导航

下拉式导航

其中标签导航也会占用页面的面积

减少内容量

所以可以使用下拉导航和抽屉式导航

再者身体部位后面还有一级内容

所以下拉式菜单没有抽屉式菜单好

从选择身体部位到身体部位的症状

由于要在多个内容之间进行选择还要减少跳转

因此使用列表导航的模式最合适

通过用户测试

我们发现了许多类似这样的问题

然后根据用户提出的反馈意见进行及时的修改

如果产品已经上线的话

这些修改只好放在新的版本更新中进行

这就是在设计中进行用户测试和迭代的一个好处

类似于这样的测试和改进过程还有很多

但是我们这里就不一一解释

总的方法则是参照前面课程的测试和评估方法

经过修改和迭代之后

界面的交互设计基本完成

接下来就是将我们的界面交互设计完善得到最终的迭代版本

写出说明文档

交互说明文档的封面包含标题

版本

日期

参与人员

变更内容概要

备注信息

其次是目录

目录分清主次关系

合理分级

接着是更新记录页

包含交互设计的适用范围

文档的使用人群

文档目的

版本相对于上个版本的更新点

接下来是交互流程和逻辑图

并配合文字说明

必要的时候需要页面展开和操作逻辑说明

剩下的则是一些单独交互动作的详细解释

此外一些交互说明文档还需要交互尺寸的规范文档

比如图标的的大小和边界等问题

这里我们举例说明一下页面的交互流程

这里我们拿这个app的登录和注册页面举例进行说明

首次进入app时

会提醒登录或者注册

这里我们点击登录按钮进入到登录的界面

这个时候会面临一个逻辑判断

如果是用户有账号

就在此页面直接登录

如果没有账号

就进入到点击注册按钮进入注册页面的程序

这就属于是页面的交互流程说明

黑色流程图的部分就属于逻辑的判断

这在页面交互流程和逻辑的部分就应该写清楚

除此之外这些说明并不能够完全说明app的交互设计

比如登录页面中有那么多的按钮

这些按钮的作用和交互的变化

可能会引起页面跳转或者变化

作用也需要交代清楚

我们这里看到的是账号登录和

手机短信登录的选择按钮

当我们选择账号登录的时候

账号登录的按钮呈现出颜色的变化起到提示作用

选择手机账号登录的时候

后者出现颜色的变化

同时下面的通过短信验证登录

也会出现变化和提示

表示这个按钮现在处于可用状态

当然我们面向用户或者客户

或者被测试者的时候

他们不一定会懂这些专业的文档

这时就需要一定的测试原型

我们称作一定保真度的demo给他们演示

比如前面我们身体选择部位的用户测试结果反馈

就是给我们的测试人员使用低保真demo之后的结果

最后我们这里将为大家展示这次app设计的demo

案例讲解到这里就结束了

迭代工作在前面的交互设计流程阶段

我们介绍了一种改良的迭代模型

接下来就是回到以上设计过程

根据反馈和需要进行修改或者创新