小程序设计规范

标签；相比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%；

顶部导航栏navigationBar

顶部导航栏一般简称导航栏，标准高度：128rpx，一般只做底色修改，标题区与导航区要进行自定义开发也是可以的，不过要注意设计的自有导航样式与微信官方小程序菜单样式要保持一定差异，以便区分。

标签分页导航tabBar

标签分页导航栏一般简称标签栏，标准高度：98rpx，可固定在页面的顶部或底部，便于用户在不同分页间做切换。标签数量在2-5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签栏，可根据产品需求选择或去掉标签栏。

1.底部标签栏

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

弹窗

无论是APP还是Web网页，弹窗总是出现在页面的最上层，但是在小程序里导航栏跟标签栏的层级是最高的，以至于优先级较高的弹窗在这里也要有所收敛，因此在设计和开发时，都需要注意避免踩坑。

启动页

小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（ Logo ）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。

加载样式

无论是APP还是小程序，加载都不可避免，同样长时间的加载等待会引起用户的不良情绪，因此，在不可避免的加载和等待时，给予及时的反馈以舒缓用户等待的不良情绪都是必需的。小程序里除了自定义加载样式，更是依赖微信提供了一系列加载样式：

1.页面下拉刷新加载

在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。

2.页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。

3.模态加载

模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。

4.局部加载反馈

局部加载反馈是只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。

5.全局加载反馈

小程序设计规范（一）相关推荐

控件尺寸规范_微信小程序设计规范你了解多少
正好最近我也要开发小程序,所以今天我就从设计方面聊一聊微信小程序设计规范,埋上设计中可能会出现的坑,让你能更好的完成你的小程序- 一.宏观角度微信小程序设计的基本原则是微信设计中心针对在微信类上线的 ...
多图指南——微信小程序设计规范
本文由作者孟冬初寒月于社区发布本文较长,建议收藏微信小程序是一种不用下载就能使用的微应用,也是一项应用创新发明,经过三年的发展,已经构造了新的微信小程序开发环境和开发者生态.小程序也是这么多年 ...
小程序设计规范及经验分享
小程序行业看似杂乱无章,但是却有着其独特的发展方向.整个行业没有设计规范的前提下就会使得很多品牌公司所设计的小程序不能达到整个行业的平均水平,所以今天我就来做一个简单的小程序设计规范以及经验的分享.我 ...
android文件选择器_支付宝小程序设计规范（内附PSD+Sketch源文件）
小程序已在我们的生活场景中不断应用,在继微信小程序正式推出后,国内互联网巨头都陆续推出了自家的小程序平台,如:支付宝小程序.百度小程序.抖音小程序.头条小程序等:当然每个平台的小程序都有属于自己的设计 ...
微信小程序设计规范(官方)文档
为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库:同时提供方便开发者调用的资源. 基础样式库预览地址:https://weui.io 文末附规范文档PSD和sketch源文件下 ...
安卓小程序自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
微信小程序开发分析总结
本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法.毕 ...
小程序规范怎么设计？精华整理
近期工作上有遇到关于微信小程序规范优化的事情,在完成整个规范优化后,感觉有一些要点还是非常适合产品同学,于是就快速整理了一下. 首先,这篇小程序规范比较适合产品岗,一些设计上的规范我觉得没有必要去阐述 ...

小程序设计规范（一）

小程序设计规范

设计尺寸

小程序设计规范（一）相关推荐

最新文章

热门文章