对UI设计师来说，微信公众号和小程序设计规范除了个别限定不能更改的样式外，其他设计与APP设计或者移动端网页设计基本相同。但因为设计不能脱离平台，全面的了解公众号和小程序的设计文档还是很有必要的。

—————————————————公众号——————————————

微信公众号

公众号是基于HTML5开发和运行的，主要以营销和信息传递为主简单的服务为辅，致力打造一个内容创作和服务平台。

公众号分3种：

订阅号（适合个人、自媒体、发布内容文章）

服务号（适合企业和组织，提供服务）

企业微信（企业沟通和办公）

公众号本身的样式固定，只有列表模板和封面模板两种可选。

底部自定义菜单点开选项可以跳转至小程序或公众号链接网页（如官网、商城等）。

若跳转至小程序，其小程序需按微信小程序官方设计文档指导设计；如跳转至公众号网页，除了顶部导航栏样式不能更改外，界面内其他内容全部可以自行设计。设计原则即适应移动端浏览的网页设计。

例：车来了——跳转到小程序

例：UI头条——跳转到公众号网页

—————————————————小程序——————————————

微信小程序

据统计，2019年微信小程序的流量已经超过公众号了，因此设计师掌握微信小程序的设计规范重要性不言而喻。

微信小程序是什么？微信小程序是运行在微信里的APP。它基于微信自身开发环境与开发语言进行开发，比公众号中打开网页拥有更好的稳定性和流畅性。其功能主要专注产品与服务。

微信小程序设计原则：

一、友好礼貌：

1.重点突出：

如搜索界面应该专注搜索，简化搜索操作，提供搜索历史等，二不应该出现大面积的广告banner或弹窗等其他干扰事项。

如，每日优鲜的搜索不仅提供了搜索输入框，还提供历史搜索和热门搜索，提供便捷的同时，还进行了推广。并且底部自动弹出了输入框，这点比需要点击才出现输入框更加人性化。

主次分明：主次操作按钮的样式应该有所区分，主要操作用更明显的设计元素，帮助用户快速决策，而不应设计成一样，干扰用户。

如：摩拜单车，“扫码用车”的按钮非常明显突出，赶时间的用户不需要过多思考即可正确点击“扫码用车”。而蓝牙开锁、定位、车辆故障等按钮则缩小放在右侧。

2.流程明确：

遵循用户的意愿流程进行。避免出现流程之外的内容打断用户。如一个搜索中弹出的的推荐广告弹窗。

二、清晰明确：

1.导航明确，来去自如

小程序导航：小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式只有2种固定的深浅配色方案可选。位置固定。

左侧导航可以自行设计，建议与微信官方小程序菜单保持差异，以便区分。

除了较常见的“返回”导航图标，还可以自定义其他功能，如摩拜单车左侧导航进入“个人中心”：

底色可以自定义。如爱奇艺小程序：

内容页导航：标签分页（Tab）导航可位于底部或顶部。标签数量不得少于2个，最多不得超过5个。样式可以自定义。

如：

2. 减少等待，反馈及时

启动页加载：启动页除品牌标志（Logo）展示外，固定样式，不可自定义。

页面下拉刷新加载：固定样式，不可自定义。

页面内加载反馈：可自定义。建议自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。

模态加载:模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。

局部加载反馈：局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。例如：

全局加载反馈：开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如： 

加载反馈注意事项：

若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。

载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。

不要在同一个页面同时使用超过1个加载动画。

结果反馈：微信给出了一些可选样式和说明：

图标型弹出提示和文字型弹出提示：1.5秒后自动消失，不打断流程，属于轻量化提示。

模态对话框：需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。

页面全局操作结果—结果页

这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。

3.异常可控，有路可退

异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

异常状态——表单出错

表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。

三、便捷优雅

减少输入：鼓励更多采用相机扫描、拍照、语音等识别接口帮助用户输入；微信开发地理位置接口。应尽量让用户做选择而不是键盘输入。

避免误操作：最适宜点击物理尺寸大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

利用接口提升性能：微信设计中心已推出了一套网页标准控件库，官网有提供sketch和Photoshop版设计控件库（文末亦有压缩包可下载）。

统一稳定

建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。

小程序视觉规范

字体

微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：

字体颜色

主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑。

蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。

列表

表单输入

按钮

图标

以上就是今天的分享了。下面是小程序官方文档网址：

1. 微信官方文档——设计规范（小程序、小游戏、公众号、开放平台、智能对话）：

https://developers.weixin.qq.com/miniprogram/design/

https://weui.io

2. 支付宝小程序设计规范：

https://docs.alipay.com/mini/design

3. 百度-智能小程序设计规范：

https://smartprogram.baidu.com/docs/design/overview/introduction/

                                                     不要忘记点赞哦！