听说你准备开发小程序，这套设计规范送给你

  各位好！，我是独立开发者Larry，对比APP来讲，开发设计一款小程序的项目成本更低、周期时间更短，另外开发设计难度系数和维护保养成本费也相对性减少，因而愈来愈多的开发人员刚开始进坑小程序。

  恰好近期我也要开发设计小程序，因此今日我也从设计方案层面聊一聊手机微信小程序设计标准，埋上设计方案中将会会出現的坑，让你能更强的进行你的小程序～

  手机微信小程序的设计方案只必须以iPhone6显示屏尺寸750x1334px为视觉效果稿开展设计方案就可以，由于手机微信小程序以rpx为css尺寸单位，rpx能够 依据显示屏总宽开展响应式，要求显示屏总宽为750rpx，因而在iPhone6设计图上1px=1rpx，在尺寸换算上便会非常简单。

  小程序的全部页面，包含小程序嵌入网页页面和软件，手机微信都是在其右上方置放官方网小程序莱单，样式规格及合理布局如圖。开发人员不能对其內容自定，但可挑选浓淡二种基础颜色以融入页面设计理念，如下图。

  官方网小程序莱单置放在页面固定不动部位，在设计方案页面时要预埋出该地区室内空间，若要在这里地区周边置放可互动原素，要需注意互动恶性事件是不是会矛盾，实际操作是不是非常容易被应用。

  小程序的字体样式仍然遵照手机微信原生态视觉规范：手机微信内字体样式的应用与所运作的系统字体保持一致，常见字体大小为20, 18, 17, 16,14 13, 11(pt)，应用情景实际如圖。

  无五颜六色——主內容Black灰黑色，主次內容Grey深灰色；时间戳与表格缺省值Light深灰色；一大段的表明內容并且归属于具体内容用Semi黑；

  有五颜六色——深蓝色为连接用色，翠绿色为进行字眼色调，鲜红色为错误用色，Press与Disable情况各自减少清晰度为20%与10%；

  顶端导航条一般通称导航条，规范高宽比：128rpx，一般只做背景色改动，题目区与导航栏区域开展自定开发设计也是能够 的，但是要留意设计方案的已有导航栏样式与微信官网小程序莱单样式要维持一定差别，便于区别。

  标签分页查询导航条一般通称标签栏，规范高宽比：98rpx，可固定不动在页面的顶端或底端，有利于客户在不一样分页查询间做转换。标签总数在2-五个，为保证点一下地区，提议标签总数不超过4项。一个页面都不应出現一组之上的标签栏，可依据产品需求挑选或除掉标签栏。

  1. 底端标签栏

  小程序主页可挑选手机微信出示的原生态底端标签分页查询样式，该样式仅作小程序主页应用。开发设计时可自定义图标样式、标签创意文案及其创意文案色调等。非常表明：这儿标志控制规格是54x54px，可是小程序开发设计必须的是81x81倍，必须留意一次给及时。

  2. 顶端标签栏

  顶端标签分页查询栏色调可自定。在自定颜色选择中，尽量留意维持分页查询栏标签的易用性、精确性和可执行性。

  不论是APP還是Web网页，弹出窗口一直出現在页面的顶部，可是在小程序里导航条跟标签栏的等级是最大的，以致于优先较高的弹出窗口这里还要有一定的收敛性，因而在设计方案和开发设计时，都必须留意防止踩坑。

  小程序app启动页是小程序在微信内一定水平上呈现知名品牌特点的页面之一。本页面将突显展现小程序知名品牌特点和加载情况。app启动页除品牌图标（Logo）展现外，页面上的别的全部原素如加载进展标示，均由手机微信统一出示且不可以变更，不用开发人员开发设计。

  不论是APP還是小程序，加载都难以避免，一样长期的加载等候会造成客户的消极情绪，因而，在难以避免的加载和等候时，给与立即的反馈以缓解客户等候的消极情绪全是必不可少的。小程序里除开自定加载样式，也是依靠手机微信出示了一系列加载样式：

  1. 页面页面刷新加载

  在微信小程序内，手机微信出示规范的页面页面刷新加载工作能力和样式，开发人员不用自主开发设计。

  2. 页面内加载反馈

  开发人员可在小程序里自定页面內容的加载样式。提议无论是应用在部分還是全局性加载，自定加载样式都应当尽量简约，并应用简单动画告之客户加载全过程。

  3. 多形式加载

  多形式的加载样式将遮盖全部页面，因为没法确立告之实际加载的部位或內容将会造成客户的焦虑情绪感，因而应慎重应用。除开在一些全面性实际操作下不必应用多形式的加载。

  4. 部分加载反馈

  部分加载反馈是只在开启加载的页面部分开展反馈，那样的反馈体制更为有目的性，页面颤动小，是手机微信强烈推荐的反馈方法。

  5. 全局性加载反馈

  全局性加载将加载标志放进导航栏题目左边，应用标题栏提醒加载小程序页面內容的全过程。

  关于微信小程序的开发设计，平台网站得出了有关表明详细介绍及資源文本文档，在其中设计方案文件包含Sketch和PS基本组件库，不过是16年的，此外我一直在微信官网文档的基本上增加了一些新的样式，里边也附加了官方网UI控制，供大伙儿参照，微信公众号(force_code)后台管理回应「小程序设计标准」获得下载地址。

  今日的內容便是这种，期待对你有一定的协助，公众号后台回应『进群』识别二维码加上“码力开全智能机器人”，回应『进群』就可以添加商品内侧消费群，你也能够 加上我的手机微信lishichao706，陪你进到独立开发者的集中地。