产品设计:交互原型和需求文档的梳理和总结

2021年3月8日16:39:47 发表评论 891 次浏览

本文概述

产品设计的第一步:需求决定产品的价值

从决定产品的所有需求,到原型设计和详细需求文档,到高保真UI设计(有可能不需要做),到产品具体实现,最后产品上线,并最终产生价值。而最终的价值来自于最开始的需求,从产品的日常运作来看,这是一个标准的流程。

但是产品的价值并非由这个流程决定,产品的价值直接由需求决定,理论上我们压根不需要开发产品(可以假设产品已存在),我们只是整理了一份需求,然后找一个机器来解决对应的需求。

软件产品的需求主要分为两种:功能需求和界面展示需求,功能需求是行为上的,是这个软件系统要实现的主要任务,例如用户登录注册是一个功能需求。而界面展示需求是体验上的,相对功能需求来说似乎没那么重要,但是实际并非这样,设计一个友好而简单的操作界面并非易事。例如现在实现了一个强大功能,但是其使用界面操作完成这个功能需要在多个地方进行配置,需要运行多次,打开多个界面等等——这是最糟糕的,最简的才是最好的,不管多么复杂的功能,都要尝试把它设计成最简的操作。

另外还有一个是内容上的需求,这类主要是文章,无论是移动APP还是Web网站都有这种模块,就是提供文章供用户阅读。这类需求则很难确定,至少我描述不出来什么文章更多人看,但是拼文章数量却是蛮靠谱的。

收集和挖掘需求

我们有必要花一些时间尽可能地设计一些符合用户、含创意、有前景的需求,有些人可能在这个阶段只是匆匆地做了一下就开始做了,这是很难有好的效果。如果只是草草决定一些需求,这意味着你并不知道自己在做什么,因为这个需求决定了代码该如何实现。如果你只是完整地抄一下别人的需求,那看起来价值就不大。

收集和挖掘需求的方式有多种,首先要确定产品的核心IDEA,根据这个IDEA扩展出一些可能的需求,这种需求来自自我分析。除此以外,我们还可以购买服务进行市场调研。或者直接收集竞品的需求信息,进行分析,这是一种有效的方式。

产品设计的第二步:原型设计和需求文档制作

第一步得出的需求还只是一种比较概括性的需求描述,相对比较简单的产品概念,还没有什么具体实际内容,而产品设计就是要把这些IDEA逐个具体化提供给技术实现。

原型设计根据第一步的需求进行制作,但是一般不是单独地做原型设计,而是做一份完整的产品文档,这份产品文档包括了:产品简介、产品数据结构图、产品页面结构图、产品交互原型、产品整体功能使用流程、产品用例,可能还包括产品运营或市场营销的相关内容。

产品文档制作依据是第一步得出的概括性需求,因为这是将需求具体化,虽然只是做草图,但是它还是有些难度的,难度在于具体化每个需求,主要是界面的显示和操作,如何与系统进行交互等等,如果不是经常做,那就要花一些脑筋了。

产品文档中最重要的一部分是交互原型,当然有的人是不做交互原型的,那可以做Word或手绘的文档。本人选择交互原型的主要原因是:我们可以在原型图上做标注,这些详细的标注可以省下我们再做一份Word需求文档的力气;而且开发的时候参考交互原型会更形象而方便,不需要再在Word和Axure之间切换。

原型图标注:如何标注更清晰?

我发现我之前做的原型图标注似乎不太清晰,虽然也有分点标注。目前可以尝试另一种方式:

  • 将界面元素分为三种:静态不变元素、系统输入元素(用于接收用户输入)、系统输出元素(用于展示系统响应)。例如一些固定的标题或图标可能是静态元素,而输入框、或一些特殊的按钮则是属于输入元素,系统动态展示给用户的则是输出元素,例如聊天信息、错误提示、用户言论发布等。
  • 对这三种元素进行一些标准的标注:静态元素仅标注基本属性,如颜色或大小(通常是在UI高保真中标注)。输入元素的名称、类型、是否为必要值、值范围、长度、限制等。输出元素的名称、类型、是否为必要值等。
  • 动态标注,有的时候我们不会把原型图做得那么详细,例如一些动画效果,这就需要对这个动画效果进行标注。标注的大概格式是:起点、过程、过程中的不同操作、结束。

以上只是一些参考或建议,我们的目标是尽可能地把原型图标注清楚,并尽可能规范。

界面设计:用户体验

在做交互原型的时候就要考虑用户体验了,虽然还是草图,但是这里的原型图决定了产品的主要操作模式。所以设计到稍微复杂的操作,请不要满足就行,要花时间想一下,尽可能达到一个更好的用户体现。就如上面说的,对于一个复杂的功能,要尽可能地设计最简单的界面操作,不管用户是否会技术,也只有极少人会倾向于使用复杂的东西。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: