恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
第一次做小程序?看这一篇就够了!(产品设计篇)
0.0°
2019-08-14 原创文章 教程 举报 4368 51 17 0

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

 

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


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

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

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

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

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


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



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


1、一键获取用户信息


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

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

Image title

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




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


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


分享转发


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

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


Image title




客服消息


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


Image title




模板消息


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

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

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


Image title




广告


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


Image title




物流助手


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


Image title




一物一码


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




卡券功能


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


Image title




3、连接与互通


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


Image title




关联其他小程序


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

 



公众号和小程序相互关联


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

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


Image title




App和小程序相互跳转


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




4、入口众多,场景丰富


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




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


1、禁止虚拟支付


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

 



2、不可全屏


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


Image title




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


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




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


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




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


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



 

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


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

 



7、不可分享到朋友圈


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




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


1、轻量简洁


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


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

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

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


Image title




页面简洁、重点突出


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




2、充分结合微信的特性


社交化,促进分享


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

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


Image title




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


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

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


Image title




结合微信特性做延伸服务


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

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


Image title




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


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




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


1、原型资源


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

  • 145+ 常用组件
  • 40+ 典型页面
  • 10+ 常用小程序流程
  • 20+ 多行业完整小程序模板


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

小程序原型资源




2、必备官方小程序


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


Image title



3、官方文档


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




写在最后


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

 

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




往期文章


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

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

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



更新:2019-08-14

收藏

51人已收藏

xiaopiu

xiaopiu.com - 优雅高效的在线原型设计平台

  • 106

    作品

  • 1622

    粉丝

  • 1

    关注

  • 无缝切换工具,「Sketch 适配模式」开启快速上手新体验!
  • 高效评审 : 和团队一起在设计稿上「打点讨论」!
  • 「即时设计」又双叒叕更新啦!「团队版」让你协作、管理更轻松!
  • 「即时设计」更新啦!飞速迭代,5 大功能同时上线!

    猜你喜欢

      2019-08-14 原创文章 教程 举报 4368 51 17 0

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

      0.0°

      你确定要举报第一次做小程序?看这一篇就够了!(产品设计篇)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年08月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      51
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录