交互设计文档6.16课件.pptx

1、交互说明文档必要性、多方意见共享、计划及模版讨论Heidixie 2009-6-16为什么要有这份文档？写什么？什么时间交付？怎么写？可能会出现的问题？Contents为什么要有这个文档？要解决什么问题？要满足什么期望？现在不是好好在运作吗？我讨厌文档工作我们都不喜欢阅读文档、更别提写文档，太Boring了！我怀疑写了会不会有人用别白花力气了，直接说更直接更快要占用我更多资源没空要解决的问题RA之前做过一些小需求和项目，每次变动都很痛苦，设计变了之后，我就要跟着改UC，改截图，有时候UED改了还忘了通知我们需分，导致UC有问题吴屹峰UC写成什么样，一旦终审完了，需求冻结，以后设计即便发现不吻合

2、，也需要提交需求更改，不然就按照UC进行开发。要解决的问题？RA页面交互的需求容易漏掉，因为UC里面不可能写太多交互方面的东西。贾玉成RARA现在如何写现在如何写UC:UC:1. 参加FBRD确认会，了解并讨论商业需求；2. 看终审之后的FBRD和线框，写UC,遇到不明确的，就找相应的人。有些项目会让RA参加线框评审，有些却不会。线框有时承载不了太多的设计需求，口头传播的容易流失。要解决的问题？RA希望UED能够在提交HTMLDEMO给RA时，能同时给出一份页面元素描述文档，需要介绍htmldemo中的文案、链接以及相关的图片尺寸或显示字符个数。现在RA在这方面花费的时间比较多，经常要和UED

3、去确认这些内容。SQA收集PD要解决的问题前期RA和PD沟通过程中，有很多交互点点不能够明确，比如“默认显示多少属性值”，“标题显示多少字符”等。在以往的需求和项目中，对待这些问题我们都是想到一点补一点的到FBRD文档或者邮件中去。既增加了沟通成本又会存在遗漏细节的风险。DeanUED要解决的问题一怕UC写太多设计需求写了就不好改设计了。二怕UC不写设计需求口头讲给前端，前端交代给开发。三怕前端换人做要重复讲解。刷新不刷新页面的tabRadio button有无默认选择输入框有无初始值？校验如何做？HeidiUED要解决的问题交互认为很平常的设计需求，如果不表达出来，还是容易被前端和开发忽略掉

4、。LucasHowHow？这么多问题？牵制重复劳动 沟通成本大重要信息遗漏理解偏差一份交互说明文档？PD怎么说解决了前期RA和PD沟通过程中很多不能明确的交互问题。诸如显示字符数，默认展示多少属性值，标题是否换行等问题这个文档可以很大程度的推动项目更高效的进行下去。PDDeanRA对我的工作很有帮助。首先，不用每次一个仅涉及到交互设计上的改动都要设计文档和UC两方面都做改动，重复劳动减少；关于一些字符数显示、页面控制、校验等非页面功能性的设计，UC中不用写这部分内容我感觉轻松很多。使用方法：作为UC的附件一起上传，在UC相关内容处直接链接到设计文档。RA怎么说吴屹峰RA我认为它的存在能够相当程

5、度上弥补UC中对页面交互介绍的不足。因为UC是用来描述需求的，如果花太多的篇符描述交互方面的内容，那么将会大大限制UC本身的表达效果及开发人员对业务本质的理解，而且页面交互的描述确实是非常繁琐的，事实上我们在以前的项目中对此是有遗漏的，测试人员经常会测试出一些交互方面的BUG，如页面的较验、联动、页面控件的形式、显示方式等等，而统统这些在UC中一般很难描述完整，或许页面交互的描述也不是UC的主要职责。RA怎么说贾玉成UED怎么说UED做为参考手册，避免不吻合的问题发生。即使有问题发生，也可以作为界面验收时的Checklist。将“我对A说，我对B说，A对B说”，转变为“A和B共同参考同一份文档

6、”，减少沟通成本及信息不对称。全程影响用户体验（一直到测试，都需要参照设计文档）。1字符限制链接具体化交互细节说明校验浏览器兼容性测试说明2345文档写什么？1视觉规范规格（Margin、间距、容器宽度等）商业逻辑（比如为什么要有这个功能）详细的功能实现机制（UC和FBRD的任务）功能逻辑（点击离线状态的ATM后判断等）详细的文案（另外提交动态文案表）23文档不要写什么？45视觉规范规格如图：由视觉制定。1字符限制每一段动态文本区域，字符有无限制？每一段动态文本区域，字符有无限制？ 1. 有。2. 无。注明自动换行，词内换行VS词内不换行文档写什么？按字符数截断（注明多少字符数），注明是整词截

