全面的小程序设计指南，你值得拥有！

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

全面的小程序设计指南，你值得拥有！

浅谈小程序一、小程序的定义

小程序是一种无需下载即可使用的移动应用程序。 与APP不同，用户不必担心占用手机内存。 用户可以通过扫描或附近搜索直接使用。 小程序消除了一切复杂的程序，让用户操作更加灵活、快捷，大大提高了用户体验，大大提高了使用率。

2、小程序开发

2016年1月11日，2016微信公开课PRO版在广州举行。 “微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过该应用号可以完成App的部分功能。

2016年11月3日晚，微信团队宣布微信小程序正式开放公测。

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

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

2019年6月1日，小程序如期在新版安卓上线，五天后正式上线iOS版手Q。 至此，小程序就全面上线了。

3、小程序现状

从*早的微信到现在，支付宝小程序、百度小程序、抖音小程序，几大巨头纷纷布局小程序。

主流小程序平台在线关注度存在较大差异。 微信小程序互联网关注度*高，其次是百度小程序和支付宝小程序。 对比用户认知，微信小程序以分享链接的形式出现，百度小程序是抢红包的平台，支付宝小程序则是抢特价、抽奖的平台。 小程序平台线上关注度的差异体现了用户对小程序平台生态的了解。 知道。

微信小程序

作为全民社交软件，微信拥有3亿日活跃用户。 这无疑是巨大用户流量的聚集地，对商家的吸引力可想而知。 接下来我们也以微信小程序为例来一步步讲解。

微信官方文档：

特点：依托微信强大的社交模式，流量引流能力强，流失率低，推广速度快

规模：月活跃用户 10 亿

百度智能小程序

百度作为中国*大的搜索引擎工具，有着天然的数据支撑。 百度每天的搜索量可以达到数十亿，也是一个流量巨大的地方。 此外，基于产品的搜索特点，百度小程序可以精准覆盖目标用户。 通过小程序为用户提供信息和服务，通过提高整体服务效率实现用户留存。

百度-智能小程序设计规范：

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

规模：月活跃用户 5 亿

抖音小程序

抖音小程序开发以字节跳动客户为基础，面向字节跳动所有产品线（包括抖音、今日头条等）的用户。 不同的小程序/小游戏满足不同类型用户的需求。 支持小游戏、小程序产品形态，支持个人和企业开发，只要有高质量的内容或高质量的服务。 产品形态和界面形态适应行业标准，*大限度降低开发的开发成本。

字节小程序：

特点：旨在利用优质内容关联产生的使用场景为小程序引流，解决开发的流量和转化问题。

级别：9亿月活跃用户

支付小程序

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

支付宝小程序设计规范：

特点：组件采用之前成熟的Ant设计，开放的API封装了自己独特的能力，框架基于开源的React/等技术，结合支付宝自身多年的技术积累。

数量级：每月活跃用户 7 亿

4.小程序类型

分体式

裂变小程序在短时间内为我们其他小程序提供了大量的流量。 比如跳一跳娱乐游戏小程序和电商裂变的成功例子都可以属于拼多多。

对于裂变型小程序来说，裂变点就是痛点。 除了产品的主要功能外，为什么小程序的裂变设计需要用户裂变呢？ 例如，在拼多多上，用户分享是为了零元购买产品，帮助销售的人也想零元购买产品。

拼多多

保留

小程序一直是一种即用即用的体验。 留存小程序是我们用来吸引客户的手段。 我们需要结合自己的产品，探索能够吸引目标客户的场景。 一般我们需要结合原来的APP来开发开发对用户有价值、简单易用的小程序。

你可以考虑这几个方面：

产品类别

产品型小程序小程序一般是商家通过APP建立的，目的是为了相互融合和推广。 因为小程序开发成本更低，曝光机会更多。 产品型小程序的设计一般是完全照搬，或者是精简设计，一般根据商家的业务来判断。

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

