不久前，我做了一个微信小程序项目，并总结了小程序的一些设计规格。如果您对小程序不够了解，请开始设计。设计完程序后，我一定会离开〜，为了保留程序，兄弟，我吐了血，整理了这个设计规范，还为每个人准备了新版本的小程序控件（请务必查看底部〜）。
本文概述：
小程序大小正式小程序菜单标题导航栏设计（标题栏）选项卡页导航设计（标签栏）内容设计加载样式全局操作反馈
一、小程序大小
小程序显影尺寸为rpx（响应像素），可以在一个草稿中适应所有屏幕尺寸。编译小程序后，rpx将进行px转换。转换基于375个物理像素，也就是说，在宽度为375个物理像素的屏幕下，1rpx = 1px。只需在这里了解即可，设计草稿的大小为375px或750px。
二、小程序官方菜单
a。全球，不可自定义的固定位置
小程序官方菜单位于所有界面（包括小程序中的嵌入式网页和插件），并且位置固定。开发人员无法自定义内容。他们只能选择深色和浅色两种配色方案。预留位置区域。如果要在小程序菜单附近放置交互式元素，请注意不要与小程序菜单冲突，该标志可识别且易于操作。
广告设备取决于刷牙！传奇手游的副本版本，散落的人们再次联手，与怪物战斗！
b。三种常见状态
小程序菜单共有三种状态：全局菜单，通话记录和获取地理位置。
三、标题栏设计（标题栏）
设计标题导航样式时，有必要与微信小程序菜单样式保持一定的差异，以利于区分。另外，您可以为标题导航的背景自定义背景颜色或图片（请注意，在开发图片时需要将其剪裁掉），还可以设置不透明度，这是否很漂亮？
第二页应设计有返回按钮，用户应知道他们在哪里以及如何返回。如果页面级别太多，则只需单击一下即可返回首页按钮，这样体验会更加友好，例如Zhihu辅助页面。
为上班族制作一款流行的网页游戏广告：放开双手，用一个按钮挂断电话，下班后一秒钟进行回收！
四、标签栏导航设计（标签栏）
标签页导航分为：顶部标签导航和底部标签导航。官方推荐的标签数量是2-5。但是，顶部导航不相关，可以根据特定项目的需求进行设计。底部导航最好遵循规范。
a。顶部标签导航
b。底部标签导航
底部的标签导航提供了四种不同图形的设计规范，满足了圆形，正方形，高矩形和宽矩形的四种形状类型。根据规格进行设计可以使视觉校正更加容易，并保持图标的统一。 3-4是最常见的数字。或者直接删除底部标签导航，例如微信读数36，。
五、内容设计
内容部分与应用程序设计相似，并且应用程序设计规范也适用于此处。
要点：
a。小程序弹出窗口的优先级不是最高
官方小程序菜单的等级优先级最高。即使是应用程序中最高优先级的弹出窗口也必须位于小程序菜单下才能达到此级别，即使沉浸式体验也不例外。标题栏和底部标签栏的优先级也在弹出窗口上方。
b。影片位置
小程序中的视频浮动在固定位置，并且滑动页面视频将不会沿Y轴移动，例如优酷视频。但是，还有诸如腾讯视频和爱奇艺等突破这种限制并支持视频Y轴滑动的技术。测试了六个主流视频应用，所有这些视频应用都是固定位置。因此，如果不容易做到，请不要让程序兄弟感到尴尬。
六、加载样式
要点：
如果加载时间长，则应提供取消操作，并使用进度条显示加载进度。在加载过程中，应保持动画效果；没有动画效果的加载很容易让人产生界面卡住的错觉。不要在同一页面上同时使用多个加载动画。模态加载样式将覆盖整个页面。由于无法清楚地告知特定的加载位置或内容可能会导致用户焦虑，因此应谨慎使用。可以自定义“页面中的加载反馈”，其余的加载样式微信提供了统一的标准，无需您自己开发。
七、全局操作结果反馈
要点：
图标类型的弹出提示适用于轻量级的成功提示。1.在5秒钟后自动消失而不会中断该过程，对用户几乎没有影响。它适用于不需要强调的操作提醒，例如成功提示。基于文本的弹出式提示适用于当前状态的简短说明或小错误提示。1.它会在5秒钟后自动消失，而不会中断该过程，对用户的影响很小。可以通过模式对话框提示需要用户明确知道的操作结果状态，并可以附加下一个操作指南。如果操作结果是当前过程的结尾，则可以使用操作结果页面提供反馈。
全文摘要
a。无法编辑的部分：
小程序官方菜单（包含三种状态）小程序加载方式（“页面中的加载反馈”除外）
b。摘要的一部分可以修改
标题栏（Title bar）可以自定义背景，并且第二页必须具有返回按钮。标签栏导航（标签栏）：顶部标签导航的交互方法不是唯一的，底部标签导航的数量控制在2-5。或者可以将其完全删除。官方小程序菜单具有最高优先级，标题栏和标签栏的优先级高于弹出窗口。视频位置是固定的，可以更改，但是技术要求很高。可以自定义页面中的加载反馈。
熟悉这些设计规范，相信您对小程序设计有个好主意。为了帮助朋友们提高设计效率，我为所有人编译了新版本的微信小程序控件，您可以在后台回复“ 小程序”来获取它。如果您感到有爱心，请注意它〜
此外，有兴趣讨论设计知识的朋友可以添加我的个人微信号，并在添加时指出您的位置〜