交互设计基本概念

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