小程序入口
目前,微信的小程序已经提供了60多种连接方式,这些入口主要可以分为线上和线下两种方式;从线上来说,主要有公众号关联、微信下拉历史、分享、搜索、App跳转等场景,从线下来说,主要有扫码、附近小程序等场景;
交互控件
导航栏
当小程序页面内容单一时,可选择“无导航栏”布局,从上到下平铺直叙,浏览最为直观和方便;
使用底部导航栏,用于架构内容差异性较大的功能模块,底部标签栏建议数量2-4个;
当需要平行架构不同维度的内容时,引入顶部导航栏,方便用户在不同内容分类中滑动浏览;
当小程序功能和层级较多时,可使用“顶部导航栏+底部导航栏”结构,用底部导航栏架构一级导航,顶部导航栏承载二级内容分类。
TAB切换
通过颜色区分选中、未选中状态;
通过加粗字体才区分选中、未选中状态;
根据产品特点设计独特的TAB切换样式;
筛选
下拉菜单形式筛选,筛选项较少时可使用;
当小程序涉及分类类目较多且不同类目间内容关联度较小时,如生活服务类、政务服务类小程序,可使用图标+文字的形式区分不同筛选项;
当筛选省市等条件时,筛选项较为固定且内容多,可跳转至新页面进行选择。
搜索框
搜索框置于顶部,提示用户可输入内容,符合用户操作习惯;
隐去搜索框,仅保留一个搜索图标,放在TAB切换栏的右侧,在搜索功能较为弱化的页面使用;
搜索框置于顶部banner中间,突出搜索功能。
用户点击搜索框,跳转页面进行搜索,保证用户在进行搜索操作时,不会被过多的干扰项打断;
增加热搜词推荐,引导用户进行操作,减少用户操作成本。
按钮
当一个页面存在多个按钮时,突出重点的操作功能,弱化次要的功能,引导用户优先注意重要操作,降低用户选择和思考的成本;
处于加载中或前置任务未完成时,按钮不可点击。
加载
开发者可以参考图中样式,使用标题栏提示加载小程序页面内容的过程;
在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发;
模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载;
告知用户具体加载的位置形状,减轻用户焦虑情绪。
页面布局
生活服务类
得益于小程序无需安装、用完即走的特性,生活服务类小程序在用户的使用场景中占据着非常大的比重;交通出行、线下消费、实用工具等都是生活服务类小程序的常见使用场景,生活服务类的小程序大大提高了即时消费场景的体验和效率。
怪兽充电小程序是一款共享充电宝小程序,结合线下硬件设施,让用户在多种场景下都可以续电;
充电小程序功能服务较为单一,进入小程序需授权获取用户当前地理位置信息,首页通过地图组件展示附近租赁点,底部导航栏共三个按钮:扫码充电,附近门店,个人中心;其中着重突出“扫码充电”按钮,也可点击进入附近门店页和个人中心;首页顶部导航栏仅用于广告展示,无意义;
怪兽充电小程序的特点是整体较为轻量,用户即用即走,缺点是广告较多。
美团外卖小程序与其原生APP主页面、流程几乎一致,且数据相通,整体小程序体验流畅,用户使用起来比较熟悉;
在导航和分类方面,该小程序嵌有两层筛选。第一层主要是依据美食种类进行分类,第二层分为综合排序、筛选、好评、销量及距离,帮助用户细分美食种类并根据用户最为关注的条件按照一定次序迅速列出最贴合用户需求的商品;
选择餐品页面共分为点餐、评价和商家信息三个模块;美团小程序在选择菜品的交互上,分为左右两侧页面,左侧上下滑动选择类目,右侧添加美食至购物车。
政务服务类
政务服务类小程序主要提供在线查询、缴费、申领证件、投诉建议等政务相关服务,大多服务都涉及用户个人信息,需进行用户身份的核验;政务服务类小程序的全国性、跨区域、跨部门等特点大大提高了用户的业务办理效率。
国务院客户端小程序是国务院发布政务信息和提供在线服务的新媒体平台,小程序首页根据不同功能分为留言、服务、政策文件库、疫情专区等模块;
微信授权后,用户还需进行登录,可选择人脸识别或身份证好和姓名验证的方式,登录成功后才能正常使用各项服务功能;
该小程序覆盖的功能类型较多,首页的展示选择了从上至下平铺的方式,区分各功能模块,点击进入不同模块后,再根据该模块的特点选择不同展示形式;例如,政策文件模块的展示类似资讯列表,投诉与建议模块采用输入表单的形式,便民服务模块又区分了个人证件和常用服务的入口;
该小程序的缺点是层级较多,分类复杂,切换模块时无法快速回到首页。
“移民局”小程序主要提供出入境申办、查询等相关功能,该小程序首页简介明了,共三个服务入口:业务办理、证件查询、出入境信息一键通;
办理相关业务或查询证据都需要用户进行实名认证;
该小程序涉及的功能类型较为单一,在整体的展示上选择了底部导航栏的T型布局,服务入口采用从上至下平铺直叙的方式;交互方式主要为表单填写和查询两种。
资讯类
用户使用此类小程序浏览资讯,主要以各类新闻、科技资讯等为主;订阅的公众号推送小程序是用户浏览资讯类小程序的主要场景,此外,该类小程序也可替代不常用的资讯类APP;多数用户每周会多次浏览该类小程序。
腾讯新闻小程序采用了“顶部导航栏+底部导航栏”的结构,底部导航栏区分首页、快讯和个人中心;
首页推荐模块展示精选内容及精选专题,精选专题可滑动查看、选择;快讯模块通过顶部导航栏区分不同类目新闻,以时间轴的形式进行展示;详情页底部导航可进行一下操作:发表评论,查看评论,分享给好友,分享至朋友圈;
该小程序非常注重内容的分享, 不论首页、时间轴、详情页,每条内容都会对应评论与分享按钮,引导用户进行交互。
知乎热榜小程序采用了“顶部导航栏+底部导航栏”的结构,底部导航栏区分内容页和个人中心;内容页通过顶部二级导航栏区分不同分类;
该小程序在“推荐”页面加入了“推荐小程序”一栏,用户可点击直接跳转对应知乎系小程序;
内容列表展示内容标题、封面图、内容详情三个字段,热榜内容增加展示热度值;内容详情页默认正文内容缩起,用户一进入详情页即可看到对应回复,可通过按钮切换热门回复/最新回复。
游戏类
不同于手游、端游,休闲娱乐类、益智类、棋牌类、飞行射击类等微信小游戏都不同程度受到用户的喜爱,玩法简单易上手、中毒性强的微信小游戏是用户空闲时间消遣的一大选择。
该小游戏的玩法很简单,首页只有三个按钮:开始游戏、多人游戏、排行榜,设计上着重突出开始按钮;用户依靠操作小人蓄力跳跃进行游玩,根据跳到的格子类型及连续跳跃的长度来积分 。玩家最终的得分会被列入微信好友的排行榜,排行榜按照降序排列。
动物餐厅小游戏的核心玩法非常简单,玩家只需通过不断点击招募按钮来招募动物,动物进入餐厅吃饭、付钱。玩家通过奖励的小鱼干,可以解锁动物餐厅里面的一些餐厅设施,不断的装潢自己的餐厅,来达到提升星级的目的;
动物餐厅是一个在线有交互、离线有收益的挂机游戏,这样的游戏具有一定的长尾效应,就是一旦留下来的用户,他们一定会在很长一段时间内持续不断的玩这个游戏。
其他细节
全面屏适配
注意顶部操作区与底部操作区的适配,适配不当不仅会影响美观,还会导致用户点击无效。
交互流程顺畅
尊重用户的使用习惯。在用户完成任务的流程中,采用“从哪来,回哪去”的导航路径;避免使用障碍,尽量缩短用户步长,不过多跳转无用页面,降低用户操作成本。