工具类型

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

工具型小程序注重功能本身，解决人们的某种需求，让使用更加方便、高效。 设计时应注重视觉结构和信息布局的简洁性，然后首先考虑易懂性和功能的可理解性和可识别性，将功能产品化，快速提高用户效率。 然后引导用户快速完成任务。

5、小程序和APP的区别

开发技术差异：

APP开发按照开发方式可以分为原生APP和Web APP。 主流的APP开发操作系统是和iOS。

版原生APP的开发语言为JAVA北京微信小程序开发，iOS版原生APP的开发语言为-C。

版Web APP的开发语言为JAVA+HTML，iOS版Web APP的开发语言为-C+HTML。

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

客户

不同的运营商导致不同的用户群体。 小程序是基于微信平台的应用程序，用户群体仅限于微信用户。 截至目前，微信用户已超过10亿； APP则登陆App Store以及面向全球用户的应用市场。 智能手机用户超过 33 亿。

下载并安装

将其保存在手机中会占用空间。 应用程序过多可能会导致内存不足，因此请务必清除缓存。

由于不需要安装，所以占用的内存空间可以忽略不计。

开发成本

在APP开发中，需要开发系统和iOS系统两个版本。 使用的开发语言不同。 同时，还需要根据手机的不同尺寸进行适配。 开发成本高。

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

开发成本低，一次开发即可适配所有手机。 平均开发周期约为2周。

产品定位

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

由于内存控制有限，内容框架有所不同。 小程序的功能架构设计得比较简单，符合轻量级和“用完即走”的原则。

由于接口功能有限，所以功能相对有限。

如上：豆瓣原生App包含首页-书籍、视频、小组讨论-市场-我的等多个内容版块，而小程序只保留了豆瓣的核心部分-电影评分栏目，并结合了其商城和社区模块。 全部都被砍掉了，小程序只是作为一个信息浏览窗口。

基本框架

其实移动产品的设计规范和原理是大致相同的，但是由于微信小程序的框架，小程序产品和App产品在某些版块的呈现上会存在一些差异：比如顶部导航酒吧区等

事实上，移动产品的设计规范和原理大致相同。 但由于微信小程序的框架原因，小程序产品与App产品在某些版块的呈现方式上会存在一些差异，主要体现在以下几个方面。

小程序的导航栏官方指定了两种风格，一种深色，一种浅色。 背景颜色可自定义，遵循“导航清晰、访问方便”的原则。

底部标签栏是移动产品的主要导航方式。 主要表示用户当前所在位置，因此有选中和未选中两种切换方式。

App：可以支持至少2个、*多5个选项卡切换。 图标大小和底部标签栏的高度可以自定义。

小程序：还可以支持至少2个、*多5个tab切换。 使用原生控件时，图标大小必须为81*81px。

App：流畅良好的体验，比如发朋友圈时可以拖拽、排序照片。

小程序 ：除非必要，否则不建议使用拖动排序。 模型上拖动图片、列表的体验不够，会出现卡顿的情况。

APP：时不时向用户推送广告。 太多未读的提醒会逼死强迫症。

小程序：不允许主动向用户发送广告，只能回复模板消息

用户体验

APP：直接打开

小程序：在微信首页，下拉并点击打开。

APP：界面切换的流畅度和加载数据的响应速度会比小程序

小程序：当在比较深的页面，或者非原生的页面时，加载时间会很长，会卡住。

APP：动画不受限制，事件操作更容易营造氛围感，给用户一种非常友好的沉浸感和归属感。

小程序：受内存影响，而且小程序是轻量级功能，动画展示元素会很少，所以界面会感觉很平淡，像一个工具型产品。

APP：客服可以在原生APP中开发，也可以直接转换。 APP可以直接跳转到小程序。

小程序：小程序中的虚拟支付会影响iOS用户的转化，进而影响整个业务的转化。 客服也需要关闭小程序，进行私密对话。 用APP回复需要一个繁琐的步骤。

