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

小程序是一种即用即走,无需下载的手机应用,和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.《百度识图》在线入口手机软件php小编苹果为您介绍《百度识图》在线入口,这是一款功能强大的图片识别工具,用户可以通过上传图片或输入图片链接,在线快速识别图片内容。无论是想了解图片中的物体名称、获取相关信息,还是寻找相似图片,都能轻松实现。《百度识图》在线入口的便捷操作和准确识别,让用户在日常生活中更加便利快捷。 百度识图在线入口 https://m.php.cn/faq/690536.html
2.百度识图在线识图,以图搜图要进入百度识图网页版,可以通过百度首页搜索“百度识图”并点击网址进去,或者直接访问其官方网站(shitu.baidu.com )。百度识图的推出日期是2010年12月13日,它改变了传统的通过输入关键词进行图片搜索的方式,为用户提供了一种新的、基于图像的搜索体验。总的来说,百度识图是一个利用先进图像识别技术,帮助用户快速https://www.bgrdh.com/sites/27069.html
3.搜狗图片搜索/搜索识图图说新闻 组图:周迅最新时尚大片曝光 休闲T恤搭配格子短裙清新靓丽 5张 图说新闻 组图:谭松韵cos史密斯夫妇特工 黑丝绒长裙红唇大波浪气场十足 9张 图说新闻 组图:刘诗诗蓝色钻石长裙温柔优雅 大秀完美肩颈线条气质迷人 8张 图说新闻 组图:欧阳娜娜卡其色西装干练帅气 长发披肩配金属耳环酷飒十足 9张 图说新闻 组图:唐嫣https://pic.sogou.com/
4.百度识图网页版入口必应词库以图搜图入口官网 扫图识人 在线识别图片找原图 百度识图扫一扫 扫描图片找原图 百度识图网页版入口 以图搜图最全 以 图搜图 淘宝以图搜图入口Powered By InsSeo,Theme By CC站群 琼ICP备20002778号 InsSeo掌握SEO优化的关键,优化网站结构与关键词布局,提升百度排名,助力企业获取更多流量与客户。关灯https://www.insseo.com/yi-tu-sou-tu-ru-kou-bai-du-shi-tu-wang-ye-ban-ru-kou/6680/45762.html
5.在线识别图片找原图百度识图(在线识别图片找原图手机壳)V商人03 微信里的免费OCR功能(图中文字识别) 注:OCR,即Optical Character Recognition,光学字符识别;目标是将图像上的字符进行分析识别,将其准化为文本格式的字符序列(详见《团员分享_光学字符识别(OCR) | AI产品经理需要了解的CV通识(四)_@Jasimine》)。 https://www.vsaren.com/4112.html
6.扫一扫识别情头图片扫一扫识别情头图片百度识图扫一扫识别情头图片_扫一扫识别情头图片百度识图_扫一扫识别情头图片在线网页 来源:网络时间:2023-06-13 17:05:45 "扫一扫识别情头图片",哪些软件是我们想要的呢,下面多特小编就跟您推荐几款比较合适的软件或者app给您参考。 1.小米扫一扫(智能识物)软件类型:安卓APP 软件页面:https://duote.com/android/951165https://www.duote.com/tech/rjxz/436876.html
7.百度识图扫一扫百度识图app官方下载百度识图安卓版下载百度识图手机版官方下载 2017-06-0723.2M v8.6.5 安卓版 推荐理由:百度识图手机版官方下载,手机版则是手机百度里面的一个功能。很多人使用了网页版的识图功能,应该都觉得非常好用吧。手机版本更加简单快捷,需要的话可以下载。 下载搜搜图app下载 https://www.qqtn.com/qqkey/bdst/
8.百度识图扫一扫app下载百度识图扫一扫appv3.6.0安卓版下载百度识图扫一扫app软件简介 【百度识图扫一扫介绍】 百度识图扫一扫app(易速软件园提供下载)是一款拥有强大的识图功能的软件。百度识图扫一扫app通过拍照或者是上传照片的模式将图片中的植物、动物等全部进行有效的识别,识别成功就会像用户推送该物的百科资料,让用户可以添加多样的知识。不仅是学习知识的功能,用户还能搜索http://www.yisusoft.com/down/24092.htm
9.识字体网识字体网是免费在线字体识别、品牌识别、字体下载、字体搜索和问答社区网站,免费下载Windows、macOS、Linux、Android、iOS/iPad/iPhone字体识别扫一扫软件。无人值守的自动识别和自动/手动拼字,结合人工智能、大数据和搜索技术,可快速识别中文、英文、日文、韩文等全球文https://www.likefont.com/
10.百度扫一扫识别图片,怎么样使用手机扫一扫识别植物1. 打开手机上的百度应用程序。2. 在应用程序中找到扫一扫功能入口,在首页或导航栏的底部常见图标中https://ask.zol.com.cn/x/17556539.html
11.百度识图扫一扫在哪里扫一扫图片识教程随着智能手机的普及,扫一扫功能也越来越受到用户的欢迎。百度识图扫一扫功能是一款非常实用的工具,可以帮助用户快速识别图片信息。那么,百度识图扫一扫在哪里呢?下面,我们来详细介绍一下百度识图的扫一扫功能,以及如何使用它。 一、百度识图扫一扫是什么? 百度识图扫一扫是百度识图中的一种功能,它可以帮助用户快速识别图https://www.lanniaoh.com/16336.html
12.百度识图扫一扫(手机百度地图怎么看实景图?)一、手机百度地图怎么看实景图?解决手机百度地图怎么看实景图的步骤如下: 1.搜索框对我们的位置进行搜索。 2.弹出的是这个界面同样在最上方的搜索框,搜索我们需要到的地址。 3.我们点击搜索的时候记得要切换到步行。 二、百度识图不能用。求解? 进入百度首页,如下图所示:点击【更多】 百新产品大全中找到【百度https://www.2b2c.com/article/5280785559496442.html
13.以图搜图百度识图如何操作?页面为百度识图的技术,里面的按钮点击一下,然后上传你的图片,即可进行识图工作。多搜搜怎么以图搜图,需要利用在线识图搜索引擎。以图找图,是一种查找图片出处、图片来源的好办法。 如何以图搜图?点击“识图一下”按钮,然后点击“本地上传”按钮,即可进行以图搜图。欢迎大家访问反向搜图神器duososohttps://www.duososo.com/index_shitu.php
14.手机百度识图网页版入口(百度识图网页版电脑版)商梦号手机百度识图网页版入口(百度识图网页版电脑版) 软件非常小巧,是在电脑上使用的,原理就是检测你给的图片,识别出来后调用百度直接搜出对应的题目答案。 识别图片的方式有3种: 直接打开图片识别 读取剪切板里的图片识别 截图并识别 具体操作时大家根据自己的喜好自行选择,软件识别成功你给的图片后,就会搜出对应的结果http://www.summeng.com/17646.html
15.[网站推荐]百度识图百度识图在线网页版入口文章浏览阅读7k次。可以搜索一些图片。参考:http://shitu.baidu.com/_百度识图在线网页版入口https://blog.csdn.net/robertsong2004/article/details/40827193