

首页  思维导图  详情



网易云交互-规范信息架构与流程设计

2019-01-26 14:13:27   1  举报





AI智能生成

网易云交互设计微专业

交互设计

产品设计

产品经理

需求分析

网易云微专业

模版推荐

作者其他创作

大纲/内容

规范信息架构

1.认识产品信息架构

认识产品信息架构

是什么

饭店例子

需要哪些元素

遵循一些规范

概念是对信息进行结构，组织方式以及归类的设计， 好让使用者与用户容易使用与理解的一项艺术与科学

容易理解，更顺利，更自然

为何需要

让用户一眼就明白你的产品能做什么，大概怎么用

用户都能在需要的时候容易地找到某个功能

为何要设计

饭店例子

不是每个人都对产品有一个认知

信息架构不是简单的功能堆叠，需要逻辑性的方法

产品信息架构设计的前期工作

产出产品信息架构设计

评判产品信息架构

信息架构推广：用信息架构思路设计页面

2.产品信息架构设计的前期工作

1.了解用户，场景，习惯

persona（用户角色模型）

提取习惯

尊重用户习惯

用户通常用你的产品做什么？

用户做这类产品最关心什么？

用户有哪些思维定式？

用户用什么类似的产品？

不要在不必要的地方体验差别

在哪里创新？

2.了解业务需求

和运营市场沟通，让信息架构有更大兼容性

3.调研竞品的信息架构

找3~5个同类竞品分析

用思维导图整理

分析

共性

遵循用户习惯

差异

设计机会点

改版

梳理过去的版本

竞品分析

之前的版本也是竞品

4.卡片分类法

是什么？

了解竞品后，还要进一步了解用户的心智模型

定义

让用户对功能卡片进行分类，组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法

简化

准备一堆卡片，在这些卡片上面写上你所需要包含的功能名称，给到用户侧，让用户进行分类，然后让用户进行组织，来了解用户觉得这些功能该怎么分类，组织

准备的东西

目标用户

功能/信息卡片

2支笔

空白的卡片

笔记本

流程

介绍卡片

描述卡片上的功能是干什么的

用户自由归类卡片

让用户取名

继续归类

多的拆分,细的归并

简单访谈

是否碰到一些困难，或者有一些觉得不清楚的地方

拍照存档

问题提点

功能/信息卡片怎么提取？

1.功能或界面的名字

比如：联系人名片，对话窗口，拨号呼叫

2.他来自于你现有信息架构的树叶

没有再分叉了

3.不要过分细分

比如：不要细分列表单元格内的元素，不要细分一个相对稳定的页面，浪费用户精力时间

4.功能/信息卡片不要出现包含关系

5.卡片不要超过30张，那会让用户无从下手

如何更好地引导用户？

介绍卡片

是否理解每张卡片的含义，如果不理解可以询问

确保理解每张卡片的功能，对这些功能正确无误的理解了

用户归类卡片

为什么把这些卡片放在一类

让用户取名字

这类卡片取名字可以叫什么？

根据你刚刚归类的原因，是不是可以叫某某某？

继续归类

这一类卡片数量太多是否可以进一步细分？

现在已经分成了N类，是否还有哪几类能再放一起？

简单访谈

在分类过程中是否有什么纠结的地方？

拍照存档

是否确定这是最后的结果？

卡片分类法需要产出什么？

信息架构树状图

这来自于用户的心智模型

3.产出产品信息架构设计

1.利用MindMip和Axure整合信息

整合前期工作

用户习惯

业务需求

竞品信息架构

卡片分类

输出自己产品的信息架构

重要性的评级

对每一层进行分级

重要性分级而不是排序

2.寻找层和度的平衡

层

信息架构树的深度

度

某一节点内子节点数的数量

层和度取得平衡

3.验证核心使用流程

在信息架构层面确保核心使用流程的通畅

1.尽量保证根据树结构进行层级自上而下前进

2。不联通层级间的跳跃，尽量发生在最后一步骤

4.考虑信息架构和交互构图的关系

移动端

一级导航

Tab

第一种重要级有多项

抽屉

第一种重要级只有一项

教训：竞品与用户习惯

易信1.0与2.0

不要在信息架构层面，为了不一样而不一样

Web

利用不同结构，体现重要级

利用布局，体现逻辑关系

例子

5.为讨论做好准备

你的过程就是你的底气

4.评判产品信息架构设计

1.用户测试

用户是否在你不介绍具体产品的情况下，通过短时间的使用，就能说出产品可以用来做什么。

让用户进行核心流程任务，检查完成任务是否顺利。

2.撰写产品说明书

问题

你需要多复杂的说明书？才能教会用户使用核心功能？

5.用信息架构思路设计页面

1.为何在单一页面设计时需要考虑信息架构问题

确定页面所需呈现的信息

绘制信息架构树状图

重要性分级

绘制页面

2.明确一个页面中的元素逻辑性与重要级

图

子主题

3，绘制单一页面

逻辑相关的内容使用统一的形式，位置。并让区块联通

图

利用大小，上下位置，色彩体现重要级

打造漂亮的流程设计

1.流程设计的重要性

问题

1.用户和产品的交互是什么？

交互设计师要设计什么？

界面按钮？ No

用户完成任务的方式 帮助用户顺利完成任务

拨号界面

