恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
怎么写一份无可挑剔的需求文档
0.0°
2016-12-10 原创文章 规范/资料 举报 14869 35 20 2

今天遇到设计夹读书会一位设计师求助:


需求文档怎么写?

Image title

Image title


做一件事之前一定要先想清楚做这件事的目的,因为只有以目的为导向去做事和学习工作才高效。就拿这位朋友交互设计文档的学习需求来看,为什么要写交互设计文档,如何才能写好DRD文档以及高效输出,万学不离其宗,一步步理顺了,自然就出来脉络。

Image title


首先


为什么要输出《交互设计文档》?


产品进行需求分析,得出需求文档,交互设计师要将抽象的需求转化为具象的线框图。

这其间涉及到信息架构设计、导航设计、流程设计,业务流和信息流等等分析,最后才能够输出较为合理的线框图。交互设计文档(缩写DRD)就是要将这些分析过程用图视化的形式展示出来,让团队成员明白产品设计成这样的原因是什么?增加交互设计的说服力。

同时一份规范的交互设计文档,将很多产品细节都用图视和文字的形式固定下来,起到了规范的作用,有助于团队不同角色成员的沟通,降低沟通成本和出错率。一份不规范的文档,容易在成信息误解,一旦执行下次去,轻则调整模块,重则全部返工。所以我们小组一般让逻辑思维缜密的经验设计师当担,最好是产品经理直接输出。也会减少很多沟通对接成本。


其次


交互设计文档都有谁在看?


认识一下我们团队涉及到文档的角色。

Image title


UI设计师:大家熟知的UI设计师的职责,就是将骨感的线框图转化为符合产品风格和用户特质视觉稿的人。


那他得知道设计有多少个页面,并且这些页面之间的跳转逻辑如何。另外还有一点大部分新手忽视的:遇到特殊情况(数据加载、异常流程、网络异常等等)应当提示用户的相关页面细节,这就是交互设计文档对UI设计师的意义。


产品经理:交互文档是需求文档图视化的一个过程。


一旦没有满足用户需求所做的产品原型,就不可能达到公司的商业目的。因此建议我们团队交互设计师要和PM反复沟通,确保达成用户和公司的目标。

开发人员:用代码语言实现交互文档功能,从而将产品实现出来的人。


不管是iOS安卓、H5等前端开发人员,还是后端开发人员,需要从交互文档里知道,产品要实现多少功能?如何去实现?涉及到多少页面?这些页面又是通过什么去跳转的?碰到异常流程怎么处理?...


交互设计文档都包括哪些东西?

Image title


DRD的目录


DRD的目录包含九大部分:


文档封面;设计背景;信息架构;整体业务流程;任务流程图;页面流;功能列表;交互规范说明;线框图。


1.文档封面

Image title

Image title

Image title

Image title




DRD的文档封面包括:


项目名称;版本号;时间;交互人员;内容。1.0版本的内容多为创建一个新的APP或者ERP,迭代版本的内容则是重构某个功能的页面,增加/删除某个功能等等。

Image title


文档封面


2设计背景


让观众通过设计背景模块了解这次交互设计的一些基本情况。

包含产品定位;设计内容;设计的目标


3信息架构


产品分为几个模块,每个模块下包含多少信息和标签,一般会用思维导图的形式画出信息架构图。使用思维导图即可。

Image title


4.整体业务流程图

Image title


整个业务模式涉及到多少主体?每个主体要负责哪些模块?这些业务的流程是怎么样的?各方面都需考虑以及相关操作问题。


5任务流程图

Image title


梳理完产品的信息架构和业务模式,接下来就要将产品分解为多个任务,一般一个产品只有一个主干任务,其他则是支干任务(微信的主干任务是即时聊天,朋友圈、摇一摇、购物、设置等都属于支干任务)。


每个任务用一个流程图表示,太过简单的任务可以不需要画流程图(像设置里的任务,一般只涉及到两三步操作)。


6页面流

Image title


一个任务流程图,继续具体化,就要输出该任务下的页面流了,不同任务之间的页面会存在重叠,这样就可以将所有任务流程汇总,形成整个产品的页面流。页面流不需要将每个页面的内容都详细的画出,只要画出每个页面涉及到的按钮。


7功能列表

Image title


在交互上列出整个产品涉及到的功能点很有意义,测试人员可以通过这个去梳理测试,开发也能根据功能列表去比对发现哪些功能实现了,哪些功能没有实现。


8交互规范说明

Image title


对于一些特殊的交互状态,包括产品会共用的控件我都会放在这个目录下。


单位:规范产品中涉及到的所有单位,例如历程用“公里”,时间用“2016年11月14日”的形式,金额用“元”或“¥”等等。


网络异常处理:网络异常时、网络切换时(从WiFi状态到蜂窝状态)、网络中断等情况下的交互设计。


dialog和toast:各种临时框和toast的样式和文案的规范说明等。


数据加载:进入新页面的时候,数据如何加载,用什么样式提示用户页面正在加载,需不需要异步加载来提高用户体验等等。


版本控制:强制升级时产品怎么处理?非强制升级时产品怎么处理?升级的弹框和文案是怎样的?一般在版本1.0下会和产品、技术确定产品的升级方案。


9.线框图


经过了上面各种分析和推敲,确认无误就到画线框图了。


线框图一般包括三个部分:


1页面的内容和排布;


2各个页面之间的跳转逻辑;


3交互设计说明。


用什么工具写DRD?


思维永远比工具重要,你可以用InDesign、可以用PPT或者keynote、也可以用Axure等。

Image title


一千个交互设计师就有一千个交互设计文档,根据不同的项目和公司不同的工作流程,按需设计自己的交互设计文档。如果是像我们小公司不要求做的很美观,但要做到规范没有罗辑错误。记得做设计夹书院服务号二次开发,产品经理没有问清楚需求,错误把打卡换了另外自己理解逻辑在文档上,结果开发只能返工写逻辑。我们躺坑过来都是满满的教训,希望在一线产品负责人请勿犯。


最后


送出精心整理的100多P需求文档的课件和视频观看链接:

部分精彩截图:

Image title

Image title

Image title



好了这就是课件和教程主要内容,还有很多精彩案例因为篇幅太长,不能一一罗列。需要的朋友可以联系我。本课程是设计夹研究小组精心编辑,欢迎指点交流。


设计夹研究小组答疑栏目,希望可以帮助大家实际工作问题和疑惑,欢迎留言吐槽工作的问题和不懂地方,我们凭借设计夹覆盖UI,UX,PM,运营尤其社群以及设计考研,创业等多年在线产品和教育经验为你答疑,请加微信sezign04。

Image title






更新:2016-12-10

收藏

35人已收藏

  • 41

    作品

  • 1140

    粉丝

  • 9

    关注

  • UX设计师面试时,最常被问到的7个问题
  • Web design trend 2017/2018
  • UI Color trend 2017/2018
  • 【译文】如何学习构建设计思维
相关标签

    猜你喜欢

      2016-12-10 原创文章 规范/资料 举报 14869 35 20 2

      怎么写一份无可挑剔的需求文档

      0.0°

      你确定要举报怎么写一份无可挑剔的需求文档

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      20
      35
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录