当前位置: 首页 >文章 > 如何撰写[一款APP的交互文档] ①
收藏
分享

如何撰写[一款APP的交互文档] ①

举报精分青年卤大湿精分青年卤大湿发布于 2018-08-163022阅读3点赞
理论上作为交互设计师的我们在工作流程中,会接触到的内容和产出物: ①PM的功能需求文档 ②PM的树状功能结构图,业务流程图 ③交互设计师的功能流程图(信息架构图) ④交互设计师的原型草图 ⑤交互设计师的低保真原型...

依旧声明:文章所写内容只是一种工作方式,具体工作中,一定要根据实际情况灵活变通。


这里提到的交互文档,指的是静态低保真原型,而不是用来演示的动态可交互高保真DEMO。


本质是希望通过我的工作所得,帮助朋友们快速建立起在交互设计岗位上规范有序的工作模

式,快速提高工作效率和能力。


这系列文章适合什么人阅读:


纯小白:想接触交互设计或者UI设计,又不了解,无从下手;


工作新人:刚工作或者没人带你,不知道产品规范化生产流程;


UI兼交互:想系统学习交互设计;(我就是UI,但还是搞起了交互设计…)


我会根据实际交互工作经验,阐述交互设计在各部门的实际作用,以及写如何撰写一份可用

性高、规范性高、有价值的低保真原型文档。


就目前中国的行情来看,80%的企业并没有开设独立的交互设计岗位。


要么是PM顺带着产出原型给UI设计师,UI照着做就行了;


要么就是UI设计师自产自销,同时产出原型和视觉稿,毕竟小公司里UI是当牲口使唤的嘛~


很多人张口自己做交互设计工作,闭口以用户体验为核心。


但实际上,大部分人还停留在做交互设计就是画线框图的概念误区。


就我目前接触到的这类人,其中有专职交互设计,有PM,也有UI设计师,甚至很多非互联网

出身的创业公司Boss也有此想法。


废话不多说,想了解交互设计,就得先看看交互设计在互联网产品的生产过程中占什么位置。


理想状态下,完整的互联网产品产出流程:




①收集需求阶段:


市场调研员和PM会通过市场调研,来确定产品的用户群体,市场定位,以及同类竞品的情况

等等。


这阶段会产出一些数据报告,用来给Boss或其他人来分析评估产品的可行性;





②规划产品阶段:


PM会根据调研数据来定位产品要做成什么样,之后会根据市场需求把产品功能进行梳理;


(当然也不排除老板一拍脑袋:我们就照那个抄!啊,不,是做……)


这里PM会产出产品需求文档、功能树状图以及业务流程图,(当然也会出现不靠谱的PM,只

给一个需求文档,其余交给你自己干(`・ω・´) ,更有甚者!口述需求……)




功能树状图、业务流程图都产出后,就该交互设计师和PM一块干活了;


交互设计师会根据需求文档、功能树状图和业务流程来提炼信息架构,来撰写低保真原型文

档内容之一:信息架构图。


它是产品的指导纲领,同时也是向UI、开发、测试等相关人员阐述产品功能逻辑的重要内容,

相当于武功秘籍第一篇:心法总纲。


能否快速准确的提炼信息架构是衡量交互设计师是否合格的重要指标之一。





有朋友跟我说规划产品主要是PM来做,当然,也确实是由PM来做产品定位和规划;


但其实我个人倾向于把交互设计师提炼信息架构的阶段也归类到这个阶段,我觉得也应该算是

对产品的规划吧,虽然两者的意义对产品来说并不相同。


③产品设计阶段


功能流程图确认无误之后,就开始进行低保真原型文档制作了。


这里请注意:


一定不要上来就打开软件制作原型,初版一定要用草稿和成员快速沟通后再进行软件制作。


画成什么样无所谓,越快越好,目的只是让大家知道产品大概是怎么样就行。





草稿确认后就可以进行正式的低保真原型文档制作了,这里我之后会详细说明交互文档如何撰

写,毕竟咱们这个系列就是谈交互的。


(图片来源于百度图片,侵删)





原型文档完成后会交付给UI设计师,开发,测试来作为工作安排的依据。


④开发阶段:


UI设计师产出视觉稿,标注切图,就可以给程序们进行产品的开发了;


⑤测试阶段:


开发完成产品初步开发就交付给测试,这个阶段其实建议大家都参与进来;


⑥上线阶段:


到这里产品的生产流程算是走完了,上线之后就是运营,市场推广,接收反馈等等;


然后通过上线后的数据,市场反应开始进行一版一版的迭代更新了。


以上是理想状态下的互联网产品生产线,但各个环节并不是像图上一样的单线程前进,这些环

节多数时间是同时进行的,进行期间也会不断讨论更改优化然后循环进行。


理论上作为交互设计师的我们在工作流程中,会接触到的内容和产出物:


①PM的功能需求文档


这是进行交互设计的依据;


②PM的树状功能结构图,业务流程图


由PM先进行的产品功能罗列,是作为功能流程图的依据;当然某些PM可能专业水平不足,无

法提供这些。


③交互设计师的功能流程图(信息架构图)


是整个产品的设计纲领;


④交互设计师的原型草图


手绘线稿,快速讨论使用,不要占用太多时间,重点是快。


⑤交互设计师的低保真原型


正式的低保真原型文档;


第一期不讲怎么写文档,我们来说说用什么工具做。


首先强调一点:


工具只是提升效率的手段,重要的是设计思想,不要变成工具导向型设计师。


这里是我做低保真原型文档时使用的工具:






Axure RP:原型界老大哥,地位就像设计界PS,易用性马马虎虎吧。


选择它是因为免费,生成的格式流通性好。


目前有很多线上的交互设计平台效率更高,比如Mockplus、墨刀、蓝湖等等。


但是,并不是所有公司都肯花钱滴,也不是所有公司都肯为每一个团队成员配备相同的生产环

境滴。o(╥﹏╥)o


所以这类万金油类型的软件,你用它不一定出彩,但也不会出错。


MindNode:Mac平台独占的树状图工具,小巧易用,无学习成本。


Xmind:老牌思维导图工具,差不多应该都用过。


SKetch:其实是做UI设计顺手,用它来快速搭些页面结构,Mac平台独占。


不过我主要还是用它来做视觉稿子,偶尔搭配其他软件做做可交互DEMO。


用什么无所谓工具无所谓,但我觉得需要有以下原则:


①流通性强,共享性高,可以在渗透到团队中每个人,进行无障碍的交流;


(目前线上的设计平台企业多人协作版本都是收费的,这也是我暂时没写使用线上平台做交互设

计的原因,不是所有公司都肯花钱的。)


②效率优先,不要有太大学习成本;


这一期先到这里,知道了交互设计师在整个工作流程中处于哪一环,和做什么样的工作就可以

了。下一期我们写交互文档包括哪些内容和样式。


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天63人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证