图

子主题

下个定义，流程设计

根据用户使用流程进行页面设计，帮助用户完成任务的设计方式

2.企业中的流程设计还需要考虑什么？

用户想完成的任务≠产品真正想完成的业务任务

例：春晚微信抢红包

用户

抢红包

产品

绑定银行卡，关注公众号

不仅仅是帮助用户完成任务，而是以不干扰用户使用流程的方式完成业务需求

3.优秀的流程设计有什么好处？

增加任务的完成率

例

图

让用户更方便的完成任务

例

对错误的充分思考

例

图

夸张的业务完成度

例

图

2.如何进行流程设计

1.充分理解业务需求

业务需要达成的商业目标

业务受到哪些技术和商务限制

了解业务所需要的合作方

某某合作方支持了活动，所以希望曝光

2.找到用户完成任务的所有接触点

接触点是什么？

和产品或某一渠道发生交互的关键点

用户做了某件事、用户看到某个信息，就构成了用户对产品的接触点

来自哪里？

来自于用户场景

基于用户模型，经验，用户调研的体验故事

提炼出接触点

挂点电话

看到时长不足的信息

点击了解如何获得更多

查看获取更多时长方法

看到具体邀请规则

选择要邀请的微信好友

和朋解释等

Tip

为了完成流程设计，需要构思的用户场景有多个，学会合并同类项

问题↓

用户在朋友圈查看分享内容的第一个接触点是什么？

用户发布朋友圈动态的最后一个接触点？

要顾及头尾，他们是最容易被遗漏的接触点

3.梳理接触点

准备

做与看

用户做了某件事

改变了用户所处的状态，产生接受新信息的机会

用户看到某个信息

获取新的知识，产生新的想法

例

做

挂断电话

可以接受电话的其他信息

看

看到时长不足信息

产生了解怎么办的欲望

图

最好的模式

做事——看信息——做事

每一步都不会接受太过庞杂的信息

也会出现

做事——做事

用户的经验足矣支撑行为

例

输入帐号——输入密码

看信息——看信息

信息量较多，需要依次理解

例

看到活动大致流程——看到具体规则

绘制流程图

接下来开始绘制交互稿？ No！！

加入业务需求所需的流程节点

不需要用户操作的加在中间流程

加在使用流程最后

4.根据流程设计交互稿

在交互稿上体现用户操作流程

图

问题

1.如果出现流程有很多分支时，不要制作在一个页面中，这样会让交互稿可读性变差。更好做法是在站点地图上体现这些分支

图

子主题

不要随意地跳过某一页面，流程设计需要考虑到流程中出现的每个页面， 即使不再你的APP中，如果是用户会经历的流程，都需要体现

注意开头和结尾

注意前后页面的关联性和一致性

Button与Title不一样？

在完成交互稿后，请对照接触点流程检查一遍交互，确认每个接触点的过度自然。你提供了完成一个接触点所需要的全部信息

5.处理异常流程

如何布局异常页面？

放在页面下方

必须要考虑的异常

异常

用户网络故障

服务器资源不足

不可挽回的损失

自动保存机制

了解错误返回码可以让错误考虑更全面

在错误返回码上一个个查看它是什么错误，对此做出一些正确的响应方式

预测用户可能出现的错误

错误点击

注意处理力度

精力有限，不是所有的异常流程都要花大精力去处理

异常流程是个无底洞

Toast

请稍后再试——两秒消失

提示文字少，且可以马上重试

Alert

你的行为是错误的——确定

提示文字较多，且需要用户确认

优先级

正常流程设计＞核心异常流程设计＞可以简单解决的小异常

3.流程设计与交互工作

流程设计与信息架构设计

信息架构设计

核心流程设计

信心架构调整

完成所有流程设计

流程设计与用户场景

目标用户

用户场景

目标用户

业务目标

用户体验目标

一个结合页面的用户场景故事

是否像预期的那样，帮助用户达成体验目标，帮助产品达成业务目标

相应流程设计

问题引出

为什么搞不清标题和内容的对应关系？

接近性

依据间距来判断彼此间的关系，空间上的亲近暗示关系上的亲近

看着一样，为什么点击后的反馈不一样？

相似性

如果其他因素相同，那么相似的物体看起来归属于一组

图

子主题

相似VS对比

相似性可以帮助我们识别哪些是同类，做出快速的判断

对比，可以表明彼此间的差异，做出适当的引导

调整了间距，但是分组还是不明显？

封闭性

人们倾向于将残缺的轮廓加以补充使成为一个完整的封闭图形

常见的分组模式

点线面

图

子主题

怎么让用户感觉还有很多？

连续性

凡具有连续性或共同运动方向的物体容易被看做一个整体

图

子主题

整个页面感觉向一遍倾斜了，怎样才会舒服些？

对称性

根据视觉元素重量的不同，来营造实现视觉的平衡

不平衡

依靠视觉重量引导用户的视觉流

为什么整个页面感觉总是不对？

情感化

色彩帮助营造网站的整体氛围

明确情感需求，并准确传递给视觉童鞋

图

 Collect

Get Started

慢trace-交互信息

 Collect

Get Started

网易宝下单流程

 Collect

Get Started

用户体验设计流程

 Collect

Get Started

线程工作内存与主内存交互





0 条评论

下一页