微信小程序布局小技巧是什么

微信小程序的布局技巧有哪些？微信小程序在布局上也有技巧。一个好看的微信小程序布局可以赏心悦目。那么微信小程序的布局有哪些小技巧呢？接下来我给大家做一个小系列的介绍。

微信小程序的布局技巧有哪些？

微信小程序布局小技巧：友好礼貌

设置微信小程序布局时，一定要减少对微信小程序用户的干扰。很多微信小程序用户说，使用微信小程序时，因为界面元素太多，找不到自己想要的，所以微信小程序布局一定要友好礼貌。

微信小程序布局小技巧：聚焦

微信小程序的布局一定要有一个明确的重点，然后用户进入微信小程序页面后就可以知道界面在做什么，这样他心里就会有一个明确的方向和目标。所以微信小程序的布局要尽量避免干扰项。

微信小程序布局小技巧：注意界面内容的一致性

比如微信小程序页面的主题是查询，但是增加了很多与查询无关的业务门户，与用户预期不符，容易造成用户迷失。

设置微信小程序布局时，不要把所有东西都放在上面，去掉与用户无关的内容，然后在页面上明确主题，可以在条件允许的情况下提供对用户目标有帮助的帮助内容，比如比较近的搜索词、常用搜索词等。

微信小程序布局提示：有一级和二级操作

如果没有一级或二级操作，用户将没有选择。首先要避免并列过多的操作让小程序用户选择。当多个操作必须并置时，需要区分主次操作，降低用户选择的难度。

微信小程序布局提示：清除流程

为了使用户能够流畅地使用页面，当用户进行某个操作过程时，应该避免因用户目标过程之外的内容而打断用户。

例如，用户打算搜索一个小程序，但在进入页面时被突然出现的抽奖弹出窗口打断；对彩票不感兴趣的用户是非常不友好的干扰；即使有些用户真的被“吸引人”的彩票所吸引，他们也可能在离开主流程去抽奖后忘记了比较初的目标，进而失去对产品真正价值的使用和理解。

微信小程序布局小技巧：清晰明了

用户一旦进入我们的小程序页面，我们就有责任和义务明确告诉用户他在哪里，可以去哪里，以保证用户可以轻松穿梭页面而不迷路，从而为用户提供安全愉快的体验。

微信小程序布局提示：页面内导航

开发者可以根据自己的功能设计需求，给页面添加自己的导航。并且保持不同页面之间的导航一致。但是由于手机屏幕大小的限制，小程序页面的导航应该尽量简单。如果只是针对一般的线性浏览页面，建议只使用微信导航条。

下面是如何使用标题开头的微信小程序ui框架。标题到此结束

前面的小系列已经介绍了微信小程序的ui设计工具和ui设计规范的使用。我们来讲解一下微信小程序的ui框架，包括加载ui的一些问题。

开始页面加载

小程序启动页面是小程序在微信中一定程度上展现品牌特色的页面之一。此页面将突出显示小程序的品牌特征和加载状态。除了品牌logo的显示，启动页面上的其他所有元素，比如加载进度说明，都是微信统一提供的，不可更改，无需开发者开发。

页面下拉刷新加载

微信小程序内部，微信提供标准的页面下拉刷新加载能力和小程序风格，开发者无需自行开发。

在页面中加载反馈

开发人员可以在小程序中自定义页面内容的加载样式。建议自定义加载风格尽量简洁，用简单的动画告知用户加载过程。开发者也可以使用微信提供的统一页面加载样式，如图中示例所示。

模态载荷

modal的加载方式会覆盖整个页面。因为不可能讲清楚具体的加载位置或者内容，可能会引起用户的焦虑，所以要谨慎使用。除了一些全局操作，不要使用模式加载。

局部加载反馈

本地加载反馈意味着反馈只在触发加载的页面上本地执行。这种反馈机制更有针对性，页面抖动更少，是微信推荐的反馈方式。例如：

加载反馈注意事项如果加载时间较长，应提供取消操作，并使用进度条显示加载进度。

加载时应保持动画效果。没有动画的加载很容易给人界面卡住的错觉。

不要在同一页面上同时使用多个加载动画。

结果反馈

除了在用户等待过程中给予及时的反馈外，还需要对操作结果给予明确的反馈。根据实际情况，可以选择不同的结果反馈风格。对于页面的本地操作，可以在操作区直接反馈，页面级操作的结果可以使用toast、modal对话框或结果页面显示。

页面本地操作结果反馈

对于页面的本地操作，可以在操作区直接反馈，例如多选控件前后如下图所示。对于常用控件，微信设计中心会提供一个控件库，其中所有控件都提供了完整的操作反馈。

页面全局操作结果-弹出提示(吐司)

toast适合轻量级的成功提示。1.5秒后自动消失，不中断进程，对用户影响不大。toast适合不需要强调的操作提醒，比如成功提示。特别注意这种形式不适合错误提示，因为错误提示要明确告知用户，所以不适合使用闪烁的弹出提示。

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

对于用户需要了解清楚的操作结果状态，可以通过模态对话框进行提示，并可以附上下一步操作指南。

？页面全局操作结果-结果页面