交互设计师在接到需求并完成设计任务,最重要也是最必不可少的是交付交互说明文档。交互说明文档输出的对象包括产品经理、UI设计师、前端及开发工程师,一份好的交互说明文档能让项目参与人员能够清晰明了的理解你的设计方案。
在整个项目开发过程中,会不停的迭代产品需求。因此,交互设计师不仅仅要考虑某一个版本交互说明的清晰度,而是要在撰写文档初期考虑整个项目迭代的问题,同一个页面或者内容可能会不停进行更新,因此,不管是需求点还是页面交互可能会涉及不同版本的内容,包括历史版本、开发中的版本以及最新的版本。如何在一个axure文档中有效的管理整个团队项目,产出全产品周期迭代的内容,就需要对需求的产出和变更实时记录和更新。
整个项目文档可包括:修订记录、评审记录、统一规范、全局说明、信息架构图、页面流程图、页面交互说明。
(以下涉图片涉及内容仅作示范参考)

1、修订记录
按照产品迭代的时间周期进行倒序排列,记录包括版本号、平台(app、后台、小程序等)、更新内容、时间、类型(修改、新增、删除)、负责人…(迭代的版本可依据个人习惯进行颜色区分)

2、评审记录
项目过程中需要不停的沟通调整涉及到的需求内容,因此针对每次会议修订内容作记录能够明确变更的来源,以便后期产生问题时进行追溯。

3、全局说明
全局说明的内容针对不同的产品类型会有部分差异,主要考虑整个产品交互内容涉及全局通用的内容,包括使用角色、权限、限制机制等。



4、信息架构图
产品信息架构,针对更新的内容进行标注及注释,可以作内连链接,这样信息架构内容在其他地方修改后可同步到axure中。

5、页面流程图
页面流程图需要导出缩略图进行页面跳转的链接,因此如果在页面交互说明里有详细主要跳转信息,就不一定需要再次整理单独的页面跳转。不过在项目时间比较充裕的话,输出单独的页面流程给到UI制作高保真原型图是比较好的,因为详细的交互说明主要是给到开发人员进行开发,UI可以直接通过流程图输出页面就可以了。

6、页面统一规范
在写页面交互的时候往往会涉及到相同的组件和操作,因此可以页面这些内容进行统一的输出,就不需要在页面中再重复进行说明了。
6.1、交互手势操作

6.2、按钮状态及提示消息

6.3、弹窗样式说明

6.4、刷新和空状态

6.5、输入框

6.6、其他

7、页面交互说明
页面交互包括当前页面位置、页面全局交互、页面元素、交互说明;需要有明确的交互指向及不同版本交互内容的区分。

以上的流程针对不同的项目内容,团队开发习惯都会有不同的形式。而作为交互设计师,在输出交互文档的时候需要着眼于整个项目和团队,而不是而不仅仅是针对单一的内容进行交互说明的输出。让自己输出的交互文档内容具有全局性、通用性和复用性。
网友评论