页面全局操作结果——文字型弹出提示

页面全局操作结果——图标式弹窗提示

图标式的弹窗提示适合轻量级的成功提示。 它们会在1.5秒后自动消失，不中断过程，对用户影响很小。 适合不需要强调的操作提醒，比如成功提示。 特别注意的是，这种形式不适合错误提示，因为错误提示需要明确告知用户，所以不适合使用一闪而过的弹出提示。

页面全局操作结果-文字弹出提示

基于文本的弹出提示适合对当前状态进行轻量级的文本解释或小错误的提醒。 1.5秒后自动消失，不中断进程，对用户影响较小。

页面全局操作结果-模态对话框

模态对话框可以用来提示用户需要清楚了解的操作结果的状态，并可以附有下一步操作指令。

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

对于操作结果为当前流程结束的情况，您可以通过操作结果页面进行反馈。 这种方法是告知用户操作已经完成的最有力、最明确的方式，并且可以根据实际情况为下一步操作提供指导。

异常是可控的，有出路

在设计任何任务和流程时，异常状态和流程往往很容易被忽视，而这些异常场景往往是用户最沮丧、最需要帮助的时候。 因此，需要特别注意异常状态的设计，在异常发生时需要给予用户必要的支持。 提供状态提示和解决方案，以便有出路。

要防止出现用户异常状态卡在某个页面而无处可去的情况。 上述模态对话框和结果页面可以作为异常情况的提醒。 另外，在表单页面，尤其是表单项较多的页面，应明确指出错误项，以便用户修改。

异常状态-表单错误

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

方便又优雅

从PC时代的物理键盘和鼠标，到移动时代的手指，虽然输入设备已经大大简化，但手指操作的准确性却远不如键盘和鼠标精确。 为了适应这种变化，开发者需要在设计过程中充分利用手机功能，为用户提供方便、优雅的控制界面。

减少投入

由于手机键盘面积小且密集，输入困难，容易造成输入错误。 因此，在设计小程序页面时，应尽量减少用户输入，并利用现有的界面或其他易于操作的选择控件来改善用户输入体验。

比如下图，添加银行卡时，通过摄像头识别界面来帮助用户输入。 此外，微信团队还对外开放了地理位置接口等各种微信小程序接口。 充分利用这些接口将大大提高用户输入的效率和准确性，从而优化体验。

除了使用界面之外，当用户必须手动输入时，尽量让用户做出选择，而不是键盘输入。 一方面，回忆很容易记住，用户通常比完全依赖记忆输入更容易在有限的选项中做出选择； 另一方面，仍然认为手机键盘上密集的单键输入很容易导致输入错误。 例如图中，在用户搜索时提供搜索历史快捷选项，将有助于用户快速搜索，减少或避免不必要的键盘输入。

避免误操作

因为在手机上我们是通过手指触摸屏幕来控制界面的，所以手指的点击精度远不如鼠标。 因此，我们在设计页面上需要点击的控件时，需要充分考虑它们的热区面积，避免可点击区域过小或过小。 过密易造成误动作。 当原本在电脑屏幕上使用的界面未经任何适配而简单地直接移植到手机上时，往往很容易出现这样的问题。 由于手机屏幕分辨率不同，最佳点击像素尺寸并不完全一致，但换算成物理尺寸后，大致在7mm-9mm之间。 微信提供的标准组件库中，各种控件元素已经考虑到了页面点击效果以及对不同屏幕的适配，因此再次建议使用或模仿标准控件尺寸进行设计。

利用接口来提高性能

微信设计中心推出了一套Web标准控件库，包括设计控件库和设计控件库。 未来我们也会完善小程序组件。 这些控件充分考虑了移动页面的特点，可以保证可以在移动页面上使用。 可用性和操作性能； 同时，微信开发团队正在不断完善和扩展微信小程序接口并提供微信公共库。 使用这些资源不仅可以为用户提供更快的服务，还可以大大提高页面性能。 功能，无形中提升了用户体验。

统一稳定

除了上述原则外，建议接入微信的小程序要时刻注意不同页面之间的统一性和连续性，尽量在不同页面上使用一致的控件和交互方式。

统一的页面体验和一致的界面元​​素将有助于以最小的学习成本实现使用目标，并减少页面跳转带来的不适感。 正因为如此，小程序可以根据需要使用微信提供的标准控件，以达到统一性和稳定性。

视觉标准字体

微信中字体的使用与运行系统字体一致。 常见的字体大小为 22、17、15、14、12 (pt)。 使用场景如下：

字体颜色

样本

列表

按钮

图标

下载

为了方便设计师进行设计，微信提供了一套基础控件库，可用于网页设计和小程序； 还提供了方便开发者调用的资源。

预览地址：