交互设计基本概念

概念 2.交互设计内容与流程 流程图 流程的优化 （3）简化操作方式
概念 2.交互设计内容与流程 流程图 流程的优化 （4）优化操作过程及体验---有效的及时反馈与交互
概念 2.交互设计内容与流程 低保真原型（线框图+动态原型） 页面的布局 按钮、页面的跳转 界面过渡效果 导航的设计 内容的呈现形式 需求内容的体现 手势的识别 符合用户的行为习惯 符合用户的心理期望 遵循的原则—许多许多 1.格式塔--完形心理学 2.7加减2原则 3.心理学知识运用—设计心理学 4.各种认知原则—不断进步、不断提出 （通过实验 实践，大量经验总结得出）
概念 2.交互设计内容与流程 线框图
概念 2.交互设计内容与流程 线框图
概念 2.交互设计内容与流程 线框图
概念 2.交互设计内容与流程 高保真原型 整体风格 尺寸大小 局部细节 。。。。 连接交互 与编程
概念 2.交互设计内容与流程
交互文档说明与规范，交付给开发人员，进行编程。 一、页面信息规范 页面信息规范主要指页面的静态信息应该遵循的规则 二、交互信息规范 交互提示规范主要用于规定在交互过程中交互的方式及其信息提示。 三、通用控件规范 当有一些功能会被多个模块复用的时候（如标准评论框、标准好友选择器等），需要把 这些功能提炼出来设计成通用控件被多个模块共用。
交互设计-分享会
概念 1.交互设计概念 交互设计 （Interaction Design） 人机交互（Human Computer Interaction）---HCI 人与机器的交互----交流与互动
概念 1.交互设计概念
人
输入过程
输入设备
机器
输出过程
输出设备
人与机器的交互过程-----信息的输入与输出
概念 1.交互设计概念 用户界面 User Interface----UI 1.触摸技术---触觉 2.手势识别---触觉 3.语音输入---声音 4.体感-------运动 5.多通道（视觉，听觉等） 6.增强现实 7.虚拟现实 8.较高的认知功能等 9.。。。。
输入过程
概念 1.交互设计概念 触摸技术
触摸屏技术是一种新型的人机交互输入方式，与传 统的键盘和鼠标输入方式相比，触摸屏输入更直观。
手势识别
概念 1.交互设计概念 Siri—语音输入 利用声音作为信息输入的媒介
体感来自百度文库体感技术，在于人们可以很直接地使 用肢体动作，与周边的装置或环境互 动，而无需使用任何复杂的控制设备， 便可让人们身历其境地与内容做互动。
概念 2.交互设计内容与流程 流程图 流程的优化 （2）将复杂操作转移给系统---复杂的不可转移性
每一个过程都有其固有的复杂 性，无论在产品开发环节还是 在用户与产品的交互环节，这一 固有的复杂度都无法依照我们的 意愿消失，只能设法调整、平衡。
复杂性存在一个临界点，超过了 这个点，过程就无法再简化了， 你只能将固有的复杂性从一个地 方转移到另一个地方。
选择D盘 选择母文件夹 选择子文件夹1
点击“添加附件”
选择文件
点击确定
结 束
6个步骤完成---添加附 件
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
起始页面
切换页面
点击图片 拖动图片 拖进指定区域
概念 2.交互设计内容与流程
概念 2.交互设计内容与流程
定性+定量得出精确的用户需求
概念 2.交互设计内容与流程 交互设计： 1.需求详细分析---用研部分 2.信息架构图 3.流程图 4.低保真原型（线框图+动态原型） 5.高保真原型（视觉设计稿+动态原型）---视觉部分 6.编程开发 7.产品迭代
起始步骤
选择地址1
选择地址2
选择地址3
选择地址4
确认添加
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
完 成
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
概念 1.交互设计概念 虚拟现实+可穿戴设备 （Virtual Reality）
虚拟现实是利用电脑模拟产生一个三维空 间的虚拟世界，提供使用者关于视觉、听觉 、触觉等感官的模拟，让使用者如同身历其 境一般
意念控制 核心原理：利用脑电波技术
概念 1.交互设计概念 UI（ User Interface） GUI（ Graphic User Interface） 图形用户界面
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
完 成
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
选择文件 拖动文件至窗口 拖动文件至指定区域
概念 1.交互设计概念 增强现实 （Augmented Reality ）
City Map
增强现实技术，它是一种将真实世界信息和虚拟世界信息“无缝”集成的新技术。是把原本在 现实世界的一定时间空间范围内很难体验到的实体信息(视觉信息,声音,味道,触觉等),通过电脑 等科学技术，模拟仿真后再叠加，将虚拟的信息应用到真实世界，被人类感官所感知，从而达到 超越现实的感官体验。
概念 2.交互设计内容与流程 信息架构图（Information Architect---IA） 概念解释:直观反映组织架构的信息图表
概念 2.交互设计内容与流程 信息架构图 架构的复杂性—宽度和深度
A
B
概念 2.交互设计内容与流程 信息架构图 架构的复杂性—宽度和深度
概念 2.交互设计内容与流程 信息架构图 架构的复杂性—宽度和深度 PC网页端 手机移动端 智能手表
概念 2.交互设计内容与流程 流程图 可以分各个“功能”画流程图 局部流程图+整体流程图
ICBC
概念 2.交互设计内容与流程 流程图 可以分各个“功能”画流程图 局部流程图+整体流程图
ICBC
概念 2.交互设计内容与流程 流程图
流程的优化 案例演示1.-----qq邮箱附件上传流程
点击文件所在窗口
4个步骤完成---添加附件
结 束
点击“添加附件”
选择D盘
选择母文件夹
选择子文件夹1
选择文件
点击确定
结 束
6个步骤完成---添加附件
概念 2.交互设计内容与流程 流程图 流程的优化 （1）减少冗余步骤和干扰项
一个人面临的选择越多，所需要做出决策的时间就越长。复杂的操作流程， 也往往来源于冗余的步骤和干扰项。
信息架构应当需要发生什么样的变化？
概念 2.交互设计内容与流程 流程图 逻辑思维的展现与分析
概念 2.交互设计内容与流程 流程图 步骤一 基本知识 1.起始和结束---圆角矩形 2.中间操作步骤---矩形 3.箭头表示流程方向 4.菱形表示判断（是否问题） 5.一个矩形框只能写一个步骤 步骤二 步骤三 步骤四
概念 3.交互设计的价值体现
1.了解用户需求，更好地理解用户诉求，并将需求转化为具体的设计方案。 2.优化产品以及产品使用过程，提高用户体验度。 3.产品经理与视觉设计人员的中间重要环节，提高设计效率
概念 4.交互设计工具 1.数据分析工作---Spss 2.信息架构图绘制---Mindmanager 3.流程图和原型图绘制---Axure、Visio、Photoshop、Illustrator等 4.动态效果实现---Flash、Axure、Flinto等
核心思想：以用户为中心的设计（User-center Design---UCD）
用户研究+交互设计 交互设计+视觉设计
概念 2.交互设计内容与流程 用户研究：用户需求分析，用户行为分析，用户心理分析等 调研方法：访谈，问卷（30份以上），观察法，用户角色模型（persona）等
概念 2.交互设计内容与流程 数据分析： 1.单因素分析 2.多因素分析 3.聚类分析 4.交叉分析 5.对比分析 6.交叉分析 7.相关性分析 8.时序分析 9.。。。。。
概念 1.交互设计概念 交互平台 1.智能手机 2.平板电脑 3.PC 4.智能手表 5.Pos机 6.各类多媒体展示平台
概念 2.交互设计内容与流程 战略决策—需求分析---交互设计---视觉设计---编程开发
交互设计在整个产品开发中的位置
概念 2.交互设计内容与流程
1
2
3
4
概念 2.交互设计内容与流程
推荐资料 5.推荐书籍
概念
谢谢大家！