loading请求处理中...

如何撰写[一款APP的交互文档] ——ui交互设计

2021-12-02 16:21:06 阅读 10771次 标签: ui交互设计 作者: chenxi0

上期介绍了互联网产品生产线以及软件选择,这期我们来讲解互联网产品APP的交互文档

内容。


本期演示图片如果你感觉在手机上太小的话,可以到UI中国关注我查看更多完整的内容,

另外本文使用的交互文档模板也可以在UI中国下载。



Part 1 交互文档的作用


交互文档需要团队人手一份,并根据需求反馈,时刻迭代,同步更新到每一个人。说白了,

这文档必须每个人都熟悉,并且后边更新后每个人手里的都得跟着更新。


交互文档对每个部门的作用:


把PM抽象的需求,变成具象的、可落地执行的设计方案;


和各级部门讨论设计方案细节和可行性,并最终敲定需求、开始执行;


UI根据交互文档设计效果图,页面布局、顺序、页面情感以及交互方式等等;


开发严格根据交互文档进行产品功能的设计和开发;


测试严格根据交互文档设计测试用例,并Review方案进行反馈。



优秀的交互文档的作用:


让相关人员快速了解设计方案和制定工作计划;


保证每个环节的用户体验一致;


开发完成后、作为产品验收的检验依据。


同时交互文档也是体现交互设计师专业能力和个人价值的依据。



对设计师而言:


制作原型的思考过程,绝对是最快提升逻辑能力、产品设计能力、分析能力以及提高产品认

知度的过程;(当然前提是真的要思考着去做,不过脑子光画线框图的就当我没说过吧……)



对团队而言:


低保真原型可以有效提升工作效率,规避风险和资源浪费。无论是大到整个产品的交互文

档,还是小到某个功能的交互文档,道理相同。



以上是理想状态,但现实总是残酷的:


我经历过无视原型,拿需求文档直接让UI出效果图;需求变更直接改效果图,把UI设计师

当牲口使唤;


也经历过因方案没有准确传达到每个人,导致有人对方案误解,开发中出现问题的;


第一种凭设计师个人很难改变公司的现状,所以要么走要么扛;


第二种一定要尽力避免因沟通引起的低级错误。




Part 2 完整交互文档的内容


很多人认为交互文档就是线框图,但它只算是“界面布局方案”,不算完整的“交互文档”。


因为“界面布局方案”PM、UI可以画,甚至市场、运营也可以根据想法画出来,所以这个

无法体现交互设计师的工作价值。


首先看下使用Axure制作的一份完整交互文档的Pages目录。


我会把涉及到模块对应的内容解释给大家:



①交互文档的目录


目录本身就是交互文档的信息架构,优秀的交互文档需要结构清晰,命名准确的目录。


很多人阐述交互方案时,其他人看到的目录是“New Page01、新页面03、功能02……”。


结构和命名都很混乱,团队成员凭什么认同你的专业能力?


结构清晰,命名准确本身就是体现交互设计师专业能力的内容之一。



②交互文档内容之一:产品封面



产品封面显示了项目的基本概况,是很好的介绍入口,产品封面应该包含的内容:


项目或需求名称:


项目名称或者本次需求的名称;


版本号:


项目或需求隶属的版本,用来进行版本归档,项目跟进、排期;


人员列表:


项目相关人员都会位列其中,便于工作安排和交接。




③交互文档内容之一:修订更新记录



修订更新记录的作用:


让UI、开发和测试等快速知晓项目需求以及更新内容,并迅速定位到对应位置;


作为需求的凭证,当有人对需求有异议时,拿出白纸黑字的记录;


培养交互设计师时刻记录的习惯,记录的越详细越好,以后会有很大帮助。


修订更新记录的书写规则:


以天为单位倒序书写,从项目立项开始记录, 持续更新迭代;


每个需求点单独列为一条记录,不要一条记录填写多个功能点;


每条记录添加链接到交互方案的对应页面,便于其他人快速定位到相应位置。


这文章虽然叫“交互文档的撰写和交付”,但是交付之后交互设计师的工作可远远没有结

