交互课程信息架构与流程

如何搭建信息架构与用户流程导师@杨超（微信公众号：互联网设计狮）introduction导师介绍杨超

东华大学硕士微信公众号@互联网设计狮现任上市公司UED团队负责人，曾任职网易、携程、中国移动，负责过亿级用户量产品，也做过还没面市就夭折的产品。起点学院讲师，设计夹、浙大特邀分享嘉宾，爱民谣也爱骑行，骑车环过中国最南的岛，亚洲最美的湖...我的口号：为中华之崛起而努力填坑3一零基础入门互联网交互设计师交互设计师必懂得需求那些事如何搭建信息架构与用户流程输出交互原型与文档二三四交互设计沟通与发展五431信息架构的重要性如何进行信息架构设计24如何确定用户流程信息架构与用户流程公司前台候客区办公位休闲区茶水间洗手间会议室储物间公司前台候客区办公位休闲区茶水间洗手间会议室储物间信息架构的重要性信息架构“信息架构的主体对象是信息，由信息架构师用以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。”—理查德.所罗.乌曼通俗一点的讲，让用户更容易找到自己想要的东西和产品。主要包括：页面内容组织、整体导航框架。组织归类好的信息架构让用户一眼知道你的产品是做什么的不用或极小学习就知道怎么使用产品当想使用某个功能时，能预知产品功能在哪最终到达更好的留存与转化1031信息架构的重要性如何进行信息架构设计如何确定用户流程24信息架构与用户流程用户端业务端卡片分类访谈测试业务需求竞品分析12如何搭建信息架构①业务需求13信息架构—业务需求产品市场运营老板其他推广客服原则：可扩展性你要知道未来你的产品可能不止现在这样印象笔记列出业务需求架构图根据层级嵌套关系写出一层层功能点根据情况控制细度，如整个产品与单

