第一章 交互设计基础知识
名称解释
UI：User Interface 用户界面
用户界面其实是一个比较广泛的概念，指人和机器互动过程中的界面，以车为例子，方向盘、仪表盘、换档器等都属于用户界面。主要是负责产品或是网站的图形图标色彩搭配，总之是负责网站看起来是一个什么风格什么气质。
UE or UX： User Experience 用户体验
用户体验指用户在使用产品过程中的个人主观感受。关注用户使用前、使用过程中、使用后的整体感受，包括行为、情感、成就等各个方面。用户体验是整体感受，所以不仅仅来自于用户界面，那只是其中的一部分。
IxD：Interaction design 交互设计
交互指任何机器互动的过程，交互设计通过了解人的心理、目标和期望，使用有效的交互方式来让整个过程可用、易用。
UID： User Interface Design 用户界面设计
用户界面设计（UID）不仅仅是做“漂亮的界面”，所以不可避免的会涉及到交互设计。所以广义来说，界面设计包含交互设计。但是现在很少提这个概念了
UED： User Experience Design 用户体验设计
用户体验是个人主观感受，但是共性的体验是可以经由良好的设计提升的。用户体验设计旨在提升用户使用产品的体验。
交互交互师 Interaction Designer
交互设计师的职责:
1. 工作之一是分析，但分析不是设计，主要是关于用户知识领域，更像建筑师。
2. 需要懂得什么对于程序设计人员是重要的，但是不需要知道怎样编程，只需要将代码要实现的功能形象化。
3. 应当负责程序做什么和怎样表达，设计项目的第一部分是针对问题域详细研究项目。
4. 在项目中的地位很重要，所以不能犯错误
交互设计师的执行：
1.实质工作就是用图形将行为文档化
2.用定性的现场调查技术，用户建模方法，设计原则，设计模板
3.常用软件 PPT、Azure、justinmind、Xmind；常用工具 纸、白板笔、2B铅笔
交互设计师需要具备的能力：
1、具备阅读、理解、整理、修订产品需求文档说明书的能力
2、具备思维导图、流程图、用例图、交互逻辑图、业务逻辑图、功能架构图的编写与解说的能力
3、具备交互功能原型的线框图原型、高保真原型的制作与演示能力
4、具备编写完善的交互设计说明书（DRD）能力
5、具备交互设计项目方案演讲、解说、组织交互设计项目方案评审能力
6、具备用户行为研究分析、与用户交流并收集FEEDBACK整理出关键点的能力
7、交互设计方案迭代设计能力
8、用户体验设计能力（宽泛的说法）
9、动效设计能力与UI、研发进行沟通解释清楚设计思路的能力
10、配合UI、PM、研发、BOSS等一干人等的八面玲珑的沟通技巧
11、用户心理知识也需要懂点
12、顶层架构设计能力（这个是配合BOSS说想法的）
交互设计师的知识体系
需求分析能力
能看懂、看明白需求分析师提供的文档
自己可以在没有明确需求的情况下梳理出一个明确的需求并补充到需求文档里
需求是不断变化的、可以持续迭代的，但是交互设计师在工作中要尽量以最少的次数确认需求，使需求“拍板”，不然变来变去的，无法进行研发和设计。这个是最考验交互设计师的需求能力的地方。
学习需求分析的方法
建立用户模型
学习别人的需求规格说明书文档模板
很多需求用户自己都不能清楚表达他需要什么，作为交互设计师要能够善于沟通和察言观色还有需要知道你项目相关知识和专业背景
流程逻辑设计
逻辑设计就是在用户正常的使用逻辑（去学点心理学知识）
概念:流程图是指在一个项目中的业务流转步骤展示位图形化
作用：方便设计者和决策者发现流程弊端从而进行优化
如何制作：Visio/Xmind
产品功能设计
基于业务逻辑进行功能模块设计 注意：不要在做产品功能设计时候照搬或太超前的设计方案
设计产品功能的时候一般是使用excel梳理出所有功能模块分为站点地图，例如下图结构
低保真原型设计
就是线框图，推荐多用，不要花费大量时间去搞UI
高保真原型设计
在低保真上基础把之前的线框加上了颜色和图片使其看起来更接近真实下项目。
文档能力（DRD文档）、各种流程图
1、逻辑条理清晰（针对Boss等领导层看框架）
2、页面跳转关系展示合理（针对需求、产品看细节）
3、交互动作与功能说明到位（针对研发看功能与特效，其实是加多少班的判断依据）
4、UI留白空间合理（UI是否还有发挥空间）
演讲与演示（PPT、demo）
多看口才书方面的书吧
文案编写
所有原型设计之初，没有任何素材给你，你需要抓取项目特点提取创作出文案，填写到原型演示demo里去，进入UI设计阶段后可能回到出现市场与运营进行确认文案的过程。恩，从明天起要当好一个段子手
顶层战略设计
从立项阶段起就参与
用户研究
需要建立用户模型与用户用例
懂得与用户建立feedback关系，提示可持续迭代的依据意见收取整理分析
挖掘用户行为数据，为下一代产品迭代提供依据
第二章 交互设计师工作场景
UED组织架构
项目组工作场景
定义：人、事、物、气氛
需求评估场景
参与人员为项目前期筹划人员：boss、项目经理、产品经理、需求分析师、研发代表
提交物：提交需求说明书，交互设计师在这是参与评估需求并分析需求分析报告
提交人:需求分析师
功能设计场景
根据需求说明书进行产品设计并提交产品和项目领导者评审
提交物：功能组织架构图、业务流程图、功能组织逻辑图、用例图、产品设计方案说明书
提交人：产品经理/交互设计师
产品评审场景
提交物：产品评审会议纪要、产品设计变更备忘录、产品流程相关系列的图表
交互设计场景
1、建立信息模型
2、建立用户模型
3、设计业务流程交互流程框架
4、设计页面流程原型
5、设计交互动作事件交互
6、形成交互设计文档
7、编写交互设计文档备忘录（针对不同人群的阅读提示）这里废话几句，你写的文档要提交给3个部门分别是boss、ui、研发，他们各自看你的文档出发点依次分为：boss—流程、框架；ui —界面可发挥空间；研发—要加多少班。
8、设计出来文档定稿了之后就可以组织交互设计评审了
第三章 如何进行顶层设计（锻炼战略眼光、站在领导层角度看问题）
什么是顶层设计？
顶层设计是运用系统论的方法，从全局的角度，对某项任务或者某个项目的各方面、各层次、各要素统筹规划，以集中有效资源，高效快捷地实现目标。是一个架构设计方向，不用关心实现细节，而是当下的产品架构、产品链、产品后台支撑体系等
怎么进行顶层设计？
需要明确以下信息：
项目信息：希望达成的目标 项目启动资源（资金） 内容来源等大范围概念里去思考问题 不要局限于细节例如怎么去实现一个通知消息推送
eg:
项目名称：iamue网项目
项目简介：交互设计垂直资料分享
顶层设计：一个平台、两个层、三个前端
顶层构架图：下图
在设计顶层设计方案的生活，要综合考虑，先把所有分支梳理清楚，按照从金字塔顶部向底部一层层的梳理出来功能、结构、资源、任务清单等，形成一份可以指定分工的计划书
注意事项
关心项目延展性（后面项目死掉是否可以转型）
关心项目可行性（别老板给我们画大饼）
关心具体实施方案
IT项目顶层设计方案大纲
概述
背景
项目目标
项目架构
项目资源配置
项目执行计划方案
项目验收计划方案
总结
第四章 流程和功能设计
制作流程图的核心：“设计流程”
一个测试项目的流程的设计示例：
1、先确认几件事：
（一）APP的平台（安卓还是IOS还是WP）
（二）确认项目采用系统版本
（三）确认项目核心需求
本案例核心需求：
1、多用户协作办公平台APP端的即时通讯
2、打卡签到功能
3、我的任务管理：增、删、改、查
4、查看任务详情
5、更新任务进度
6、任务帖子内的评论与回复（@功能）
7、登陆与管理员注册验证
8、通知提醒服务
（四）进行需求的分析
功能设计表格模板
（五）进行设计功能模块
根据上面的核心需求提示我们找出几个重要的模块作为主要模块
设计出核心模块如下：
1.即时通讯模块
2.任务管理模块
3.登陆注册模块
4.通知消息模块
（六）根据模块顺藤摸瓜设计功能点
在一级模块下进行细分功能点设计
1、即时通讯模块
通讯录功能
消息聊天
发送图片
表情聊天
传送文档支持DOC.PPT.XLS.ZIP
2.任务管理模块
发布新任务
发布任务进度状态
查看任务详情
3.登陆注册模块
企业邮箱登陆功能
注册功能
4.通知消息模块
阅读消息通知
编辑消息通知状态
完成基本设计的功能表
（七）设计业务流程
流程图绘画的工具：
产品经理或技术经理（需要画一些技术性的逻辑流程图）：Visio、Mindjet MindManager
用户体验和产品设计/交互设计师（需要画一些界面流程图，设计可交互的流程）：Axure 、Visio、 MockPlus 、Balsamiq
跨职能流程图示例
部门流程图示例
业务流程图示例
逻辑流程图示例
页面流程图示例
注：设计流程图和线框图的时候要切记我们是为了辅助产品开发的不要在流程和原型阶段花费太多的时间和精力，如果你能一个图解释清楚就不要加注释，怎么快捷高效怎么来。千万不要本末倒置，本来是快速设计印证需求，结果搞得很复杂需求最后不断变化，你设计迭代很多版本，耽误了大量的时间压缩了研发和UI的工作时间。
技巧一 充分理解需求
功能设计的目的：满足需求、需要，形成产品形态，完善用户体验。（下面以注册功能为例）
从吃透需求这点出发进行设计的时候应该是这样的：
1、客户是否希望使用手机号作为账户名，为后期营销和收集真实可验证的用户身份。
2、客户是否希望在社交媒体做粉丝运营推广营销，那么引入第三方社交媒体进行登陆是个解决方案。
3、安全性以及找回密码
4、机制通用性，是否进行单点登录设计全站和多线服务统一一个账号
技巧二 提取核心功能
核心功能是别的产品没有或者比不上的，是这个产品的生命力保证与品牌策划推广的卖点。
需要在你设计之初就要想好什么是你产品的特色呢？怎么体系出产品特色功能？
技巧三 逻辑清晰
逻辑清晰的设计是基于上一小节的流程设计而言的，在做设计的时候要严格遵守已经确认的逻辑流程。
第五章 原型设计及常用工具教程
原型概念：针对产品需求而作的具体形态展示的作业过程，一般理解为框架、结构、页面地图的设计展示。
线框图：用线条勾勒出产品的界面，主要针对页面逻辑、架构/结构设计
低保真原型：可演示的产品demo，不是具体指哪一个功能和页面而是整个产品的完整原型
高保真原型：界面美术设计
原型设计总结
设计过程中尽量不要用色彩，最好使用黑白灰进行色阶区分
在设计原型过程中不要纠结于细节交互实现，可灵活多变，完成你的最终展示出的交流流程能让大家明白你的页面逻辑和产品架构即可
一定要快速，原型是用来验证需求和展示设计方向是否正确的验证demo
不要沉迷于高级复杂的交互事件中去
保持头脑清醒，自己做什么药一条流程一条流程的去做，比如登录流程，要进行登录界面-登录交互-登录正常结构-登录异常结果等，这样保证在大项目中不会遗漏重要交互步骤
要及时测试验证你的原型，遇到问题当时解决
善于加注释，解释你的交互设计思路，方便开发和UI看你的设计方案的时候理解
第六章 高保真原型设计
需要高保真原型设计场景1
以项目为导向
需要先和他们确定需求，需求确认过程中对方表示要求要做原型看看
此时，先提供基本的线框图，进行需求反复确认，完成需求确认最后一版本线框图让美工参与UI设计，二级页面不用太深入，然后切图替换上线框图，升级为高保真原型
需要高保真原型设计场景2
以UI视觉界面为导向
一些公司靠UI界面吃饭的
第七章 测试评估交互原型
概念：原型评估，它是描述一种用来确认架构、逻辑、使用场景的交互设计方案的正确性、完整性、安全性和质量的过程。
为什么要做？ 为了确保交互原型是一个可以被项目组执行、被用户所接受需要进行测试评估交互原型
做测试评估交互原型有哪些方式？
常见的测试方法有：
建立用户模型
用户模型概念: 是由设计师进行虚构出的一个用户用来代表一个用户群
一个用户模型可以比任何一个真实的个体都更有代表性，因为设计师把年龄层的人群属性进行提炼，形成一个代表典型用户
用户模型的资料有消费习惯、产品使用习惯、生活习惯、性别、年纪、收入、地域、情感、上网方式、搜索历史、名片关键词等等
根据你的项目设计3-6个用户模型就足够代表所有的用户群体
进行可用性测试分析
我用最简单的语音来描述一下什么是可用性测试：通过让特定的人群完成你设定的测试用例任务，发现并记录出现的可用性问题，从设计层面解决这些问题
普遍的说法：可用性测试就是邀请真实用户或潜在用户使用产品或设计原型，对其在使用过程中的行为进行观察、记录、测量和访谈，进而了解用户对产品的要求和需要，并以此作为改进产品设计的出发点，提高产品的可用性。
组织焦点小组
访谈法/座谈
焦点小组一般由8-12人组成，在一名主持人的引导下对某一主题或观念进行深入讨论。
目的：了解和理解人们心中的想法及其原因。
关键：使参与者对主题进行充分和详尽的讨论
意义：了解他们对一种产品、观念、想法或组织的看法，了解所调研的事物与他们生活的契合程度以及在感情上的融合程度
专家把关
设计出测试用例
概念：就是一个文档，描述输入、动作、或者时间和一个期望的结果，其目的是确定应用程序的某个特性是否正常的工作。
根据设计功能的情况设计出每一个流程的操作用例的测试用例。
（1）确认人数或用户模型，一般情况下都是选择6-8人，项目大一些的就8-12人或模型。
（2）确定用户场景，需要明确你产品设计中的每一个功能的使用场景
（3）明确任务，要给具体的人分配具体的任务，根据任务收集测试结果。汇总问题与讨论解决方案。收集可用性、用户体验性、逻辑性等问题，分门别类的形成文档，然后根据不同问题和不同层面的人讨论解决方案
总结
1、从测试评估的过程中总结出一些经验
2、把自己当作一个普通的具体的用户
3、尽可能的模拟真实场景来评估，更具有参考意义
4、按照流程设计与逻辑设计方案进行走查一边自己的设计方案，查找问题
5、做多次的竞品分析，要有针对性，例如支付宝和微信
第八章 怎么出一份各方有满意的交互设计说明书
写什么？
你只需要把原型截图或原型直接画成一个文档，其实交互文档就是页面文档，所有的软件页面、状态都分离出页面进行展示，然后加入页面流程和交互动作说明文字，箭头指示线条等
关键：逻辑结构、页面跳转、交互状态的文字说明，统一交互体验动作，确保页面组件的一致性。
注：写之前弄清楚写什么的问题
怎么写？
文档结构
文档封皮与版本信息
目录页
log修订记录页
交互行为逻辑图+文字说明
页面展开图+逻辑+文字
其他单独的交互动作详细解释介绍
封皮和版本（下图）
版本信息一般包括 版本信息、日期信息、参与人信息、变更内容简要、备注信息
目录
合理分级分清主次
Log更新记录页
用来描述某次更新的信息简介及页码导航等
交互行为逻辑图+文字说明
可以看出，这个说明文档是把应用更新这个功能拿出来当一页将它的架构、交互、流程、逻辑、交互事件、文字解释说明都齐全了。
这个过程是针对产品经理和程序来的，他们需要看明白交互流程逻辑
页面展开图+逻辑+文字
下图是页面、原件、文案、逻辑、页面状态的展示，和上面对应的是第二大部分
这个是针对视觉来的，这个部分要把所有的页面都展开解释一遍，共用部分可以单独标记
其他单独的交互动作详细解释介绍
这个部分是补充书写不在流程里的单独的或独立的交互，例如：导航条交互
给谁看？
总结：
给程序看就用一章独立的章节写明白交互逻辑、页面流转
给视觉也用独立的一章写明白所有的页面展开，公用页面交互等
给测试就加好注释与说明
交互需要按照功能逻辑一个个拍着写更容易理解
交互事件的状态需要用截图形式展示出来，不能大量文字描述，因为很多人不看小字就看图
第九章 组织交互设计评估会
意义：规避风险和明确职责
参与人员：boss产品经理 项目经理 UI界面设计师 研发部代表测试部代表 运营
