WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。微信小程序WeUI的设计比较火热，所以本篇Pixso主要讲解一下WeUI教程。
1. 统一稳定的组件库
除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。大家可以在Pixso社区搜索WeUI，里面有详细的视觉规范设计源文件可以直接复用。
2. 重点突出原则
为了避免用户在微信中使用小程序WeUI服务时，注意力被周围复杂环境干扰，在设计小程序时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。
3. 小程序WeUI导航原则
导航是确保用户在网页中浏览跳转时不迷路的最关键因素。微信在小程序WeUI内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。此外，微信 iOS 用户还可通过界面边缘向右滑动操作，返回上一级小程序或微信页面。安卓用户可通过物理返回键达到同样目的。
开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致，指向清晰，有路可退。受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序WeUI菜单样式保持一定差异，以便区分。
开发者可为小程序WeUI页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。
4. 小程序菜单原则
小程序WeUI的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图。
开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。 官方小程序菜单将放置在界面固定位置，开发者在设计界面时请预留出该区域空间，若需要在此区域附近放置可交互元素，要特别注意交互事件是否会冲突，操作是否容易被使用。
开发者可在满足可用性的前提下，从微信提供的深浅两套配色的小程序菜单中选择合适的方案，以适应小程序WeUI页面设计风格。
5. 启动页加载原则
小程序WeUI启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
6. 图标型弹出提示
图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
7. 异常状态规范
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。 要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。例如表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
8. 减少输入原则
由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序WeUI页面时应尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要的键盘输入。
9. 点击精度提示
在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。
由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。
推荐使用在线协同设计工具Pixso
Pixso是国产在线协同设计软件，内置的功能强大，重点全部界面都是中文支持，完全不用担心语言问题而影响到工作。传统网页设计工具虽然也可满足基本需求，但是专业程度较高，而一些小白根本不会操作，但是Pixso让这一切简单的网页设计工作变的更加高效流畅，自然能够获得大众的喜欢。
在社区生态方面，Pixso资源社区拥有海量丰富多样且实用性高的设计系统也是资源社区的一大亮点，当中包括TDesign、Arco Design、Ant Design、Material Design等设计规范，帮助团队快速建立统一的设计规范，形成设计资产沉淀。