个页面颗粒度会不同18如何搭建信息架构②竞品分析19信息架构—竞品分析竞品功能架构图至少5个竞品的信息架构图20信息架构—软件工具应用雷达/以网易云音乐为例21什么样的算竞品直接竞品间接竞品在同一领域中的竞争对手，如易货嘀同类货运类竞品：蓝犀牛、GOGOVAN、货拉拉、58速运、速派得等。其中产品之前版本也属于竞品之一。可通过同事沟通、行业报告获得。看似不在同一领域中，但对用户习惯产生重要影响的竞品：如客运类APP，Uber、滴滴等。可通过前期调研、搜索相关等获得。标注出梳理时的吸引点及想法信息架构树状图23信息架构—竞品分析总结不同点相同点寻找设计的机会点遵循行业及用户习惯24信息架构—竞品分析总结25如何搭建信息架构③卡片分类26信息架构—卡片分类前期需准备的目标用户/功能卡片/便利贴/录音笔/安静的环境27信息架构—卡片分类卡片分类流程介绍卡片用户归类归类名字继续归类用户访谈存档让用户理解每个卡片功能含义，不理解中途可询问。为什么把这些卡片放在一起？根据归类原因，给这些归类起个名字。某类卡片过多，是否可以细分，某类卡片过少，是否可以放在一起。分类过程中是否有纠结的地方，以及一些自己想问的问题。是否确定这是最后结果。确定的话拍照存档。信息架构—卡片分类分类、整理确定是你的目标用户29如何搭建信息架构④访谈测试30信息架构—用户访谈用户访谈测试1、在不介绍的情况下说出产品是做什么的2、让用户走一遍核心流程3、让用户使用细枝功能，如设置头像31产出信息架构根据分析结果列出相关优先级根据优先级产出最终信息架构不同方法配合使用根据场景使用不同方法整个产品信息架构单个页面信息架构不同331信息架构的重要性如何进行信息架构设计如何确定用户流程24信息架构与用户流程3用户流程是个什么东东用户流程是个啥玩意？用户从打开APP到完成任务关闭APP的使用全过程包括了用户看到什么，做了什么用户流程36用户流程-打开小程序查看行动查看行动查看37用户流程-对比流程查看行动查看行动查看查看行动查看❌用户流程长✔️用户流程短用户流程优化体验用户流程越短越好，操作流程尽量不超过5步如何确定用户流程呢基于用户的使用场景如何确定用户流程呢41查找朋友圈信息场景1：知道谁发的场景2：忘了谁发的基于用户的使用场景如何确定用户流程呢是基于目标用户完成某项任务的体验故事了解用户看到什么，想到什么，做了什么头脑风暴如果不能去实地调研用户44用户场景—头脑风暴热身主题发散轮流展示分类整理二次发散存档1.找6人以内成员；
2.告诉大家你的主题，比如这次我们要脑暴搬家的用户流程，你希望搬家的过程是什么样？1.每人5-10个idea。脑海中的任何一个想法都可以写下来；
2.每张条记录一个idea，尽量用简约表达，字要足够大，可以用画的。3.注意撕下条的方式，是横向，这样可以保证条的平整，不会卷曲，能贴的牢固。1.团队成员围墙站立,展示者面向着大家，介绍自己的idea，每介绍一个idea往墙上贴一个。3.语言尽量精炼，每个idea的表达尽量在20秒以内。3.这个过程中其他人以聆听和理解为主，不要讨论，更不要评判。1.大家把相似的条贴在一起;2.过程中鼓励大家都动手，相互之间不要用语言沟通。遇到想法不一致，再进行简短沟通。1.换一个颜色的便利贴。2.在听别人讲idea的时候，让大家手上拿着笔和条，鼓励大家在别人的idea上进行发展，直接记在条上。3.在贴自己条的时候，有意识的把相同or相似的贴在一起。1.所有有价值的信息，都在墙上，所有直接拍照就可以啦。2、整理所有的接触点。例子：搬家背景：晓红近期换了工作，今天要搬家从A点到B点，于是准备从搬家APP下单叫个货车。1、因为今天就要搬走，晓红比较担心有没有车，打开APP，看到周边车辆信息，顿时放心了不少；2、晓红设置了起始地和目的地，看到货车参照标准知道自己的东西一个小面车就可以拉了，于是选择了一辆小面，顺便看了下计费标准；3、这时APP显示金额58元，加上首单优惠8元，只需要50元；4、晓红设置了搬家时间，并支付了金额…例子：搬家背景：晓红近期换了工作，今天要搬家从A点到B点，于是准备从搬家APP下单叫个货车。1、因为今天就要搬走，小明比较担心有没有车，打开APP，看到周边车辆信息，顿时放心了不少；2、晓红设置了起始地和目的地，看到货车参照标准知道自己的东西一个小面车就可以拉了，于是选择了一辆小面，顺便看了下计费标准；3、这时APP显示金额58元，加上首单优惠8元，只需要50元；4、晓红设置了搬家时间，并支付了金额…梳理接触点设置目的地查看计费标准明确起始地支付看到车型参照标准更多选择车型车源信息看到资费和优惠信息选择搬家时间明确起始地设置目的地看到资费和优惠信息车源信息看到车型参照标准选择搬家时间查看计费标准选择车型支付加入业务流程比如服务协议、收集用户数据等明确起始地设置目的地看到资费和优惠信息车源信息看到车型参照标准选择搬家时间查看计费标准选择车型支付货物类型不需要用户操作的需要用户操作的根据需要放在用户流程中间，做默认操作放在用户流程最后，不影响用户主流程根据流程来设计交互页面确保每个接触点的过渡是自然的531信息架构的重要性如何进行信息架构设计如何确定用户流程24信息架构与用户流程354交互设计流程需求分析信息架构用户流程原型设计交互文档55信息架构与用户流程信息架构用户流程信息架构

确定广度让你知道功能和信息放在那里用户流程

确定深度让你确定用户完成任务的顺序57信息架构与用户流程广度深度平衡功能信息过深，用户不易找到功能信息过多，增加认知负担支