7、断整词截断还是字符截断字符截断。2链接具体化文档写什么？A. 复杂交互的流程图：复杂交互的流程图：Buy now button，指向下订单页面。B. 链接和链接和button的指向：的指向：不一定是具体的URL，但是需要给出线框图或demo的链接。3交互细节说明文档写什么？3交互细节说明文档写什么？4校验在不能应用校验框架的前提下文档写什么？4校验文档写什么？在现有的校验框架下，若需要自定义校验方案，需要在此文档中注明。另外，校验的容错方案校验的容错方案需要专门说明：Case3：在B和和C输入框里输入前大后小数字，点击GO，传递数据调整为正常（前小后大），页面刷新，输入框自动调整为前小后大。C

8、ase5：B填写正常数字如100，C留空，点击GO页面刷新，结果数为大于或页面刷新，结果数为大于或等于等于100的结果。的结果。5浏览器兼容性测试需求文档写什么？优先级优先级描述描述浏览器浏览器A所有功能可用；页面元素与PSD Demo无偏差，如字体大小、样式、行距、元素位置等。IE6.0IE7.0Firefox2.0Firefox3.0B所有功能可用；页面无错位；不影响阅读；IE8.0C主功能可用比如：比如：具体的要求受商业和项目要求、浏览器使用比例变化影响。但是需要设计师落实并注明到设计文档中。交付时间点？FBRD线框说明文档HTMLPSDUC开发FBRD终审通过线框图终审通过BRDUC终

9、审通过HTML终审通过PPT? Word？Visio？PDF? 线框图软件直接标注？线框图软件直接标注？ 工具和格式不是问题工具和格式不是问题1. 易读2. 易标注3. 易共享不用额外装软件，方便上传confluence详细？简洁？目录结构？详细？简洁？目录结构？ 说明问题即可，有清晰的目录结构说明问题即可，有清晰的目录结构有大量需要用到标注的内容，需要采用最有效率的工具。怎么写？大项目的交互说明文档参考目录结构：1. 更改纪要更改纪要标明更改内容及年月日，相关人员2. 相关交付物说明相关交付物说明线框图地址、FBRD、UC地址等，方便查看。3. 内容范围界定内容范围界定涵盖的项目范围、主要模

10、块等。4. 使用说明使用说明（可选）（可选）你的目录结构，是如何组织的5. 具体模块目录具体模块目录（链接具体化、字符、交互说明、校验等）6. 浏览器兼容性测试浏览器兼容性测试怎么写？1234561. 更改纪要更改纪要最快速有效让使用方了解文档变化。怎么写？1怎么写？2. 相关交付物说明相关交付物说明方便大家在不同交付物间跳转参考。怎么写？2内容界定内容界定从整体到局部，让使用者有全局感并了解本文档的范围。3怎么写？怎么写？具体模块具体模块任务分解，先整体再局部先整体再局部。5怎么写？具体模块具体模块任务分解，先整体再局部先整体再局部。5怎么写？具体模块具体模块任务分解，先整体再局部先整体再局

11、部。5怎么写？整体原则：1. 不是为了写文档而写文档，只写需要的，适可而止2. 适合于项目、合作方3. 工具不是问题4. 模版不是问题，大家看明白就可5. 完美的文档无法取代面对面的沟通6. 需要在实践中不断改进会出现哪些问题？与其他文档的关系顾此失彼？重复？交互的额外资源占用又多了一项任务？12或者你现在还担心什么？会出现哪些问题？与其他产出物的关系1交付物交付物产出产出使用者使用者FBRDPD交互、RA线框交互RA、前端前端、视觉、PD交互设计文档交互设计文档交互交互RA、前端前端、开发、测试、开发、测试PSD视觉前端前端视觉规范说明视觉前端前端HTML前端RA、开发UCRA开发、测试主要

12、的交付物及使用者：会出现哪些问题？与其他产出物的关系1FBRD交互说明文档UC避免顾此失彼（两边都不写），重复（两边都写了）相互加链接相互加链接引用的方式替代重复描述；替代重复描述；重要的模块即使不写也需要保留目录；重要的模块即使不写也需要保留目录；交互与交互与RA的密切合作、相互检查；的密切合作、相互检查；会出现哪些问题？相互加链接相互加链接引用的方式替代重复描述；替代重复描述；重要的模块即使不写也需要重要的模块即使不写也需要保留目录保留目录；会出现哪些问题？有些模糊边界比如：时间显示为界面元素，但是有判断逻辑：单复数判断、大于一天，只显示天，小于等于一天，只显示分钟单位的单复数判断需求。不知道哪些是前端做的，哪些是开发做的；担心若是开发做的，写到设计文档里不受重视被忽略掉。会出现哪些问题？Case3：在B和和C输入框里输入前大后小数字，点击GO，页面刷新后输入框自动调整为前小后大，取价格介于价格区间的结果。这个需求：前端可以做，开发也可以实现。写到UC还是写到交互说明文档里？会出现哪些问题？交互的额外资源占用2其实这些东西已经在脑子里了，现在无非是把他们写下来；需要确认、讨论，让设计更加靠谱；对项目也经过重新的梳理，发现一些可以优化的问题；节省了大量的沟通成本让设计有所沉淀让花的时间更加值得：