交互设计那些事儿
《互联网交互设计快速入门宝典》笔记：
课程老师：杨超
第一章 零基础入门交互设计师
第1节 你好，交互设计师
1、什么是交互设计
Interaction design,often abbreviated as IxD,is defined as"tne practice of designing interactive digital products,environments,systems,and services."——Wikipedia
2、交互设计的行业需求
1）百度指数
对比“产品经理”和“交互设计”的百度指数，可以看出其变化趋势基本一致，逐渐成为行业的固定岗位。
交互设计的百度指数
2）岗位要求
交互设计岗位要求
3、交互设计的能力图谱
可以通过课程学习／看书获得：需求分析、原型设计、流程设计、开发知识、信息架构、视觉能力；可以通过平时工作积累：产品意识、学习力、逻辑分析、沟通力。
交互设计能力图谱
第2节 亿级产品开发流程
产品研发流程
1、Dream：创意，来自boss或自身经历
2、商业价值分析：基于商业目标或价值所描述的产品说明，涉及产品背景、市场空间、竞争对手、产品主要功能、投入成本、收益和做不不做风险。参与角色：boss+产品经理；产出物：商业需求文档（BRD）。
3、市场分析：是对商业价值分析的全面细化和补充，主要内容会有市场说明、用户说明、产品说明。市场说明，主要包括市场规模、市场特征、市场趋势、竞品分析；用户说明，主要包括目标用户群体分析、需求分析；产品说明，主要包括产品定位、产品核心目标、产品主要功能等。参与角色：产品经理；输出物：市场需求文档（MRD）。
4、立项评审
5、用户研究：问卷、访谈、焦点小组...
6、产品需求说明：详细的需求说明是产品从一个概念变成真正可设计、可开发的文档。它需要向项目组的成员清楚的传达需求的意义、功能的定义和详细的规则。文档主要包括功能概述、功能结构、功能详细描述、特殊状态说明、简单的交互原型等。参与角色：产品经理；输出物：产品需求文档（PRD)。
7、交互设计：交互设计是通过合理的界面语言将产品能力、功能呈现给用户，使之可以快速学习、理解和记忆。交互设计师主要会产出用户路径图、信息架构图、页面交互设计。用户行为路径图，指页面流程图，主要设计用户在你的产品中按照怎样的路径去完成任务，通过设计提高任务的完成效率。信息架构图，关注内容结构、导航系统设计，让用户容易理解和方便找到所需信息。页面交互图：常说的页面原型，主要用线框图来表现页面信息布局、内容优先级及交互细节。参与角色：交互设计师；输出物：交互设计文档。
8、视觉设计：视觉设计师进行视觉设计，主要包括直接呈现给用户的元素、风格、材质、图片、颜色、字体、留白等。视觉设计的好坏具有很强的主观性，比较常用的方法是情绪版（MoodBorad）。参与角色：视觉设计师；输出物：视觉设计文档。
9、可用性测试：视觉设计完成后，无需借助开发手段，将高保真的交互原型或真实界面的视觉稿打印出来，制作成纸质原型。再邀请目标用户完成产品的典型任务、待验证功能点。参与角色：用户研究员、交互设计师、产品经理；输出物：纸面原型、测试用例。
10、程序开发：当验证了交互原型，那就进入程序开发阶段，那么这些环节都是必须上以阶段完成才能进行下一阶段吗？其实并不一定，比如需求文档完成后就可以进行后台设计了，交互设计完成后就可以进行前端开发了。参与角色：开发工程师；输出物：代码。
11、程序测试：测试产品功能、流程、动画等，是否都实现。产品设计具有很大的开发局限性，加入遇到不能实现的情况需要调整或者找到替代方案。参与角色：测试工程师；输出物：测试用例。
12、小范围内测：测试阶段需要产品交互视觉验收，然后找用户进行测试，可以预先发送给用户使用，过一段时间邀请用户进行1对1访谈，Beta版本测试后假如你的产品体量很大，如 微信，要进行小范围用户内测，遇到问题再及时修改。最后才是产品发布，进入产品运营阶段。
13、产品发布
14、迭代：运营等反馈问题
第3节 20分钟学一个软件：Axure
Axure 8.0：https://pan.baidu.com/s/1boQ2JKj
主界面
制作网易秀品V2.1.4首页
1）界面：320x568px、状态栏：320x20px、导航栏：320x40px
2）注意只用黑白灰表示信息的主次，字号一般用14px
3）生成html
网易秀品首页原型
第4节 交互设计师必备的素质
1、硬技能
1）Axure：原型工具
2）Photoshop：图形处理软件
3）Sketch：界面设计软件
4）After Effects：动画动效设计
5）Pixate／墨刀：交互原型软件。
6）Mind Manager：梳理思路
2、软技能
1）产品意识：设计师VS艺术家，商业设计并非实验作品，商业为设计买单，这就要求交互设计要关注业务需求，并转化为可衡量的业务指标。如 改善登录注册流程，提高登录注册的转化率。
2）用户意识：以人为本。交互设计师要比产品经理更懂用户，了解用户需求及用户目标，当产品经理说我也画线框图时，你要告诉他交互设计并非画线框图的。
3）视觉能力：颜值。很多牛逼的交互设计师都具备优秀视觉能力，因为他们还不光输出富有美感的交互文档，还会跟进视觉以达到体验目标。
4）用研能力：设计依据。用研能力要求交互设计师在没有用研人员配合的情况下也能够快速挖掘用户需求痛点及使用习惯，为交互设计方案提供依据。
5）沟通力：耐撕。交互设计作为产品研发的一环，需要对接上下游，以及更好的阐述自己的设计方案，这时沟通就很重要。
6）学习力：学习学习再学习。作为交互设计师是幸运的，依托移动互联网需求量越来越大，同时新的技术层出不穷，当你学习了系统的知识体系后也需要不断更新以满足更新更快的需求，并且交互设计本身并不仅仅局限于界面交互，当新的载体产生（VR AR）时，我们也要紧跟时代不被时代抛弃。
第二章 交互设计师必懂的需求那些事
第1节 你丫才是画线框图的
1、交互设计的一天
9:00 开到公司，泡杯咖啡，回到工位花30分钟处理重要邮件
9:30 登录dribble、behance、优设网查看最新作品，并给优秀作品点个赞
10:00 喝完一杯咖啡，召集团队会议并提出体验的重要性，并在众人目光下在白板上写下设计驱动
10:30 你开始陷入沉思，数据、架构、流程从脑海一一闪过，想到一些动人的细节不免嘴角上扬
11:30 吃饭还是要对自己好点的，你拉上主要PM、视觉、研发来到公司餐厅，畅谈为之奋斗的理想
14:30 参加重要项目会议，用非凡的演讲能力在会议上提出要做产品交互优化，并获得支持
16:00 该画点东西了，于是打开Axure按照想法写了一份交互文档，并转发产品总监，预约明天会议
18:00 获得业务部门反馈的产品数据，看着自己优化后的访问深度嘴角再次上扬
18:30 关掉微博，坐上早已叫好的uber去找朋友一起看刚上映的电影
2、实际上你的一天是这样的
9:00 早上，接需求、画原型
9:30 开会、开会、开会
10:00 改线框图
10:30 刚准备休息会，看到PM、开发、测试缓缓向你走来，你虎躯一震愣是把尿意憋了回去
11:30 同事都去吃饭了，看到手头堆积的需求，午休应该没戏了
14:30 产品经理丢过来新的需求文档，画新的线框图
16:00 改线框图
21:30 抬着加班盒饭去前端旁边蹲下来，内心cao了他千百遍之后慢慢的说：哥，这个地方好像不一致啊，改吧
23:00 终于拖着疲惫的身体回家，脸都没洗倒头就睡
3、交互设计流程
需求分析 > 信息架构 > 用户流程 > 原型设计 > 交互文档
第2节 需求分析的误区
误区一：需求分析是产品经理的事情
产品交互岗位职责
产品经理：商业价值分析、市场分析、产品需求说明等
交互设计：信息架构图、用户流程图、页面交互设计等
—— 思考：这需求为什么做？怎么做？
误区二：把自己当目标用户
用户画像（Persona）：基础信息、用户特征、用户目标
——确定用户画像标签，时刻考虑目标用户需不需要这个功能
例如，货主用户画像
用户基本属性：姓名、年龄、性别、婚姻、教育程度、子女、城市、区域、收入、住址、常用APP、常用网站、网络情况、上网时长、手机型号、电脑型号
用户特征：爱好、性格、消费能力、常用发货地址、车型、日均发货次数、发货时间、发货类型、运费、吨方件、绑定城市、注册时间、首次下单时间、付款方式、生熟车
用户目标：发货时限、发货价格、发货区域、增值服务、合作伙伴、保险、业务推荐
误区三：设计就是听用户的
Don't listen to user,Watch user work.——尼尔森
误区四：只关注用户需求，忽略业务需求
——应力求寻找用户需求和业务需求的平衡
例如，用户打车时并不想要先注册，可以让用户先打车后注册
第3节 如何量化设计需求
业务需求依赖用户需求实现，产品价值依赖用户价值实现。
1、关于需求的三种形式
PRD（大型项目）、线框图（中小型项目）、口述（小需求）
需求的三种形式
2、如何评估需求上线后的效果？
需求量化
1）参与需求讨论
了解业务需求的背景，做到知其然知其所以然。
2）确定业务目标
* 目的-目标，目的是应达到的效果（结果），目标是要达到效果的量化指标。目的与目标有共同的结果，但是目标更侧重于可量化。
* 目标的作用：指明方向、激励作用、凝聚作用、决策标准和考核依据。
*常见业务目标：
- 移动应用主要业务指标：用户获取、用户活跃与参与、用户留存、用户转化、获取收入、传播量、市场份额、排名等数据指标
- 电商类主要业务目标：销售额、购买客户数、客单价、购买转化率、UV、详情页UV、重点商品缺货率
- UGC类主要业务指标：访客数、登录访客数及占比、沉默用户数及占比、平均停留时长、产出内容访客及占比
确定业务目标
3）分析用户需求
目标用户为什么用你的产品/功能？
场景的颗粒度应根据实际需求进行填写。比如用户在路边打车，一只手拿手机一只手提购物袋或雨伞。应尽量明确用户的使用限制。
目标用户
用户需求
4）确定设计目标
设计目标
第4节 用户行为模型分析
1、需求实现路径
需求实现路径
2、目标行为模型
1）动机：快乐／痛苦、希望／恐惧、社会认同／排斥
2）能力：时间、金钱、体力、脑力、社会偏差
3）触发器：闪烁、服务、发信号
目标行为模型
用户行为
如何完成目标任务
用户行为分析举例
3、需求确认
需求确认
第三章 如何搭建信息架构与用户流程
第1节 信息架构的重要性
1、信息架构的定义
“信息架构的主体对象是信息，由信息架构师用以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学”——理查德.所罗.乌曼
通俗一点讲，让用户更容易找到自己想要的东西和产品。主要包括：页面内容组织、整体导航框架。
好的信息架构，让用户一眼知道你的产品是做什么的，不用或极小学习就知道怎么使用产品，当想使用某个功能时，能预知产品功能在哪，最终到达更好的留存与转化
2、信息架构举例
appstore
appstore信息架构
第2节 如何进行信息架构设计
架构设计
1、业务需求
1）来源： 产品、老板、运营、市场、客服、推广、其他
2）原则：可扩展性，你要知道未来你的产品不止现在这样
3）例如：
- Uber，底部选择车型
- 微信，安卓导航放在顶部，最后还是回到底部
Uber与微信
4）列出业务需求架构图
- 根据层级嵌套关系写出一层层功能点
- 根据情况控制颗粒度，如整个产品与单个页面颗粒度会不同
2、竟品分析
1）至少5个竟品的信息架构图
2）找竞品：应用雷达，http://www.ann9.com，查看相关app和用户评价、版本迭代记录
应用雷达
3）什么样算竞品
直接竞品与间接竞品
4）信息架构树状图：标注出梳理时的吸引点及想法
5）竞品分析总结：
- 相同点：遵循行业及用户习惯
- 不同点：寻找设计的机会点
3、卡片分类
1）前期需准备的：目标用户／功能卡片／便利贴／录音笔／安静的环境
2）卡片分类流程
卡片分类流程
3）分类、整理：确定你的目标用户
4、访谈测试
- 在不介绍的情况下说出产品是做什么的
- 让用户走一遍核心流程
- 让用户使用细枝功能，如设置头像
5、产品信息架构图
根据分析结果列出相关优先级，根据优先级产出最终信息架构。不同方法配合使用，根据场景使用不同方法。整个产品信息架构，单个页面信息架构不同。
第3节 如何确定用户流程
1、用户流程的定义
用户从打开app到完成任务关闭app的使用全过程，包括用户看到什么，做了什么
2、用户流程举例
以用户打开小程序和打开订阅号为例：
打开小程序和打开订阅号
3、用户流程优化体验
用户流程越短越好，操作流程尽量不超过5步
4、如何确定用户流程
基于用户的使用场景，是基于目标用户完成某项任务的体验故事，了解用户看到什么，想到什么，做了什么。可以头脑风暴，如果不能去实地调研用户。
如 ：查找朋友圈信息
查找朋友圈信息
如：脑暴搬家的用户流程
脑暴搬家的用户流程
如：搬家用户流程
假设搬家场景
列出主要操作
串联先后顺序并加入业务流程
5、加入业务流程
比如服务协议、收集用户数据等
加入业务流程
6、根据流程来设计交互页面
确保每个接触点的过渡是自然的
第4节 信息架构与用户流程
信息架构：确定广度，让你知道功能和信息放在哪里
用户流程：确定深度，让你确定用户完成任务的顺序
交互设计流程
信息架构与用户流程
广度与深度
例如，支付宝，工具类app需要学习；Uber，可供用户点击的按钮少。两个极端。
支付宝与Uber
第四章 如何进行交互设计
第1节 明确设计原则及影响因素
1、目标实现路径
目标实现路径
2、前期工作输出
前期工作输出
3、设计原则
1）定义：设计原则是做设计的标准，可用于指导设计和衡量设计方案的优劣
2）举例：比如，经过前期调研和讨论，为了降低用户使用产品时的挫折感，我们需要提供：
- 用户易于理解的信息，不要专业术语（易懂）
- 根据情形提供有用的信息，不要言之无物（有用）
- 提供下一步操作，引导用户继续其他操作（引导）
3）尼尔森十大可用性原则
- 可视性原则，系统状态有反馈，等待时间合适
- 不要脱离现实，使用用户语言而不是开发语言，贴近生活实际而不是学术概念
- 用户有自由控制权，操作失误可返回
- 一致性原则，同一事物和同类操作的表示用语要保持一致
- 有预防用户出错的措施，关键操作有确认提示，及早消除误操作
- 要在第一时间让用户看到，识别胜于回忆，提供必要的信息提示（可视&易取）减少记忆负担
- 使用起来灵活且高效，为新手和专家设计定制化的操作方式，快捷操作可调整
- 易读性，减少无关信息，体现简洁美感
- 给用户明确的错误信息，且协助用户方便的从错误中恢复工作
- 必要的帮助提示及说明文档，面向用户的任务描述，列出具体步骤，不要太冗长
设计原则举例
4、为移动端设计
1）拇指区域
拇指区域
举例
2）7+-2法则
7+-2法则
举例
第2节 交互设计师须知的视觉规律
第3节 交互设计师须知的开发知识
第4节 交互页面设计
第五章 交互交付与发展
第1节 如何撰写交互说明
第2节 输出大家满意的交互文档
第3节 怎么说服大家接受你的方案
第4节 交互设计趋势
第5节 交互作品整理与面试
