最近设计组的人经常询问小程序的设计规范。 虽然官方提供了样式库的下载，但只是16年的版本，并不是最新的。 网上没有全面的设计经验分享。 这让我停止了策划，推动了这篇文章的输出。 最近刚刚完成了几个小程序项目。 我总结了自己的经验，结合陌陌小程序官方设计手册分享给大家。 我希望能够帮助您更快地入门。 。
随着2018年小程序的快速发展，小程序现已被各大企业广泛采用。 “触手可及，用完即走”的用户体验备受追捧。 一时间，小程序设计成为了设计师的必备技能。 那么，在设计小程序的界面时，应该如何快速设计呢？ 过程中我们应该注意哪些问题？
又到了干货时间啦~
内容大纲
1.小程序设计区
2. 导航栏设计
3. 工具栏设计
4. TabBar设计
5.启动页面设计
7. 如何在没有App的情况下进行设计
8.推荐几个常用的平台设计网站
对于已经开发出APP的产品，在设计小程序时必须遵循小程序规范，同时保持小程序界面设计与APP风格的统一。
在设计过程中，应注意以下几点：
1.小程序设计区
小程序的菜单固定放在小程序“所有页面”的右上角，在设计界面时需要预留这个区域。
2. 导航栏设计
1.小程序菜单固定样式
陌陌提供了深色和浅色两种配色方案，这样可以更好地融入各种风格的页面，同时要注意保持小程序菜单的清晰辨识度。
网上案例：
2. 交互注意事项
如果要将交互元素放置在小程序菜单附近，应考虑是否存在交互冲突北京支付宝小程序定制网站，并尽量避免误触的可能性。
建议开发者自己的导航风格与陌陌官方小程序菜单风格保持一定的区别，以便于区分。
如上图，我个人并不推荐小红书自带的导航风格，原因如下：
1）风格与官方菜单风格没有区分，很容易引起怀疑
2）NavBar栏两端底部对称，视觉上过于生硬。
沫沫读书不仅有沫沫腰线框的DNA，而且与官方的款式也不同北京支付宝小程序定制网站，算是很好的组合。 以上仅是个人意见，需要用户数据客观验证。
3.搜索框的几种常见表达方式
3. 工具栏设计
1. 小程序设计规范
底部标签页栏的颜色可以自定义，通常会继承App的设计风格，以保证两个平台的视觉统一。
2、几种常见的表现形式
4. TabBar设计
1. 小程序设计规范
陌陌小程序有顶级标签样式，建议标签数量为2-4个。
您还可以根据产品需要选择或去除顶部标签栏功能
2、几种常见的表达方式
5. 起始页图标
除启动页的品牌标志外，其他元素均由陌陌提供，不可修改。 设计师需要提供双重和三重规格的标志。
6. 加载方式
1. 小程序设计规范
全局加载是小程序名称右侧的加载图标。 modal的加载样式会覆盖整个页面，因为很难明确告知具体的加载位置或内容，可能会引起用户的恐惧感，建议谨慎使用。
2. 常用的加载样式
需要告知用户具体的装载位置和形状，以减少用户的恐惧感。
7. 如何在没有App的情况下进行设计
对于没有开发过App的人，可以按照官方的《微信小程序设计手册》进行设计，确保能够快速设计出符合规范的小程序。
小程序设计应遵循友好、高效、一致性的设计原则。 每个页面应该有明确的焦点，清楚地告诉用户他们在哪里，可以去哪里，以保证用户可以在页面中自由移动。 不要迷路。
8.推荐几个常用的平台设计网站
1、各BAT平台小程序设计规范网站
1）陌陌小程序设计手册：
2）支付宝小程序设计规范：
3）百度-智能小程序设计规范：
2.其他常用的设计规范网站：
1）Apple-人机界面手册
详细介绍了ios设计规范，同时还提供Ui设计资源下载。
2）Android-MD设计手册
3）蚂蚁设计
提供中国联通和Web端设计搭建，以及设计案例和经验文章供学习。
#ds
4）Momo风格库
提供陌陌内网页、小程序的设计规范
