我怎么做产品设计?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

本文包含了我个人进行独立产品设计时的流程和工作心得,非科班、非大公司流程、非一定正确,欢迎大家批评指正,如果有帮助,也希望得到你的鼓励。

产品经理或产品设计是一个在不同环境中差别很大的岗位,大公司和创业公司、大团队和小团队、人员配备情况等都会影响我们工作的内容和合作方式,而每个人相信在一定的工作磨练之后,都建立并积累了属于自己的工作方法。

作为一个混迹于小团队甚至个人独立设计开发应用的学生,我是这么工作的:

idea的产生

我主要的设计工作都来源于自己的意愿,一般是我加入的某些小团队,或者是我想要满足的某种需求,甚至也可能是我个人的产品设计练习。之前有很多朋友问我为什么去创业,或者参加这么多的项目,我回答的是『只是对于不好用或者不方便的东西,想要去改进它罢了』。

我是一个比较敏感和细致的人,有比较强的共情能力,因此总会在自己或身边的人身上发现一些需求,那么需求很多,idea 也会有很多,我们怎么选择呢?

脑补

一般一个想法出现,我会从两个方面去论证它。

第一,这个需求是否在用户中普遍存在。普遍的意义不是说要所有人都需要,但是至少某个需求应该有一定数量的用户群,这样才有解决的价值。结合自己的日常观察以及生活经验,首先虑掉那些明显不典型的需求,而对于难以确认的,则在下一个『用户调研』的环节搜集信息。

举个例子,之前和朋友讨论一个功能,是开发一个 App,一键将整个手机系统和所安装的所有(或常用的)其他 App 都变为夜间模式,并且可以和正常模式进行切换。这个需求乍一听很新奇,因为阅读类产品都会设计夜间模式方便在黑暗环境下的阅读,所以是否需要一个手机整体大切换的产品呢?我个人认为这个需求并不真实存在的,首先我询问了身边喜欢看小说的朋友,他们大部分甚至不使用夜间模式来读信息,而是选择在有光的条件下阅读;其次,整体替换手机阅读模式会带来不确定性、权限问题、夜间模式匹配设计问题等一系列状况,因此这并不是一个好的选择。

(如果有朋友觉得这个想法不错,欢迎讨论)

第二,这个需求的技术难度和实现可能性。当一个需求有比较明显的用户群时,就可以从技术以及设计角度来进行分析,看是否能够实现。

举个例子,我早上上班经常要乘坐地铁,在早高峰是总是苦于如何快速找到座位。我相信这个需求很多人都有,选择站位和观察乘客都是一种技巧(写过一个知乎答案:地铁如何判断哪个位置的人会早下车?)。但是仔细考虑一下这个需求的解决方案:首先,乘客需要贡献自己的上下车地点(隐私问题,激励问题);其次,需要精确到某一个车厢甚至具体的某一个座位(定位精度问题、网络通畅问题);很快会发现,在一个信号时有时无、乘客摩肩接踵、隐私敏感的环境下,这个需求实现难度非常高。

用户调研

用户调研环节,我个人比较喜欢采取访谈的形式——事先准备好一些问题和我关心的要素,在网上聊天、面对面沟通、实际情景模拟等场景下,进行调研。调研的主要目的,一方面是确认需求的普遍程度,另一方面则是调查需求解决方案中的一些用户细节。比如 O2O 产品中的单价、社交产品中的兴趣点等等。

关于调查问卷,我之前针对不同的项目做过很多次调研,多的时候可以回收上千份有效答卷。设计调查问卷时应该注意,这种形式更适合整理数据性质的信息(价格、使用时间、用户分类占比等),而对于一些比较感性的问题不太容易得到准确的答案;另一方面,投放人群也需要提前针对你所要调研的信息做好设计。

核心页面绘制

前面几个环节,着重从用户需求分析等产品角度讨论。而从这一阶段开始,更多的涉及设计方面的工作。有的人在设计产品时会先绘制流程图和结构图,或者先画线框图来说明产品逻辑,最后再绘制界面。这个地方我的习惯和大家有些不一样,也不一定是正确的做法。

当开始进行设计时,我会首先根据之前脑补+调研的内容,绘制3-5页高视觉保真的界面图。这么做的第一个原因,是我想先确立产品的基调(颜色、布局等),更重要的是,我打算把最核心的功能先确定下来。

2775343270384814683

某产品的核心界面

直接绘制流程图会有一个小问题,就是不容易抓住重点,有的时候会陷在某一个细节里。《体验·度》中提到一个例子:

