从产品角度,看小程序的设计(附小程序资源)

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词
带你了解“后APP”时代。近一年利用业余时间,帮朋友设计了一款小程序,大大小小的迭代也有10多个了,今天就来聊聊关于小程序的设计思考。

引用微信之父张小龙的观点:

“小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。也体现了“服务用户、不打扰用户、用完即走”的产品理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。”

一.小程序和APP在设计上的本质区别是什么?

大家在使用小程序和APP的时候,可能觉得并没有什么不一样,反正都是手机端,实际上有很多本质上的区别,主要有以下11个方面:

1.获取渠道

APP:必须通过应用商店(如 App Store)里下载

小程序:通过微信(扫描二维码、搜索…)直接获得

2.下载安装

APP:安装在手机内存中,就像自己买了辆车放在车库里随时开

小程序:不需要安装,就像免费用嘀嘀打车,召之即来 用完拜拜

3.占用空间

APP:一直存在手机中会占用空间,太多的APP可能会导致内存不足,总是清理缓存

小程序: 因为不需要安装,占用内存空间忽略不计

4.广告推送

APP:会隔三差五给用户推送广告,太多未读提示会逼死强迫症

小程序:不允许主动给用户发送广告,仅能回复模版消息

5.市场机会

APP:市场已接近饱和,几乎所有的领域都已经被覆盖

小程序:是一片蓝海,在新的使用场景下有很多瓜分蛋糕的好机会,尤其是线上+线下的模式

6.适配

APP:需要适配市场上很多款的主流手机,开发成本大

小程序:一次开发就可以自动适配所有手机

7.开发周期

APP:一款完善的双平台APP平均的开发周期约3个月

小程序:平均开发周期约2周,仅为APP的六分之一

8.发布

APP:需要向十几个应用商店提交审核,且每个应用商店要求的资料都不一样,非常繁琐

小程序:只需要提交到微信公众平台审核,审核周期短

9.用户群

APP:面向所有智能手机用户,截止2018年,约13亿人次

小程序:面向所有微信用户,截止2019年,月活10.82亿

10.功能

APP:可以实现完整功能

小程序:仅限微信提供的接口功能

11.推广难度

APP:需要用户主动下载十几M的程序包,在没有Wi-Fi的情况下推广艰难

小程序:可以通过二维码、微信搜索等方式直接获得,推广难度大大降低

二.小程序的价值体现 轻量

让用户便捷、迅速、简单、高效的获取服务,无需下载/安装/卸载、无需注册、用完既走:一是用户使用没有心里负担,二是省了APP下载的漏斗转化过程,要知道一个产品从广告展示→到下载安装→到注册激活的漏斗路径,很多时候是惨不忍睹的。同时小程序具有出色的使用体验,页面加载速度比H5页面会更快,获取用户成本相对较低;

社交

必须和微信生态融入,那就必须考虑到微信的生态基因,这是最核心的价值,比如:你在小程序里玩游戏 ,你会想让朋友家人知道你有多厉害,所以小程序比APP更容易让周围的人参与进来,这个流程可以触发更多的可能;

主动

小程序本身不是为了哗众取宠,必须对用户有切实的价值,能够让用户在有需要时主动进入,主动唤醒。所以很多小程序在设计的时候,都通过一些界面内的引导手段,抢占“我的小程序”的黄金位置,就是为了培养用户的主动;

引流

对于第三方来说,微信必须是重要的流量入口(月活用户10亿左右),在微信允许的范围内,用可能的手段获取用户流量,是我们需要着重考虑的;

数据

即便没有引流成功,至少可以获取用户数据,支持自有产品开展业务。比如小程序登录时需要微信授权,有的还需要手机验证码等等;

生态

结合微信自身的生态系统,小程序可以和公众号、订阅号相互依托,引入种子用户,并且在微信好友和朋友圈的传播中,不会有割裂感。

三.小程序有哪些玩法 1. 小程序+公众号

随着公众号体系和小程序体系互通,更多场景可以直接触达小程序。如“豆芽作文公众号”关联了“豆芽作文小程序”,并在公众号内部的主入口强推,为其引流。

Image title

2. 小程序+小程序

小程序轻量化的产品形态体现在灵活、快捷的使用中,因此当有功能桥接时,可选择关联其他小程序。

例如“豆芽作文”的“爱学习”模块就关联了其他3个功能入口,为同类产品提供不同服务的小程序给予跳转支持。

Image title

微信小程序团队有这样的设计理念:每个小程序最好只专注一个服务场景。

因为这样才能“用完即走”。才能让用户在小程序的体验过程中,不会觉得层级过深、流程过长,避免出现小程序和微信聊天交替使用,因为小程序的复杂而带来糟糕体验。但是很多公司又有多个业务场景,如果按做APP的思路做小程序,自然是会做出一个多层级/多功能的小程序。

于是,微信小程序团队期望的结果是:多个业务场景多个小程序来实现,允许小程序间跳转,来实现“公司层多业务,产品层多小程序”的愿景。

