WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一，包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素，微信weui开发团队可以直接使用这些组件。下面Pixso就将资源社区内的WeUI微信小程序组件库素材分步讲解WeUI设计规范与技巧，帮助设计师们快速上手WeUI的产品设计。
1. 微信小程序组件设计规范
weui的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单。开发者不可对其中内容进行自定义，但是可以自由选择深浅两种颜色的配色来适应weui页面的设计风格，在Pixso中，深浅两色的WeUI微信小程序组件库都可直接免费一键使用。
1.1 轻视觉
在设计WeUI微信小程序时，我们需要尽量精简界面，在用户初次点击微信小程序时，繁琐的页面会影响用户首次的使用体验感。当页面出现了文章、积分等内容后，搜索就更要弱化显示。所以可以将搜索由原来的搜索框逐渐变成了一个右上角的icon，有搜索需求的时候可以找到，对用户普通的预览不会造成困扰。
1.2 导航栏
微信官方对导航的要求是导航明确，来去自如。导航是确保用户在WeUI微信小程序中浏览到自己感兴趣的内容。导航需要告诉用户，当前在哪，可以去哪，如何回到初始页等问题。微信在小程序内中不提供统一导航栏样式，开发者可自行根据需要自行设计WeUI微信小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。此外，很多有全面屏手势的操作系统还可通过界面边缘向右滑动操作，返回上一级小程序或微信页面。
1.3 弹窗设置
WeUI页面全局操作结果——图标型弹出提示图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
1.4 按钮
微信小程序官方文档提供了各种按钮的默认样式，设计师可以当做一种参考，至于实际项目中按钮的样式、色彩、各种状态，都可以根据实际项目来进行自定义。对于熟悉Native app设计规范的设计师，尤其是做过iOS平台软件的设计来说，WeUI微信小程序设计很容易掌握，只是微信小程序的平台特性，需要遵循着官方设计规范的地方多一些，再加上WeUI微信小程序还有许多不完善的功能组件，功能与性能都有待进一步提高。
这时设计师可以打开Pixso协同设计软件，Pixso社区内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范，提供海量设计模板和素材，本地化字体资源。Pixso还实现了团队所有人都能在同一个文档上工作，原型、设计、交付一站式解决，引领新的设计协作趋势。
1.5 颜色设计
搭配时需要先选主色，再确定副色，可以根据产品的特性来定配色目标，副色不能喧宾夺主要与主色相得益彰，一般主色选择好后，WeUI微信小程序的整体基调也就定好了。但副色的使用会影响整体基调，我们要尽量精简色彩的层级，层级过多也会影响到用户的视觉效果，刚开始若是不知道该怎样搭配色彩层级比较合适，那么可以点击进入Pixso看看资源社区内其他设计师是如何设计WeUI微信小程序模板的，不仅可以做为灵感素材参考，也可以直接一键使用。
1.6 状态栏
根据微信小程序官方文档，状态栏是不需要设计的，因为状态栏是跟着各个手机操作系统走。如内容区、小程序胶囊，状态栏无需设计。设计师只需要把Android和iOS两种状态栏组件根据需要取用即可。
2. 微信小程序设计技巧
2.1 功能简洁
微信小程序的方便之处就在设计不用如App那样繁琐，只需满足单一需求即可。比如打车微信小程序，在功能选择上只提供核心功能在微信小程序露出，一些非必须的入口则没有体现出来，比如消息，扫一扫以及个人中心里的一些功能等，这样用户在使用微信序叫车时更加专注。
2.2 明亮的背景以及留白
简洁风的设计，界面的整个内容通常都是呈现在白色或非常明亮的背景上的。对空白深思熟虑的使用让界面总体上看起来非常的干净、清新且美观。
2.3 流程明确
微信小程序UI、以及主页的各个版块内容应该要有一定逻辑顺序，通常主页顶部是图片banner（轮播图、拼接图海报等），之后是快捷按钮、商品分类，中间可根据需求适当穿插视频、标题、优惠券等不同功能版块。
3. 新一代协作设计工具Pixso，让设计更高效
无论你从事该行业多久，强大的工具可以帮助你更有效、更准确地完成工作，Pixso是国内 UI/UX 设计师和产品经理都在使用的专业设计工具，支持在线网页使用以及Windows和Mac等多个平台，内部集成了大量优秀插件，基本上覆盖到页面设计常用的大部分工具。Pixso不仅仅是一个设计工具，更是集合了原型、设计、协同、交付 、资源管理于一体的企业级协同设计解决方案，在需求调研协作、低代码交付等方面也十分出色，Pixso还内置海量的小程序设计设计模板，各行业的网页设计案例满足了开源项目必要的多人协作编辑，让共创也变得尤其简单！