运营推广

APP：推广新用户需要下载APP，需要手机内存，推广率低。但APP开发自由度高，推广方式不受限制，渠道多，推广率高兑换率。

小程序：依托微信平台，可扫描二维码、搜索、发送至好友、朋友圈，推广率高。 虽然推广率高，但由于官方的种种限制，营销难度较大，转化率较低。

如何设计小程序

微信小程序的官方设计规范在微信官方文档中包含了微信小程序的综合设计指南，所以我不再赘述。 按照官方的说法，设计一个基本的小程序完全足够了。

1. 遵守微信小程序设计规范

友善礼貌、清晰明了、便捷优雅、统一稳定

您可以自行查看官方微信平台。

我知道你可能会觉得官方的指南很无聊，所以我特地找了一篇关于一个非常好的小程序文章。 我建议结合使用以获得更好的效果。

在参考了近百个案例后，我总结了这份万字小程序设计指南

*近在工作中我发现了一些非常有趣的事情。 我不知道从哪里开始。 国内外的设计需求有很大不同。

阅读文章 >

2.突破实验设计的界限

在*基本的设计中，我想和大家谈谈如何在微信的设计规范范围内进行高级设计。 这也是我在实际工作中探索的结果。 希望能给大家带来更多的启发。

酒吧

官方指南：开发可以根据自己的功能设计需求，在页面中添加自己的导航。 并保持不同页面之间的导航一致，具有清晰的方向和返回路径。 由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。 建议开发自己的导航风格与微信官方小程序菜单风格保持一定的区别，以方便区分。

我们如何按照官方指导进行设计呢？

需要注意的是，如果自定义导航栏后添加微信默认的下拉刷新，就会出现一个问题：导航栏上会出现下拉刷新组件！ 所以如果需要自定义导航栏，就需要自定义下拉刷新。 下面提供微信小程序下拉刷新组件。

官方指南：开发可以在小程序页面添加标签导航。 标签分页栏可以固定在页面顶部或底部，方便用户在不同标签之间切换。 标签数量不少于2个，*大不超过5个。为保证可点击面积，建议标签数量不要超过4个。 一个页面不应有超过一组选项卡式分页栏。

您也可以根据产品需求直接去掉底部导航栏。

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

加载动画

微信官方小程序中的启动页加载样式由微信官方提供，您只需提供Logo即可。

下拉页面刷新加载。 虽然微信官方文档说开发不需要自己开发，但是如果他们愿意的话仍然可以进行更改。 如今，小程序的开发已经比较完善。 尽量遵循小程序标准。 定制开发可能会破坏小程序的用户体验。

可以根据需要设计页内加载反馈、模态加载等加载样式。 新手可以参考官方指南。

如果加载时间较长，需要提供取消操作，并使用进度条显示加载进度。

加载过程中，应保持动画效果； 没有动画效果的加载很容易给人一种界面卡住的错觉。

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

减少投入

设计页面时，尽量考虑到手机键盘输入的难度或者误操作的风险。 小程序的设计可以利用一些接口来优化用户体验。

遇到需要输入的场景时，尽量让用户选择。 例如，利用搜索历史和模糊搜索来减少或避免不必要的键盘输入，可以大大降低用户的输入成本。

输入复杂的表格会给用户带来心理负担。 当遇到大量输入时，可以通过选择来代替输入，尽可能减少操作。 例如，扫描银行卡时，只需点击一个按钮，使用摄像头识别界面即可识别。 信息。 此外，微信团队还开放了地理位置接口等各种微信小程序接口。 充分利用这些接口将大大提高用户输入的效率和准确性，从而优化体验。

3、多终端适配

小程序的适配设计师不需要太关注，但是可以了解一下。 小程序中的尺寸单位称为rpx，可以根据屏幕宽度进行自适应。 在750*1334的设计稿中，1px=1rpx。 小程序宽度是一样的，高度是通过长宽比得到的。 只要涉及到具体数值的高度都是通过这个比例来计算的。