3. 小程序+二维码 (线上+线下)

线上线下的结合更常见,比如进入餐厅点餐时,扫描二维码进入小程序,直接点餐,不用排队,也不用下载APP或关注公众号,对用户来说极为便利。同时可以利用登录授权,获取用户的信息

Image title

四.小程序基础知识汇总 1.场景入口

微信官方为小程序提供了69个场景入口,便于小程序在更多的场景下被用户触达,作为产品经理也要充分利用各种场景,增加小程序被触达的机会,同时可以结合这些场景,增加小程序运营的曝光率。

Image title

依托于微信场景的小程序增长六大入口:聊天窗口分享、APP分享、“搜一搜”、“扫一扫”、首页下拉窗口、公众号。

2.有哪些开放接口?

除了扩大小程序的线上入口,小程序还提供了很多开放接口,帮助开发者更快速地实现一些功能。

Image title

3.模板消息

小程序的模版消息相当于APP中的消息推送。微信公众平台为小程序的“消息推送”设了很多规则:

(1)需要用户行为来触发,不管用户在何种场景下触发,单次触发最多可带来一条消息,且最多可以连续七天发送;

(2)所有的消息都要在微信公众平台提供的消息模版中选择,不能自定义模板。当然这也很符合微信一贯的特性,不能“流氓式”的打扰用户。

4.小程序数据助手

数据分析对于产品的运营至关重要,小程序主不仅可以在微信公众平台的后台看到小程序的数据,也可以在微信搜索“小程序助手”,在手机端随时查看小程序的数据变化。

5.小程序不可随意跳出

小程序依附于微信生态,不可以像传统APP一样实现随意跳转。

如果希望小程序跳转小程序,那么可以在代码配置中进行声明,跳转的小程序数量是有限的,目前是10个。

还有一种解决小程序外跳和在小程序扫码的操作是通过客服消息,小程序主可以通过给小程序添加客服消息,让用户回复指定内容,可以给用户发送文章链接,实现跳转和扫码。

6.小程序有特定的开发框架

各大平台都有自己的小程序开发框架,技术可以学习这种新的框架,一般上手也较快;当然也有别的解决方案,技术可以使用一些转码框架,例如京东的taro和去哪儿的nanachi。

7.适配问题

小程序毕竟是一个新技术,因此适配也有一定的局限性。官方有提供标准的顶部导航和底部导航的方案,使用起来一般没什么问题,但如果希望根据自己的产品特性对顶部导航和底部导航进行一些个性化调整,就要小心适配问题了。

有些产品的做法就比较取巧,这里举个“知乎热榜”的例子:本身小程序顶部栏是不可以做个性化设计的,但“知乎热榜”为了给内容区更多曝光的空间(毕竟移动端寸土寸金嘛),将顶部栏的icon按钮做成了搜索框的样式,点击进入到搜索页面,这样做既避开了小程序的局限性,也不影响正常的搜索流程(本身搜索也需要跳到新页面),同时也符合用户的使用认知。

Image title

五.设计规则

微信小程序的设计指南提供了很多页面的设计规则,可以帮助产品经理和交互设计师更好的设计页面。在设计小程序时建议认真看一看,文档中的内容不仅仅适用于设计小程序,对于APP的页面设计也可复用。

Image title

除了对产品的设计要求,为了让小程序和微信的视觉统一,小程序制定了UI设计规范,在设计UI时需要严格遵守规则,否则无法上线。

Image title

虽然小程序为了让服务完善,正在逐步开放更多功能,但是现在小程序代码包要限制在2M以内,所以在设计小程序时,功能一定要尽量简单。

文章最后会把“小程序设计指南”和“UI设计基础控件库”的地址和源文件分享给大家,供大家下载,见附件。

六.小程序如何影响我们的生活 1.对普通用户

(1)首先是卸载低频APP

对于像旅游、租房等低频使用的APP(所以这类APP为什么要做社区和社交),普通用户可能更倾向于卸掉本地APP而选择小程序来使用,这能够节省一部分手机空间,同时也不用考虑更新迭代。最重要的是可以获得更“短、平、快”的服务路径,减少不必要的时间消耗,扩大自己的有效时间。小程序希望为普通用户提供这样的服务路径:用户到达服务目的的环节越少越好,缩短用户使用路径,通过这样的方式让越来越多用户更好地留在小程序或是微信构造的生态链里。

(2)微信变成巨无霸应用,用户停留时间更长:通讯(IM)+社交+工具和服务

用户把省下来的一部分空间,留给微信使用。原本已经很长的使用时间因为所提供的工具和服务的多元化而变得更长。小程序涵盖的服务类别非常多,可见微信在起初设计的时候就想建立更大的生态圈。

2.对行业应用和服务提供者

(1)体验不佳的服务号会快速转移阵地

(2)给本地生活和电商的应用带来便利

 收藏