微店和电商APP商品排列的设计方法和技巧

这是一节关于微店商品排列和电商商品排列设计的自学教程。让我们从一些优秀的微店和电商APP当中的商品排列界面学习一些好用的设计方法和技巧。

也算是25学堂推出的《我要自学APP设计》系列的一篇文章。我们开始来自学APP设计吧！

如何学呢？当然是通过优秀的电商APP案例。

第一个商品排列设计界面案例：

这是北京的一位APP UI设计师帮一家企业设计的微官网界面。

非常简约明朗的色彩搭配，布局也是非常简单的。

左边的界面设计商品图是1:2:2的比例布局。右边是1:1:1的商品布局排列。符合移动端卡片化设计风格。

企业APP的商品展示功能可以让消费者直接通过手机了解企业的产品情况，详细的商品信息都在企业APP应用上的到展示，继而有利于提高企业的品牌知名度和消费者对企业的信任度。

此类微官网产品设计最大的特点：就是对比的方式，同一个色彩的背景平铺。当作补色。类似摆盘的桌布或者是幕布。背景一定要是纯色或者是偏弱的暖色调。这样才能突显产品或者商品的气质。

上面摆放的商品就是我们的艺术品。然后搭配说明文字即可。所以，设计电商app的产品布局。就是按照你的理解在对于这些产品的包装、点缀。

第二个电商商品排列设计界面案例：

这个国外的一个电商的商品展示页面。都是偏简约设计风格的。

同样也是采用了纯色背景、对称、卡片化的设计。

第三个电商商品排列设计界面案例如下也是同样如此。

当我们的商品比较单一，或者背景为白色的时候，一定记得把白色背景或者杂乱的背景去掉。然后采用统一、一致性的背景色作为商品的衬托。

这节课主要就跟大家分享微店和电商APP商品排列的设计方法和技巧。其实很简单。

不管是两列布局还是一列布局，采用一致性的原则和暖色+柔和的背景色调，五分钟即可打造出属于你的简约风格来。

当你没有灵感的时候，多来25学堂看看，每天都会有一定的收获。25学堂的小编偷偷的告诉你，其实小米官网是最早采用这样的商品排列布局方式的。