官方文档：

4、数据反馈

小程序的普通数据可以通过“小程序数据助手”查看，有特殊观察的数据可以单独埋藏。 目前的功能模块包括数据概览、基础访问分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计及用户画像（年龄性别、省市、终端型号）、数据与分析等。小程序后台例程分析一致。

5.推荐优质小程序

《疫情搜索》

疫情期间产品设计师的价值在于可以查看周围的疫情情况以及确诊者与自己的距离。

《网易严选》

网易严选的品牌理念是“好生活，没那么贵”。 清晰的品牌设计和设计语言流露出追求品质生活的态度。

“抓更多的鱼”

多助鱼二手书是一款简单易用的二手书交易市场小程序。

“京东凉颜”

京东亮眼小程序是专业研究和数据分析的高效工具。 整体简洁轻量化的设计符合科研场景的商务感。

“豆瓣”

豆瓣评分提供*新的电影介绍和评论。 豆瓣是典型的有情怀、小而美的产品。

你不知道的小程序一、弹窗不能覆盖导航栏

因为导航栏在小程序中的级别*高，所以即使导航栏隐藏了全面的小程序设计指南，你值得拥有！，标题栏仍然存在。

半屏弹窗

除了官方指南中的模态对话框之外，你还可以尝试半屏弹窗。 首先，它可以承载更多的信息，其次，它可以更好地继续这个过程而不被打断。

活动弹出窗口

在运营活动中，活动弹窗起到引导活动、突出重点的作用。 这类弹窗往往设计得比较“活泼”，可以更好地引导用户留住裂变。

2. 虚拟支付

微信小程序已正式下发整改通知。 对于iOS系统提供的虚拟物品，小程序不能显示付款、购买、获取VIP、会员激活、价格、iOS限制、苹果系统限制等与购买相关的文字； 也不能出现引导词，比如扫描二维码获取。 即使它们实际上都不可用； 它们可能不会引导至外部网页或应用程序来实现支付功能。

也就是说，在苹果设备（iOS）系统中，虚拟物品的支付，如积分、购买课程、奖励等，是无法在小程序中进行的。 对于在线教育来说，由于课程是销售的主体，因此与课程的销售相关。 购买、营销促销（闪购、讨价还价等）都产生了一系列由虚拟支付衍生的问题。

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

按照规则

直接关闭小程序iOS支付是*合规但也是*无奈的方法。 《勤宝物语》就采用了这种方式。 使用iOS打开界面入口与不同。 但事实上，它只是隐藏了入口。 隐藏的充电信息仍然可以通过手机共享来打开。 当然，这种方案对于没有APP的产品来说还是会造成很大的损失。

曲线救国

对于在线课程，用户可以提前在公众号或社区向iOS用户解释为什么不能购买课程，或者还有哪些方式获取课程。 其他预付费方式还有后台生成验证码，直接输入即可解锁课程。

在iOS上，原本的虚拟物品转化为真实物品，比如卖CD，本质的价值就是音频本身。 如果分批出售的话实体成本和运费可能太高，那么在iOS上，你可以将它们分成系列专辑包出售。 使用iOS设备的用户只能出售专辑，购买后可以解锁专辑下的所有音频。 当然这个方法不知道操作者是否有问题。

从官方对规则的解释来看，这种引导方式属于违法行为，付款定向到公众号和APP。 联系客服完成付款或购买流程。 强烈不建议这样做，因为一旦发现，报告就有被屏蔽的风险。

2.页面层次结构和逻辑跳转

小程序页面前的逻辑跳转*多支持10级。 在小程序的开发过程中，我们会反复确认页面之间的跳转逻辑是否缺失，但会忽略用户循环操作，这可能会导致页面打开的层级过多，无法继续操作。

