微信小程序的设计规范

一、小程序设计区域

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

微信小程序的设计规范

二、Nav Bar设计

1. 小程序菜单固定样式

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

微信小程序的设计规范

2. 交互注意事项

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

微信小程序的设计规范

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

微信小程序的设计规范

三、Tool Bar设计

1. 小程序设计规范

顶部标签分页栏颜色可以自定义,一般会沿用 App 的设计风格,以保证两个平台的视觉统一性。

微信小程序的设计规范

2. 常见的几种表现形式

微信小程序的设计规范

四、Tab Bar设计

1. 小程序设计规范

微信有提供小程序的底部标签样式,建议标签数量在 2-4 个适宜。

微信小程序的设计规范

也可根据产品需要选择或者去掉底部标签栏功能。

2. 常见的几种表现形式

微信小程序的设计规范

五、启动页图标

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

微信小程序的设计规范

六、加载样式

1. 小程序设计规范

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

微信小程序的设计规范

2. 常用的加载样式

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

微信小程序的设计规范

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

分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息