微信小程序怎么排版好看

小程序页面的创意和整洁能够吸引用户使用小程序，并提高使用体验。基本上一个小程序开发出来能够和微信官方本身的风格保持一致，就算是排版成功。那么微信小程序如何排版呢?以下是一些排版的技巧。

阅读微信官方的设计文档是最有效的方式。

里面提供了大量的用户界面实例，开发者只需严格依据这份小程序介绍页设计文档，就可以做出兼具美观、实用的 UI 与交互模式。

为了帮助大家更快地理解小程序官方提供的设计文档，小编今天专门为大家解读一下，不仅将设计文档简洁到二分之一，还增加了小程序 UI 设计和传统的网页设计的比较，讲述二者的差异性。所以现在大家只需花费和之前相比一半都不到的时间就能了解小程序排版技巧了，能掌握设计小程序过程中需要掌握的所有要点。注：本文主要针对小程序开发者和 UI 设计师。小程序官方设计文档解读基本规则微信小程序设计文档将所有的设计范例分为了四个部分，分别是：

友好礼貌

清晰明确

便捷优雅

统一稳定

除此之外，微信官方还提供了一些便于开发者使用的组件，这些组件可以在微信官方的小程序 IDE 中直接使用。

设计文档也针对这部分组件进行了详细说明，包括每个组件的适用范围。同时，还提供了 Sketch 与 Photoshop 的设计模板，便于 UI 设计师直接使用。

简单来说，就是将多张图片并排放，然后给每张图片添加小程序，其实在微信图文排版工具中有一个“布局”的功能，你可以选用三列布局，然后在每列里上传图片，这样就可以将三张图片并列放在一行

一、使用三列布局

二、上传图片

三、添加小程序

四、小程序的展示方式选择“图片”

五、查看最终效果

方法/步骤

这里以iPhone手机端的最新版本微信App中的小程序作为 *** 作截图，供参考，如果是旧版本，将其更新至最新版。

请点击输入图片描述

打开微信，平时关注的一些商超公众号，比如家乐福、沃尔玛之类，可能会推送一些优惠信息，有些是用小程序做的二维码，可以找到那个海报。

请点击输入图片描述

长按圆形的小程序二维码，在底部d出的 *** 作栏中点击“识别图中的小程序码”。

请点击输入图片描述

进入优惠券领取界面，领取自己所需要的优惠券，并不是所有的栏目都有，要看活动情况，而且目前每个商家最多能有3张未使用的优惠券，每天最多领用10张优惠券。

请点击输入图片描述

领完优惠券，可以看到自己的优惠券，点击查看明细，到商超中选购相应的东西，然后前往收银台，点击“立即使用”，底部d出 *** 作栏，点击“出示付款码”。

请点击输入图片描述

系统会跳转到付款码界面，收银员扫描后，系统会自动扣除，发现符合要求的优惠券系统会自动抵扣，挺不错的，如果附近刚好有这样商超以及活动，可以试试。

请点击输入图片描述

请点击输入图片描述

---