交互设计说明文档模板(如何写一个完整的交互说明文档)

编辑导语:交互说明文档可以让项目人员更加快速地理解设计规划,进而推动后续项目的进行与落地。这也就要求交互说明文档的撰写需要清晰、明了、完整。本篇文章里,作者就如何书写一份完整的交互说明文档进行了总结,一起来看一下。

交互设计说明文档模板(如何写一个完整的交互说明文档)(1)

在0到1的产品开发流程中,项目经理经历过需求阶段,开完需求评审会议后就开始投入到原型的制作了。原型是公司内部的产品使用说明书,所以画原型的时候,项目经理应该去思考如何能让UI和技术人员更快速、准确的理解原型的交互说明?

所以今天就来和大家分享一下,如何制作出一份完整的交互说明?

一、交互说明是什么?

当产品经理把原型图画好时,旁边都会写上一些关于产品原型的一些规则或者是一些操作等等,这些都属于交互说明。所以可以把交互说明简单理解为是对产品原型的解释、强调、补充。

在公司内部,会把交互说明当成一个简单的、初步的产品使用说明书。我们可以把交互说明想象成一座桥,桥的一端站着项目经理,另一端站着UI设计师和程序员,通过桥的连接,能让产品经理把产品操作规则、限制条件、变化形式等,准确的让程序员和UI设计师了解,快速地投入到产品制作的工作中,设计出产品。

二、如何写一份完整的交互说明文档?

当我第一次写交互说明的时候,我非常疑惑,到底交互说明要写什么内容呢?

做了几个项目之后,我的经验告诉我:首先,把自己假设成一个用户,当我在使用这个产品时,我希望这个产品能怎样的简化我的操作路径?

其次,我角色从用户变成产品经理,我希望让用户看到什么,使用什么功能?最后,我又从产品经理变成技术人员,这个功能到底可不可行?符不符合实际情况?根据这三种不同的身份,写出产品的交互说明。

1. 步骤一:统一思维

为了让文档的视觉性更强,就需要做到一个统一。比如你的机模要统一,操作规则、字体大小行间距都需要统一,包括思维也要统一。

统一思维,就是要把用户想象成猪,又笨又懒,不要认为用户肯定不会做这个错误,所以不写出来。要保证整个产品的严谨性,比如登录页面,如果你登录不了,那到底是手机出错,还是验证码出错,你都需要告诉用户,不然用户云里雾里登录得太麻烦,他就不登陆了,那你就失去了一个用户。

所以在写错误提醒说明的时候,只要说出错误的原因,也要给出解决的方法,让用户觉得你这个产品是人性化的,不会激起用户的愤怒感,从而继续使用产品。

2. 步骤二:明确每个要写的部分——页面、模块、交互说明

我在工作中习惯把交互说明文档分成三个部分,第一个部分是页面,第二个部分是模块,第三个模块是交互说明。

首先,你需要把你构思的产品在文档里画出来,把产品的每一个页面都画到交互说明文档来,放在页面这个部分。

所有页面两种状态种是进入即可看见的状态,另一种是操作后状态(隐藏状态),只需要画一种状态即可,另一种状态的变化规则要写进交互说明。页面需要整洁清晰,布局统一。不需要花里胡哨的颜色,只需要简单的基础色黑白灰等就行。我们不是UI,不需要为产品上色,只要能区别即可。

然后,把每一个会变化的、需要解释说明的模块,单独拖到模块这一部分。接下去的交互说明呢,就是根据一个个模块来写的。

第三部分的交互说明一定要写得很详细,千万不要吝啬文字要写清楚限制条件

我刚入行的时候那时候只是产品助理,遇到过一个情况:有一个项目,由两个产品经理负责,其中一个产品经理写的交互说明写得不够细致,导致程序员没有看懂。程序员就不断地问项目经理,被项目经理痛骂,说他脑子不好使,程序员吃了瘪。

再后来,程序员遇到自己看不懂的地方,就按照自己的想法来,搞得项目一拖再拖。两个人都被人事批了一顿。

从此以后,每当我写交互的时候,我常常反思:该怎么把交互说明写得细致呢?如何一针见血地把要点表达出来?那就要从以下3个维度分析:

  1. 按钮、图标等操作以后出现的状态变化。
  2. 刷新、加载(上划下滑)、数字显示等页面规则。
  3. 错误提醒、弹窗等。

使用过微博的朋友应该了解,当你看到一篇你觉得写的不错的文章时,你给这篇文章点了个赞,它的爱心图标就由空心的爱心变成了红色爱心,并且爱心后面的数字也往上加一。如果超过100万人点赞的话,就会一直显示100万 。这些按钮的变化或者一些数字的显示规则,都需要写到交互说明里面。

你在刷抖音的时候,在刷新的时候,你有没有想过它一次能加载几条视频?我就这么无聊,还真的去数了,但我不记得准确的数字了,好像是30个。如果你在写加载规则的时候,也记得把加载出几条内容也写进规则里面。

我分析过36氪的账号密码登录页面,(除了账号密码登录页面还有验证码登陆页面、一键登录页面)。

例如用户再点击这个区号时,页面会跳出弹窗,这时候我们也得把弹窗的样子画出来,包括弹窗的一些操作规则也得说清楚。

如果用户在输入手机号,会获取光标提示文字消失,尾部出现删除的按钮,这些规则是需要写进交互说明的。

包括用户将手机号格式输入错误时,就是不等于11位开头也不为1时,点击按钮出现的错误提示,请输入正确的手机号。这个错误提示也是需要说明的。

分析一下以上操作时,最好把该页面的全局说明、页面说明、页面权限、使用场景交代清楚。就是要把页面进入的方式,跳转到哪些页面;是VIP才能使用的,还是普通用户也能使用的;用户是在什么样的场景下会使用该页面;等等关于页面的都可以说。这样可以让UI在设计的时候更加个性化、人性化。

3. 步骤三:检查

对一些隐藏状态的规则,和错误提醒的设计一定要写清楚限制条件。

比如返回键千万不要忘记画,既然能进入到这个页面,就要能往回退到前一个页面,要能进就能退。

同理,有成功就有失败,你既然能够操作成功,就有操作失败的时候。比如你使用发布功能,如果字数超出限制,就不能发送成功,就会失败,所以这些规则都得制定好。要睁大双眼检查自己可能会出错的地方。

四字真言:增删查改。对于缺少的内容,补充完整。

比如用户在发表评论时,需要限制评论字数,但在交互说明中并没有写,你就需要补充上去,留下能表达出意思的说明即可。如果你从元件库里拖出来的按钮,你还解释了一遍,说明这个解释是不需要的,因为从元件库库里拖出来的按钮,他已经有含义了,不需要你再去解释一遍。

三、总结

产品经理在写交互说明的时候,需要不断地提出问题,思考:这个功能要为什么要这么放?它需要怎么变化?用户希望产品是怎么样的?

写清楚操作内容、限制条件,但要拒绝流水账式说明,另外当描述文字过长,看是自己在语言表达上存在问题,还是可能需要重新考虑是否是设计逻辑存在问题。

如果有一些核心功能、重点内容、复杂难懂的交互,可以在必要的情况下,需要先跟团队强调交互说明的存在意义,推动大家去阅读和反馈,才能对产品的发展起到真实有效的作用。如果交付文档后,UI或者程序员实在有看不懂的地方,也要欢迎他们随时来问,避免以后出现更复杂的问题。

本文由大吕不加班 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页