一、小程序设计区域
小程序的「所有页面」右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。

二、Nav Bar设计
1. 小程序菜单固定样式
微信提供了深浅两种配色样式,以便更好地融合到各种风格的页面中,需注意保持小程序菜单清晰的辨识度。

2. 交互注意事项
如果要在小程序菜单附近放置交互元素,要考虑是否会有交互冲突,应该尽量避免误触的可能。

3. 搜索框常见的几种表现形式

三、Tool Bar设计
1. 小程序设计规范
顶部标签分页栏颜色可以自定义,一般会沿用 App 的设计风格,以保证两个平台的视觉统一性。

2. 常见的几种表现形式

四、Tab Bar设计
1. 小程序设计规范
微信有提供小程序的底部标签样式,建议标签数量在 2-4 个适宜。

也可根据产品需要选择或者去掉底部标签栏功能。
2. 常见的几种表现形式

五、启动页图标
启动页除品牌 Logo 外,其他元素都由微信统一提供,且不能更改,我们仅需提供2倍和3倍尺寸的Logo即可。

六、加载样式
1. 小程序设计规范
全局加载是小程序名称左侧的加载图标。模态的加载样式会覆盖整个页面,由于无法明确告知具体加载的位置或内容,可能会引起用户的焦虑感,建议谨慎使用。

2. 常用的加载样式
需告知用户具体加载的位置形状,减轻用户焦虑情绪。

对于没有开发App的产品来说,可依据官方推出的《微信小程序设计指南》来设计,能够确保快速设计出符合规范的小程序。