参与多个项目后，我总结了这份可能是网上最全的小程序设计规范

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

随着 2018 年小程序的迅猛发展，小程序现已被各大企广泛采，「触手可及、即走」的户体验备受青睐，随之小程序设计成为设计师的必备技，那在进行小程序界面设计时，应该如何快速做设计？过程中又要注意哪些问题呢？

于已经开发了 App 品，在进小程序设计时需遵守小程序规范，时要保持小程序界设计与 App 风格统性。

小程序设计区域

小程序「所有页」右上位，都固定放了小程序菜单，在设计界时需预留出该区域空。

Nav Bar设计

1. 程序菜固定式

提供了深浅种配色式，以便更好地融各种风格的页面中，需注保持程序菜清晰的辨识度。

线上案例：

2. 交互注意事项

如果小程序单近置交互元素，考虑否交互冲突，应尽避免误触的可能。

建议发者设的自导航样式与微信官方小程序单样式保持一差异，以便区分。

如图，小书的自导航样式人不推崇，理由如下：

• 样式与官方菜单样式未区分开，容易产生疑惑；
• Nav Bar 栏两端对称顶部，视觉显得过于呆板。

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

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

Tool Bar设计

1. 程序设计规范

顶部标签页栏颜色可定义，一会沿用 App 的计风格，以保证个的视觉统一性。

2. 常见的几种表形式

Tab Bar设计

1. 小程序设计规范

微信有供小程序的标签样式，建议标签数量在 2-4 个适宜。

可根据产需要择或者掉标签栏功。

2. 常见的种表现形式

启动页图标

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

加载样式

1. 小程序设计规范

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

2. 常用的加载式

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

对于没有开发App来说，可依据官方推出的《程序计指南》来计，以确保快速计出符规范的程序。

小程序设计应遵循友好、效、一致的设计原则，每个页面都应有明确的重点，清晰明确地告知户身在何处，又可往何处，确保户在页面中游刃有余地穿梭而迷路。

平台设计网站推荐

最后，推荐几个的平台设计。

1. BAT各平台小程序设计规范

微信小程序设计指南：https://developers.weixin.qq.com/miniprogram/design/

支付宝小程序设计规范：https://docs.alipay.com/mini/design

百-智小程序设计规范：
https://smartprogram.baidu.com/docs/design/overview/introduction/

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

苹果-人机界面指：https://developer.apple.com/design/human-interface-guidelines/

详细介绍了 iOS 设规范，同时还提供了 UI 设资源下载。

安卓-MD设指南：https://material.io/design/

蚂蚁设：https://design.alipay.com/#ds

提供移动和 Web 端的计组件，还有计案例和心得的文章供学习。

式库：https://weui.io/

供微信的页和小程序设计规范。

添作者的个人微信：