束。


交互设计师的工作就是不停的跟进需求变更和反馈,持续迭代优化交互文档,而且无论何种

更新,都要具体提现在我们的交互文档中。




④交互文档内容之一:需求分析 & 业务逻辑图



这里是来自于PM的需求文档和业务逻辑图,不是交互设计师的工作范围。


这个模块工作主要是PM来做的,放到这里的原因有两个:


①为了保持文档的完整性;


②让开发和测试能够在同一份文档里解熟悉业务需求和业务逻辑,方便他们工作,而不需要

好几个文档来回查看了。




⑤交互文档内容之一:信息架构图


信息架构图是根据PM的需求文档、功能树状图和业务逻辑图提炼的产品功能模块,这里已

经可以区分出产品功能的层级关系了。


信息架构图的结构和产品交互方案的结构两者是对应的。


从产品交互方案上就可以看出一个交互设计师的信息架构梳理能力是不是专业。




⑥交互文档内容之一:流程设计图



流程设计有多重要我就不赘述了,凡是做交互设计的都避不开的工作。


流程设计图中的每一环节,是和我们交互方案中的页面一一对应的。


把它放到文档里来:


一是避免在制作交互方案的过程中,忽略遗漏掉某些页面;


二是让开发和测试快速理解产品每个任务的具体流程,来安排工作。


这里注意一点:


有多个任务流程的时候,应该针对每一个任务单独绘制该任务的流程设计图。




⑦交互文档内容之一:交互方案



交互方案就是我们整份交互文档的重点:产品最终的可执行设计方案。


它会包含页面逻辑关系、页面布局、交互说明、迭代标示、动效说明、页面情感说明等诸多

要点;


它和前面提到过的信息架构图,流程设计图是相呼应的,设计它应该根据信息架构和流程设

计来制作。


交互方案会在下一期详细拓展,这里仅作为本章示例来使用,不再过多展开。




⑧交互文档内容之一:公用控件库



公用控件库的作用有两个:


①快速提取对应控件,提高工作效率;


(目前线上平台已经提供了大量的可用控件,但因为我们这里使用的是本地化的制作工具,

这个模块还是要有的。)


②团队成员共同协作的时候,保持交互文档的一致性;


每个团队的公用控件库都不相同,需要各自的团队根据自身产品特性去共同完善它,


这里只放了一些示例模板,大家需要注意一下。


一份完整的,而不只是“界面布局方案”的交互文档,应该包含以下内容:


①交互文档的目录


②产品封面


③修订更新记录


④需求分析 & 业务逻辑图 (来自PM)


⑤信息架构图


⑥流程设计图


⑦交互方案


⑧公用控件库


除了第④项可能受限于PM的职业水平和素养,不能保证确确实实获取到。


其他的内容都应该是作为交互设计师体现在交互文档中的工作内容。


这一期我们谈了一份完整的交互文档应该包含的内容模块;


下一期会详细的谈谈交互方案,会从整体流程设计注意要点、页面布局注意事项、交互说

明如何向开发和UI呈现等方面来谈。


看过我文章的人也熟悉,我的文章大部分都是工作的方法,模式;很少涉及设计能力,理

论体系之类的内容。


这么写的初衷是因为:


这类工作方法,不需要时间消化,看过之后立刻就可以根据自己的实际工作情况进行调整

和套用,立刻就可以达到上手应用的程度。


而设计能力,理论体系这类抽象的东西,根据我个人的学习经历,短时间内很难通过阅读

几篇文章就得到质的提升,必须通过大量的实际工作经验慢慢积累。


设计公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
中学广播站LOGO设计

¥500 已有40人投标

椅子外观设计

¥10000 已有0人投标

为幼儿园设计园徽

¥500 已有58人投标

中式甜品海报设计

¥200 已有0人投标

拆除设备机械设计,微信沟通

¥10000 已有0人投标

老酒店客房翻新求设计效果图

¥500 已有0人投标

东魁杨梅包装箱设计

¥1080 已有0人投标