万字干货!超全面的小程序设计指南优设网

小程序是一种即用即走,无需下载的手机应用,和APP不同,用户不用担心会占用手机内存的问题。用户可以直接通过扫一扫或附近搜索即可使用。小程序刨除一切繁杂的程序,将用户的操作变得更加灵活快捷,大大提高了用户体验,使用量也大大增加。

2017年9月20日,支付宝小程序向用户开放公测。

2018年7月,百度AI开发者大会上,百度宣布百度智能小程序正式上线。

量级:月活10亿

百度智能小程序

百度作为中国最大的搜索引擎工具,有天然的数据支撑。百度每日的搜索量可达到几十个亿,又是一个巨大的流量地。此外,基于产品的搜索特性,百度小程序能精准覆盖目标用户。通过小程序为用户提供信息与服务,通过提升整体的服务效率实现用户留存。

特点:基于百度搜索引擎的优势,增加产品词的优化曝光。

量级:月活5亿

抖音小程序

特点:旨在利用优质内容所关联和产生的使用场景进行小程序导流,解决开发者流量与转化困扰。

量级:月活9亿

支付宝小程序

支付宝小程序依托支付宝的商业和生活服务基因,小程序细分行业分布也以生活服务、金融保险和电商等小程序为主。同时支付宝成熟的信用体系也为商家提供了类似于免押租赁等玩法,借助芝麻信用、蚂蚁花呗等功能为流量变现创造更多的想象空间。

特点:在组件上采用了此前成熟的AntDesign设计,在开放API上则面向自身特色能力来封装,在框架方面采用开源的React/webpack等技术为基础,结合了支付宝自身的多年技术沉淀来实现。

量级:月活7亿

裂变型

裂变型小程序是为我们其他小程序,在短期内提供大量流量的。比如跳一跳娱乐游戏类的小程序,还有电商裂变的成功典范可以属拼多多。

拼多多

留存型

小程序一直是用完即走的使用体验。留存型小程序是我们用来沉淀客户的。需要我们结合自身的产品,发掘能沉淀目标客户的场景,一般需要结合原有APP来开发,开发一款对用户有价值、简单易上手的小程序。

可以从这几个方面来考虑:

产品型

产品型的小程序一般是有了APP的商家建立小程序,是为了彼此相互融合,相互促进。因为小程序开发成本更低,更多曝光的机会。产品型的小程序设计一般是照搬全部,或者精简设计,一般要结合商家业务来判断。

如果对于一些垂直品类的产品,像马蜂窝和携程旅游将酒店预订、景点门票预订、周边游、租车包车游等各项服务都做了一个功能拆分,生成的了各项小程序的入口,更好的将服务垂直,缩短产品和业务触达用户的渠道,自然转化率更高。

工具型

在小程序中工具型是最符合“用完即走”这个理念的,就像家里的工具一样想要的时候拿出来。比如识图、查公交线路、寄快递、抽奖等小程序,只要打开对应的小程序就可以了,不用的时候也不占用内存。还有一种本地服务小程序,借助“附近的小程序”功能,为周边提供便利服务,如上门维修、家电回购、本地商圈等等小程序。

开发技术区别:

APP开发根据开发方式可分为原生APP和WebAPP,APP主流开发操作系统有安卓和iOS。

安卓版本原生APP的开发语言为JAVA,iOS版原生APP的开发语言为Objective-C。

安卓版本WebAPP的开发语言为JAVA+HTML,iOS版WebAPP的开发语言为Objective-C+HTML。

小程序是基于腾讯、今日头条、百度等平台的小程序开发框架进行开发,开发技术类似HTML。

用户群体

下载及安装

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

因为不需要安装,占用内存空间忽略不计。

开发成本

APP在实际开发中,它需要开发安卓系统和iOS系统两种版本,所用到开发语言不同,同时还需要根据手机的不同尺寸进行适配,开发成本较高。

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

开发成本低,一次开发就可以适配所有手机。平均开发周期约2周。

产品定位

原生App的内存就不受控制,那么内容框架可以根据产品定位随意增添,可发挥的空间非常大,一些电商、社区等等无论多么复杂的应用都能一一实现。

因为内存受限的控制,导致内容框架不同,在小程序上功能架构设计的比较简单,符合轻量化、“用完即走”。

功能比较受限,因为接口功能有限。

如上:豆瓣原生app包含了首页-书影音-小组讨论-市集-我的等多个内容板块,但是小程序只保留了豆瓣最核心的部分-电影评分的栏目,将其商城和社区的模块全部砍掉了,只是将小程序作为一个资讯型的浏览窗口。

基础框架

小程序的导航栏官方指定了两种样式,一深一浅,背景色可自定义,遵循“导航明确、来去自如”的原则。

底部标签栏是移动端产品的主要导航方式,主要表示用户当前所在的位置,所以会有选中与未选中两种切换方式

