2019年小程序界面设计规范及经验分享（附样式库）

2018年小程序的迅猛发展，小程序现已为各大企业广泛采用，“触手可及、用完即走”的用户体验备受青睐，随之小程序设计也成为设计师的必备技能，那在进行小程序界面设计时，应该如何快速做设计？过程中又要注意哪些问题呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

接下来是干货时间～文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

内容大纲文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

一、小程序设计区域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

二、Nav Bar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

三、Tool Bar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

四、Tab Bar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

五、启动页设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

六、加载样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

七、没有App如何设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

八、推荐几个常用的平台设计网站文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

对于已经开发了App的产品，在进行小程序设计时需遵守小程序的规范，同时要保持小程序界面设计与App的风格统一性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

在设计过程中主要注意以下几点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

一、小程序设计区域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

小程序的“所有页面”右上角位置，都固定放置了小程序的菜单，在设计界面时需预留出该区域空间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

二、Nav Bar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1、小程序菜单固定样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

微信提供了深浅两种配色样式，以便更好的融合到各种风格的页面中，需注意保持小程序菜单清晰的辨识度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

线上案例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、交互注意事项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

如果要在小程序菜单附近放置交互元素，要考虑是否有交互冲突，应尽量避免误触的可能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

如上图，小红书的自有导航样式个人不推崇，理由如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1）样式与官方菜单样式未区分开，容易产生疑惑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2）NavBar栏两端对称在顶部，视觉上显得过于呆板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

微信读书既有微信线条外框的DNA, 又区别于官方样式，是不错的综合。以上仅限个人观点，还需用户数据来客观验证。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

3、搜索框常见的几种表现形式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

三、Toolbar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1、小程序设计规范文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

顶部标签分页栏颜色可自定义，一般会沿用App的设计风格，以保证两个平台的视觉统一性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、常见的几种表现形式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

四、Tab Bar设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1、小程序设计规范文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

微信有提供小程序的底部标签样式，建议标签数量在2-4个适宜。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

也可根据产品需要选择或者去掉底部标签栏功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、常见的几种表现形式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

五、启动页图标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

启动页除品牌Logo外，其他元素都由微信统一提供，且不能更改，设计师需要提供2倍和3倍尺寸的Logo即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

六、加载样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1、小程序设计规范文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，建议谨慎使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、常用的加载样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

需告知用户具体加载的位置形状，减轻用户焦虑情绪。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

七、没有App如何设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

对于没有开发App来说，可依据官方推出的《微信小程序设计指南》来设计，以确保快速设计出符合规范的小程序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

小程序设计应遵循友好、高效、一致的设计原则，每个页面都应有明确的重点，清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

八、推荐几个常用的平台设计网站文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1、BAT各平台小程序设计规范网站文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1）微信小程序设计指南：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://developers.weixin.qq.com/miniprogram/design/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2）支付宝小程序设计规范：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://docs.alipay.com/mini/design文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

3）百度-智能小程序设计规范：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://smartprogram.baidu.com/docs/design/overview/introduction/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、其他常用的设计规范网站：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

1）苹果-人机界面指南文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

详细介绍了ios设计规范，同时还提供了Ui设计资源下载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://developer.apple.com/design/human-interface-guidelines/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2、安卓-MD设计指南文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://material.io/design/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

3、蚂蚁设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

提供移动和Web端的设计组建，还有设计案例和心得的文章供学习文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://design.alipay.com/#ds文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

4、微信样式库文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

提供微信内的网页和小程序设计规范文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

https://weui.io/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

2019 新版小程序控件+设计规范源文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html

附件文件为sketch版本，后台回复关键词“小程序”即可获取下载链接。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/12693.html