如何写一份交互说明文档
Heidi格物志:转载请注明来处,关注请点击:http://weibo.com/heidixie
交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险。今天整理电脑,翻出以前的PPT,分享之。
- 前期介入,对PD进行开发需求评估支持;
- 参与每次的FRD评审会;
- 详细审阅FRD文档并不断与PD确认。
- 每次变动都很痛苦,设计变了之后,我就要跟着改UC,改截图,有时候UED改了还忘了通知我们,导致UC有问题……
- 页面交互的需求容易漏掉,因为UC里面不可能写太多交互方面的东西。
- 希望UED能够在提交HTML DEMO给RA时,能同时给出一份页面元素描述文档,需要介绍html demo中的文案、链接以及相关的图片尺寸或显示字符个数。现在RA在这方面花费的时间比较多,经常要和UED去确认这些内容。
- 前期RA和PD沟通过程中,有很多交互点点不能够明确,比如“默认显示多少属性值”,“标题显示多少字符”等。在以往的需求和项目中,对待这些问题我们都是想到一点补一点的到FRD文档或者邮件中去。既增加了沟通成本又会存在遗漏细节的风险。PD为了可控性的需求,往往会“越俎代庖”,直接在FRD注明这种需求(对于交互设计师来讲,却又导致没有发挥余地)
- DRD做为参考手册,一定程度上避免不吻合的问题发生。
- 即使有问题发生,也可以作为界面验收时的Checklist。将“我对A说,我对B说,A对B说”,转变为“A和B共同参考同一份文档”,减少沟通成本及信息不对称。
- 全程影响用户体验(一直到测试,都需要参照设计文档)。
这些说明与功能实现没有太大关系,主要是为前端做HTML的时候参考的。一般视觉设计师会在PSD里标注清楚。如图:
如下图所示,作为DRD,你有必要传达清楚Browse by category区域的设计:链接的可点击性,链接的指向,字符与条目的数量限制等,但是具体二级类目排列是按产品数目排还是按字母排,还是人工运营,是FRD要解决的任务。
提高空间利用率,有时网页上的动态文字需要从数据库里提取部分然后截断处理。比如下图中的标题和描述。你的DRD需要传达清楚:1,是否要做限制?2,如果做限制的话,多少字出现截断?截断后是显示为省略号还是不显示?这个汉语设计相对简单,如果英文单词的话,因为是按字符,每个字符的宽度不一致,需要预估,另外还需要注明是整词截断还是词间截断。
很多网站都有对搜索结果的筛选设计(refine search),比如aliexpress搜索结果页左侧。这块区域的交互事件是非常复杂的。
- 类目和属性的不同如何处理
- 属性以及每条属性显示的属性值的条目是否有显示上的限制?
- 选中后,被选中的属性值是停留在原地,方便用户记忆,还是放到统一的位置,方便用户统一查看?其他未被选中的属性值是否消失?
要确保这些你设想中的复杂的交互逻辑能够被理解被呈现,除了一页页的线框图,你有必要再三让前端工程师和开发工程师了解并达成认知一致。所以你需要将页面上的关键链接事件标识清楚。它们有的指向无需刷新页面的交互,有的指向你安排的并非PD安排的某个中间页面(page flow是交互设计师的职责)
相信我,我很不愿意写这些东西。我喜欢在会议室向各位涉众演示我的线框图,我会研究用axure制作各种动态效果,达到它足够逼真呈现各种联动——比如当你选择了下拉菜单中的某项时,页面上其他区域也发生相应的变化。可是,Axure不是全能的。即使能够表达出来,线框图交付出去,也不能确保其他人都能够一一进行点击尝试。所以只能在会议室反复讲解,在事后再三检查并敦促修改。但是当我尝试用下图对这块小小且复杂的区域进行详细说明后,事情变得简单多了。所以我用节省的时间去写了这份PPT.
又如,你可以在这里说明任何你想要的效果。你的受众也只需要用10分钟时间阅读完毕,标注出与他工作相关的重点,存档并在遇到问题,找不到你人时随时参考。
这也是一项不怎么有创意的事情,但是你若不事先想清楚,在项目过程中有点麻烦。写文档看似枯燥乏味,反过来想也是让你自己再好好思量审核设计本身的关键步骤。我曾经自以为完善的交互设计方案就是在写DRD的时候发现存在重大的纰漏,然后及时优化的。
你们的产品兼容所有浏览器简直是梦想,但是有时出于效率的要求,我们必须战略性放弃某些浏览器,比如IE6.:D 。 这个决定谁来做?是前端工程师还是产品经理?还是你——交互设计师?我认为决定权在交互设计师这里,但是他必须和产品经理达成一致,并与前端确认。你要求兼容的浏览器越多,标准越高,前端的工作量就会越大,测试的工作量甚至也会翻倍。
- 你可以交付出线框图供视觉先开始。视觉设计往往会先做风格定位设计,这和交互细节关系不大。
- 先交付出已经确定的线框图给前端,然后在1-2天DRD后,若有改动,与前端当面一一确认并一起交付。
- 不是为了写文档而写文档(而是为了解决问题)
- 适合于项目、合作方(大项目有大文档,小需求有灵巧的解决方案)
- 工具不是问题(易传播,易标注,成目录即可)
- 模版不是问题,大家看明白就可
- 完美的文档无法取代面对面的沟通(评审会和讨论不会因为文档而减少)
- 需要在实践中不断改进
转载于:https://www.cnblogs.com/luoxin-PM/p/3485729.html
如何写一份交互说明文档相关推荐
- [转]如何写一份交互说明文档
转载请注明来处,关注我,请点击:http://weibo.com/heidixie 离开交互圈已经有段时间了.但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上 ...
- Web产品的交互说明文档应该怎么写?
经常与开发同学聊天,他们说有一个详细的说明文档可以帮助他们更准确的进行工时评估,还可以帮助他们提高工作效率,减少多余的思考时间.因此在这里分享一些制作交互说明文档的经验. 我先说说说交互原型包含哪些部 ...
- 在线产品经理实习 任务三:给搜狐新闻24小时热点做一份产品说明文档
任务三:给搜狐新闻24小时热点做一份产品说明文档 一.任务简介及要求 出题人:苏伟 搜狐新闻高级产品经理 自从搜狐新闻APP推出了24小时热点后,反响还不错,数据也增长挺快的.市场部和销售部跟我们产品 ...
- 订单支付页交互说明文档
订单支付页交互说明文档 1. 页头 Footnote Name On Click 1
- 【java】将自己写的类生成说明文档的方法
使用工具: jdk中的javadoc 实现步骤: 1.将java文件放到一个目录之下 2.进入doc(win+R,输入cmd) 3.通过cd指令进入存放java文件的文件夹 4.编译java文件 代码 ...
- Doxygen —— 快来为你的代码自动生成一份专属说明文档
简介 Doxygen是一个能从带注释的源码中自动生成说明文档的标准工具,它支持众多流行的编程语言,包括C/C++.C#, PHP, Java, Python, IDL 等 Doxygen能够从以下三个 ...
- Flex与ASP.NET通过Remoting方式交互说明文档
本文是关于Flex与ASP.NET通过Remoting方式进行通讯的内容, 本文将通过一个示例来介绍Flex与ASP进行数据交互的服务端和客户端所需的配置情况,以及二者通信的过程. 1. 软件 1.F ...
- Visual Studio2022快速生成函数说明文档
Visual Studio2022快速生成函数说明注释 当我们写了一个函数之后 void my_strcpy(char* dest, char* src){} 想要写这个函数的说明文档,并且是写一个标 ...
- 如何写好一份在线TOB的产品说明文档,这六点很重要
产品说明文档是指以文体的方式对某产品进行相对的详细表述,使人认识.了解到某产品.在线的产品说明文档则是将纸质的实体的说明书,迁移到互联网上方便供用户在购买前后了解产品以及正确的操作方式. 在线产品说明 ...
- 数据产品经理基础技能:数据需求说明文档怎么写?
公众号后台回复"图书",了解更多号主新书内容作者:草帽小子来源:一个数据人的自留地 作者介绍 @草帽小子 数据产品经理一枚~ 用户画像.埋点.指标体系.BI.广告投放等系列文章作者 ...
最新文章
- 重上热搜!北师大教授:给非洲留学生1年10万奖学金真的不算多!
- hive性能调优实战pdf_1分钟带你入门JVM性能调优,实战解析调优工具
- Linux下Shell文件内容替换(sed)(转)
- SpringBoot 第一篇入门
- Collections.sort()和Arrays.sort()排序算法选择
- deep learning for symbolic mathematics论文梳理
- 解决datepicker设置选中日期setDate不生效问题
- 网站目录提交-SEO搜索引擎优化
- 马哥linux架构班笔记,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- matlab语法——subplot函数
- 计算机常用英语单词(带音标)
- 图像灰度共生矩阵cooc_feature_image.hdev
- 导航背景变换 php,jQuery实现的背景动态变化导航菜单效果
- 常用软件列表,根据网上的一位仁兄稍加整理所得。再此感谢那位仁兄。
- 关于“primordials is not defined”报错的解决办法 - 解决报错篇
- 关于Warning: 'https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/' already的解决方法
- Revit建模:使用技巧【族类应用】希望能帮大家提高效率
- go 进阶 多路复用支持: 一. netpoller 初始化
- 【ACM 2020 - Text Recognition in the Wild:A Survey】OCR识别综述
- [附源码]Java计算机毕业设计SSM动物保护资讯推荐网站
热门文章
- linux 每日学一点《如何用iptables实现NAT》
- windows php redis扩展安装,怎么在Windows下安装PHP的Redis扩展服务
- 【组播技术入门 01】IP组播概述
- Internet路由之路由表查找算法概述-哈希/LC-Trie树/256-way-mtrie树
- 如何直观的长时间统计Android应用的动态内存消耗
- 吴锦华/明鑫: 用户态文件系统(FUSE)框架分析和实战
- read()/write()的生命旅程之三——第三章:write()
- LSTM VS RNN改进
- Partition List 将链表分成两部分
- 字符串旋转 不同解法