第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

自17年1月上线后,「小程序」一直是大家关注的一个重点方向。尤其是对于产品经理来说,大家都希望能够借助这个全新的生态给自己的产品带来一些新的活力。而经过两年的发展,小程序已经深入到我们生活和工作的方方面面,据阿拉丁发布的2019上半年小程序行业发展白皮书显示,截止今年6月,微信小程序已覆盖超过200个行业,平均日活用户已超2.5亿人,月活达到了6.2亿。

但即使我们对小程序已经这般熟悉,如果让你从头开始设计一款小程序,是不是还是会有些无从下手呢?它在产品层面和app到底有哪些不同?是不是有些功能实现不了?这篇文章总结了小程序在产品设计上的「优势」与「限制」,希望能够帮助大家更好地迈出设计小程序的“第一步”。

本文将从以下4个方面来聊聊我们在第一次设计小程序时需要了解的问题:
一、小程序与微信的亲密关系——那些App和H5做不到的事
二、带着镣铐跳舞——那些小程序的限制
三、设计心经——产品设计上的建议
四、传送门——这些资源你一定用得到

(ps:文末有一大波小程序原型资源分享给大家,方便大家在工作中使用。)

一、小程序与微信的亲密关系——那些App做不到的事 1、一键获取用户信息

在很多产品中,我们需要让用户登录或填写各类信息以便正常使用,比如手机号、姓名、送货地址等等,但在整个产品流程中每多一个环节就必然会导致一部分用户的流失。

而小程序在这方面有着得天独厚的优势,它不仅支持使用微信授权登录,还可以一键自动获取用户的各项信息,大大简化了流程,降低了用户流失率。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

《完整流程示例

2、自带多个「天赋技能」

作为微信的亲儿子,小程序在与微信的连接方面自然有着远超于app和H5的“天赋技能”。小到分享转发,大到客服、物流,小程序可以无缝衔接、自由应用微信为其提供的多项基础能力,开发者可以非常便捷地调用这些能力来为自己的产品赋能。

1)分享转发

由于根植于中国最大的社交平台微信,小程序天生拥有强大的社交属性,其分享转发功能是非常自然而顺畅的。小程序不仅支持分享到好友和群,还可以获取点击该卡片的好友信息和群ID;同时,小程序分享的也不再是静态链接,而是自带动态数据的信息卡片,不用打开就能看到重要信息。

小程序强大的分享功能让许多开发者自己的产品赋予了「社交」能力,在微信巨大的用户流量中分了一杯羹。比如电商小程序的拼团活动、订票小程序的好友助力机制和早起打卡的群排名等。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

2)客服消息

微信为小程序提供了内置的客服能力,让每个开发者可以轻松拥有自己的客服通道。小程序的「客服消息」不仅支持设置关键词自动回复,也可以连接客服人员进行人工回复。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

3)模板消息

用户在小程序内完成支付行为或提交表单后,我们可以向用户发送对应的模板消息,来提供更长效的服务,并实现业务闭环。这些消息会统一在微信的「服务通知」里进行推送。1次支付行为可以允许在7日内发送3条模板消息,1次提交表单行为允许在7日内发送1条模板消息。

比如电商类小程序,支付成功后可以分别通知用户下单成功、已发货和已签收等,能够让消息多次触达用户,也让用户能够直接通过服务通知再次回流到小程序中。

如下图所示,在「喜茶GO」小程序下单成功后,用户会收到下单成功、取餐进度和取餐提醒3条消息。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

4)广告

是不是还在担心小程序变现的问题?除了自己的业务变现外,微信直接贴心地帮你准备好了3种广告形式,来帮助你解决变现问题。你可以在公众平台中申请成为流量主,就可以在自己的产品中开放以下广告位来“招商”啦。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

5)物流助手

「物流助手」是今年3月刚开放的新功能,旨在为零售、电商等各行业提供低门槛物流能力。微信已经帮你对接好了各物流公司,让你可以轻松高效地接入,并且你和用户都可以实时掌握物流轨迹。同时,物流进程中的揽件、即将派件、异常等关键物流状态,也会通过微信的服务通知直接发送给用户。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

6)一物一码

今年7月16号,微信全面放开了小程序的「一物一码」能力,从此以后每个商品都可以拥有一个自己的专属码。对于零售商来说,每一件商品都是小程序流量入口,是一个信息承载体。品牌方可以通过该能力将线下销售与线上服务更好地结合起来,将抽奖、验真伪等需求都引流到自己的小程序中进行。并且,以往线下销售很难获取到真实用户画像,但现在如果将其引入线上服务,能够帮助商家更深入地了解消费者。