我们用百度新闻客户端来举例。在做新闻客户端的时候都会思考哪个信息是用户每天都想看到的,调研结果是『天气』,既然是天气我们是否要将天气做得更炫酷呢,甚至点击后显示一周的天气呢,如果你问用户,答案是肯定的;既然是如此绚丽的 UI,我们是不是要进行微博分享呢?用户依然认为是的;那么既然分享我们是否要增加查看评论功能呢?这时候你会发现我们讨论的点已经和新闻客户端完全无关了。

所以,先画几页核心页面,把最重要的功能确定下来,并且在后面的流程中时刻提醒自己,不要跑偏了。

流程图与结构图

一般不会在操作流程上百分百绘制流程图,而是针对需要着重设计的功能来绘制。下面的例子是一个O2O 外卖配送产品的泳道图(部分)

1177128352621800450

某产品泳道图

而结构图就需要把产品可能涉及到的每一个页面表达出来,这无论是在产品讨论还是开发沟通,甚至是用户调研阶段都是很有用的。注意,结构图主要表达的是层级关系,直接相关的就是产品的导航结构以及页面层次,可以使用颜色、树状图等进行区分和强调,而至于页面之间的跳转关系,则可以在交互设计中再着重表达。如下图,是某习惯养成产品的信息结构图:

6619349170770321046

某产品信息结构图

视觉设计

视觉设计阶段,根据前面定下来的基调确定 VI (视觉系统),根据信息结构图来明确导航结构(虽然大部分时间这属于交互设计的工作),最后把每一个页面的真实视觉设计稿绘制出来。

如果可以的话,最好使用可以投影到手机上的软件实时查看设计效果。比如 Sketch 的 mirror 功能,还有 Skala Preview 都是比较常用的软件。

视觉设计的另一个工作,就是切图和标注。把所使用的控件按照最小单元导出,并且单独复制一份视觉稿,在上面对形状大小、尺寸距离、字体和颜色等信息都进行标注,方便开发工程师的工作。注意,对于某些通用的控件,可以单独标注,就不需要重复标注了。

636977872313960489

某产品标注图

交互设计与文档补完

然后呢,我需要设计每一个页面的每一个状态所呈现的视觉。比如打卡类应用根据当天的打卡次数,打卡按钮会有不同的文案;比如输入框输入了不合理的信息,应当反馈给用户;比如信息呈现页面如果内容为空,需要增加文字或图片说明;再比如网络不通畅或者刷新、发送失败,又需要通知提醒。总之,在这个阶段,需要考虑很多用户使用上的细节,多用极限思考的方法模拟用户的极限操作,往往会有新的发现。

一般,我会使用视觉图+文字注释+引导线的方法来做交互设计。

6619086387491283836

某产品交互稿

完成了这些内容之后,如果有需要,还可以进行动效设计,使用一些原型设计软件可以呈现出比较好的真实模拟效果,用以用户实际测试或者项目演示。原型设计软件主要考量的是这样几个因素,不分先后,分别是上手难度、效果复杂度、可否进行代发复用等,这里我推荐几个软件:

Axure,是人都知道,就不细说了,操作简单,效果一流,比较适合制作相对完整的产品原型。但是,不能制作比较复杂的动态效果,另外原型设计工作导出文件为 html 格式,对于原生应用开发难以复用。

Quartz Composer,俗称 QC,结合 origami 插件能够降低使用难度,但是依然有陡峭的学习曲线。效果出众,几乎可以实现你想到的任何动态效果,并且使用 pop 引擎能够实现代码复用(仅iOS),值得注意的是,QC 比较适合去制作某一个特定的效果,而不适合描绘整体。还有一个类似的软件叫做 Form,被 google 收购后免费了,在手机上浏览效果不错,和 QC 非常类似。

Xcode storyboard,故事版,其实就是直接开发只有页面结构的 App 了,使用 Swift 语言大大降低了难度,不过因为需要开发和编程,总体还是有一定上手难度的。优点不用多说,效果好,代码无缝复用。

当然,真正的工作中也绝不仅仅只包含这些内容,还有很多细节、工具和文档都是根据实际情况来选择的。不知道大家一般怎么工作和练习呢,如果不介意的话,可以留言或者联系我一起交流,互相学习,一起进步。

本文由人人都是产品经理特约作者:@镇雷 发布,转载请注明来源并保留本文链接。

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 从用户调研直接跳到页面绘制?除非是功能特别直白单一的产品吧?

    回复
加载中