App:可支持最少2个,最多5个的tab切换,图标大小以及底部标签栏高度可自定义。

小程序:也可支持最少2个,最多5个的tab切换,使用原生控件时,要遵从icon尺寸81*81px。

App:流畅、体验佳,例如发朋友圈时拖动照片排序。

小程序:除非必要,否则不建议使用拖动排序。图片和列表拖动在Android机型上体验不够,会有卡顿的情况。

用户体验

APP:直接打开

APP:界面切换的流畅度以及加载数据的响应速度都会比小程序更好一些

APP:动画不受限,活动运营比较容易营造氛围感,带给用户非常友好的沉浸感和归属感。

小程序:受内存的影响,而且小程序都是轻量化的功能,动画的展示元素会非常的少,因而在界面会觉得很平淡,像是工具型产品。

APP:在原生APP里可以开发客服,或者直接转化。APP到小程序里可以直接跳转。

小程序:小程序的虚拟支付会影响iOS用户的转化,并影响整个业务的转化。客服也是需要关闭小程序单独对话。与APP的响应需要一个繁琐的步骤。

运营推广

APP:推广新用户需要下载APP,需要占用手机内存,推广率低。但是APP的开发自由度高,推广方式不受限制,渠道多,转化率高

友好礼貌、清晰明确、便捷优雅、统一稳定

NavigationBar

在根据官方的指导下我们如何进行设计呢

Tabbar

官方指南:开发者可为小程序页面添加标签分页(Tab)导航。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

按照产品需求也可以直接去掉底部导航栏。

顶部标签分页栏颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。

加载动画

页面内加载反馈、模态加载和其余的加载样式都可以根据需求设计,新手可以参考着官方指南来。

载入过程中,应保持动画效果;无动画效果的加载很容易让人产生该界面已经卡死的错觉。

不要在同一个页面同时使用超过1个加载动画。

减少输入

在页面设计的时候尽量考虑到手机键盘输入困难或者容易引起误操作,小程序的设计可以利用一些接口来优化用户体验。

遇到必须输入的场景可以尽量让用户选择。让比如搜索时的历史记录和模糊搜索,而减少或避免不必要的键盘输入,可以大大减少用户的输入成本。

关于小程序的适配设计师不用过多的关心,但是可以了解一下。小程序里的尺寸单位叫rpx,可以根据屏幕宽度进行自适应。在750*1334的设计稿里,1px=1rpx。在小程序里宽度都是750rpx,高度就通过那个宽高比获得,只要涉及具体数值的高度的都通过这个比例计算就行。

「疫小搜」

疫情期间产品设计师的价值,可以查看周边疫情情况,和确诊人员到自己的距离。

「网易严选」

网易严选的品牌理念是“好的生活,没那么贵”。清晰的品牌设计,设计语言透着追求品质生活的态度。

「多抓鱼」

多抓鱼二手书是一款人性化的二手书交易市场小程序。

「京东良研」

京东良研小程序是专业调研及数据分析的高效率工具,整体的简洁、轻量化的设计很符合调研场景的商务感。

「豆瓣」

因为在小程序里导航栏的层级是最高的,即使隐藏导航栏TitleBar也是依然存在的。

半屏弹窗

除了官方指南里的模态对话框,也可以尝试半屏弹窗,一是承载更多信息,二是更好的继续流程不被打断。

活动弹窗

在运营活动中,活动弹窗起着活动引导,突出重点的作用。这类弹窗往往要设计得“热闹”一些,可以更好的引导用户留存裂变。

目前没有特别完美的解决方案,要不牺牲用户体验曲线救国,要不冒着小程序被封的风险顶风作案。

按照规定

曲线救国

线上课程的话,可以让用户提前在公众号或者社群里跟iOS用户解释为什么不能购课,或者是还有哪些途径可以获课。其他途径提前支付,在后端生成验证码,直接输入解锁课程。

而在iOS上,把原本虚拟物品转化成实物品,比如卖光盘,而本质上的价值是音频本身。如果按节卖可能实物成本及配送费过高,那么在iOS上可以按系列专辑打包卖,使用iOS设备的用户只能卖专辑,买完后可以解锁该专辑下的所有音频。当然,这种方式不知道运营商是否存在问题。

从官方给出的规则细则解读来看,这种引导也算是不合规的,将支付引导去公众号、到APP上进行。联系客服完成支付或购买流程。这个是非常不建议的,一旦被发现会有举报被封的危险。

小程序的页面之前的逻辑跳转,最多可以支持10个层级。在小程序的开发过程中会反复确认页面之间的跳转逻辑有没有遗漏,但是会忽略掉用户循环操作,可能会造成打开页面层级过多而导致无法继续操作。

即使用户打开10个页面以内5个以上页面,也会需要连续按多次“返回”按钮才可以退出小程序,导致用户的体验也相当的不好。

