小程序设计调研

小程序入口

目前,微信的小程序已经提供了60多种连接方式,这些入口主要可以分为线上和线下两种方式;从线上来说,主要有公众号关联、微信下拉历史、分享、搜索、App跳转等场景,从线下来说,主要有扫码、附近小程序等场景;

小程序入口

交互控件

导航栏

导航栏布局

当小程序页面内容单一时,可选择“无导航栏”布局,从上到下平铺直叙,浏览最为直观和方便;

使用底部导航栏,用于架构内容差异性较大的功能模块,底部标签栏建议数量2-4个;

当需要平行架构不同维度的内容时,引入顶部导航栏,方便用户在不同内容分类中滑动浏览;

当小程序功能和层级较多时,可使用“顶部导航栏+底部导航栏”结构,用底部导航栏架构一级导航,顶部导航栏承载二级内容分类。

TAB切换

TAB切换几种常见的表现形式

通过颜色区分选中、未选中状态;

通过加粗字体才区分选中、未选中状态;

根据产品特点设计独特的TAB切换样式;

筛选

筛选几种常见的表现形式

下拉菜单形式筛选,筛选项较少时可使用;

当小程序涉及分类类目较多且不同类目间内容关联度较小时,如生活服务类、政务服务类小程序,可使用图标+文字的形式区分不同筛选项;

当筛选省市等条件时,筛选项较为固定且内容多,可跳转至新页面进行选择。

搜索框

搜索框几种常见的表现形式

搜索框置于顶部,提示用户可输入内容,符合用户操作习惯;

隐去搜索框,仅保留一个搜索图标,放在TAB切换栏的右侧,在搜索功能较为弱化的页面使用;

搜索框置于顶部banner中间,突出搜索功能

搜索页面

用户点击搜索框,跳转页面进行搜索,保证用户在进行搜索操作时,不会被过多的干扰项打断;

增加热搜词推荐,引导用户进行操作,减少用户操作成本。

按钮

按钮示意

当一个页面存在多个按钮时,突出重点的操作功能,弱化次要的功能,引导用户优先注意重要操作,降低用户选择和思考的成本;

处于加载中或前置任务未完成时,按钮不可点击。

加载

全局加载反馈

开发者可以参考图中样式,使用标题栏提示加载小程序页面内容的过程;

页面下拉刷新加载

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发;

模态加载

模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载;

常见加载样式

告知用户具体加载的位置形状,减轻用户焦虑情绪。

页面布局

生活服务类

得益于小程序无需安装、用完即走的特性,生活服务类小程序在用户的使用场景中占据着非常大的比重;交通出行、线下消费、实用工具等都是生活服务类小程序的常见使用场景,生活服务类的小程序大大提高了即时消费场景的体验和效率。

“怪兽充电”小程序

怪兽充电小程序是一款共享充电宝小程序,结合线下硬件设施,让用户在多种场景下都可以续电;

充电小程序功能服务较为单一,进入小程序需授权获取用户当前地理位置信息,首页通过地图组件展示附近租赁点,底部导航栏共三个按钮:扫码充电,附近门店,个人中心;其中着重突出“扫码充电”按钮,也可点击进入附近门店页和个人中心;首页顶部导航栏仅用于广告展示,无意义;

怪兽充电小程序的特点是整体较为轻量,用户即用即走,缺点是广告较多。

“美团外卖”小程序

美团外卖小程序与其原生APP主页面、流程几乎一致,且数据相通,整体小程序体验流畅,用户使用起来比较熟悉;

在导航和分类方面,该小程序嵌有两层筛选。第一层主要是依据美食种类进行分类,第二层分为综合排序、筛选、好评、销量及距离,帮助用户细分美食种类并根据用户最为关注的条件按照一定次序迅速列出最贴合用户需求的商品;

选择餐品页面共分为点餐、评价和商家信息三个模块;美团小程序在选择菜品的交互上,分为左右两侧页面,左侧上下滑动选择类目,右侧添加美食至购物车。

政务服务类

政务服务类小程序主要提供在线查询、缴费、申领证件、投诉建议等政务相关服务,大多服务都涉及用户个人信息,需进行用户身份的核验;政务服务类小程序的全国性、跨区域、跨部门等特点大大提高了用户的业务办理效率。

