在开发微信小程序之前，一般都要先做原型图设计，顾名思义，就是把这个微信小程序前期的效果图做出来，发给客户进行确认，确认内容包含界面排名、功能和内容布局、大致样式等。做原型图是设计师和前端的工作，但是很多刚入行的新人以及没有做过原型图的同学，不太清楚做微信小程序原型图的尺寸是多少,设计小程序原型图的规范有哪些，今天丁老师就这个问题进行一下介绍。

设计小程序原型时，尺寸以手机的真实尺寸为准，需要适配主流手机屏幕尺寸，可以用375px x 667px（iPhone(6-8)的像素） 为基础设计稿尺寸，同时也需要兼容不同屏幕尺寸的比例，具体规范如下：

一、基础设计尺寸
1.基础设计稿尺寸，宽375px x 高667px，对应iPhone手机(6-8)的屏幕尺寸，是微信官方推荐的基础尺寸，适配性最强。
2.主流手机屏幕适配比例16:9 - 18:9，原型图设计时，不用限定高度，重点是保证宽度为375px，高度可根据内容延伸。
3.像素分辨率可设置为72dpi，是设计稿默认的默认分辨率，如果是需要高清图，可设置为144dpi。不过其实原型图设计时不需要纠结像素分辨率，重点是保证尺寸比例一致就可以了。
4.手机可见区域设置，需要注意页面内容被手机的刘海、底部的小黑条遮挡。
• 顶部状态栏高度：44px
• 底部导航栏高度：34px

二、不同设备适配原则
1.宽度固定，高度自适应。所有页面宽度可统一按375px设计，高度不限，高度根据内容长度自动延伸。
2.部分元素用相对单位，可在原型图上，标注宽度百分比，或是使用微信的rpx像素单位，微信的rpx会自动适配不同屏幕宽度。
3.需要避开异形屏的遮挡，顶部区域需预留出最低44像素的高度为安全区，以适配刘海屏，底部需预留最低34像素的安全区，以适配全面屏的底部导航。

三、常用组件尺寸参考
1.按钮button尺寸：高度44px ~ 50px，宽度可根据内容适配，圆角radius 8px ~ 12px。
2.输入框input尺寸：高度44px ~ 50px，左右内边距16px，边框圆角radius 8px。
3.标题：大标题20px ~ 24px，副标题16px ~ 18px，正文14px ~ 16px，辅助文字12px。
4.图标icon：导航图标24px x 24px，功能图标20px x 20px，小图标16px x 16px。
5.列表项list：高度48px ~ 56px，左右内边距16px，上下内边距12px。
6.间距：元素间距8px、16px、24px。

四、原型工具尺寸设置方法
1.Axure RP：新建项目时选择Mobile - iPhone 8（默认375×667px），或自定义尺寸宽度为375px，高度任意。
2.Figma：新建文件时设置宽度375px，高度设为812px，可适配IPhone X以上全面屏，开启Layout Grid，设置8px网格；
3.Sketch：选择IPhone 8模板（375x667px），或自定义画布尺寸，使用标尺+参考线标注安全区；
4.墨刀/摹客：直接选择微信小程序模板，默认已适配375px宽度，不用手动调整。

五、注意事项
1.原型阶段不需要考虑像素精度，只要重点保证组件尺寸比例和间距一致就可以了，可以在出最终效果图的阶段再按2倍尺寸比例设计并优化细节。
2.可参考小程序规范来设计(https://dev.codesign.qq.com/hc/article/design-system-mini-program)，
3.测试适配，在原型图制作完成后，可以微信开发者工具的模拟器，切换不同手机型号，检查设计内容。

软件原型图设计制作：网站、APP与小程序原型设计服务