3.规范信息架构与流程设计
2019-01-26 14:13:27 1 举报AI智能生成
登录查看完整内容
网易云交互设计微专业
作者其他创作
大纲/内容
需要哪些元素
遵循一些规范
饭店例子
容易理解，更顺利，更自然
概念是对信息进行结构，组织方式以及归类的设计，好让使用者与用户容易使用与理解的一项艺术与科学
是什么
让用户一眼就明白你的产品能做什么，大概怎么用
用户都能在需要的时候容易地找到某个功能
为何需要
不是每个人都对产品有一个认知
信息架构不是简单的功能堆叠，需要逻辑性的方法
为何要设计
认识产品信息架构
产品信息架构设计的前期工作
产出产品信息架构设计
评判产品信息架构
信息架构推广：用信息架构思路设计页面
1.认识产品信息架构
用户通常用你的产品做什么？
用户做这类产品最关心什么？
用户有哪些思维定式？
用户用什么类似的产品？
尊重用户习惯
不要在不必要的地方体验差别
在哪里创新？
提取习惯
persona（用户角色模型）
1.了解用户，场景，习惯
和运营市场沟通，让信息架构有更大兼容性
2.了解业务需求
用思维导图整理
遵循用户习惯
共性
设计机会点
差异
分析
找3~5个同类竞品分析
梳理过去的版本
之前的版本也是竞品
竞品分析
改版
3.调研竞品的信息架构
了解竞品后，还要进一步了解用户的心智模型
是什么？
让用户对功能卡片进行分类，组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法
定义
准备一堆卡片，在这些卡片上面写上你所需要包含的功能名称，给到用户侧，让用户进行分类，然后让用户进行组织，来了解用户觉得这些功能该怎么分类，组织
简化
目标用户
功能/信息卡片
2支笔
空白的卡片
笔记本
准备的东西
描述卡片上的功能是干什么的
介绍卡片
用户自由归类卡片
让用户取名
继续归类
是否碰到一些困难，或者有一些觉得不清楚的地方
简单访谈
拍照存档
流程
比如：联系人名片，对话窗口，拨号呼叫
1.功能或界面的名字
没有再分叉了
2.他来自于你现有信息架构的树叶
比如：不要细分列表单元格内的元素，不要细分一个相对稳定的页面，浪费用户精力时间
3.不要过分细分
4.功能/信息卡片不要出现包含关系
5.卡片不要超过30张，那会让用户无从下手
功能/信息卡片怎么提取？
是否理解每张卡片的含义，如果不理解可以询问
确保理解每张卡片的功能，对这些功能正确无误的理解了
为什么把这些卡片放在一类
用户归类卡片
这类卡片取名字可以叫什么？
根据你刚刚归类的原因，是不是可以叫某某某？
让用户取名字
这一类卡片数量太多是否可以进一步细分？
现在已经分成了N类，是否还有哪几类能再放一起？
在分类过程中是否有什么纠结的地方？
是否确定这是最后的结果？
如何更好地引导用户？
这来自于用户的心智模型
信息架构树状图
卡片分类法需要产出什么？
问题提点
4.卡片分类法
2.产品信息架构设计的前期工作
用户习惯
业务需求
竞品信息架构
卡片分类
整合前期工作
输出自己产品的信息架构
对每一层进行分级
重要性分级而不是排序
重要性的评级
1.利用MindMip和Axure整合信息
信息架构树的深度
层
某一节点内子节点数的数量
度
层和度取得平衡
2.寻找层和度的平衡
在信息架构层面确保核心使用流程的通畅
1.尽量保证根据树结构进行层级自上而下前进
2。不联通层级间的跳跃，尽量发生在最后一步骤
3.验证核心使用流程
第一种重要级有多项
Tab
第一种重要级只有一项
抽屉
一级导航
不要在信息架构层面，为了不一样而不一样
易信1.0与2.0
教训：竞品与用户习惯
移动端
利用不同结构，体现重要级
利用布局，体现逻辑关系
例子
Web
4.考虑信息架构和交互构图的关系
你的过程就是你的底气
5.为讨论做好准备
3.产出产品信息架构设计
用户是否在你不介绍具体产品的情况下，通过短时间的使用，就能说出产品可以用来做什么。
让用户进行核心流程任务，检查完成任务是否顺利。
1.用户测试
你需要多复杂的说明书？才能教会用户使用核心功能？
问题
2.撰写产品说明书
4.评判产品信息架构设计
确定页面所需呈现的信息
绘制信息架构树状图
重要性分级
绘制页面
1.为何在单一页面设计时需要考虑信息架构问题
子主题
图
2.明确一个页面中的元素逻辑性与重要级
逻辑相关的内容使用统一的形式，位置。并让区块联通
利用大小，上下位置，色彩体现重要级
3，绘制单一页面
5.用信息架构思路设计页面
规范信息架构
界面按钮？ No
拨号界面
用户完成任务的方式帮助用户顺利完成任务
交互设计师要设计什么？
根据用户使用流程进行页面设计，帮助用户完成任务的设计方式
下个定义，流程设计
1.用户和产品的交互是什么？
抢红包
用户
1
绑定银行卡，关注公众号
产品
例：春晚微信抢红包
用户想完成的任务≠产品真正想完成的业务任务
不仅仅是帮助用户完成任务，而是以不干扰用户使用流程的方式完成业务需求
2.企业中的流程设计还需要考虑什么？
例
增加任务的完成率
让用户更方便的完成任务
对错误的充分思考
夸张的业务完成度
3.优秀的流程设计有什么好处？
1.流程设计的重要性
业务需要达成的商业目标
业务受到哪些技术和商务限制
某某合作方支持了活动，所以希望曝光
了解业务所需要的合作方
1.充分理解业务需求
用户做了某件事、用户看到某个信息，就构成了用户对产品的接触点
和产品或某一渠道发生交互的关键点
接触点是什么？
挂点电话
看到时长不足的信息
点击了解如何获得更多
查看获取更多时长方法
看到具体邀请规则
选择要邀请的微信好友
和朋解释等
提炼出接触点
基于用户模型，经验，用户调研的体验故事
来自于用户场景
来自哪里？
为了完成流程设计，需要构思的用户场景有多个，学会合并同类项
用户在朋友圈查看分享内容的第一个接触点是什么？
用户发布朋友圈动态的最后一个接触点？
问题↓
要顾及头尾，他们是最容易被遗漏的接触点
Tip
2.找到用户完成任务的所有接触点
改变了用户所处的状态，产生接受新信息的机会
用户做了某件事
获取新的知识，产生新的想法
用户看到某个信息
可以接受电话的其他信息
挂断电话
做
产生了解怎么办的欲望
看到时长不足信息
看
做与看
每一步都不会接受太过庞杂的信息
做事——看信息——做事
最好的模式
输入帐号——输入密码
用户的经验足矣支撑行为
做事——做事
看到活动大致流程——看到具体规则
信息量较多，需要依次理解
看信息——看信息
也会出现
准备
接下来 开始绘制交互稿？ No！！
绘制流程图
不需要用户操作的加在中间流程
加在使用流程最后
加入业务需求所需的流程节点
3.梳理接触点
在交互稿上体现用户操作流程
1.如果出现流程有很多分支时，不要制作在一个页面中，这样会让交互稿可读性变差。更好做法是在站点地图上体现这些分支
注意开头和结尾
不要随意地跳过某一页面，流程设计需要考虑到流程中出现的每个页面，即使不再你的APP中，如果是用户会经历的流程，都需要体现
Button与Title不一样？
注意前后页面的关联性和一致性
在完成交互稿后，请对照接触点流程检查一遍交互，确认每个接触点的过度自然。你提供了完成一个接触点所需要的全部信息
4.根据流程设计交互稿
放在页面下方
如何布局异常页面？
用户网络故障
服务器资源不足
异常
自动保存机制
不可挽回的损失
必须要考虑的异常
在错误返回码上一个个查看它是什么错误，对此做出一些正确的响应方式
了解错误返回码可以让错误考虑更全面
错误点击
预测用户可能出现的错误
精力有限，不是所有的异常流程都要花大精力去处理
请稍后再试——两秒消失
提示文字少，且可以马上重试
Toast
你的行为是错误的——确定
提示文字较多，且需要用户确认
Alert
异常流程是个无底洞
正常流程设计＞核心异常流程设计＞可以简单解决的小异常
优先级
注意处理力度
5.处理异常流程
2.如何进行流程设计
信息架构设计
核心流程设计
信心架构调整
完成所有流程设计
流程设计与信息架构设计
业务目标
用户体验目标
用户场景
是否像预期的那样，帮助用户达成体验目标，帮助产品达成业务目标
一个结合页面的用户场景故事
相应流程设计
流程设计与用户场景
3.流程设计与交互工作
打造漂亮的流程设计
依据间距来判断彼此间的关系，空间上的亲近暗示关系上的亲近
接近性
为什么搞不清标题和内容的对应关系？
如果其他因素相同，那么相似的物体看起来归属于一组
相似性
看着一样，为什么点击后的反馈不一样？
相似性可以帮助我们识别哪些是同类，做出快速的判断
对比，可以表明彼此间的差异，做出适当的引导
相似VS对比
点线面
常见的分组模式
人们倾向于将残缺的轮廓加以补充使成为一个完整的封闭图形
封闭性
调整了间距，但是分组还是不明显？
凡具有连续性或共同运动方向的物体容易被看做一个整体
连续性
怎么让用户感觉还有很多？
根据视觉元素重量的不同，来营造实现视觉的平衡
依靠视觉重量引导用户的视觉流
不平衡
对称性
整个页面感觉向一遍倾斜了，怎样才会舒服些？
明确情感需求，并准确传递给视觉童鞋
色彩帮助营造网站的整体氛围
情感化
为什么整个页面感觉总是不对？
问题引出
网易云交互-3.规范信息架构与流程设计
0 条评论
回复 删除
下一页