“国务院客户端”小程序

国务院客户端小程序是国务院发布政务信息和提供在线服务的新媒体平台,小程序首页根据不同功能分为留言、服务、政策文件库、疫情专区等模块;

微信授权后,用户还需进行登录,可选择人脸识别或身份证好和姓名验证的方式,登录成功后才能正常使用各项服务功能;

该小程序覆盖的功能类型较多,首页的展示选择了从上至下平铺的方式,区分各功能模块,点击进入不同模块后,再根据该模块的特点选择不同展示形式;例如,政策文件模块的展示类似资讯列表,投诉与建议模块采用输入表单的形式,便民服务模块又区分了个人证件和常用服务的入口;

该小程序的缺点是层级较多,分类复杂,切换模块时无法快速回到首页。

“移民局”小程序

“移民局”小程序主要提供出入境申办、查询等相关功能,该小程序首页简介明了,共三个服务入口:业务办理、证件查询、出入境信息一键通;

办理相关业务或查询证据都需要用户进行实名认证;

该小程序涉及的功能类型较为单一,在整体的展示上选择了底部导航栏的T型布局,服务入口采用从上至下平铺直叙的方式;交互方式主要为表单填写和查询两种。

资讯类

用户使用此类小程序浏览资讯,主要以各类新闻、科技资讯等为主;订阅的公众号推送小程序是用户浏览资讯类小程序的主要场景,此外,该类小程序也可替代不常用的资讯类APP;多数用户每周会多次浏览该类小程序。

“腾讯新闻”小程序

腾讯新闻小程序采用了“顶部导航栏+底部导航栏”的结构,底部导航栏区分首页、快讯和个人中心;

首页推荐模块展示精选内容及精选专题,精选专题可滑动查看、选择;快讯模块通过顶部导航栏区分不同类目新闻,以时间轴的形式进行展示;详情页底部导航可进行一下操作:发表评论,查看评论,分享给好友,分享至朋友圈;

该小程序非常注重内容的分享, 不论首页、时间轴、详情页,每条内容都会对应评论与分享按钮,引导用户进行交互。

“知乎热榜”小程序

知乎热榜小程序采用了“顶部导航栏+底部导航栏”的结构,底部导航栏区分内容页和个人中心;内容页通过顶部二级导航栏区分不同分类;

该小程序在“推荐”页面加入了“推荐小程序”一栏,用户可点击直接跳转对应知乎系小程序

内容列表展示内容标题、封面图、内容详情三个字段,热榜内容增加展示热度值;内容详情页默认正文内容缩起,用户一进入详情页即可看到对应回复,可通过按钮切换热门回复/最新回复。

游戏类

不同于手游、端游,休闲娱乐类、益智类、棋牌类、飞行射击类等微信小游戏都不同程度受到用户的喜爱,玩法简单易上手、中毒性强的微信小游戏是用户空闲时间消遣的一大选择。

“跳一跳”小程序

该小游戏的玩法很简单,首页只有三个按钮:开始游戏、多人游戏、排行榜,设计上着重突出开始按钮;用户依靠操作小人蓄力跳跃进行游玩,根据跳到的格子类型及连续跳跃的长度来积分 。玩家最终的得分会被列入微信好友的排行榜,排行榜按照降序排列。

“动物餐厅”小程序

动物餐厅小游戏的核心玩法非常简单,玩家只需通过不断点击招募按钮来招募动物,动物进入餐厅吃饭、付钱。玩家通过奖励的小鱼干,可以解锁动物餐厅里面的一些餐厅设施,不断的装潢自己的餐厅,来达到提升星级的目的;

动物餐厅是一个在线有交互、离线有收益的挂机游戏,这样的游戏具有一定的长尾效应,就是一旦留下来的用户,他们一定会在很长一段时间内持续不断的玩这个游戏。

其他细节

全面屏适配

底部操作区

注意顶部操作区与底部操作区的适配,适配不当不仅会影响美观,还会导致用户点击无效。

交互流程顺畅

清晰的交互流程

尊重用户的使用习惯。在用户完成任务的流程中,采用“从哪来,回哪去”的导航路径;避免使用障碍,尽量缩短用户步长,不过多跳转无用页面,降低用户操作成本。

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