交互设计基础

交互设计基础设计部熊麒麟EWEN.XIONG熊麒麟56划2009.07-2010.08诺亚⾈舟2010.08-2010.09宇⻰龙酷派2010.10-2014.06腾讯2014.06-1014.12京东2014.12-唯品会⼯工作6年，历经移动端、⺴⽹网⻚页、客户端、⼯工具型产品、电商产品等项⺫⽬目，前腾讯CDC⾼高级设计师，前京东⽤用户体验设计部⾼高级设计师。熟悉各平台产品设计，擅⻓长核⼼心路径分析、⽤用户⾓角⾊色场景分析等设计⽅方法，擅⻓长系统分析、信息架构设计、信息图表设计等⽅方向。part1:什么是交互设计？交互设计定义交互设计的价值part2:交互设计怎么做？交互设计⼯工作流程交互设计输出物part3:什么是好的交互设计？交互设计能⼒力模型⽤用户体验设计原则什么是交互设计？交互设计是什么－交互设计定义交互设计是干什么的？就让你爽的你知道为什么苹果这么好⽤用？就是因为交互设计交互设计是什么－交互设计定义数据分析？你是干什么的？好屌哦，你们影响着公司的战略啊嗯，blabla〜～〜～〜～，你是干什么的？交互设计…交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理，交互设计的实际操作必须建立在对实际用户的了解之上：包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发，同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系，交互设计师为复杂的设计挑战提供解决方法，同时定义和发展新的交互产品和服务。交互设计是什么－交互设计定义from交互设计协会（TheInteractionDesignAssociation(IxDA)：交互设计是什么－交互设计定义交互设计：让⽤用户⾼高效并愉悦地完成⺫⽬目标交互设计：让⽤用户⾼高效并愉悦地完成⺫⽬目标保证⽤用户输出、系统输出的有效转达交互设计是什么－交互设计定义?交互设计是什么－交互设计定义？交互设计是什么－交互设计发展⼤大脑开发50%交互设计价值是什么？交互设计是什么－交互设计价值交互设计是什么－交互设计价值交互设计是什么－交互设计价值《⽤用户体验的要素》战略框架设计初级⾼高级专家商业⺫⽬目标⽤用户⺫⽬目标vs蓝海红海如何进⾏行交互设计？确定⺫⽬目标市场商业策略差异化发展跟进战略垂直细分输出需求技术竞争业务扩展产品策划商业⺫⽬目标市场调研调查问卷⽤用户访谈运作⽅方式确定需求真实性确定需求是不是⽤用户真实想要的确定⼈人们不知道他们需要的任务⺫⽬目标⽤用户场景⺫⽬目标任务任务任务流程1流程2流程3流程4流程5功能功能功能功能功能功能功能功能功能功能功能page1page2page3功能模型⽤用户⼼心理模型框架图低保真原型⾼高保真原型交互设计步骤的要点 1 ⽤用户调研：通过⽤用户调研的⼿手段（介⼊入观察、⾮非介⼊入观察、采访等），交互设计师调查了解⽤用户及其相关使⽤用的场景，以便对其有深刻的认识（主要包括⽤用户使⽤用时候的⼼心理模式和⾏行为模式），从⽽而为后继设计提供良好的基础。 2 概念设计：通过综合考虑⽤用户调研的结果、技术可⾏行性、以及商业机会，交互设计师为设计的⺫⽬目标创建概念（⺫⽬目标可能是新的软件、产品、服务或者系统）。整个过程可能来回迭代进⾏行多次，每个过程可能包含头脑⻛风暴、交谈（⽆无保留的交谈）、细化概念模型等活动。 3 创建⽤用户模型：基于⽤用户调研得到的⽤用户⾏行为模式，设计师创建场景或者⽤用户故事或者storyboard来描绘设计中产品将来可能的形态。通常，设计师设计⼈人物志(persona)来作为创建场景的基础. 4 创建界⾯面流程：通常，交互设计师采⽤用线框图来描述设计对象的功能和⾏行为。在线框图中，采⽤用分⻚页或者分屏的⽅方式（夹带相关部分的注解），来描述系统的细节。界⾯面流图主要⽤用于描述系统的操作流程。 5 开发原型以及⽤用户测试：交互设计师通过设计原型来测试设计⽅方案。原型⼤大致可分三类：功能测试的原型，感官测试原型以及实现测试原型；总之，这些原型⽤用于测试⽤用户和设计系统交互的质量。原型的可以是实物的，也可以是计算机模拟的；可以是⾼高度仿真的，也可以是⼤大致相似的。需求获取⽤用户访谈问卷设计调研报告设计终稿功能需求⽂文档时间计划设计初稿交互流程需求分析历史数据分析竞品分析头脑⻛风暴线框图⾼高保真设计稿流程说明demo设计善后⼯工作设计规范可⽤用性测试专业总结调查研究设计⽅方法可⽤用性测试实境调查访谈和焦点⼩小组互动访谈式调查调查问卷⽇日志会话屏幕快照任务分析⽤用例图表分析头脑⻛风暴⽤用户⾓角⾊色模型情境建⽴立故事板纸上原型原型设计卡⽚片分类内容优化平⾏行设计出声思考法协同测试法问答测试启发性评估认知⾛走查软件测试⾏行为测定眼动跟踪搜集⽤用户需求需求转化设计验证设计带来专注： 人物角色的第一信条是“不可能建立一个适合所有人的网站”。成功的商业模式通常只针对特定的群体。一个团队再怎么强势，资源终究是有限的，要保证好钢用在刀刃上~ 引起共鸣： 同理心，是产品设计的秘诀之一。 促成意见统一： 帮助团队内部确立适当地期望值和目标，一起去创造一个精确的共享版本。人物角色帮助大家心往一处想，力往一处使，用理解代替无意义的PK~ 创造效率： 让每个人都优先考虑有关目标用户和功能的问题。确保从开始就是正确的，因为没有什么比无需求的产品更浪费资源和打击士气了。 带来更好的决策： 与传统的市场细分不同，人物角色关注的是用户的目标、行为和观点。创建用户模型的目的是：尽可能减少主观臆测，理解用户到底真正需要什么，从而知道如何更好为不同类型用户服务。交互设计三要素当你接到一个需求的时候,或者想到一个需求的时候,你脑海里 昀先描绘的是什么?  任务场景⾓角⾊色角色:特定用户为达到某个目标而进行的任务中所涉及到的所有用户（相对关系）。任务:确定用户需要达到的目标而为之设置实现的方式。 场景:是指叙述性地描述人的行为或任务,从中发掘任务的上下文环 境、用户的需求角色 vs 用户模型任务 vs 目标传送文件的交互设计目标： A用户从本地顺利传送一个或多个文件给到 B用户 角色场景任务角色： 发送方     接收方 场景： 双方的安全等级设置   网络环境   发送文件类型   安全考虑   其他特殊情况 任务： 发送方:  •选择一个或多个本地文件  •选择接受对象 •把文件与对象对应技术宅，每天有做不完的事情，有时到了下班的时候都干不完。他不希望被干扰，习惯隔⼀一段时间才看⼀一次RTX。尽管不喜欢沟通，但每天⼜又不得不与其他⼈人讨论以解决问题，所以他希望沟通更加有效，好尽快完成他的编程⼯工作。他经常接收到来⾃自于设计师和产品经理的⽂文档，时间⼀一⻓长他也忘了放在哪⾥里。hero⾃自认为是个极客，对电脑⾮非常熟练，对各平台的规范⾮非常熟悉，喜欢使⽤用快捷键，并接受⼀一些⾼高级⽤用法，⽐比如搜索拖到桌⾯面使⽤用。由于他同时负担了部分运维⼯工作，所以他会时常收到许多条服务器的通知，他对此不胜其烦。Hero跟⼤大家⼀一样，最热的⼏几个会话会不短地跑到最前⾯面。这往往也是他最需要的。Hero来主⾯面板的主要⺫⽬目的就是发起会话，这⼀一⽚片除了tapd之外他什么都不记得。Hero得意地说：这个⼊入⼝口虽然很隐藏，但我知道，还经常⽤用。我经常⽤用这⾥里，这⾥里很快速的。Hero⼤大部分会话都是3~5⼈人开发⼩小组，最近会话或搜素就能搞定，他从来不关注这⾥里。Cady以为这⾥里是她经常使⽤用的，但如果经常使⽤用就会出现在最近会话中。Hero对许多⼈人名字都记得不是太熟，他希望能有些推荐。⽼老客（粉丝型）基本上只在Vip上购物已养成每天10点抢购习惯对唯品会规则⽐比较熟悉新客（谨慎型）由⼲⼴广告或推荐引起兴趣新客（游荡型）由⼲⼴广告、推荐、导购⺴⽹网站或不愉快的购物体验等引起兴趣⽼老客（谨慎型）平时有时间或有需求回来喜欢便宜商品⽼老客（游荡型）对特定品牌有需求时、收到促销信息时访问新客⽼老客粉丝新客——⽼老客：促成第⼀一次购买⾏行为，建⽴立信任关系⽼老客——粉丝：解决所有痛点，使偶尔性购物转变为习惯性购物新客建⽴立信任挑选商品注册账号下单⽀支付售后服务⽼老客寻找亮点挑选商品下单⽀支付售后服务粉丝挑选商品下单⽀支付售后服务如何设计出好的交互设计？交互设计师要具有如下特质逻辑思维能力强 数据分析能力好 有同理心 有激情 有审美眼光 有创新意识 有良好的沟通能力 有敏捷的执行能力 胆大心细 有大局观 善于观察 仔细倾听同理心同理心创新思维推动力用户研究强烈的兴趣爱好逻辑思维多思，穷尽1.架构和导航Architectureandnavigation¨是否采⽤用了⽤用户熟悉或容易理解的结构？¨是否能识别当前在⽹网站中的位置？¨是否能清晰表达页⾯面之间的结构？¨是否能快速回到⾸首页/主要页⾯面？¨链接名称与页⾯面名称是否相对应？¨当前页⾯面的结构和布局是否清晰？2.布局和设计Layoutanddesign¨是否采⽤用了⽤用户熟悉的界⾯面元素和控件？¨界⾯面元素和控件的⽂文字、位置、布局、分组、⼤大⼩小、颜⾊色、形状等是否合理、容易识别、⼀一致？¨界⾯面元素/控件之间的关系是否表达正确？¨主要操作/阅读区域的视线是否流畅？¨其他⽂文本（称谓、提⽰示语、提供反馈）是否⼀一致？3.内容和可读性Contentandreadability¨⽂文字内容的交流对象是⽤用户吗？¨语⾔言是否简洁、易懂、礼貌？¨内容表达的含义是否⼀一致？¨重要内容是否处于显著位置？¨是否在需要时提供必要的信息？¨是否有⼲干扰视线和注意⼒力的元素？4.⾏行为和互动Behaviorandinteraction¨是否告知、引导⽤用户可以做什么？¨是否告知需要进⾏行哪些步骤？¨是否告知需要多少时间完成？⽤用户体验设计准则菲茨定律 目标越大，指向越快，时间越短。 将用户昀有可能点击昀想要点击的按钮尽量放大席克定律 选择越多，决定时间越长。 产品的结构尽量简洁明了，选项需要进行分组和多层级展现7±2法则 人类能记忆含有7（±2）项信息块 导航或选项卡尽量不要超过9个，对大块整段的信息分割成各个小段格式塔法则 对象越近，关系越近。 信息架构中应该对相关元素放在一起，不相关元素离得越开泰思勒定律 每一个过程都有其固有的复杂性 在做任何简化时，考虑是否在其他地方增加了复杂度。防错原则 大部分的意外都是由设计的疏忽 通过改变设计可以把过失降到昀低，设计应该考虑更全面奥卡姆剃刀原理 如无必要，勿增实体。 只放置必要的东西，减少点击，给予更少选择尼尔森⼗十⼤大可⽤用性原则1.可视性原则：系统状态有反馈，等待时间要合适 2.环境贴切原则：使用用户语言而不是开发者语言，贴近生活实际而不是学术概念 3.撤销重做原则：操作失误可回退 4.一致性原则：同一事物和同类操作的表示用语要各处保持一致 5.防错原则：关键操作有确认提示，及早消除误操作 6.易取原则：识别胜于回忆，提供必要的信息提示（可视&易取），减少记忆负担 7.灵活高效原则：为新手和专家设计定制化的操作方式，快捷操作可调整。 8.易读性原则：减少无关信息，体现简洁美感 9.容错原则：给用户明确的错误信息，并协助用户方便的从错误中恢复工作 10.人性化帮助原则：无需文档就能流畅应用当然更好，但有时候文档也很必要。排版和细节设计流程设计主要⾓角⾊色场景设计场景扩展（更细更远）商业策略设计热爱是始终如⼀一的品质，由热爱⽣生专注，由专注⽣生敏感，由敏感⽣生洞悉。最终体现在对事物核⼼心⽭矛盾的精确辨析，对产品定位、设计定位的抽丝剥茧，没有丝毫扩⼤大问题范畴，也没有考虑不周，你所要的东⻄西在你⼼心中清晰⽆无⽐比。精确⽣生优雅，优雅⽣生艺术，已臻化境。thx~