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


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

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


本文将从以下4个方面来聊聊我们在第一次设计小程序时需要了解的问题:

一、小程序与微信的亲密关系——那些App和H5做不到的事

二、带着镣铐跳舞——那些小程序的限制

三、设计心经——产品设计上的建议

四、传送门——这些资源你一定用得到


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


一、小程序与微信的亲密关系——那些App做不到的事


1、一键获取用户信息

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

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

详细流程图请看这里(请在web端访问)


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

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


分享转发

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

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


客服消息

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


模板消息

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

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

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


广告

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


物流助手

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


一物一码

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


卡券功能

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


3、连接与互通

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


关联其他小程序

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


公众号和小程序相互关联

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

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


App和小程序相互跳转

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


4、入口众多,场景丰富

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



二、带着镣铐跳舞——那些小程序不能做的事


1、禁止虚拟支付

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


2、不可全屏

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


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

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


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

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


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

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


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

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


7、不可分享到朋友圈

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



三、设计心经——产品设计上的建议


1、轻量简洁

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

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

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

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


页面简洁、重点突出

除了服务和流程精简外,我们在设计小程序时,每个页面也尽量清晰简洁、有明确的重点,让用户能够快速理解页面内容,顺畅地进入任务流程。


2、充分结合微信的特性

社交化,促进分享

社交,是我们很多开发者想尽各种办法想要赋予自己产品的能力,但却往往求而不得。而微信作为国内最大的社交平台,其生态下的小程序天生自带「社交属性」,拥有很强的社交基础和分享能力。

所以,我们在设计小程序时,一定要好好利用小程序的分享能力和微信巨大的社交流量来为自己的产品赋能,在自己的产品中加入一些社交玩法,促进用户进行分享。比如星巴克的赠卡玩法、高铁管家的好友加速活动、墨迹天气的早起好友排名以及名片小程序的“递名片”等等,都是利用分享达到了很好的裂变传播效果,也给产品带来了新的活力。


找出产品中与微信生态最贴合的功能重新设计

小程序和原有产品并不是简单的替代和复制关系,他们可以各司其职,比如App可以用于沉淀用户、给用户提供更深入的服务,而小程序可以作为一个引流入口。

所以我们可以找出产品中与微信生态最贴合的功能重新设计,利用小程序来扩大产品的服务边界。比如知乎热榜,是将知乎中最适合小程序资讯阅读的热榜部分单独拎了出来。而腾讯相册和石墨文字识别则是将原有产品中的一个小功能结合小程序的特点和场景重新设计,让他们更加符合小程序用户用完即走的使用场景,也可以为自己的主服务引流。


结合微信特性做延伸服务

还有很多产品在布局小程序时,都是结合小程序的特点做了延伸服务,而不是将原有功能搬运到这里。比如礼物说、石墨任务清单和家乐福的扫码购等等,原本他们的产品中并没有这些服务,但是结合自己的产品能力和小程序的生态环境,他们开辟了这样一种新的服务能力。

比如礼物说,原有平台是主打精选礼物的移动电商;而在小程序里,礼物说没有将原有的玩法照搬过来,而是做了一个「像发红包一样送礼物」的服务,巧妙地将自己的业务和微信的生态结合了起来。


3、多利用小程序的开放能力

从第一章节我们可以看到,小程序目前已经拥有了非常多的「基础能力」,如客服通道、模板消息、物流助手、一物一码等等,与此同时,微信还在不断赋予它新的能力。建议大家在自己的产品中多利用这些开放能力来为自己的产品服务。



四、传送门——这些资源你一定用得到


1、原型资源

其中包含了2019微信最新版的原型资源

145+ 常用组件

40+ 典型页面

10+ 常用小程序流程

20+多行业完整小程序模板


下载链接(请在web端访问):

小程序原型资源


2、必备官方小程序

以下4个小程序均是由微信官方出品,用于帮助设计者和开发者更方便地管理小程序。


3、官方文档

《微信官方文档·小程序》


4、设计师干货

以下两篇是对小程序视觉设计总结的很好的文章,如果你的设计师和你一样也是第一次做小程序,可以分享给他哟!~

《参与多个项目后,我总结了这份可能是网上最全的小程序设计规范》

《做小程序设计,不得不说的7个坑》



写在最后

小程序作为微信生态中的一个重要产品形态,它有着“连接一切”的使命,但也有着自己的优势和限制。我们只有充分了解它,才能更好地融入这个生态,打造出与微信和自己的业务更加契合的好产品。

谢谢各位的耐心阅读,大家对此什么见解或者想法欢迎留言交流讨论。



往期文章

四大维度,全方位剖析APP「分享功能」

App搜索功能探析(附原型模板)

8种引导方式,7个设计要点,让你全面了解新手引导!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343