用户体验设计过程

互联网的用户体验设计过程[e-mail]2目录•怎么做？•交付物？•敏捷设计？•产品评估？•问题？3怎么做？4实施过程•概念证明（构思）根据市场研究和设想目标，论证为可行的商业模式。•设计探索（规划）把抽象的商业需求，量化为可视可操作产品原型的过程。•技术编码（落实）互联网产品与传统UI做用户体验，最大的区别便在于此。5概念证明•内容需求–用户需要的内容•功能规格–需要什么样的功能•用户简介–角色说明6设计探索•信息架构–功能结构–界面线框•交互设计–任务分解–工作流程•视觉设计–风格规范7技术编码•结构–HTML•表现–CSS•行为–DOM&Script8交付物？9类型•设计图–概念图–架构图–流程图•原型–纸质原型–图形原型–页面原型•文档–过程文档–交付文档10设计图用户模型功能模型交互流程认知结构逻辑结构架构图概念图流程图11概念图•功能模型能满足什么，如何满足？•用户模型需要做什么，应该如何做？•Paper•Visio•MindManager•Illustrator•Photoshop•Powerpoint•?12概念图（功能）•类似产品蓝图的远景规划，使用抽象图形呈现•Photoshop制作13概念图（用户）•定义产品用户应有的功能，列举可能没有逻辑关系•MindManager制作14架构图•逻辑结构建立层级逻辑关系。•认知结构建立认知逻辑关系。•Paper•MindManager•FreeMind•CmapTools•Omnigraffle•PowerPoint•？15架构图（逻辑）•介绍Flickr功能以及它们之间的相互关系•CmapTools制作16架构图（认知）•介绍用户可以在Flickr平台上获取哪些服务•Illustrator制作17流程图•任务流程功能点之间的交互。•界面流程操作点之间的交互。•Paper•Visio•Omnigraffle•Photoshop•PowerPoint•SmartDraw•Axure•？18流程图（任务）•某用户在雅虎邮件系统里登录后，查看消息的过程处理片段•Visio制作19流程图（界面）•小杰在后台创建调查、添加问题选项、获得JS调用代码的过程•Visio制作20原型页面原型低保真高保真线框图任务分解网站地图纸质原型迭代图形原型工作流程21纸质原型优点•制作快速•无技术壁垒消失•更少的讨论时间•传达产品感觉不错缺点•存在屏幕真实状态问题•不能评估视觉•不能在实际系统中制造假数据•不能评价的响应时间•不合适超过3人的演示22纸质原型（制作）23纸质原型（卡片）24纸质原型（手绘）25图形原型优点•效果美观•适合打印或者归档•无需纸张缺点•存在客户端真实状态问题•制作需更多时间•制作需要相关专业知识•不方便现场测试新想法•容易延误改进执行26图形原型（Visio）27图形原型（Photoshop）28图形原型（Illustrator）29页面原型优点•真实的交互•有益于评价屏幕变化•有时间作出改进缺点•制作需更多时间•制作需要编程知识•不方便现场测试新想法•容易延误改进执行30页面原型（低保真）•区分链接•不区分颜色•固化布局•固化模块•固化信息条目•固化信息内容规格31页面原型（高保真）•保证与设计图一致•按风格指南完成结构表现制作•区分信息颜色32过程文档•角色定义有目标用户群之后，分别对典型角色进行定义，让他们看起来更真实。•页面列表适合管理原型页面，并编号存档和组织。33角色定义（Grow）•基本属性•关键差异•简单描述•用户目标•商业目标•相关属性34页面列表（Dpdp）•名称•编号35交付文档•风格指南指导低保原型进行美化，及维护准则，包括HTML&CSS•脚本说明指导页面前端行为开发的帮助，包括Script&DOM。•接口说明方便第三方开发、获取数据、使用功能。36风格指南（CAPT）结构、配色、排版、样式表、混合37脚本说明（YUI）•框架•模块•调用38接口说明（豆瓣）•通用参数说明•通用元素说明•返回状态说明•详细说明39敏捷设计？40流程与交付•保证关键设计图图形只是辅助说明，根据产品需求适量减少、合并设计图。•多用Web页面原型直接完成为带交互的HTML页面，减少实施过程。•从低保原型开始越保真的原型需要的技巧越多，或耗时越多。41思维导图MindMap42任务分解TaskAnalysis43快速引导Dashboard44工作流程WorkFlow45网站地图SiteMap46职能与职责•产品经理（PM）提需求和构思，并且全面统筹和协调。•产品原型设计师（IA,ID,VD,…）反复迭代规划，最终完成为低保原型，并且出具风格指南。–掌握两种以上的设计工具•产品页面工程师（DEV）通过风格指南和低保原型，完善为高保原型，协助完成质量评估。–掌握两种以上的编码工具47能力要求打分5业务能力互联网认识信息架构交互设计沟通能力工作协调文档制作视觉设计编程能力PM552355321IA345444532ID234544533VD2324445DEV322443548产品评估？49启发式评估需要注意的原则？1.可视性原则2.不要脱离现实3.用户有自由控制权4.一致性原则5.有预防用户出错的措施6.要在第一时间让用户看到7.使用起来灵活且高效8.易读性9.给用户明确的错误信息，并协助方便恢复工作10.必要的帮助提示与说明文档50启发式评估（导航）1.清晰指示了当前的位置2.清晰定义了首页的链接3.网站的所有主要部分都能通过首页访问4.如果需要的话，应该有个站点地图5.网站结构清晰，没有不必要的层级6.如果需要的话，要有个易用的搜索功能51启发式评估（功能）1.所有功能都被清晰地表示出来2.所有重要功能在不离开网站前提下都可以使用3.没有不必要的插件52启发式评估（控制）1.用户可以取消所有操作2.在每页，用户都可以找到清晰的离开本页标识3.所有图片链接都和文字链接一样清晰可用4.网站的流程符合用户的操作流程5.支持所有主流浏览器53启发式评估（语言）1.文案简洁2.没有术语54启发式评估（反馈）1.现在发生了什么，应该一直清晰标示出来2.如必要，用户应该能收到邮件反馈3.所有反馈都要及时准确4.如需要安装插件或特定浏览器，必须告知用户5.用户可以通过邮件或提交表单来提交反馈意见6.如必要的话，提供在线帮助55启发式评估（一致性）1.对任何元素都只有固定的一种叫法2.链接与其指向页面的标题要匹配3.对链接和已访问链接使用规范的色彩4.一致使用术语的普遍叫法56启发式评估（防止出错）1.使用朴素的语言来表述错误信息2.错误信息需要给出下一步操作提示3.错误信息提供清晰的离开标识4.错误信息提供详细的帮助信息57启发式评估（视觉清晰）1.布局清晰2.足够的留白3.所有图片都有alt标记4.使用标准的模版58问题？