小程序商城ui頁面實例分析（與app對比）

許多知名電商企業(yè)都逐步加入到小程序的戰(zhàn)隊，從最開始的蘑菇街小程序，到現(xiàn)在熱門電商平臺小紅書也前不久加入了小程序商城，那么以這兩個小程序商城來分析一款商城小程序的ui頁面的設(shè)計。

蘑菇街App和小程序的界面對比非常典型。如圖：

蘑菇街小程序界面的第一印象就是間接、扁平，而且去掉了APP首屏的banner，換成了主題色背景。實物icon到小程序中都變成了簡約的線性圖標(biāo)并配上了加大后的字體。接下來的一欄使用了實物圖片，但整體增加灰度，頁面的統(tǒng)一性加強(qiáng)。

其次，比App少了水平滾動列表，直接在一級頁面顯示商品信息，使用用戶的一句話短評來代替直播、專題推薦。

這樣整體看上去界面顯得更輕量，符合小程序的設(shè)計需求。

再來看下小紅書的小程序端的界面

一級頁面沒有任何引導(dǎo)和功能分區(qū)，只能看商品和搜商品。不得不說，在眾多使用橫線劃分欄的小程序中，使用卡片式豎排列的小紅書非常吸引人。二級頁面就有點像淘寶的詳情頁，這種極簡風(fēng)是很受大家歡迎的。

所以，總結(jié)上面小程序商城ui頁面實例分析，小程序在ui設(shè)計上要注意以下幾點?

1· 輕設(shè)計

總的來說，小程序相較于App都化繁為簡，突出主要功能。還可以將并聯(lián)功能改為串聯(lián)/觸發(fā)功能來實現(xiàn)頁面的簡化。

2· 注意統(tǒng)一性

小程序的色彩、圖標(biāo)、風(fēng)格應(yīng)和App內(nèi)一致，但是要考慮目標(biāo)受眾的不同做適量更改。減少banner、實物圖標(biāo)的使用，要實現(xiàn)頁面簡化和色彩統(tǒng)一。

3· 是否應(yīng)當(dāng)使用水平滾動列表

目前大多數(shù)小程序都不采用這樣的做法，但也有像豆瓣評分這樣的小程序在使用。水平滾動列表和垂直滾動列表在小程序中是二選一關(guān)系，一個若為可以無限拉動，另一個應(yīng)為有限。

4· 注意加載動效

小程序內(nèi)容的輕量也有一個重要原因——減少打開時間，用戶對于小程序的等待時間要比App少很多。此時加載動效就能夠作為一個留住用戶的加分項。

5· 導(dǎo)航欄樣式

小程序的底部導(dǎo)航欄較為死板，配置空間為2-5個，且圖標(biāo)和文字空間規(guī)定嚴(yán)格?？梢远嗍褂庙敳繉?dǎo)航欄和懸浮導(dǎo)航按鈕。比如頭腦王者就通過「知乎狗」作為懸浮按鈕導(dǎo)流用戶到知乎熱榜小程序。

以上是小程序商城ui頁面實例分析，如果你需要小程序商城系統(tǒng)的開發(fā)，可以咨詢Hishop小程序工具開發(fā)公司長沙海商，提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店