本文将会分享关于 ToC 产品的设计思路,重点阐述在接到需求到原型设计前的方法论。

适用人群如下:
1)自己经常捣饬一些想法的程序员
2)需要直接对接开发的运营
3)初级产品经理作为产品经理或者经常需要兼任产品经理的你,是否有碰到过以下场景:

作为产品经理或者经常需要兼任产品经理的你,是否有碰到过以下场景:

  • 领导给了一个战略方向要求做某款产品,并要求在一个月内上线。你通过体验竞品,参照那些用得上的且领导喜欢的交互,最后做出了四不像。
    ——没有明确产品核心需求
  • 自己有个绝妙的想法,在纸上画了草图就开始敲代码,结果产品做完了用户不会用,甚至没人用。
    ——产品没有切中用户痛点,功能流程不简洁
  • 计划国庆前上线一个活动 H5,为了让活动更加有趣生动,中间加了很多酷炫交互,结果在国庆假期前一个晚上还在拼命赶工。
    ——没有明确各功能间的重要性排序

以上场景的出现基本是因为在产品设计中没有形成一套完备的流程,以为有想法或者有竞品,直接画画图或者直接复制粘贴就好了。

image.png

当然不排除有人是「霍金转世」,一个想法在大脑中形成,就打通了各流程逻辑和页面流转;但是一般人是无法在短时间内处理大量逻辑细节,一旦忽略了一些流程,就容易造成以上场景问题,不断返工,导致开发效率慢,甚至是成品质量不佳。

笔者将分享一些小思路,一句话概括如下:

图片

接下来以「在校大学生小明与他自己设计自己开发的小程序」为例,分步骤展开阐述。

step 1 :确定产品目的和目标

产品目的,是确定产品是为了解决什么问题或者满足什么核心需求而存在。

产品目标,是确定产品在一定阶段的边界,知道什么该做什么不该做。

有些人会说这些都是战略层的东西,公司或者甲方早就定义好了。没错,但是产品的目的和目标并不是一成不变,微信从一开始的社交通信工具到现在的连接一切,产品的边界是在拓展的。而产品设计要做的是产品的不同阶段反复确认并在产品设计全过程中落实。

小明打算开发一款同校社交工具。

  • 为什么要做这样一款产品?

    • 在安全范围内认识更多的人?结识跟自己同样兴趣爱好的人?更容易组织活动?
  • 做这个东西想要是想实现什么目标?

    • 打造学校内部社区?脱单?

具体产品目的和目标并不重要,重要是在产品设计过程中还原这个核心需求,并且不跑偏。

step 2 :理解并收集需求

一般需求有两种类型,第一种是甲方已经给好了具体的需求,第二种是给到简单的产品目标要求提供完整的解决方案。

第一种是自己基于具体的场景和 step 1 的产品目标,用自己的话再描述一遍需求场景并确认好需求的范围;第二种可以收集下市面同类问题的解决方案以及目标用户的需求,这时候的需求范围是比较大的,然后再根据 step 1 中的产品目的和目标,跟需求方再次确认,并将需求范围缩小。

小明有自己的产品目标,但需求不明确,需要收集用户需求以完善自己的想法,因此他向身边的同学说明了自己的需求:

  • 我打算做一个同校社交小程序,学校同学可以上传自己的信息和分享自己的兴趣和生活。
  • 可以选择自己想认识的人的要求。
  • 可以查看/系统推送拥有相同点的同学的分享。
  • 活点地图功能可以看到一定区域内有多少人在使用这款小程序,你交流过同学也要在上面显示。

同时收集了同校好友的想法:

  • 一定要是同校吗?学校男多女少,会不会变成大型 BL 社会主义兄弟情现场?
  • 知道人在学校哪个位置会不会泄漏隐私?
  • 不要上传照片,不想给熟人知道。
  • 一定要上传照片,要是聊的人就是你上铺的兄弟怎么办?

之后对所有需求进行分类汇总和统计,确定初级版本的功能需求。

step 3 :需求流程化功能化

同样一个需求可以对应着多种解决方案,不同解决方案对应着不同功能,确定好具体的功能模块后,再确定用户的主路径,再拆分细分路径。

功能化:一个需求对应哪些功能?

image.png

流程化:有什么角色?分别先做什么?再做什么?

  • 角色:一般用户
  • 第一步:登录
  • 第二步:选择想认识的人要求
  • 第三步:上传个人信息
  • 第四步:分享日常/查看其他人日常

这里容易出现细分流程或异常流程错漏的情况,拆分流程是一个需要系统学习并且反复练习的过程,有需要的小伙伴可以查看 《用户体验要素》 / 《UML 大战需求分析》 等相关书籍。

step 4 :排序

对着 step 1 的答案,对 step 3 的功能和流程进行排序,按重要性由高到低进行排列。 排序有两个作用,一个是确定这个产品的 MVP ,一个是为后期资源短缺做好准备。

image.png

step 5 :画出草图和页面跳转

根据上述功能模块在纸上画出草图以及对应页面跳转关系。草图仅需画出大致框架,确定功能模块对应的页面,然后是页面的结构、导航、功能板块等。

step 6 :画出原型图

终于可以摆脱白纸,搬出原型软件了,包含但不限于 axure、墨刀、Visio、画图软件等工具。在草图基础上,形成原型,勾勒出细节部分以及交互效果。

例如:标题应该显示为几行?一行的图标应该显示为 3 个还是 4 个?这里应该是跳转新页面还是弹窗?

这个时候一般就是大型选择恐惧症现场,不同的方案适合不同的产品,怎么判断哪种方案适合自己的产品?那么可结合 step 1 的答案,例如受众是老年人,默认字体可能就要比一般的大;还有有「行业规则」,小到标题和正文的标准字号,大到资讯信息流图片和标题的摆放位置,这是另外的文章的内容了,感兴趣的可以评论留言,以后再开坑。

产品设计好了,再找设计师美化页面,此时离成功就只是一段代码的距离了。

图片

假如你没有设计师,那么通过 UI Libraries、墨刀等设计工具,也能做出一个界面好看的产品。而此时考验你的是审美能力,如何提高审美能力?答案是:多看,多看,多看。

假如你是一名前端开发者,那么可能会遇到技术选型、域名备案、服务器搭建等一系列繁琐的后端开发工作。但这些问题也有工具帮你搞定,即近几年备受关注和使用的 serverless 后端云服务。

serverless 后端云旨在搞定开发中「造轮子」的事情,让开发者可以专注于业务逻辑,使得开发难度更低、成本更低。

同样以同校社交工具为例,你可以通过知晓云数据库来搭建用户体系;实现「日常」模块中 UGC 内容的增删查改;实现校园资讯的发布与管理。同时你还可以通过实时数据库(基于 WebSocket 的功能)来搭建一个实时聊天室,方便用户在线上交流与交友。而且这些产品你只需几行代码就能接入使用,方便又快捷。

图片

至此,你是否觉得你脑袋中的创意可以轻松落地,那就速速行动起来吧,点此注册知晓云账号,还能领取 90 元开发基金。

图片

由于本文重点是分享产品设计思路,以便提高后续的开发效率,如何通过代码来实现文中案例的功能,我们就不在此分享。如果你有兴趣,请点赞文章告诉我们,赞得越多,我们就越早安排知晓云前端开发工程师输出开发教程。


知晓云
705 声望1.6k 粉丝