這是一節(jié)關(guān)于微店商品排列和電商商品排列設(shè)計的自學(xué)教程。讓我們從一些優(yōu)秀的微店和電商APP當(dāng)中的商品排列界面學(xué)習(xí)一些好用的設(shè)計方法和技巧。

也算是25學(xué)堂推出的《我要自學(xué)APP設(shè)計》系列的一篇文章。我們開始來自學(xué)APP設(shè)計吧！

如何學(xué)呢？當(dāng)然是通過優(yōu)秀的電商APP案例。

第一個商品排列設(shè)計界面案例：

這是北京的一位APP UI設(shè)計師幫一家企業(yè)設(shè)計的微官網(wǎng)界面。

非常簡約明朗的色彩搭配，布局也是非常簡單的。

左邊的界面設(shè)計商品圖是1:2:2的比例布局。右邊是1:1:1的商品布局排列。符合移動端卡片化設(shè)計風(fēng)格。

企業(yè)APP的商品展示功能可以讓消費者直接通過手機(jī)了解企業(yè)的產(chǎn)品情況，詳細(xì)的商品信息都在企業(yè)APP應(yīng)用上的到展示，繼而有利于提高企業(yè)的品牌知名度和消費者對企業(yè)的信任度。

此類微官網(wǎng)產(chǎn)品設(shè)計最大的特點：就是對比的方式，同一個色彩的背景平鋪。當(dāng)作補色。類似擺盤的桌布或者是幕布。背景一定要是純色或者是偏弱的暖色調(diào)。這樣才能突顯產(chǎn)品或者商品的氣質(zhì)。

上面擺放的商品就是我們的藝術(shù)品。然后搭配說明文字即可。所以，設(shè)計電商app的產(chǎn)品布局。就是按照你的理解在對于這些產(chǎn)品的包裝、點綴。

第二個電商商品排列設(shè)計界面案例：

這個國外的一個電商的商品展示頁面。都是偏簡約設(shè)計風(fēng)格的。

同樣也是采用了純色背景、對稱、卡片化的設(shè)計。

第三個電商商品排列設(shè)計界面案例如下也是同樣如此。

當(dāng)我們的商品比較單一，或者背景為白色的時候，一定記得把白色背景或者雜亂的背景去掉。然后采用統(tǒng)一、一致性的背景色作為商品的襯托。

這節(jié)課主要就跟大家分享微店和電商APP商品排列的設(shè)計方法和技巧。其實很簡單。

不管是兩列布局還是一列布局，采用一致性的原則和暖色+柔和的背景色調(diào)，五分鐘即可打造出屬于你的簡約風(fēng)格來。

當(dāng)你沒有靈感的時候，多來25學(xué)堂看看，每天都會有一定的收獲。25學(xué)堂的小編偷偷的告訴你，其實小米官網(wǎng)是最早采用這樣的商品排列布局方式的。