大家好，我是一名独立开发人员，拉里。与APP相比，开发小程序的开发成本更低，周期更短，并且开发难度和维护成本相对降低，因此越来越多的开发人员开始涉足小程序。

碰巧我最近要开发小程序，所以今天我将从设计方面讨论微信小程序的设计规格，并掩埋设计中可能出现的缺陷，以便您更好地完成您的小程序]〜

设计尺寸

微信小程序的设计只需要以iPhone6屏幕尺寸为750x1334px作为视觉草稿进行设计，因为微信小程序将rpx作为css大小的单位，并且rpx可以根据屏幕宽度进行自适应，并且屏幕宽度为750rpx，因此在iPhone6设计草案中1px = 1rpx，尺寸转换将非常简单。

设计区域

小程序的所有页面，包括小程序嵌入式网页和插件，微信都会在右上角放置官方小程序菜单。样式，大小和布局如上图所示。不允许开发人员自定义其内容，但是他们可以选择两种基本的配色方案以适合页面设计样式，如下图所示。

小程序官方菜单位于界面上的固定位置。设计界面时，请在此区域中留出空间。如果要在此区域附近放置交互元素，请特别注意交互事件是否冲突以及操作是否容易受到影响。使用。

字体规格

小程序的字体仍遵循微信固有的视觉规范：微信中的字体使用与正在运行的系统字体一致，并且常见字体大小为20、18、17、16、14在图13、11（pt）中，使用情况如上图所示。

字体颜色规范

消色差-主要成分是黑色，次要成分是灰色；时间戳记的默认值，形式为Light；描述内容的很大一部分，主要内容为半黑色；

蓝色是链接的颜色，绿色是完成词的颜色，红色是错误的颜色，“按下”和“禁用”状态分别将透明度降低到20％和10％；

顶部导航栏navigationBar

顶部导航栏通常称为导航栏。标准高度为128rpx。通常，仅修改背景色。也可以自定义标题区域和导航区域，但是要注意自己的导航样式的设计，并且微信官方小程序菜单样式应该有所不同。

标签页导航tabBar

标签页导航栏通常称为标签栏。标准高度为98rpx。它可以固定在页面的顶部或底部，以方便用户在不同的选项卡之间切换。标签数量为2-5。为了确保可点击区域，建议标签数量不要超过4个。页面上最多只能有一组选项卡栏，并且可以根据产品要求选择或删除这些选项卡栏。

1.底部标签栏

小程序主页可以选择微信提供的本机底部标签分页样式，该样式仅适用于小程序主页。可以在开发过程中自定义图标样式，标签副本和副本颜色。特别说明：图标控件的大小为54x54px，但是小程序的开发需求为81x81px，是1.的5倍，您需要注意一下。

2.顶部标签栏

顶部标签页栏的颜色可以自定义。在选择自定义颜色时，重要的是要使分页栏的选项卡保持可用，可见和可操作。

弹出

无论是APP还是网页，弹出窗口始终显示在页面顶部，但是在小程序中，导航栏和选项卡栏的级别最高，因此弹出窗口优先级更高的也在这里。必须有收敛性，因此在设计和开发中，需要注意避免踩坑。

起始页

小程序启动页面是微信中小程序在一定程度上显示品牌特征的页面之一。此页面将突出显示小程序品牌特征和加载状态。除了在启动页面上显示品牌徽标（Logo）之外，页面上的所有其他元素（例如加载进度指示器）均由微信统一提供，并且不能更改，并且不需要开发人员进行开发。

加载样式

无论是APP还是小程序，加载都是不可避免的。相同的长期等待加载会给用户带来不良情绪。因此，在不可避免地需要加载和等待时，应及时提供反馈以减轻用户的不良等待。除了小程序中的自定义加载样式外，它还依赖微信提供了一系列加载样式：

1.下拉页面刷新并加载

在微信小程序中，微信提供了标准的页面下拉刷新加载功能和样式，开发人员无需自行开发。

2.在页面上加载反馈

开发人员可以在小程序中自定义页面内容的加载样式。建议您使用本地加载还是全局加载，自定义加载样式应尽可能简洁，并应使用简单的动画来告知用户加载过程。

3.模态加载

模式加载样式将覆盖整个页面。由于无法清楚地告知特定的装载位置或内容可能会导致用户焦虑，因此应谨慎使用。除某些全局操作外，请勿使用模式加载。

4.部分加载反馈

部分加载反馈仅在触发加载的页面部分提供反馈。这种反馈机制更具针对性，页面跳动也较少，这是微信建议的反馈方法。

5.全局加载反馈

全局加载将加载图标放在导航标题的左侧，然后使用标题栏提示加载小程序页面内容的过程。

最后

关于微信小程序的设计和开发，官方平台提供了相关的说明和资源文件。设计文件包括Sketch和PS基本组件库，但已有16年的历史。另外，我仍然微信官方文档在此基础上添加了一些新样式，并且还随附了官方UI控件供您参考。官方帐户（force_code）在后台回复“ 小程序设计规范”以获取下载链接。

今天的内容是这样，希望对您有所帮助，官方帐户后台回复“ Plus Group”，标识二维码添加“ Full Power Robot”，回复“ Plus Group”加入产品内部测试用户组，您还可以添加微信 lishichao706以将您带到独立开发人员的聚集地。