即使用户在 10 个页面内打开超过 5 个页面，也需要连续多次按下“返回”按钮才能退出小程序，导致用户体验相当糟糕。

小程序的交互除了正常页面跳转的逻辑外，还有两点需要考虑。 一是整个用户点击的*长路径是否太长，二是考虑页面流失率。 这个问题可以通过将终端的页面导航栏设计在跳转首页的路径中来解决。

3、小程序分享路径

小程序*大的优势就是可以分享给社交好友。 比如，看到一款只有下单才能购买的产品，用户会主动邀请自己的好友一起购买，实现快速裂变，为公司带来巨大的流量。 而且，按照这种共享路径进行推广的成本极低。 分享方式可以是朋友圈分享、二维码分享、微信分享给好友。

4.

什么是

它是一个用于显示h5页面的组件。 只需传递一个h5页面的地址即可显示该页面。

小程序中可以使用组件，直接将网页集成到小程序中。 比如“多抓鱼”就是主要的。

益处：

伤害：

一页上只能有一个组件，不能有其他组件。 比如你想用原生的来实现支付和分享，那是不行的。

只有绑定企业域名的URL才可以进行重定向。 您无法随意打开任何网页。 上限为 20。

5. 一些必须是原生的页面

扫描它

目前扫描页面时不支持二次设计，必须调用微信小程序官方接口。

具体文件请参考：

通知

在当今信息爆炸的时代，大量的信息和弹窗会扰乱用户，忽略了消息的本质是为了服务的事实。 因此，微信对订阅消息添加了很多限制和优化。 *重要的是把选择权留给用户。

订阅消息授权需要用户主动点击触发。 如果不勾选“始终保留上述选择，不再询问”，且选择允许，则只能收到一条订阅消息，且每次都会弹出弹窗； 如果用户勾选“始终保留上述选择，不再询问”，则不会触发弹窗，但不会无限期地中断用户发送消息。

长期订阅新闻目前只对特定行业开放，比如政民生、金融、医疗等，一般我们是无法访问的，所以不再赘述。

登录注册流程

如果您想在微信小程序中获取用户信息，登录小程序后无法自动弹出登录弹窗。 需要用户主动触发登录按钮来进行登录过程，并且必须向用户提供“尚未登录”的选项。

具体文件请参考：

未来发展方向

它小程序连接了超过10亿用户，不断探索生活中的线下场景，解决工作、娱乐、购物等各种生活需求。 小程序 have been into our lives. As users , the and of use . The rapid speed and low 开发 cost of 小程序 have the new of . It is hoped that 开发 of new 小程序 can , and allow users to have a purer , and at the same time, it can also the . Some apps serve the of .

1. User

The of 小程序 has been an issue that 开发 are very about, APP 开发 , who have a large say, due to the of 小程序 , there are many on 开发 of 小程序 , which makes and as well as All the . There is no way to make a all-in-one to make 小程序 . At , it can only be 开发 in with an APP as a with a path of .

2. of 小程序

When 小程序 , we rely on APP . We focus on , , value, , user data and 小程序 .

In terms of ideas, we grasp the of and ready-to-go . At the same time, we dig deep into the user of 小程序 , sort out the core in the APP, and the . to the APP is more in line with 小程序 . Make good use of the of and into the to leave room for later , or with other 小程序 .

3.

Due to the of the , fresh food e- has in in the cold and . e- is a huge worth 200-300 . It is user- and based on and . The model has the cost of users the . With the help of 小程序 , it has the of e-. The speed of .

结论

, is also very about 小程序 . In the , 小程序 will and . The the and of 小程序 , the . There are not many about 小程序 on the . You can focus on these two to learn about .

open :

:

I would like to share with you the I have in the past six . There are still many that need to be in depth. With the of the and of the 小程序 , we will dig into and more . , I will to share it with you in the .

参考链接

to the 's : "Qi Jiang Notes"

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等