7)卡券功能

小程序还支持卡券接口,可以轻松在小程序中领取、查看和使用公众号 AppId创建的会员卡、票、券。同时,在微信的卡包中可以直接使用这些卡券,也可以通过卡券直达小程序。这个能力对于线下商家来说非常有用。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

3、连接与互通

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播。它除了连接线上与线下,连接用户与服务,也需要在整个线上生态中做到相互连接。下面我们来看看它可以怎么连接其它产品形态、又是如何被连接的。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

1)关联其他小程序

小程序之间可以互相跳转,不需要任何关联或绑定。但是有两个要点需要注意一下,一是需要用户主动触发跳转行为,二是跳转的小程序数量不能超过10个。

2)公众号和小程序相互关联

很多公司已经利用公众号和小程序形成了自己的新媒体矩阵。公众号的底部导航、文章中的图片、文字等均可链接小程序,公众号和小程序各司其职,公众号负责内容引流和推送曝光,而小程序则是为用户提供更专业和深入的服务。

同时,小程序也可以关联公众号,除了顶部菜单外,还支持扫码后在页面上显示「公众号关注组件」。可以让用户使用优秀的线下服务后,一键关注公众号,持续对品牌进行关注。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

3)App和小程序相互跳转

小程序不仅做到了微信生态内部的连通,还与app有着密切的“来往关系”。App内支持直接点击跳转至微信小程序的某一指定页面,用户也可以通过点击App分享出去的小程序卡片来唤醒App。

4、入口众多,场景丰富

小程序的入口多达70多个,可以称作是”处处是入口“,真正的做到了去中心化,大大减轻了头部效应对于市场中的年轻产品的限制。同时,小程序可以根据不同的场景参数判断用户进入小程序的场景入口,我们可以结合这些场景来提供不同的、最贴近用户需求的服务。

二、带着镣铐跳舞——那些小程序不能做的事 1、禁止虚拟支付

iOS 的小程序中不支持虚拟商品支付,如内容付费、工具服务类等,这些商品不允许展示购买、支付的按钮和页面,也不支持引导至外部网页、APP实现支付。

2、不可全屏

小程序在任何情况下都不能实现全屏效果,右上角的工具栏无法隐藏,包括webview(网页组件)。

第一次做小程序?看这一篇就够了!(产品设计篇)uimaker

3、不可长按识别普通二维码

小程序中的图片组件不支持长按识别二维码和小程序码。在自带的图片预览模式下,虽支持长按识别小程序码,但仍然不支持识别普通二维码。

4、不支持监听分享成功或失败

为了防止滥用分享信息带给微信用户的干扰,微信取消了小程序对于分享成功或失败的监听反馈,也无法获取到是分享给群还是好友。所以在功能设计中需要避免涉及到用户分享状态的监听,比如通过判断用户是否分享成功从而奖励积分等。

5、不可进入即触发授权弹层

自2019年9月1日起,不再允许小程序打开后立即跳转登录页或弹出授权弹窗,不得强迫用户在充分浏览并了解小程序之前就提供授权。(一些特殊的小程序除外,比如必须登录才能提供服务的小程序——校园系统、员工系统、社保信息系统等)

6、页面层级不能超过10层

当进入的页面层级超过10层以后,再点击就会无法跳转,所以我们在设计的时候需要尽量简化流程,避免页面层级过深。(在这里,10层并非代表10个不同的页面,而是用户实际点击进入的页面层级。)

7、不可分享到朋友圈

小程序不支持直接分享到朋友圈。如有分享到朋友圈的需求,则可以生成带有小程序码的图片并引导用户保存到本地后去朋友圈分享该图片。

三、设计心经——产品设计上的建议 1、轻量简洁

1)一个小程序只完成一个主任务

小程序作为一个轻快简洁的产品形态,“触手可及,用完即走”是小程序的最大特点,所以小程序需要的是以最短路径直切场景,给用户最直接最高效的服务。

传统app往往是个「巨无霸」,承载了多类服务,而小程序讲究的是「短平快」,所以每个小程序只需要专注于服务好一个场景。如果想要服务多个业务场景,则可以针对不同场景开发多个小程序。同时,小程序之间的跳转非常自然顺畅,所以我们完全可以利用多个小程序来形成自己的产品矩阵,让不同的小程序来满足不同的业务需求。

如下图所示,我们可以看到,墨迹天气、滴滴出行、麦当劳等几款产品都将自己的服务拆分开来形成了小程序产品矩阵,让每个小程序“术业有专攻”,专注服务好单个场景。

 收藏