9月6日网易产品技术中心分享会-《用户体验与交互设计方法》

用户体验与交互设计方法UserExperienceDesignMethod交互设计工具与交互设计技巧王毅|MichaelWangQuestion:什么是用户体验设计？WhatisUserExperieceneDesign?体验经济TheExperienceEconomy•体验经济被其称为，继农业经济、工业经济和服务经济阶段之后的第四个人类的经济生活发展阶段，或称为服务经济的延伸。•从其工业到农业、计算机业、互联网、旅游业、商业、服务业、餐饮业、娱乐业（影视、主题公园）等等各行业都在上演着体验或体验经济，尤其是娱乐业已成为现在世界上成长最快的经济领域。用户体验设计涉及的学科？用户体验设计主要涉及•新闻学/图书馆学•人机交互•机械工程•电气工程•美学•心理学（认知/社会）•信息架构•交互设计•工业设计•系统架构•视觉设计用户体验设计UserExperienceDesign假设+验证=？UCD设计方法UserCenteredDesign以用户为中心的设计产品概念设计ConceptionDesign情景式调查ContextualInquiry用户角色设计PersonaDesign信息架构设计InformationArchitectureDesign交互设计InteractionDesign视觉设计VisualDesign可用性测试UsabilityTestingUCD设计方法UserCenteredDesign交互设计在UED中扮演的角色TheroleofInteractionDesign控制用户需求与商业需求的平衡性Thebalanceoftherequirementsfromconsumerpurposeandbusinesstarget.用户体验要素的五层架构视觉层框架层结构层范围层战略层用户体验设计的迭代过程设计过程中潜在的问题与风险•技术可行性•使用效率与开发效率的矛盾•可用性测试的结果是否可以作为唯一依据？设计者的角色控制甄别个人品味•我认为…•不好看…•我觉得这么做肯定不好…•我不是用户吗？•用户肯定会喜欢…设计者的角色控制•设计师不是用户•适当的让用户参与设计•通过数据获得客观的结论交互设计思维InteractionDesignThinking交互行为的逻辑分析ThelogicalanalysisofInteractionbehaviour以拖放行为为例•1.页面加载•2.鼠标悬停•3.鼠标按下•4.拖动启动•5.拖动离开原始位置•6.拖动重新进入原始位置•7.拖动进入有效目标•8.拖动进入无效目标•9.拖动进入非特定目标•10.拖动悬停于有效目标•11.拖动悬停于无效目标•12.放置被接受•13.放置被拒绝•14.放置在父容器上对用户操作需要进行逻辑上的细化与拆分交互设计InteractionDesign•流程设计•界面设计•细节设计流程设计User-FlowPlanning•角色设计PersonaDesign•概念图ConceptMap•功能列表FeatureList•流程图Flowchart•网站地图Sitemap•描述信息结构和交互设计的图示词汇表VisualVocabularyforInformationArchitectureJJG'sVisualVocabularyforInformationArchitecture*Page&Page-stackFile&File-stackContinuefromAContinuetoA界面设计InterfaceDesign•界面草图•原型设计•视觉设计细节设计Details•交互过程的体现•从流程如何开始到流程如何结束•为每一种选择都提供一个出口•基于系统架构的思考•遵循用户体验规划（系统/界面/VI）•对文化背景的思考组件详细说明DetailIntroductionWEB交互设计特性：•定宽不定高•网页浏览/展示•新媒体互动效果•超文本移动交互设计设备•平板电脑（iPad/AndroidPad）•智能手机（iPhone/Androidphone/Windows7）特性•受屏幕尺寸限制•触摸操作•GIS定位系统•互联网应用/移动互联网•草图（纸质原型）•低保真原型•高保真原型•视觉设计稿•产品DEMO交互原型设计PrototypeDesign草图Sketches低保真原型Lofi-Prototype高保真原型Hifi-Prototype视觉设计VisualDesign交互原型设计工具PrototypeDesignSoftware•OmniGraffle•AxureRP（RapidPrototyping）•MicrosoftOfficeVisio•AdobeFlashCatalystCS5•BalsamiqMockups•Pencilsketch•GUIDesignStudio•IriseProfessionalEdition•AdobeReader•ExpressionBlend4AxureRP6.0基本功能：•界面设计（线框图+高保真原型）•流程设计（访问流程，网站地图）•交互组件•动态面板•全局模板•参数与变量•组件库设计与使用AxureRP6.0新功能：•拖放•公式与变量•动态面板动作•动态面板的关系操作•动画效果交付物Deliverables•原型(HTML)•文档(worddocument*.doc/*.docx)•图片(bmp/jpg/png)交互组件的命名与管理•使用英文命名规范组件+功能（+状态）例：Panel_PlayHistory_ActiveTextarea_UsernameButton_Comment_Disable注释Annotation•Description描述•Status（Approved/Proposed/Incorporated）状态（获准/提议/为讨论）•Benefit(Critical/Important/Useful)益处（重大/重要/有用）•Effort（newwindow/tab,currentwindow,etc）效果（新窗口打开/当前窗口打开/…）•Risk(High/Medium/Low)风险（高/中/低）•Stability稳定性•TargetRelease发布版本•AssignedTo任务Axure组件库Library•*.lib文件•加载组件库C:\Users\AccountName\Documents\MyAxureRPLibraries•创建自定义组件库•维护自定义组件库原型项目（共享）的搭建PrototypeProjectsharing•FTP文档共享•版本控制•项目分配EndThankyou！