互联网的用户体验设计过程

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