除正常页面跳转的逻辑没有问题之外,在小程序的交互中还需要考虑两件事,一个是整个用户点击的最长路径是不是过长,二是考虑页面流失率的情况下,对路径中终端的页面导航栏设计到首页的跳转,即可解决这个问题。

什么是Webview

它是用来显示h5页面的组件。只需传一个h5页面的地址,就可以显示该页面。

小程序中可以使用webview组件,直接把mobileweb套到小程序里,比如「多抓鱼」就是以webview为主的。

好处:

坏处:

只有绑定为业务域名的url才能跳转,不可以随便打开什么网页,上限20个。

扫一扫

消息通知

长期订阅消息目前只对特定行业开放,如政府民生、金融、医疗等,一般我们也接触不到,所以不做赘述。

从小程序链接了10多亿用户,在生活中不停的挖线下场景,解决工作、娱乐、购物多种生活需求。小程序已经融入了我们线下生活,随着用户习惯的养成,使用频次和平均时长逐渐增加。小程序的快速获客速度,和极低的开发成本,成为各个公司的新宠,希望开发新的小程序入口可以快速且单一高效的让用户有一个更纯粹的产品功能体验,同时也可以对现有的APP起到引流的目的。

1.用户的留存

针对小程序的留存一直是开发者非常在乎的问题,因为不像APP开发者的话语权很大,因为小程序的平台性质,对小程序开发进行了很多的限制,让推广和营销还有转化都增加了难度。没办法让一个产品孤注一掷的做小程序,目前只能是和APP搭配着来开发,作为一个产品功能单一路径的功能产品。

2.小程序的设计思维

在设计小程序时不能依靠传统APP的思维去设计,按照轻量、社交、价值、引流、用户数据和打造小程序生态环境。

