许多着名电商企业都逐步加入到小程序的战队，，，，从最最先的蘑菇街小程序，，，，到现在热门电商平台小红书也前不久加入了小程序商城，，，，那么以这两个小程序商城来剖析一款商城小程序的ui页面的设计。。
。。。

蘑菇街App和小程序的界面临比很是典范。。
。。。如图：

蘑菇街小程序界面的第一印象就是间接、扁平，，，，并且去掉了APP首屏的banner，，，，换成了主题色配景。。
。。。实物icon到小程序中都酿成了简约的线性图标并配上了加大后的字体。。
。。。接下来的一栏使用了实物图片，，，，但整体增添灰度，，，，页面的统一性增强。。
。。。

其次，，，，比App少了水平转动列表，，，，直接在一级页面显示商品信息，，，，使用用户的一句话短评来取代直播、专题推荐。。
。。。

这样整体看上去界面显得更轻量，，，，切合小程序的设计需求。。
。。。

再来看下小红书的小程序端的界面

一级页面没有任何指导和功效分区，，，，只能看商品和搜商品。。
。。。不得不说，，，，在众多使用横线划分栏的小程序中，，，，使用卡片式竖排列的小红书很是吸引人。。
。。。二级页面就有点像淘宝的详情页，，，，这种极简风是很受各人接待的。。
。。。

以是，，，，总结上面小程序商城ui页面实例剖析，，，，小程序在ui设计上要注重以下几点?

1· 轻设计

总的来说，，，，小程序相较于App都化繁为简，，，，突出主要功效。。
。。
；；；箍梢越⒘πЦ奈/触发功效来实现页面的简化。。
。。。

2· 注重统一性

小程序的色彩、图标、气概应和App内一致，，，，可是要思量目的受众的差别做适量更改。。
。。。镌汰banner、实物图标的使用，，，，要实现页面简化和色彩统一。。
。。。

3· 是否应当使用水平转动列表

现在大大都小程序都不接纳这样的做法，，，，但也有像豆瓣评分这样的小程序在使用。。
。。。水平转动列表和笔直转动列表在小程序中是二选一关系，，，，一个若为可以无限拉动，，，，另一个应为有限。。
。。。

4· 注重加载动效

小程序内容的轻量也有一个主要原因——镌汰翻开时间，，，，用户关于小程序的期待时间要比App少许多。。
。。。此时加载动效就能够作为一个留住用户的加分项。。
。。。

5· 导航栏样式

小程序的底部导航栏较为死板，，，，设置空间为2-5个，，，，且图标和文字空间划定严酷。。
。。。？梢远嗍褂枚ゲ康己嚼负托〉己桨磁。。
。。。好比头脑王者就通过「知乎狗」作为悬浮按钮导流用户到知乎热榜小程序。。
。。。

以上是小程序商城ui页面实例剖析，，，，若是你需要小程序商城系统的开发，，，，可以咨询小程序工具开发公司长沙，，，，提供多类型商城/门店小程序制作，，，，可视化编辑 1秒天生5步上线。。
。。。通过拖拽、拼接模？榻峁剐〕绦蛏坛且趁，，，，所看即所得，，，，只需要美工就能做出细腻商城。。
。。。更多小程序市肆请审查：小程序市肆