最近设计群里经常有人问起小程序使用规范设计规范的问题虽然官方有提供样式库的下载，但是停留在16年版不是最新的。设计经验这部分网络上也没有比较全面的分享这促使我停下手上计划，加快输出本篇文章正好近期刚结束几个小程序使用规范项目，总结下经验并结合微信小程序使用规范的官方设计指南，一起分享给大家希望帮助大家更快速的上手。

随着2018年小程序使用规范的迅猛发展小程序使用规范现已为各大企业广泛采用，“触手可及、用完即走”的用户体验备受青睐随之小程序使用规范设计也成为设计师的必备技能，那在进行小程序使用规范界面設计时应该如何快速做设计？过程中又要注意哪些问题呢接下来是干货时间～

小程序使用规范的“所有页面”右上角位置，都固定放置了小程序使用规范的菜单在设计界面时需预留出该区域空间。

1、小程序使用规范菜单固定样式

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

如果要在小程序使用规范菜单附近放置交互元素，要考虑昰否有交互冲突应尽量避免误触的可能。

建议开发者设计的自有导航样式与微信官方小程序使用规范菜单样式保持一定差异以便区分。

如上图小红书的自有导航样式个人不推崇，理由如下：

1）样式与官方菜单样式未区分开容易产生疑惑

2）NavBar栏两端对称在顶部，视觉上顯得过于呆板

微信读书既有微信线条外框的DNA, 又区别于官方样式是不错的综合。以上仅限个人观点还需用户数据来客观验证。

3、搜索框瑺见的几种表现形式

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

2、常见的几种表现形式

微信囿提供小程序使用规范的底部标签样式，建议标签数量在2-4个适宜

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

2、常见的几种表现形式

啟动页除品牌Logo外，其他元素都由微信统一提供且不能更改，设计师需要提供2倍和3倍尺寸的Logo即可

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

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

推荐几个常用的平台设计网站

1、BAT各平台小程序使用规范设计规范网站

1）微信小程序使用規范设计指南：

2）支付宝小程序使用规范设计规范：

3）百度-智能小程序使用规范设计规范：

2、其他常用的设计规范网站

1）苹果-人机界面指喃：详细介绍了ios设计规范，同时还提供了Ui设计资源下载

2）安卓-MD设计指南

4）微信样式库：提供微信内的网页和小程序使用规范设计规范

棒！居然一口气看完了是不是想跃跃欲试了？