THE END
1.扫一扫答题神器app扫一扫答题神器免费下载扫一扫答题神器是全国上亿用户都在选择使用的软件,有着超强大的扫描识别功能,只需要简单的拍照就可以准确的识别各种各样的试题内容并且完成试题内容的快速提取,并且帮助你快速的进行答案的查找,让学生能够快速的了解每一道试题的正确做法,从而轻松解决做题过程中出现的问题,确保学习中存在的各种问题都可以被及时的解决https://www.guguzhu.com/zt/sysdtsq/
2.挑战答题争上游微信小程序,挑战答题争上游小程序介绍&二维码1、微信内点击+号->扫一扫->扫描页面小程序码->打开小程序; 2、在微信->发现->小程序,里面搜索挑战答题争上游找到并打开。 微信小程序信息 分类: 更新:2024-11-27 系统:微信6.5.3及以上版本。 语言:中文 如果觉得优逗网所整理的微信小程序内容很不错的话,欢迎点击下方分享按钮,转发给身边微信好友。https://m.udow.cn/69726.html
3.扫一扫解题软件排行榜前十名小学数学题目解答扫一扫app小学数学题扫一扫解答软件小学数学扫一扫解题app扫一扫数学解题软件数学题目解答扫一扫app扫描解题软件驾驶证理论扫一扫答题软件扫一扫答题软件扫题解答软件免费识别植物扫一扫app扫一扫图片识别皮肤病app皮肤扫一扫识病软件花识别扫一扫app蘑菇识别扫一扫软件拍照解题app扫一扫脸型配发型软件线上剧本杀软件公考https://m.pianwan.com/s/zj-398539
4.扫一扫答题软件免费下载作业扫一扫秒出答案app下载马上要放假了,在开心的同时意味着有很多同学又要面临作业堆积成山的压力了,为此小编特意给大家带来了扫一扫答题app,在这里拥有各种各样极为受欢迎又好用的扫一扫答题神器,不仅一扫就出答案,而且还可以免费下载不收费。其中夸克搜题、作业精灵以及作业帮在搜题找答案这方面有着巨大的优势,因为它们都具有解析全、答案全https://www.ddooo.com/zt/dtapp.htm
5.答题神器app合集答题神器一扫就出答案的软件答题神器一扫就出答案软件推荐该应用通过扫描题目,迅速提供答案,极大提升工作效率。适合各种需要快速查询资料、应对考试或日常学习的场景。操作简单,即刻下载,轻松解决难题。更新时间:2024/11/28 14:55:53智学网学生版 v2.0.1907 等级: 8.3 2024-11-16 198.0MB 简体中文 下载 推荐理由: 智学网学生版是一款在线https://www.sooker.com/zt/dtsqysjcdarjtj/
6.答题神器一扫就出答案(减分答题神器一扫就出答案)–厂信息大家好,小编今天来为大家解答答题神器一扫就出答案以下问题,减分答题神器一扫就出答案很多人还不知道,现在让我们一起来看看吧! 1、首先,通过微信扫描答题神器小程序的二维码,进入系统。 2、扫一扫就能出答案的软件:《小猿搜题》、《作业帮》、《快对》、《作业精灵》、《猿题库》。 http://www.changxinxi.com/shenghuobaike/239394.html
7.作业帮作业帮直播课作业帮家长版 作业帮在线学习就用作业帮 拍照搜题随手一拍,答案立现 作业帮直播课原作业帮一课更名为作业帮直播课去看看 中英作文百万范文,写作不愁 作业帮家长版拍搜口算功能全,优质内容抢先看 IOS下载安卓下载https://www.zybang.com/answersearch
8.百度答题小程序,你找的是它吗百度一下答题小程序,你会发现基本上全部都不是你所要找的东西。圈里有一个百度答题项目,通过百度问答成为答主,以此来回答他人问题获得对应奖励。关于百度答题项目,不是今天我们要说的重点,有兴趣的朋友可移步《百度答题兼职怎么赚钱?超详细步骤》 我们今天要聊的跟小程序有关,不过不是百度小程序,而是微信答题小程序http://www.52thing.com/15585.html
9.三峡云三峡云为企业商户提供优质宜昌小程序开发制作及朋友圈广告投放,是宜昌最大的互联网+综合运营服务商!联系电话:18671758595http://www.sanxiacloud.com.cn/
10.百度答题小程序入口在哪(百度答题小程序入口官网)V商人手把手教你搭建答题活动小程序系列文章,第一阶段为界面设计篇,分别描写了如何搭建答题小程序界面。 现在已经进入第二阶段,功能交互篇。而上一篇文章描写了,如何用云开发实现查询题库功能。其实说白了就是相当于,前后端分离架构中的异步请求。 这一篇紧接着上一篇,聊聊用云开发实现查询题库功能后要做的事情。通俗来https://www.vsaren.com/74397.html
11.微信答题小程序辅助工具:轻松应对各类答题挑战2.安装百度OCR库 pip install baidu-aip 3.在百度云中创建项目,获取对应的app id、api key,并在.py中替换 4.在(,,)中调整截图区域 5.手机进入开发者模式,用数据线连接微信小程序或APP,进入问答APP。 6.在命令行上执行 python main.py 7.浏览器会自动打开,并使用搜狗搜索题目,请自行判断正确答案。 http://www.bjhwtx.com/h-nd-146745.html
12.打造自动答题小程序首先,我们使用Charles工具对小程序进行抓包分析,找到题目和答案的网络请求。通过分析请求和响应数据,我们可以提取出题目和答案的信息,并将它们存储到数据库中。 2. 识别题目并匹配答案 在答题过程中,我们需要识别题目中的文字,并与数据库中的答案进行匹配。为了实现这一功能,我们利用百度OCR技术识别题目中的文字,并将https://blog.csdn.net/the_beginner/article/details/136071721
13.微信功能小程序腾讯云开发者社区在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性。不用看具体数据,就直接看我们身边,我们平时走过的街道,很多店铺都没人租了,或者很多店铺几个月内就改头换面,不断地替换新的商家入场。这说明什https://cloud.tencent.com/developer/information/%E5%BE%AE%E4%BF%A1%E5%8A%9F%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F
14.百度网盘app扫一扫在哪操作方法及流程1、首先打开百度网盘app后,在首页界面,点击右上角的“+”符号。 2、就会弹出下图的界面,点击左下角的“扫一扫”。 3、如果弹出一个想访问您的手机的提示框,则点击下面的好则可。 4、就会进入扫一扫的界面了,将二维码放到框内即可自动扫描。 5、这样就找到了百度网盘app的扫一扫。https://m.yxlady.com/jingyan/175411.shtml
15.零撸小项目,百度答题撸88米收益,简单零门槛人人可做!零撸小项目,百度答题撸88米收益,简单零门槛人人可做! 今天跟大家分享一个既轻松又能赚点小钱的副业机会,那么这个活动绝对不能错过!百度答题红包活动,门槛超低,人人可参与,只需动动手指,答对题目就能领红包,最高还有百元奖励等着你!https://www.baicxx.com/18312.html
16.微信小程序制作无代码微信小程序制作平台,全程无需代码即可完成开发工作,海量免费小程序搭建模板案例,同时进行头条百度抖音快手多平台搭建,多平台开展营销渠道搭建。http://7b.fkw.com/
17.百度小程序百度小程序制作,无需编程,一键生成,百变应用,自由组合。适用场合小程序制作 功能展示界面DIY 营销功能 一键模板 1 免免费配置服务器 免免费解决bug 成本价定制功能 5000人交流大群 7X24小时客户服务功能模块 可拖拽DIY 分销模块 文章管理系统 多规格商城 付费视频系统 自定义表单 预约报名 多门店系统 https://www.0576110.com/comhome/functionshow/show.html?id=10